/* ioann-presnya home_hero — Figma node 1:72 */

/* Section */
.home-hero {
    position: relative;
    width: 100%;
    height: min(982px, 100vh);
    overflow: hidden;
}

/* Hidden radio inputs for CSS-only slider */
.home-hero__radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Media layer — fills the entire section */
.home-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.home-hero__media--empty {
    background: #1a1a1a;
}

/* Photos — stacked, invisible by default */
.home-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}

/* Single-photo fallback — always visible */
.home-hero__media--single .home-hero__photo {
    opacity: 1;
}

/* Active photo: radio :checked → sibling media → target photo */
.home-hero__radio--0:checked ~ .home-hero__media .home-hero__photo--0,
.home-hero__radio--1:checked ~ .home-hero__media .home-hero__photo--1,
.home-hero__radio--2:checked ~ .home-hero__media .home-hero__photo--2,
.home-hero__radio--3:checked ~ .home-hero__media .home-hero__photo--3,
.home-hero__radio--4:checked ~ .home-hero__media .home-hero__photo--4,
.home-hero__radio--5:checked ~ .home-hero__media .home-hero__photo--5,
.home-hero__radio--6:checked ~ .home-hero__media .home-hero__photo--6,
.home-hero__radio--7:checked ~ .home-hero__media .home-hero__photo--7,
.home-hero__radio--8:checked ~ .home-hero__media .home-hero__photo--8,
.home-hero__radio--9:checked ~ .home-hero__media .home-hero__photo--9 {
    opacity: 1;
}

/* Scrim — text legibility backdrop. Rendered as the content box's OWN
   ::before (see .home-hero__content::before below) so it always tracks the
   visible slide's text exactly, regardless of title/body length, instead of
   being a separately-positioned rectangle that has to mirror the content
   offsets by hand. The standalone .home-hero__scrim span is no longer used. */

/* Top scrim — full-width dark band behind the floating header so the
   white nav/logo/phone/divider stay legible (Figma node 1:73 top gradient). */
.home-hero__top-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(178.35deg, rgb(0, 0, 0) 0.39%, rgba(0, 0, 0, 0) 38.84%);
    pointer-events: none;
}

/* Content overlay — bottom-left, aligned to content gutter */
/* Each per-slide content container shares the same absolute position */
.home-hero__content,
.home-hero__content--single,
.home-hero__content--0,
.home-hero__content--1,
.home-hero__content--2,
.home-hero__content--3,
.home-hero__content--4,
.home-hero__content--5,
.home-hero__content--6,
.home-hero__content--7,
.home-hero__content--8,
.home-hero__content--9 {
    position: absolute;
    left: 75px;
    bottom: 60px;
    max-width: 624px;
    color: #fff;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}

/* Scrim backdrop bound to the content box. A soft radial glow rooted at the
   box's bottom-left, extended a little past every edge so it pads around the
   text with no hard rectangle edges. z-index:-1 keeps it inside the content's
   own stacking context (which sits at z-index:2 above the photo) but behind
   the title/body/button. Because it lives on .home-hero__content it fades in
   and out together with its slide and always matches that slide's text size. */
/* The text scrim is now a full-width band on the media (see
   .home-hero__media::after), so the per-content radial glow is disabled. */
.home-hero__content::before {
    content: none;
}

/* Full-width scrim over the bottom half of the hero image — spans the whole
   image width and fades from dark at the bottom to transparent at mid-height
   so the slide text stays legible. Sits above the photos but below the
   content (z-index:2). */
.home-hero__media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .85) 0%,
        rgba(0, 0, 0, .45) 45%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Per-slide content — hidden by default (multi-slide mode) */
.home-hero__content--0,
.home-hero__content--1,
.home-hero__content--2,
.home-hero__content--3,
.home-hero__content--4,
.home-hero__content--5,
.home-hero__content--6,
.home-hero__content--7,
.home-hero__content--8,
.home-hero__content--9 {
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

/* Single-slide fallback — always visible */
.home-hero__content--single {
    opacity: 1;
    pointer-events: auto;
}

/* Active content: radio :checked → sibling content container */
.home-hero__radio--0:checked ~ .home-hero__content--0,
.home-hero__radio--1:checked ~ .home-hero__content--1,
.home-hero__radio--2:checked ~ .home-hero__content--2,
.home-hero__radio--3:checked ~ .home-hero__content--3,
.home-hero__radio--4:checked ~ .home-hero__content--4,
.home-hero__radio--5:checked ~ .home-hero__content--5,
.home-hero__radio--6:checked ~ .home-hero__content--6,
.home-hero__radio--7:checked ~ .home-hero__content--7,
.home-hero__radio--8:checked ~ .home-hero__content--8,
.home-hero__radio--9:checked ~ .home-hero__content--9 {
    opacity: 1;
    pointer-events: auto;
}

/* Title */
.home-hero__title {
    /* Match .home-schedule-row__title — use the shared title token (Cormorant
       Garamond) instead of the bare "Cormorant" family. */
    font-family: var(--ip-font-title, 'Cormorant Garamond', Georgia, serif);
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    margin: 0;
    color: #fff;
}

/* Body */
.home-hero__body {
    font-family: Golos, sans-serif;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.011em;
    max-width: 624px;
    color: rgba(255, 255, 255, .85);
}

/* CTA button */
.home-hero__cta {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .7);
    color: #fff;
    font-family: Golos, sans-serif;
    font-size: 14px;
    text-decoration: none;
    background: transparent;
    border-radius: 5px;
    transition: background .2s ease;
}

.home-hero__cta:hover {
    background: rgba(255, 255, 255, .1);
}

/* Arrows row */
.home-hero__arrows {
    display: flex;
    gap: 16px;
}

/* Individual arrow — circular label */
.home-hero__arrow {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s ease;
}

.home-hero__arrow:hover {
    background: rgba(255, 255, 255, .1);
}

/* Reveal only the prev/next pair for the active slide.
   Arrows now live inside per-slide content containers, so when a content
   container becomes visible (opacity:1) its arrows become display:flex. */
.home-hero__radio--0:checked ~ .home-hero__content--0 .home-hero__arrow--for-0,
.home-hero__radio--1:checked ~ .home-hero__content--1 .home-hero__arrow--for-1,
.home-hero__radio--2:checked ~ .home-hero__content--2 .home-hero__arrow--for-2,
.home-hero__radio--3:checked ~ .home-hero__content--3 .home-hero__arrow--for-3,
.home-hero__radio--4:checked ~ .home-hero__content--4 .home-hero__arrow--for-4,
.home-hero__radio--5:checked ~ .home-hero__content--5 .home-hero__arrow--for-5,
.home-hero__radio--6:checked ~ .home-hero__content--6 .home-hero__arrow--for-6,
.home-hero__radio--7:checked ~ .home-hero__content--7 .home-hero__arrow--for-7,
.home-hero__radio--8:checked ~ .home-hero__content--8 .home-hero__arrow--for-8,
.home-hero__radio--9:checked ~ .home-hero__content--9 .home-hero__arrow--for-9 {
    display: flex;
}

/* Home hero full-bleed: break out of .content's 40px side padding so the
   photo reaches the 1512px outer box (matches Figma node 1:72).
   At >=1512 viewport: hero width = 1512px (content-box 1432 + 2×40 padding).
   Below 1512: content-box = viewport − 80px; +80px = full viewport width.
   Overlay text is anchored to the hero box with a fixed `left: 75px` /
   `bottom: 60px` (Figma node 1:74), so it stays 75px from the image's left
   edge and 60px from its bottom edge at every viewport width. */
.body--home .home-hero {
    margin-inline: calc(-1 * var(--ip-side-padding));
    width: calc(100% + 2 * var(--ip-side-padding));
    /* Let the media layer below break out past this box to the viewport
       edges; the section box itself stays at the 1512 content box so the
       overlay text/buttons/arrows keep their current position. */
    overflow: visible;
}

/* Full-bleed media: the photos + scrims fill the entire viewport width
   regardless of the centered 1512 content box. The section box is unchanged,
   so the overlay content (title/body/CTA/arrows) stays exactly where it is.
   Symmetric breakout: left/right edges land on the viewport edges. */
.body--home .home-hero__media {
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
}

/* The full-bleed media uses 100vw, which can exceed the body width by the
   vertical-scrollbar width and trigger a horizontal scrollbar. Clip the
   overflow at the page wrapper (home page only) to prevent that. */
.body--home .mainwrap {
    overflow-x: clip;
}

/* Header overlay — home page only.
   The hero photo must run to the very top edge with the menu/logo/phone
   rows floating transparently over it (Figma node 1:72). The base
   .header rule paints an opaque background + shadow + min-height; null
   those out here so the photo shows through. .header--dark still applies,
   keeping white text, the white decorative divider and the inverted
   (white) logo. A top scrim (.home-hero__top-scrim) darkens the photo
   behind this transparent header so the white nav/logo/phone/divider stay
   legible — matches Figma node 1:73's top gradient. */
.body--home .header {
    /* Pinned to the viewport (was absolute) so it stays put while the hero
       scrolls underneath. fixed is used instead of sticky because the
       home .mainwrap clips overflow-x (full-bleed 100vw media, below) which
       would break position: sticky; a fixed element escapes that clip.
       At the top it's a transparent dark band over the hero photo; once
       scrolled past 200px JS adds .is-stuck and it becomes a solid light bar
       (see .body--home .header.is-stuck below + .header--dark.is-stuck tokens
       in header.css). z-index 200 matches the inner-page light header. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: none;
    box-shadow: none;
    min-height: 0;
}

/* Scrolled (stuck) state — solid light bar. The palette tokens are flipped to
   the light root values by .header--dark.is-stuck (header.css); here we supply
   the actual background + shadow at the specificity needed to beat the
   transparent overlay rule above. */
.body--home .header.is-stuck {
    background: var(--ip-bg);
    box-shadow: var(--ip-header-shadow);
}

/* Home header full-bleed: drop the header's horizontal padding so the
   hero photo background reaches the 1512 frame edges (Figma 1:72).
   Re-add the 40px gutter on each row so nav items, phone, and socials
   remain at the content gutter. The divider is also inset to the same
   gutter so it matches inner/light pages and Figma node 1:87. */
.body--home .header {
    padding-left: 0;
    padding-right: 0;
}

.body--home .header__row {
    padding-inline: var(--ip-side-padding);
}

/* Divider side-gutter inset is now handled in the base .header__divider
   rule (header.css), shared by the home/dark and inner/light headers. */

/* Responsive: mobile */
@media (max-width: 767.99px) {
    .home-hero__content,
    .home-hero__content--single,
    .home-hero__content--0,
    .home-hero__content--1,
    .home-hero__content--2,
    .home-hero__content--3,
    .home-hero__content--4,
    .home-hero__content--5,
    .home-hero__content--6,
    .home-hero__content--7,
    .home-hero__content--8,
    .home-hero__content--9 {
        left: 16px;
        right: 16px;
        bottom: 32px;
        max-width: none;
        gap: 10px;
    }

    .home-hero__title {
        font-size: clamp(28px, 7.5vw, 36px);
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .home-hero__cta {
        min-height: 44px;
        padding: 12px 22px;
    }

    .home-hero__arrow {
        width: 44px;
        height: 44px;
    }

    /* Mobile: widen the content backdrop so it reaches the screen edges
       behind the full-width text column. */
    .home-hero__content::before {
        left: -24px;
        right: -24px;
        top: -32px;
        bottom: -48px;
    }
}

/* Responsive: laptop/below-desktop (768–1511px).
   Below the 1512px design frame, shrink the hero title and body slightly.
   Scoped with min-width:768px so it never overlaps the mobile block above
   (max-width:767.99px), which keeps the mobile title clamp() intact. */
@media (min-width: 768px) and (max-width: 1511.98px) {
    .home-hero__title {
        font-size: 38px;
    }

    .home-hero__body {
        font-size: 17px;
    }
}