/* ==========================================================================
   Styles for content the dashboard drives, layered over the theme.

   Kept apart from `main.css` so the theme file stays exactly as it shipped and
   a future theme update can be dropped in without re-applying anything here.
   ========================================================================== */

/* Backgrounds uploaded through the dashboard.

   `main.js` already copies a `data-background` attribute onto the element's
   `background-image`; what it does not do is frame the result. The theme sizes
   each of its own backdrops in the rule that hard-codes the artwork, so an
   image arriving by attribute lands with the browser defaults — tiled at its
   natural size, anchored top-left. These three lines are what the theme states
   inline for every backdrop it ships. */
[data-background] {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Services intro.

   The row used to take its height from a 900px-wide clip in the left column.
   With the clip gone the heading alone sets it, and the block collapsed to
   roughly the height of a title and a button — which left the 464px wordmark
   below sitting straight up against them, and the uploaded backdrop with no
   room to read at all.

   Restoring the height here rather than by padding the section keeps the
   heading centred against the backdrop the way it was against the clip.
   -------------------------------------------------------------------------- */
.px-inner-service-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 520px;
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
    .px-inner-service-heading {
        min-height: 420px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .px-inner-service-heading {
        min-height: 340px;
    }
}

/* On a phone the backdrop sits behind the text rather than beside it, so the
   block only needs enough room for its own content. */
@media (max-width: 767px) {
    .px-inner-service-heading {
        min-height: 0;
        padding-bottom: 40px;
    }
}

/* --------------------------------------------------------------------------
   Budget dropdown on the contact form.

   The theme styles `input` and `textarea` inside a form field but never
   `select`, which the form had no use for until now. These repeat the same
   declarations so the dropdown sits on the same underline as the fields either
   side of it, and drop the platform's own control so it does not arrive with a
   grey box of its own.
   -------------------------------------------------------------------------- */
.px-contact-wrapper .tp-contact-form-input select {
    width: 100%;
    border: none;
    padding-left: 0;
    border-radius: 0;
    font-size: 18px;
    background-color: transparent;
    color: var(--tp-common-px-black-2);
    border-bottom: 1px solid rgba(30, 30, 30, 0.2);
    padding-bottom: 12px;
    appearance: none;
    cursor: pointer;
}

.px-contact-wrapper .tp-contact-form-input select:focus {
    outline: none;
    border-color: var(--tp-common-px-orange);
}

/* The caret the platform control would have drawn, redrawn to match. */
.px-contact-wrapper .tp-contact-form-input select {
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 22px;
}

[dir="rtl"] .px-contact-wrapper .tp-contact-form-input select {
    background-position: left 1px center, left 6px center;
    padding-right: 0;
    padding-left: 22px;
}

/* The theme lightens `input` and `textarea` for the dark card but never had a
   `select` to lighten, so the field kept near-black text on a near-black
   underline and read as an empty gap between two visible fields. Same two
   values the theme uses for its own fields. */
.pixora-dark .px-contact-wrapper .tp-contact-form-input select {
    color: var(--tp-common-px-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* The prompt is the empty option, not a real placeholder, so it takes the
   placeholder's colour by hand to sit at the same weight as its neighbours. */
.pixora-dark .px-contact-wrapper .tp-contact-form-input select:has(option[value=""]:checked) {
    color: rgba(255, 255, 255, 0.4);
}

/* An open dropdown is painted by the platform, which does not inherit the
   page's dark theme — the list would come up as dark text on dark. */
.pixora-dark .px-contact-wrapper .tp-contact-form-input select option {
    color: #1E1E1E;
    background-color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Services accordion artwork.

   `.px-service-thumb` is `flex: 0 0 auto` with no width of its own, which was
   fine for the fixed-size sample the theme shipped and is not fine for an
   upload: the picture claimed its full natural width, pushed everything beside
   it off the side of the page, and overflowed the row. Holding it to its
   column is what keeps an arbitrary upload inside the layout.
   -------------------------------------------------------------------------- */
.px-service-thumb {
    margin-right: 0;
}

.px-service-thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Client logos inside a statistic card.

   The card marked `show_brands` swaps its description for a logo strip. The
   markup names `.px-about-brand`, which the theme never styles — so each logo
   rendered at whatever size its file happens to be, and since the slider runs
   `slidesPerView: 'auto'` it took its width from that too. One tall upload was
   enough to stretch the card past its neighbours.

   Logos also arrive in whatever colours a client's brand uses, most of them
   drawn for light paper. Flattening each to white is what makes an arbitrary
   upload legible on a dark card, and it is the treatment the theme already
   applies to media in dark mode.
   -------------------------------------------------------------------------- */
.px-about-brand-slider .swiper-slide {
    width: auto;
}

.px-about-brand span {
    display: block;
}

/* 60px against the card's 250px body: the heading and its margin take about
   137px of that, so the strip fits in the slack without growing the card past
   the two beside it. `contain` keeps a wide wordmark inside `max-width` rather
   than stretching it. */
.px-about-brand img {
    height: 60px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    .px-about-brand img {
        height: 46px;
        max-width: 170px;
    }
}

/* --------------------------------------------------------------------------
   Whole pictures on a phone.

   The theme frames its imagery by giving each container a fixed height and
   letting the picture overflow — `.px-project-3-thumb` covers a 400px box,
   `.px-pd-2-thumb-item` is 250px with the image pulled 40px above it. That
   framing is a deliberate crop on a wide screen, where the box and the picture
   have roughly the same proportions.

   On a phone they no longer do. The box stays landscape while the column
   narrows, so the crop deepens until a wide image shows as a strip of its own
   middle. Releasing the height lets each box take the picture's proportions,
   which shows the whole frame with no letterboxing.

   Confined to the phone breakpoint: the crop is part of the design everywhere
   the proportions still hold.

   Releasing the height is only half of it. `main.js` walks every
   `.ripple-image`, repaints the picture as a `cover` background so the water
   effect has something to distort, and hides the `<img>` it was given. Left
   alone, a box told to take its content's height would find no content and
   collapse. The water effect answers to a hover, so it has nothing to respond
   to on a touch screen anyway — the picture goes back to being an ordinary
   image that sizes its own box. `!important` is what it takes to beat the
   inline styles the script writes.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ripple-image {
        background-image: none !important;
        height: auto !important;
    }

    .ripple-image img {
        display: block !important;
        width: 100%;
        height: auto;
    }

    .ripple-image canvas {
        display: none !important;
    }

    .px-pd-2-thumb-item,
    .px-project-3-thumb,
    .px-pd-2-banner,
    .tp-blog-details-banner {
        height: auto;
    }

    .px-pd-2-thumb-item img,
    .px-project-3-thumb img,
    .px-project-3-thumb video,
    .px-pd-2-banner img,
    .tp-blog-details-banner img {
        width: 100%;
        height: auto;
        /* The theme pulls the picture up to centre the crop; with the box now
           taking the picture's own height there is nothing to centre. */
        margin-top: 0;
        object-fit: fill;
    }

    /* Uploaded backdrops are wide, and `cover` on a tall phone section shows a
       narrow band from the middle. */
    [data-background] {
        background-size: contain;
    }

    /* ----------------------------------------------------------------------
       Home hero.

       The backdrop is absolutely positioned behind the copy, which on a phone
       means the heading sits across the middle of the artwork and neither
       reads. It comes before the container in the markup, so returning it to
       normal flow puts the whole picture above the copy — and it does that for
       whatever proportions the upload happens to have, rather than a height
       guessed here.
       ---------------------------------------------------------------------- */
    .px-hero-bg {
        padding-top: 90px;
    }

    .px-hero-bg-img {
        position: relative;
        z-index: auto;
        margin-bottom: 30px;
    }

    /* Shown whole, a landscape backdrop is only as tall as the screen is wide
       divided by its ratio — a shallow strip in which the subject is unreadable.
       The one way to make it larger is to give up the width, so the box takes a
       set height and the picture covers it from the centre. The subject of these
       uploads sits centred; it is the empty margins that get trimmed. */
    .px-hero-bg-img img {
        height: 340px;
        object-fit: cover;
        object-position: center;
    }
}

/* --------------------------------------------------------------------------
   Home hero.

   The heading is meant to read as a caption to the numbered services beneath
   it, but the theme leaves 98px between them, which reads as two unrelated
   blocks floating over the artwork.

   The space is moved rather than removed: whatever comes off the bottom is
   added back on top, so the heading drops to meet the numbers while the hero
   keeps the height its 290px of top padding was built around — the backdrop is
   anchored `bottom` and would reframe if the block got shorter.
   -------------------------------------------------------------------------- */
.px-hero-title-wrap {
    padding-top: 80px;
    padding-bottom: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
    .px-hero-title-wrap {
        padding-top: 50px;
        padding-bottom: 20px;
    }
}

/* Stacked on a phone: the numbers sit under the heading in normal flow with no
   artwork between them, so the theme's own spacing already reads correctly. */
@media (max-width: 767px) {
    .px-hero-title-wrap {
        padding-top: 0;
        padding-bottom: 40px;
    }
}