/* Homepage — only enqueued on front-page.php */

.site-main--home { padding: 0; }

/* Common section head */
.home-section-head { padding-block: var(--s-7) var(--s-4); }
.home-section-head--centered { text-align: center; padding-block: var(--s-8) var(--s-4); }
.home-section-head__eyebrow {
    font-size: var(--fs-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: var(--s-2);
    font-weight: var(--fw-semibold);
}
.home-section-head__eyebrow--on-dark { color: #bbb; }
.home-section-head__title {
    font-size: var(--fs-4xl);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}
.home-section-head--on-dark .home-section-head__title,
.home-section-head--on-dark .home-section-head__eyebrow { color: var(--c-bg); }
.home-section-head__lead {
    margin: var(--s-3) auto 0;
    max-width: 62ch;
    color: var(--c-muted);
}

/* ============================================================
   HERO — scroll-hijacked split banner.
   Desktop UX:
     1. Video covers the viewport (central 100%, sides collapsed).
     2. First wheel/touch scroll-down at the top of the page: page scroll
        is frozen (body gets .is-scroll-locked), JS sets --split: 1, CSS
        transitions the split geometry to completion (~0.85s).
     3. Scroll unlocks; subsequent scrolling moves the page normally.
     4. Scroll-up from the top while split → reverse animation.
   Mobile / reduced-motion: stacked, fully visible, no animation.
   ============================================================ */

.home-hero-stage { position: relative; }

.home-hero {
    position: relative;
    background: #000;
    color: var(--c-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.home-hero__central,
.home-hero__side {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: var(--c-bg);
}

/* Mobile layout - stacked (<900px) */
.home-hero__central {
    order: 1;
    width: 100%;
    height: 70vh;
    min-height: 420px;
    background: #000;
}
.home-hero__side {
    width: 100%;
    height: 50vh;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    opacity: 1;
}
.home-hero__side--left  { order: 2; }
.home-hero__side--right { order: 3; }

.home-hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

.home-hero__side-overlay,
.home-hero__central-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.6) 100%);
    transition: background var(--t-base) var(--ease-out);
    z-index: 1;
}
.home-hero__central-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.5) 100%);
}
.home-hero__side:hover .home-hero__side-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.7) 100%);
}

.home-hero__side-inner,
.home-hero__central-inner {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    padding: var(--s-6) var(--s-5);
    display: flex; flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-3);
}
.home-hero__central-inner {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--s-7);
}

.home-hero__side-label {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.05;
}
.home-hero__side-cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
    align-self: flex-start;
}

.home-hero__title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    line-height: 0.95;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
    text-wrap: balance;
}
.home-hero__central-cta {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-md);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    color: var(--c-bg);
    border: 1px solid var(--c-bg);
    padding: 14px 28px;
    text-decoration: none;
    transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.home-hero__central-cta:hover {
    background: var(--c-bg);
    color: var(--c-fg);
    opacity: 1;
}

/* ---------------- Desktop: 100vh row layout + scroll-hijack split ---------------- */
@media (min-width: 900px) {
    .home-hero {
        flex-direction: row;
        align-items: stretch;
        height: 100vh;
    }

    /* Easings (matched across central/sides for visual coherence). */
    .home-hero { --hero-ease: cubic-bezier(.76, 0, .24, 1); --hero-ease-out: cubic-bezier(.22, .61, .36, 1); }

    /* Central: starts 100% (--split:0), shrinks to 33.333% (--split:1). */
    .home-hero__central {
        order: 2;
        height: 100%;
        min-height: 0;
        width: calc(100% - var(--split, 0) * 66.666%);
        transition: width 1.3s var(--hero-ease);
    }

    /*
       Side banners: three layered animations
         - width grows in sync with the central shrink (ease-in-out, 1.3s)
         - clip-path reveal starts at +0.25s (eases the panel open top-to-bottom)
         - opacity fades in at +0.3s (content arrives just as the mask opens)
       Right banner staggers ~0.1s after left for a subtle wave.
     */
    .home-hero__side {
        height: 100%;
        min-height: 0;
        width: calc(var(--split, 0) * 33.333%);
        opacity: var(--split, 0);
        clip-path: inset(calc((1 - var(--split, 0)) * 100%) 0 0 0);
        transition:
            width       1.3s var(--hero-ease),
            opacity     0.8s var(--hero-ease-out) 0.3s,
            clip-path   1.1s var(--hero-ease)     0.25s;
    }
    .home-hero__side--left  { order: 1; }
    .home-hero__side--right {
        order: 3;
        transition:
            width       1.3s var(--hero-ease)     0.1s,
            opacity     0.8s var(--hero-ease-out) 0.4s,
            clip-path   1.1s var(--hero-ease)     0.35s;
    }

    /* Side-banner copy fades in last, once the mask has started opening */
    .home-hero__side-inner {
        opacity: calc(var(--split, 0) * 1.6 - 0.4);
        transition: opacity 0.6s var(--hero-ease-out) 0.7s;
    }
    .home-hero__side--right .home-hero__side-inner {
        transition: opacity 0.6s var(--hero-ease-out) 0.8s;
    }

    /* Gentle scale on the central media: 1.0 at split:0 → 1.04 at split:1 */
    .home-hero__video {
        transform: scale(calc(1 + var(--split, 0) * 0.04));
        transform-origin: center center;
        transition: transform 1.3s var(--hero-ease);
    }

    /*
       Shrink the central copy in lockstep with the column width so the
       headline stops getting clipped when the central column reaches 1/3.
         split:0 → up to 6vw, capped at 84px (full cinematic size)
         split:1 → up to 2.8vw, capped at 48px (fits the narrow column)
       Padding also tightens to give the text a bit more breathing room.
     */
    .home-hero__central-inner {
        padding:
            calc(var(--s-7) - var(--split, 0) * var(--s-4))
            calc(var(--s-5) - var(--split, 0) * var(--s-3));
        transition: padding 1.3s var(--hero-ease);
    }
    .home-hero__title {
        font-size: clamp(
            28px,
            calc(6vw - var(--split, 0) * 3.2vw),
            calc(84px - var(--split, 0) * 36px)
        );
        transition: font-size 1.3s var(--hero-ease);
    }
    .home-hero__central-cta {
        padding:
            calc(14px - var(--split, 0) * 4px)
            calc(28px - var(--split, 0) * 10px);
        font-size: calc(var(--fs-md) - var(--split, 0) * 2px);
        transition: padding 1.3s var(--hero-ease), font-size 1.3s var(--hero-ease);
    }
}

/* Scroll-lock used while the animation is playing */
html.is-scroll-locked,
body.is-scroll-locked {
    overflow: hidden !important;
    touch-action: none;
}

/* Reduced motion — jump straight to split state, no transitions */
@media (prefers-reduced-motion: reduce) and (min-width: 900px) {
    .home-hero__central { width: 33.333%; transition: none; }
    .home-hero__side    { width: 33.333%; opacity: 1; clip-path: none; transition: none; }
    .home-hero__side-inner { opacity: 1; transition: none; }
}

/* ============================================================
   BRANDS 3-COL (BOGNER MAN / WOMAN / SHOES below hero)
   ============================================================ */
.home-brands {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--c-fg);
}
@media (min-width: 900px) {
    .home-brands { grid-template-columns: repeat(3, 1fr); }
}

.home-brands__item {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: var(--c-bg);
    text-decoration: none;
}
@media (min-width: 900px) { .home-brands__item { aspect-ratio: 3/4; min-height: 420px; } }

.home-brands__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.0) 45%, rgba(0,0,0,.65) 100%);
    transition: background var(--t-base) var(--ease-out);
}
.home-brands__item:hover .home-brands__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.75) 100%);
}

.home-brands__inner {
    position: absolute;
    inset: auto var(--s-5) var(--s-5) var(--s-5);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.home-brands__label {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.home-brands__cta {
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
    align-self: flex-start;
}

/* ============================================================
   FEATURED SCROLLER
   ============================================================ */
.home-featured {
    background: var(--c-surface-2);
    padding-block: var(--s-4) var(--s-8);
}
.home-featured__scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    padding: var(--s-5) var(--container-pad);
    scrollbar-width: thin;
}
@media (min-width: 640px)  { .home-featured__scroller { grid-auto-columns: 42%; } }
@media (min-width: 900px)  { .home-featured__scroller { grid-auto-columns: 28%; } }
@media (min-width: 1280px) { .home-featured__scroller { grid-auto-columns: 22%; } }

.home-featured__card { scroll-snap-align: start; }
.home-featured__link { display: block; }
.home-featured__img {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--c-surface);
    background-size: cover;
    background-position: center;
    margin-bottom: var(--s-2);
}
.home-featured__sale {
    position: absolute;
    top: var(--s-2); right: var(--s-2);
    background: var(--c-fg); color: var(--c-bg);
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px;
    font-weight: var(--fw-semibold);
}
.home-featured__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.home-featured__price {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin-top: 2px;
}
.home-featured__price del { opacity: 0.5; margin-right: var(--s-2); }
.home-featured__price ins { text-decoration: none; }

.home-featured__cta {
    text-align: center;
    padding-top: var(--s-4);
}

/* ============================================================
   SHOP THE LOOK
   ============================================================ */
.home-look {
    background: var(--c-fg);
    color: var(--c-bg);
    padding-block: var(--s-8);
}
.home-look__grid {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr;
    margin-top: var(--s-5);
}
@media (min-width: 900px) { .home-look__grid { grid-template-columns: 1fr 1fr; } }

.home-look__card { display: block; color: var(--c-bg); }
.home-look__img {
    aspect-ratio: 4/5;
    background-size: cover;
    background-position: center;
    margin-bottom: var(--s-3);
    transition: transform var(--t-slow) var(--ease-out);
}
.home-look__card:hover .home-look__img { transform: translateY(-3px); opacity: 1; }
.home-look__cta {
    display: inline-block;
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
}

/* ============================================================
   GOLF 2026 3-COL PROMO — full-bleed, full-viewport-height on desktop.
   Center text panel uses the legacy dark-blue #1a1f28 background.
   ============================================================ */
.home-promo { margin-top: 30px; }
.home-promo__grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 420px;
}
@media (min-width: 900px) {
    .home-promo__grid {
        grid-template-columns: 1fr 1fr 1fr;
        min-height: 100vh;
    }
}
.home-promo__side {
    background-size: cover;
    background-position: center;
    min-height: 280px;
    display: block;
    position: relative;
    transition: opacity var(--t-base) var(--ease-out);
}
.home-promo__side:hover { opacity: 0.9; }

.home-promo__center {
    background: #1a1f28;
    color: var(--c-bg);
    padding: var(--s-7) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
}
.home-promo__eyebrow {
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #bbb;
}
.home-promo__title {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}
.home-promo__lead { max-width: 36ch; color: rgba(255,255,255,.85); }

/* ============================================================
   LUXURY SALE 2-COL — full-bleed, full-viewport-height on desktop.
   ============================================================ */
.home-sale {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--c-fg);
}
@media (min-width: 900px) {
    .home-sale { grid-template-columns: 1fr 1fr; min-height: 100vh; }
}

.home-sale__item {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    color: var(--c-bg);
    overflow: hidden;
    text-decoration: none;
}
@media (min-width: 900px) {
    .home-sale__item {
        aspect-ratio: auto;
        min-height: 100vh;
        height: 100vh;
    }
}

.home-sale__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.6) 100%);
    transition: background var(--t-base) var(--ease-out);
}
.home-sale__item:hover .home-sale__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,.75) 100%);
}
.home-sale__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-2);
}
.home-sale__kicker {
    font-size: var(--fs-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    font-weight: var(--fw-semibold);
}
.home-sale__label {
    font-size: var(--fs-4xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
}
.home-sale__cta {
    font-size: var(--fs-sm);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--c-bg);
    padding-bottom: 2px;
    align-self: flex-start;
    margin-top: var(--s-2);
}

/* ============================================================
   LOCATIONS
   ============================================================ */
.home-locs { padding-bottom: var(--s-8); }
.home-locs__list {
    display: grid;
    gap: var(--s-4);
    grid-template-columns: 1fr;
    margin-top: var(--s-5);
}
@media (min-width: 640px)  { .home-locs__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-locs__list { grid-template-columns: repeat(3, 1fr); } }

.home-locs__item {
    border: 1px solid var(--c-border);
    padding: var(--s-5);
}
.home-locs__name {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}
.home-locs__addr,
.home-locs__hours,
.home-locs__phone {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    line-height: 1.6;
}
.home-locs__phone a { color: var(--c-fg); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   BLOG
   ============================================================ */
.home-blog { padding-bottom: var(--s-8); }
.home-blog__grid {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
    margin-top: var(--s-5);
}
@media (min-width: 640px)  { .home-blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .home-blog__grid { grid-template-columns: repeat(3, 1fr); } }

.home-blog__thumb {
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--c-surface);
    margin-bottom: var(--s-3);
}
.home-blog__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.home-blog__card:hover .home-blog__thumb img { transform: scale(1.03); }

.home-blog__date {
    display: inline-block;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-bottom: var(--s-2);
}
.home-blog__title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    margin-bottom: var(--s-2);
    line-height: var(--lh-snug);
}
.home-blog__excerpt {
    color: var(--c-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* ============================================================
   NEWSLETTER
   ============================================================ */
.home-news {
    background: var(--c-fg);
    color: var(--c-bg);
    padding-block: var(--s-8);
}
.home-news__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
    align-items: center;
}
@media (min-width: 900px) {
    .home-news__inner { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
.home-news__title {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-top: var(--s-2);
}
.home-news__lead { color: rgba(255,255,255,.75); margin-top: var(--s-3); max-width: 44ch; }

.home-news__form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
    max-width: 480px;
    width: 100%;
}
.home-news__form input[type="email"] {
    background: transparent;
    color: var(--c-bg);
    border: 1px solid rgba(255,255,255,.45);
}
.home-news__form input[type="email"]::placeholder { color: rgba(255,255,255,.55); }
.home-news__form input[type="email"]:focus { border-color: var(--c-bg); }
.home-news__form .btn {
    background: var(--c-bg); color: var(--c-fg); border-color: var(--c-bg);
}
.home-news__form .btn:hover {
    background: transparent; color: var(--c-bg); border-color: var(--c-bg);
}

/* ---- Shop the look · hotspots ---- */
.home-look__card--shoppable { display: block; }
.home-look__card--shoppable .home-look__img { position: relative; }
.home-look__card--shoppable:hover .home-look__img { transform: none; }
.home-look__card--shoppable .home-look__cta { margin-top: var(--s-3); }

.home-look__hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.home-look__dot {
    width: 28px; height: 28px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid #fff; background: rgba(0,0,0,.45);
    display: grid; place-items: center;
    animation: ice-hs-pulse 2.6s ease-out infinite;
}
.home-look__dot span { width: 8px; height: 8px; border-radius: 50%; background: #fff; display: block; transition: transform var(--t-fast) var(--ease-out); }
.home-look__hotspot.is-open .home-look__dot { background: #fff; animation: none; }
.home-look__hotspot.is-open .home-look__dot span { background: var(--c-fg); transform: scale(1.3); }
@keyframes ice-hs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.home-look__pop {
    position: absolute; bottom: calc(100% + 12px); left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: 230px; display: flex; gap: var(--s-3); padding: var(--s-3);
    background: var(--c-bg); color: var(--c-fg); text-decoration: none;
    box-shadow: var(--shadow-2); z-index: 3;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.home-look__hotspot.is-open .home-look__pop,
.home-look__hotspot:hover .home-look__pop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.home-look__pop::after {
    content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: var(--c-bg);
}
.home-look__pop-img { flex: 0 0 64px; height: 82px; background: var(--c-surface) center/cover no-repeat; }
.home-look__pop-meta { display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; }
.home-look__pop-title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.25; }
.home-look__pop-price { font-size: var(--fs-sm); color: var(--c-muted); }
.home-look__pop-price del { opacity: .6; margin-right: 4px; }