/* ==========================================================================
   Hero v3: the immersive hero (Direction A, Steve 2026-10-16)
   Loaded only when lh_hero_v3() is on (inc/design-hero-v3.php). Every rule is
   scoped to body.lh-hero-v3, so this file cannot change a page without the flag.

   It restyles the existing markup of three hero families:
     .lh-page-hero      (internal-v2, safety, faq, contact, reviews, about, ...)
     .lh-journey-hero   (students, hosts, partners hubs)
     .lh-groups-landing__hero (group bookings)
   Heroes with a photo: the photo fills the hero and runs up behind the v2 header,
   with a navy shade on the text side. Phones: photo on top, fading into the band,
   text below. Heroes without a photo keep their band and get the new type only.
   ========================================================================== */

/* Shade colour (RGB) per audience, matched to the live audience tints. */
body.lh-hero-v3 { --lhv3-shade: 0, 0, 50; --lhv3-head: var(--v2-head-h, 84px); }
body.lh-hero-v3:is(.lh-journey-students, .page-template-template-journey-students, .page-template-template-students-resources, .page-template-template-homestay-categories, .page-template-template-location-guides-hub) { --lhv3-shade: 0, 18, 52; }
body.lh-hero-v3:is(.lh-journey-hosts, .page-template-template-journey-hosts) { --lhv3-shade: 16, 0, 40; }
body.lh-hero-v3:is(.lh-journey-partners, .page-template-template-journey-partners) { --lhv3-shade: 0, 14, 34; }

/* --------------------------------------------------------------------------
   1. Heroes with a photo
   -------------------------------------------------------------------------- */
body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Grows on wide screens so the 16:9 photo is cropped less (heads stay clear of the header). */
    min-height: clamp(560px, 40vw, 720px);
    /* The frame gives heroes a transparent top border for the header. overflow:hidden clips a
       border, so the header space becomes padding and the photo can run up behind the header. */
    border-top-width: 0 !important;
    padding: calc(var(--lhv3-head) + 56px) 0 72px !important;
    background: rgb(var(--lhv3-shade)) !important;
    text-align: left;
}

body.lh-hero-v3 .lh-journey-hero--has-image {
    min-height: clamp(640px, 84vh, 800px);
}

body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) > .lh-container {
    width: 100%;
}

/* One column: the text. The media leaves the grid and becomes the background. */
body.lh-hero-v3 :is(.lh-page-hero--has-image .lh-page-hero__inner, .lh-journey-hero--has-image .lh-journey-hero__inner, .lh-groups-landing__hero--has-image .lh-groups-landing__hero-inner) {
    display: block;
}

body.lh-hero-v3 :is(.lh-page-hero--has-image .lh-page-hero__content, .lh-journey-hero--has-image .lh-journey-hero__content, .lh-groups-landing__hero--has-image .lh-groups-landing__hero-content) {
    position: relative;
    z-index: 2;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: left;
}

body.lh-hero-v3 .lh-journey-hero--has-image .lh-journey-hero__content {
    max-width: 640px;
}

/* The photo */
body.lh-hero-v3 :is(.lh-page-hero__media, .lh-journey-hero__media, .lh-groups-landing__hero-media) {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    margin: 0;
    width: auto;
    height: auto;
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    order: 0;
}

body.lh-hero-v3 :is(.lh-page-hero__media, .lh-journey-hero__media, .lh-groups-landing__hero-media) picture {
    display: block;
    width: 100%;
    height: 100%;
}

body.lh-hero-v3 :is(.lh-page-hero__media, .lh-journey-hero__media, .lh-groups-landing__hero-media) img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: var(--lhv3-focus, 62% 45%);
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The shade: strong behind the text on the left, clear on the right, a soft top for the
   header and a soft bottom edge. */
body.lh-hero-v3 :is(.lh-page-hero__media, .lh-journey-hero__media, .lh-groups-landing__hero-media)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(var(--lhv3-shade), 0.6) 0, rgba(var(--lhv3-shade), 0) 170px),
        linear-gradient(90deg, rgba(var(--lhv3-shade), 0.94) 0%, rgba(var(--lhv3-shade), 0.86) 30%, rgba(var(--lhv3-shade), 0.42) 56%, rgba(var(--lhv3-shade), 0.06) 82%),
        linear-gradient(0deg, rgba(var(--lhv3-shade), 0.5) 0%, rgba(var(--lhv3-shade), 0) 30%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Type (photo heroes and text-only heroes)
   -------------------------------------------------------------------------- */
body.lh-hero-v3 :is(.lh-journey-hero__eyebrow, .lh-groups-landing__eyebrow) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lh-cyan, #6ACAF3);
}

body.lh-hero-v3 :is(.lh-journey-hero__eyebrow, .lh-groups-landing__eyebrow)::before {
    content: "";
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: var(--lh-magenta, #E6007E);
}

body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) .lh-breadcrumb {
    margin: 0 0 20px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.72);
}

body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) .lh-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
}

body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) :is(.lh-page-hero__heading, .lh-journey-hero__heading, .lh-groups-landing__heading) {
    margin: 0 0 18px;
    font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
    text-wrap: balance;
}

body.lh-hero-v3 .lh-journey-hero--has-image .lh-journey-hero__heading {
    font-size: clamp(2.4rem, 1.2rem + 3.4vw, 3.9rem);
    line-height: 1.04;
}

/* Subtitles: white, not mid blue on navy */
body.lh-hero-v3 :is(.lh-page-hero__subheading, .lh-journey-hero__intro, .lh-groups-landing__subheading) {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1;
}

body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) :is(.lh-page-hero__subheading, .lh-journey-hero__intro, .lh-groups-landing__subheading) {
    margin: 0 0 28px;
    max-width: 34em;
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   3. Buttons, chips and small print in photo heroes
   -------------------------------------------------------------------------- */
body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) :is(.lh-page-hero__ctas, .lh-page-hero__cta, .lh-journey-hero__ctas, .lh-groups-landing__hero-cta) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
}

/* One button system: magenta primary, white ghost secondary */
body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) :is(.lh-btn, .lh-btn-primary) {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 1rem;
}

body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) .lh-btn-primary:not(.lh-btn-magenta) {
    background: linear-gradient(135deg, var(--lh-magenta, #E6007E) 0%, var(--lh-magenta-700, #B80066) 100%);
    border-color: transparent;
    color: #fff;
}

/* Beats the old '.lh-page-hero .lh-btn.lh-btn--secondary:link' rule (white fill, navy text). */
body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) :is(a.lh-btn.lh-btn--secondary, a.lh-btn.lh-btn--secondary:link, a.lh-btn.lh-btn--secondary:visited) {
    background: transparent !important;
    color: #fff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: none !important;
}

body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) :is(a.lh-btn.lh-btn--secondary:hover, a.lh-btn.lh-btn--secondary:focus) {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
}

body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) :is(.lh-btn, .lh-btn-primary):focus-visible {
    outline: 3px solid var(--lh-cyan, #6ACAF3);
    outline-offset: 3px;
}

/* Price chips (prices page) and trust bullets (safety) sit between the subtitle and the buttons */
body.lh-hero-v3 .lh-page-hero--has-image .lh-hero-price-strip {
    margin: 0 0 28px;
    flex-wrap: wrap;
}

body.lh-hero-v3 .lh-page-hero--has-image .lh-safety-hub__trust-bullets {
    margin: 0 0 28px;
}

/* Hero pills (students hub) */
body.lh-hero-v3 .lh-journey-hero--has-image .lh-hero-pills {
    margin-top: 28px;
}

body.lh-hero-v3 .lh-journey-hero .lh-hero-pill {
    color: rgba(255, 255, 255, 0.9);
}

/* Hosts hub small print and jump link */
body.lh-hero-v3 .lh-journey-hero--has-image .lh-journey-hero__reassurance {
    margin: 16px 0 0;
    max-width: 30em;
    color: rgba(255, 255, 255, 0.72);
}

body.lh-hero-v3 .lh-journey-hero--has-image .lh-journey-hero__jump-link {
    margin-top: 20px;
    color: var(--lh-cyan, #6ACAF3);
}

/* --------------------------------------------------------------------------
   4. Phones and small tablets: photo on top, fading into the band, text below
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.lh-hero-v3 { --lhv3-photo-h: min(72vw, 340px); }

    body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) {
        display: block;
        min-height: 0 !important;
        padding: calc(var(--lhv3-head) + var(--lhv3-photo-h)) 0 44px !important;
    }

    body.lh-hero-v3 :is(.lh-page-hero__media, .lh-journey-hero__media, .lh-groups-landing__hero-media) {
        bottom: auto;
        height: calc(var(--lhv3-head) + var(--lhv3-photo-h) + 72px);
    }

    body.lh-hero-v3 :is(.lh-page-hero__media, .lh-journey-hero__media, .lh-groups-landing__hero-media) img {
        /* New photos put the people in the right 45% of the frame (art direction), so phones keep
           the right side in view. A page can override this in its "Hero photo (v3)" box. */
        object-position: var(--lhv3-focus-m, 92% 40%);
    }

    body.lh-hero-v3 :is(.lh-page-hero__media, .lh-journey-hero__media, .lh-groups-landing__hero-media)::after {
        background: linear-gradient(180deg,
            rgba(var(--lhv3-shade), 0.7) 0%,
            rgba(var(--lhv3-shade), 0) 24%,
            rgba(var(--lhv3-shade), 0) 50%,
            rgba(var(--lhv3-shade), 0.8) 80%,
            rgb(var(--lhv3-shade)) 100%);
    }

    body.lh-hero-v3 :is(.lh-page-hero--has-image .lh-page-hero__content, .lh-journey-hero--has-image .lh-journey-hero__content, .lh-groups-landing__hero--has-image .lh-groups-landing__hero-content) {
        max-width: none;
        margin-top: -40px;
    }

    body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) :is(.lh-page-hero__heading, .lh-journey-hero__heading, .lh-groups-landing__heading) {
        font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.4rem);
    }

    body.lh-hero-v3 :is(.lh-page-hero--has-image, .lh-journey-hero--has-image, .lh-groups-landing__hero--has-image) .lh-breadcrumb {
        font-size: 0.75rem;
        margin-bottom: 14px;
    }

    body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) :is(.lh-btn, .lh-btn-primary) {
        min-height: 48px;
    }

    body.lh-hero-v3 .lh-page-hero--has-image .lh-hero-price-strip {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.lh-hero-v3 :is(.lh-page-hero, .lh-journey-hero, .lh-groups-landing__hero) * {
        transition: none !important;
    }
}