/* Our Story (page 1720) hero -- show the whole lady-driver line-up on phones
   and tablets.

   Why this file exists
   --------------------
   The Our Story page body is a single custom HTML/CSS block that lives in the
   Bricks database (`#kt-ourstory`), not in this repo. Its hero is a full-bleed
   `object-fit:cover` photo behind the headline. The photo
   (`kisstour-hero-aodai-vespas-saigon.jpg`) is 1440x557 -- a very wide 2.585:1
   banner showing EIGHT ao dai guides on scooters. On a phone the hero box is
   ~390x692 (0.56:1), so `cover` scales the photo by height and throws away
   ~78% of its width: only the single centre guide survives the crop. Natalie
   flagged exactly that -- the page is about a women-led team but the phone hero
   shows one woman.

   No horizontal crop of a 2.585:1 photo inside a tall full-bleed box can ever
   show two guides at a usable size, so below 920px the hero stops being a
   full-bleed backdrop and becomes a stacked layout instead: a wide 16:9 photo
   band on top (~69% of the photo's width -> 5-6 guides), with the headline,
   lead and CTAs underneath on the berry background the gradient already used.

   Desktop (>920px) is deliberately untouched: it already shows 4-6 guides.

   Notes
   -----
   - The page's own CSS is an inline <style> in the body, i.e. AFTER this file
     in the cascade, so every rule here is qualified with `body.page-id-1720`
     to win on specificity rather than order. Do not drop that prefix.
   - Fail-safe: if the Bricks block is ever rebuilt and `#kt-ourstory .hero`
     disappears, these rules simply stop matching. The only thing this file
     hides is the decorative `.hero__scroll` cue (see below); no headline,
     lead, CTA or photo is ever hidden or removed here.
   - `padding-top` clears the fixed site header (#brx-header), which overlays
     the hero: 102px tall up to 767px, 116px at 768-920px.

   Enqueued from inc/our-story-products-shortcode.php (page 1720 only). */

/* Drop the hero's bottom-right "OUR STORY" scroll cue -- the floating action
   buttons permanently sit on top of it.

   The cue is `<div class="hero__scroll">Our story <span></span></div>` in the
   Bricks block: uppercased, white at opacity .7, pinned `absolute` at
   right:28px / bottom:26px, with a 1px vertical hairline (the `span`) to its
   right. It is decoration -- not a link, no href, nothing focusable.

   The bottom-right corner is reserved site-wide for three `position:fixed`
   elements: the respond.io chat iframe (`.dfa50`, 72x72, placed by
   assets/js/respondio-widget.js with inline `!important` at right:15px/
   bottom:70px on mobile and right:75px/bottom:115px on desktop), the Bricks
   WhatsApp icon and the back-to-top arrow. Measured overlap on the 85x13px
   text box, headless Chrome on the live page:

     320px  clean
     390px  50x13px covered -- 59% of the text, reads "OUR STO"
     430px  23x13px covered -- 27% of the text
     768px  clean (the cue sits below the fold at scroll 0)
     1440px 47x6.5px covered -- upper half of the left 55% of the text

   Neither of the other two fixes works. A width-gated hide leaves 1440px
   broken. Moving it cannot hold either: the cue is `absolute` (it scrolls)
   while the buttons are `fixed` (they do not), so clearing the collision at
   EVERY scroll offset needs a >=89px upward shift at 1440px and >=70px at
   390px -- per-breakpoint offsets pinned to a third-party widget's inline
   position, and far enough from the corner that it stops reading as a corner
   scroll cue.

   So it goes. It costs nothing: the cue only repeats the page name, which the
   <h1>, the current nav item, the breadcrumb and <title> all already carry.
   `.hero__scroll` appears on NO other page on the site (swept the homepage,
   /airport-fast-track/, /book-visa/, /gallery/, /faqs/, /contact-us/,
   /saigon-tours/, /da-nang-tours/), so nothing else inherits this decision.

   Being `absolute`, hiding it moves nothing: hero and body heights are
   byte-identical before/after at all five widths. */
body.page-id-1720 #kt-ourstory .hero__scroll {
    display: none;
}

@media (max-width: 920px) {
    body.page-id-1720 #kt-ourstory .hero {
        display: block;
        min-height: 0;
        padding-top: 104px;
        background: linear-gradient(
            180deg,
            #fff7f4 0,
            #fff7f4 104px,
            var(--berry, #480018) 104px
        );
    }

    /* The light scrim that kept the logo readable over the photo is no longer
       needed -- the header now sits on a solid light strip. */
    body.page-id-1720 #kt-ourstory .hero::before {
        display: none;
    }

    /* Photo becomes an in-flow band instead of an absolute backdrop. */
    body.page-id-1720 #kt-ourstory .hero__img {
        position: relative;
        inset: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    body.page-id-1720 #kt-ourstory .hero__img img {
        height: 100%;
        transform: none;
        animation: none;
    }

    /* Fade the bottom of the band into the berry text area. */
    body.page-id-1720 #kt-ourstory .hero__img::after {
        background: linear-gradient(
            180deg,
            rgba(52, 0, 24, 0) 42%,
            rgba(72, 0, 24, 0.55) 78%,
            var(--berry, #480018) 100%
        );
    }

    body.page-id-1720 #kt-ourstory .hero__inner {
        padding: 22px 24px 56px;
    }

    /* Badge is hidden below 560px by the page's own CSS; between 561 and 920px
       drop it below the fixed header so it sits on the photo band. */
    body.page-id-1720 #kt-ourstory .hero__badge {
        top: 116px;
        right: 16px;
    }
}

@media (min-width: 768px) and (max-width: 920px) {
    body.page-id-1720 #kt-ourstory .hero {
        padding-top: 124px;
        background: linear-gradient(
            180deg,
            #fff7f4 0,
            #fff7f4 124px,
            var(--berry, #480018) 124px
        );
    }

    body.page-id-1720 #kt-ourstory .hero__badge {
        top: 136px;
    }
}

/* T254 (2026-08-07): above 920px the badge sat at top:26px, inside the band
   the transparent fixed header occupies (~120px: orange contact strip + nav
   row), so it collided with the last nav item -- "Contact Us" plus its
   dropdown arrow rendered on top of the badge box. Same treatment the
   561-920px ranges already get: drop it below the header onto the photo.
   Fail-safe: if the Bricks block is rebuilt and .hero__badge disappears,
   the rule stops matching; nothing is hidden. */
@media (min-width: 921px) {
    body.page-id-1720 #kt-ourstory .hero__badge {
        top: 140px;
    }
}