/* ==========================================================================
   KB Daywear Hero — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-daywear-hero. Same single-canvas
   architecture as the rest of the Hero family: a full-bleed
   background image, a Bordeaux color overlay fading in from the
   LEFT over the image (while keeping the photo visible) for copy
   readability, and the editorial copy block (eyebrow / H1 / body
   / 2 CTAs) layered on the LEFT side of the canvas. The right
   side of the photograph stays unobstructed so the subject
   remains the dominant visual.

   Composition (locked, mirrored from the supplied reference):
     - Cinematic full-width hero directly under the header.
     - Bordeaux color overlay fading in from the LEFT over the
       image, while keeping the photo visible.
     - Two canonical outline buttons on the same row at desktop:
       PRIMARY = Porcelain outline, SECONDARY = Gold outline.
       Stack vertically on mobile.
     - No cards. No icons. No decorative SaaS elements. No serif.
       No italic. No radius. No shadow.

   Spacing rules:
     - The Hero is the FIRST section — no incoming 100/80/64px gap
       above. The .kb-hero shared reset (home-hero.css) already
       handles the page-level block-padding reset and the
       full-bleed ancestor escape.

   Elementor is content-only. All values driven by tokens.css.
   All visual styling lives here.
   ========================================================================== */

.kb-daywear-hero {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    overflow: hidden;
    /* Definite Hero height — same viewport-minus-header rule as
       the rest of the Hero family. No top section gap: the Hero
       begins immediately beneath the global Header. */
    min-height: calc(100svh - var(--kb-header-height-desktop));
}

/* Bordeaux color overlay fading in from the LEFT over the image,
   while keeping the photo visible on the right. Lives between the
   image (z-index 0) and the copy (z-index 2) so the editorial
   text always has a calm Bordeaux / near-black readable field on
   the left while the right side of the photograph stays fully
   visible and cinematic. Multi-stop curve calibrated for the
   daywear composition: the far-left pocket is the deepest
   Bordeaux / near-black so the eyebrow + H1 + body always sit
   inside the readable field regardless of the source
   photograph; the curve eases out smoothly so the fade feels
   photographic (not a flat SaaS gradient). */
.kb-daywear-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kb-bordeaux) 88%, var(--kb-ink)) 0%,
        color-mix(in srgb, var(--kb-bordeaux) 82%, var(--kb-ink)) 8%,
        color-mix(in srgb, var(--kb-bordeaux) 72%, var(--kb-ink)) 18%,
        color-mix(in srgb, var(--kb-bordeaux) 56%, transparent) 32%,
        color-mix(in srgb, var(--kb-bordeaux) 36%, transparent) 46%,
        color-mix(in srgb, var(--kb-bordeaux) 18%, transparent) 60%,
        color-mix(in srgb, var(--kb-bordeaux) 6%, transparent) 74%,
        transparent 88%
    );
}

/* ==========================================================================
   FULL-BLEED ESCAPE — shared .kb-hero reset.

   The shared .kb-hero contract already defined in home-hero.css
   makes any page containing a .kb-hero full-bleed (escaping the
   parent theme .atlasyn-container 1200px wrapper and the Elementor
   .e-con 1140px wrapper). The Daywear Hero adds the .kb-hero class
   to its root element so the existing reset applies without
   duplication here. No global reset, no negative margins, no
   100vw math. Tablet / mobile rules that should be re-applied
   locally on this section live in the @media blocks below.
   ========================================================================== */

/* ---- Single-canvas layout ----------------------------------------------- */
.kb-daywear-hero__layout {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: inherit;
    width: 100%;
}

/* ---- Copy block ---------------------------------------------------------
   padding-inline-start: max(0, (100vw - 1140) / 2) pins the copy's
   left edge to the 1140px content frame on viewports >= 1140px. On
   narrower viewports the max() collapses to 0 so the copy sits at
   viewport left. The copy block footprint is owned by the inner
   max-width (~58% of 1140 ≈ 661px) — enough width for the H1 to
   wrap into 2 visual lines on desktop, the 2 CTAs to sit on a
   single row, while still leaving the right half of the canvas
   open for the photograph. */
.kb-daywear-hero__copy {
    padding-inline-start: max(0px, calc((100vw - var(--kb-content-width)) / 2));
    min-width: 0;
    flex: 0 0 auto;
}

.kb-daywear-hero__copy-inner {
    width: 100%;
    max-width: calc(var(--kb-content-width) * 0.58);
    margin-inline-start: 0;
}

/* ---- Media background layer --------------------------------------------- */
.kb-daywear-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    overflow: hidden;
    /* Theme-controlled fallback surface for when no Hero image is
       approved yet — Bordeaux → Ink diagonal wash so the canvas
       never reads as an empty void. */
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

.kb-daywear-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Desktop focal point: the subject (the dominant subject) sits
       primarily on the right; with object-fit:cover filling a
       viewport-wide canvas, "right center" keeps them visible on
       the right while the left side stays open for the readable
       Bordeaux / Ink overlay + copy. */
    object-position: right center;
}

/* ---- Eyebrow ------------------------------------------------------------
   Reuses the canonical .kb-section-eyebrow primitive (base.css) for
   Montserrat / 12px / 500 / uppercase / 0.18em / Gold. The
   .kb-daywear-hero__eyebrow class only acts as a section-scoped
   hook — no typography duplication here. No decorative line, no
   underline, no ornament. */
.kb-daywear-hero__eyebrow {
    margin: 0 0 var(--kb-space-l) 0;
}

/* ---- Hero title ---------------------------------------------------------
   Single H1 on the page. Raleway display, hairline weight,
   line-height 1, text-wrap: balance for editorial proportion. The
   newline characters from the Elementor control are preserved by
   nl2br() in the PHP template so the two-line title renders
   exactly as authored ("L'élégance pensée / pour la vraie
   vie."). Porcelain on the Bordeaux overlay for AA-grade
   contrast. Non-italic, no serif, no underline. Desktop scale:
   72px (locked). */
.kb-daywear-hero__title {
    margin: 0 0 var(--kb-space-l) 0;
    font-family: var(--kb-font-display);
    font-size: 72px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--kb-porcelain);
    font-style: normal;
    text-wrap: balance;
    text-decoration: none;
}

/* ---- Body copy ----------------------------------------------------------
   Restrained body column. Porcelain, small body face, no italic.
   Desktop size 17px (locked). Line-height 1.7 for editorial
   readability. 48ch reading column caps the line length so the
   body never crowds the photograph on the right. */
.kb-daywear-hero__text {
    margin: 0 0 0 0;
    font-family: var(--kb-font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-porcelain);
    max-width: 48ch;
    text-wrap: pretty;
    font-style: normal;
}

/* ---- CTA group ----------------------------------------------------------
   Two canonical outline buttons (PRIMARY = Porcelain, SECONDARY =
   Gold) sit on the same row at desktop and stack vertically on
   mobile. Same color treatment as the HOME page CTAs. Reuses
   the site-wide .kb-button primitive (54px height, 28px padding,
   Montserrat 13px / 500 / 0.12em, radius 0, --kb-transition-
   button). Only color tokens are overridden on top of the
   primitive — height / padding / font / radius / transition are
   never touched here. The state cascade is the Hero-canonical
   split: :visited → NORMAL, :hover (fine pointer only) → fill
   inversion, :active → same fill as hover (works on touch),
   :focus-visible → NORMAL + restrained Gold focus ring. */
.kb-daywear-hero__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kb-space-s);
    margin-top: 40px;
    width: 100%;
    max-width: 100%;
}

.kb-daywear-hero__ctas .kb-button {
    width: auto;
    flex: 0 0 auto;
}

.kb-daywear-hero__cta {
    flex: 0 0 auto;
    /* Hero-scoped motion refinement. Promotes the base 300ms
       transition to --kb-transition-button (500ms cubic-bezier
       (.22, 1, .36, 1)) for a calmer, more premium hover.
       background-color, color and border-color only — no
       transition: all, no transform, no scale. */
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

/* PRIMARY / OUTLINE PORCELAIN — transparent field, Porcelain
   border + Porcelain text. Inverts to filled Porcelain + Ink on
   hover. */
.kb-daywear-hero__cta--primary,
.kb-daywear-hero__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}

.kb-daywear-hero__cta--primary:active {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    border-color: var(--kb-porcelain);
}

.kb-daywear-hero__cta--primary:focus-visible {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-daywear-hero__cta--primary:hover {
        background-color: var(--kb-porcelain);
        color: var(--kb-ink);
        border-color: var(--kb-porcelain);
    }
}

/* SECONDARY / OUTLINE GOLD — transparent field, Gold border +
   Gold text. Inverts to filled Gold + Ink on hover. */
.kb-daywear-hero__cta--secondary,
.kb-daywear-hero__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
}

.kb-daywear-hero__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
}

.kb-daywear-hero__cta--secondary:focus-visible {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-daywear-hero__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
    }
}

/* ==========================================================================
   Tablet (768px – 1199px)
   - Same single-canvas principle as desktop.
   - Min-height accounts for the tablet header (80px).
   - 32px gutter applied via padding-inline.
   - H1 scales to 53px. Body 17px. Eyebrow 11.5px.
   - The copy block keeps the same ~58% width rule; the Bordeaux
     gradient is slightly stronger on the left so copy remains
     readable on a narrower canvas.
   - Object-position shifts inward to keep the subject visible on
     the right while the overlay swallows more of the left side.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    .kb-daywear-hero {
        min-height: calc(100svh - var(--kb-header-height-tablet));
    }

    .kb-daywear-hero__copy {
        padding-inline-start: var(--kb-gutter-tablet);
        padding-inline-end: var(--kb-gutter-tablet);
    }

    .kb-daywear-hero__media img {
        object-position: 72% center;
    }

    .kb-daywear-hero__eyebrow {
        font-size: 11.5px;
    }

    .kb-daywear-hero__title {
        font-size: 60px;
    }

    .kb-daywear-hero__text {
        font-size: 17px;
        max-width: 44ch;
    }

    .kb-daywear-hero__ctas {
        margin-top: 32px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px)
   - Full-width background, copy remains readable.
   - H1 scales to 46px. Body 17px. Eyebrow 11px.
   - Copy block left-aligned with the canonical 20px gutter.
   - The entire text block (eyebrow → title → body → CTAs) is
     VERTICALLY CENTERED via the existing flex structure on the
     .kb-daywear-hero__layout wrapper. No top/translateY hacks; the
     wrapper's `align-items: center` already in place does the
     work.
   - Stronger Bordeaux atmosphere for guaranteed readability on
     small screens regardless of the source photograph. The
     Bordeaux left overlay effect is preserved.
   - Object-position is intentionally shifted right so the subject
     stays visible (no random desktop crop) and the left side
     stays clear for the overlay + copy.
   - CTAs stack vertically, full-width.
   - No serif. No italic. No radius. No shadow.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-daywear-hero {
        min-height: calc(100svh - var(--kb-header-height-mobile));
    }

    /* Mobile Bordeaux atmosphere: layered horizontal + vertical
       fade. The horizontal layer (second, sits behind) provides
       the brand Bordeaux tint on the left; the vertical layer
       (first, on top) adds a subtle bottom darken so the copy
       sits in a controlled readable pocket. The upper-right of
       the canvas stays clear for the subject. */
    .kb-daywear-hero::after {
        background:
            linear-gradient(
                to bottom,
                transparent 18%,
                color-mix(in srgb, var(--kb-ink) 32%, transparent) 100%
            ),
            linear-gradient(
                to right,
                color-mix(in srgb, var(--kb-bordeaux) 80%, var(--kb-ink)) 0%,
                color-mix(in srgb, var(--kb-bordeaux) 60%, var(--kb-ink)) 22%,
                color-mix(in srgb, var(--kb-bordeaux) 32%, transparent) 48%,
                transparent 72%
            );
    }

    /* The single-canvas layout already uses `align-items: center`
       on the desktop. Mobile inherits that — the entire text
       block (eyebrow → title → body → CTAs) is therefore
       vertically centered inside the Hero without any top /
       transform hacks. */
    .kb-daywear-hero__layout {
        align-items: center;
    }

    .kb-daywear-hero__copy {
        width: 100%;
        padding-inline-start: var(--kb-gutter-mobile);
        padding-inline-end: var(--kb-gutter-mobile);
        padding-top: 32px;
        padding-bottom: var(--kb-space-l);
    }

    .kb-daywear-hero__copy-inner {
        max-width: none;
        width: 100%;
    }

    .kb-daywear-hero__media img {
        /* Mobile focal point: shift the visible window further
           right so the subject remains the dominant visual and
           the left side (covered by the overlay) carries the
           Bordeaux fade. */
        object-position: 78% center;
    }

    .kb-daywear-hero__eyebrow {
        font-size: 11px;
        margin-bottom: 20px;
    }

    .kb-daywear-hero__title {
        font-size: 46px;
        line-height: 1;
    }

    .kb-daywear-hero__text {
        font-size: 17px;
        line-height: 1.7;
        max-width: none;
    }

    .kb-daywear-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin-top: 28px;
    }

    .kb-daywear-hero__ctas .kb-button {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   HERO EDITORIAL ENTRANCE (page-load CSS keyframes)
   ------------------------------------------------------------
   Same architecture as the rest of the Hero family. The Hero is
   above the fold and present at first render, so it uses its OWN
   dedicated CSS @keyframes (NOT the generic [data-kb-reveal] /
   IntersectionObserver system used by below-the-fold sections).
   CSS animations are deterministic for above-the-fold load — no
   first-paint class sequencing race, no IntersectionObserver
   dependency, no forced reflow.

   The image + the entire copy group are the two animated layers.
   The eyebrow, H1, body text and the 2 CTAs ride the parent copy
   wrapper — they are NOT animated independently.
   ========================================================================== */

@keyframes kb-daywear-hero-media-enter {
    from {
        opacity: 0;
        transform: scale(1.025);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes kb-daywear-hero-copy-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.kb-daywear-hero__media {
    animation-name: kb-daywear-hero-media-enter;
    animation-duration: 1200ms;
    animation-timing-function: var(--kb-reveal-easing);
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.kb-daywear-hero__copy {
    animation-name: kb-daywear-hero-copy-enter;
    animation-duration: 1100ms;
    animation-timing-function: var(--kb-reveal-easing);
    animation-delay: 180ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kb-daywear-hero__media,
    .kb-daywear-hero__copy {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 767px) {
    .kb-daywear-hero__media {
        animation-duration: 1000ms;
    }

    .kb-daywear-hero__copy {
        animation-duration: 950ms;
        animation-delay: 140ms;
    }
}