/* ==========================================================================
   KB Home Universes (Section 06) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-home-universes. All values driven by tokens.css.

   Composition (final):
     Centered 1140px editorial section living inside the project's normal
     content frame. NO full-bleed breakout, NO 100vw, NO negative
     viewport margins — the section is normal section width like the
     other 1140px sections.

     Vertical flow (top → bottom):
       1. Section eyebrow + Gold hairline (centered, Gold, .18em)
       2. Two-line H2 — Raleway upright "Une signature." (Ink) on
          line 1, Raleway italic "Trois expressions." (Gold) on line 2
       3. Three-card row — single CSS grid of three equal cards
          (1fr / 1fr / 1fr). Each card is a full-bleed editorial
          photograph (object-fit:cover) with a restrained dark gradient
          overlay concentrated near the bottom. Card content (number +
          small Gold rule / card title in uppercase Porcelain / small
          Gold ornament / description in Porcelain / Gold-outline
          "Découvrir" link) is absolutely positioned near the bottom
          and center-aligned. No box shadow, no radius.
       4. Under-card decorative divider — a thin Gold horizontal rule
          that fades to transparent at both ends with a centered
          figure-8 ornament (same SVG flourish used in the Footer).

   Section spacing (locked):
     Section 06 owns the 100px TOP gap to Section 05 only. No bottom
     padding — Section 07 (if any) will own its own top padding so the
     100px-top-only architecture stays locked.

   Elementor contract: the image is still a real <img> selected through
   a MEDIA content control. No inline style="background-image:..." is
   ever emitted by the widget. All visual layering lives here in the
   child-theme CSS.

   No full-bleed escape. Unlike the Hero / Section 04 dark block,
   Section 06 does not need to span the viewport width — it lives
   inside the normal centered content frame alongside the other 1140px
   sections. Global Elementor container rules are NOT touched.
   ========================================================================== */

/* ==========================================================================
   Section root
   Owns the 100px TOP gap to Section 05 only. Owns NO bottom padding.
   Wrapper width follows the canonical KB pattern:
     width: min(calc(100% - 2 * var(--kb-gutter-desktop)),
                var(--kb-content-width));
     max-width: var(--kb-content-width);
     margin-inline: auto;
   so the section is never wider than 1140px and never collides with
   narrow viewports.
   ========================================================================== */
.kb-home-universes {
    position: relative;
    width: min(
        calc(100% - 2 * var(--kb-gutter-desktop)),
        var(--kb-content-width)
    );
    max-width: var(--kb-content-width);
    margin-inline: auto;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    overflow: hidden;
    padding-top: var(--kb-section-space-desktop);
}

.kb-home-universes__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* ==========================================================================
   HEADING GROUP
   Centered editorial heading. Eyebrow sits ABOVE the two-line H2 and
   uses the same Gold hairline + Montserrat uppercase treatment as the
   other section headings. The H2 itself is a Raleway upright line
   followed by a Raleway italic accent — never a serif. text-wrap:
   balance keeps the block editorial, not "first line short, second
   line overflowing".
   ========================================================================== */
.kb-home-universes__head {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Eyebrow — Montserrat 11–12px / 500 / uppercase / Gold / .18em.
   The same Gold hairline treatment used in the other KB sections:
   thin Gold rule on each side of the text, sitting on the same
   baseline, so the eyebrow reads as a numbered editorial chapter
   mark. */
.kb-home-universes__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
}

.kb-home-universes__eyebrow-text {
    display: inline-block;
}

/* H2 — Raleway display, two lines, NO serif.
   Both lines: Raleway upright, 44px, 300, Ink (locked home
   typography spec). Line 2 no longer italic, no longer Gold —
   unified with line 1. */
.kb-home-universes__title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.005em;
    text-wrap: balance;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.kb-home-universes__title-line-1 {
    display: block;
    color: var(--kb-ink);
}

.kb-home-universes__title-line-2 {
    display: block;
    font-style: normal;
    font-weight: 300;
    /* Unified with line 1 per the project NEVER-ITALIC rule. */
    color: var(--kb-ink);
    margin-top: 0.04em;
}

/* ==========================================================================
   THREE-CARD ROW
   Single CSS grid, three equal columns, ~1–2px visual gap (cards sit
   flush against each other with a single hairline visible from the
   overflow:hidden of the row; the perceived divider is the natural
   seam between the three tall editorial images). The row fills the
   entire 1140px section width — no inner max-width cap, so each
   card is exactly 1140 / 3 = 380px wide.

   The whole row is ONE reveal object (the data-kb-reveal attribute
   is on .kb-home-universes__row, not on individual cards).
   ========================================================================== */
.kb-home-universes__row {
    margin-top: 56px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Cards sit flush against each other (gap:0) so the row fills
       1140px exactly. A single hairline divider appears between
       cards from the natural seam between the three tall editorial
       photographs. */
    gap: 0;
    align-items: stretch;
}

/* ==========================================================================
   CARD
   position:relative + overflow:hidden so the absolute-positioned
   <img> + overlay + content all live inside the card's 600px height.
   No radius (per design system). No box shadow.

   Exact desktop card width is 1140 / 3 = 380px and exact card
   height is 600px (within the spec's 560–620px target). All three
   cards are EXACTLY the same height (the grid's
   align-items:stretch + the fixed card height enforce this).
   ========================================================================== */
.kb-home-universes__card {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
}

/* --------------------------------------------------------------------------
   CARD IMAGE — must fill 100% of the card on every breakpoint.
   ------------------------------------------------------------
   Root cause of the previous empty space: the global reset
   `img { height: auto }` in assets/css/base.css was silently
   defeating the per-class `height: 100%` rule inside certain
   Elementor wrapper contexts, letting the <img> collapse to its
   intrinsic aspect ratio and exposing the dark card background
   around the photo.

   The fix below is bulletproof:
     - figure wrapper: absolute, inset:0, no padding/margin/border,
       overflow:hidden, min-height:100% as a safety net.
     - <img>: width 100% / height 100% / object-fit:cover, with
       !important on the sizing to defeat the global `height:auto`
       and any third-party overrides. min-width/min-height are also
       set so the image stretches even if a parent ever loses its
       computed height.
   No radius, no box-shadow, no padding — just a clean image that
   crops slightly to fill the entire card area.
   -------------------------------------------------------------------------- */
.kb-home-universes__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    z-index: 0;
    display: block;
    line-height: 0;
}

.kb-home-universes__media-img {
    display: block;
    /* !important defeats the global `img { height: auto }` reset in
       base.css and any third-party rule. Width / height / object-fit
       are the only three properties the image needs to fill 100%. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    border: 0;
    /* Subtle image zoom on real hover devices only — scale(1) →
       scale(1.02) over 800ms with the canonical reveal easing.
       Never translates, lifts, or shadows the card. */
    transform: scale(1);
    transform-origin: center center;
    transition: transform 850ms var(--kb-reveal-easing);
}

/* Placeholder surface for the editor canvas / pre-asset state. A
   soft Bordeaux→Ink wash keeps the card from rendering as an empty
   void while waiting for a real photograph. Sits BEHIND the image
   (which is then on top of it via object-fit:cover) and is never
   visible once the asset is in place. */
.kb-home-universes__media--placeholder {
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

/* --------------------------------------------------------------------------
   DARK IMAGE OVERLAY
   Restrained vertical gradient that concentrates the dark wash near
   the bottom of the card so the editorial photograph stays warm
   and natural at the top, and Porcelain text remains comfortably
   readable near the bottom. Does NOT completely darken the image.

   Per spec:
     linear-gradient(
         to top,
         rgba(31,25,25,.80) 0%,
         rgba(31,25,25,.34) 45%,
         rgba(31,25,25,.06) 72%,
         transparent 100%
     )
   Implemented as a separate absolutely-positioned <span> on top of
   the image (z-index 1) and BELOW the card content (z-index 2) so
   the overlay never bleeds into the text legibility. */
.kb-home-universes__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(31, 25, 25, 0.80) 0%,
        rgba(31, 25, 25, 0.34) 45%,
        rgba(31, 25, 25, 0.06) 72%,
        transparent 100%
    );
}

/* --------------------------------------------------------------------------
   CARD CONTENT
   Absolutely positioned near the BOTTOM of the card, center-aligned,
   with comfortable left/right padding (~32px) so the content never
   touches the card edges. z-index 2 — above the image + overlay. */
.kb-home-universes__content {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 34px;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    color: var(--kb-porcelain);
}

/* --------------------------------------------------------------------------
   CARD NUMBER
   Raleway 21px / 300 / Porcelain. The leading visual anchor for
   each card. A small Gold horizontal rule sits between the number
   and the title to echo the section's editorial chapter-mark
   treatment. */
.kb-home-universes__num {
    font-family: var(--kb-font-display);
    font-size: 21px;
    font-weight: 300;
    line-height: 1;
    color: var(--kb-porcelain);
    letter-spacing: 0.04em;
}

.kb-home-universes__num-rule {
    display: block;
    width: 24px;
    height: 1px;
    background-color: var(--kb-gold);
    opacity: 0.85;
    margin: 14px auto 0;
}

/* --------------------------------------------------------------------------
   CARD TITLE
   Raleway 26px / 400 / uppercase / Porcelain. Tracking ~.04em —
   restrained editorial uppercase, never dramatic. NO serif. */
.kb-home-universes__card-title {
    margin: 14px 0 0 0;
    font-family: var(--kb-font-display);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kb-porcelain);
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   CARD ORNAMENT
   Tiny figure-8 / infinity flourish (same SVG used in the Footer)
   between the title and the description. Purely presentational —
   aria-hidden, stroke-only, currentColor (Gold). */
.kb-home-universes__card-ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 10px;
    margin-top: 14px;
    color: var(--kb-gold);
    opacity: 0.95;
    line-height: 0;
}

.kb-home-universes__card-ornament-svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   CARD DESCRIPTION
   Montserrat 14px / line-height 1.7 / Porcelain. Capped at ~280px
   max-width and centered so the wrap reads as an editorial body
   paragraph, not a full-width text block. */
.kb-home-universes__desc {
    margin: 14px auto 0;
    max-width: 280px;
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-porcelain);
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   "DÉCOUVRIR" CARD LINK
   Restrained Gold-outline button. NOT a primary CTA — a navigational
   card link. Height ~48–50px, padding-inline 24px, Montserrat 12px /
   500 / uppercase / .12em, transparent ground, 1px Gold border,
   Gold text. Radius:0. No shadow. */
.kb-home-universes__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    height: 48px;
    padding-inline: 24px;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    color: var(--kb-gold);
    border: 1px solid var(--kb-gold);
    border-radius: var(--kb-radius);
    cursor: pointer;
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

.kb-home-universes__link-label {
    display: inline-block;
}

/* Canonical Gold hover interaction: gold ground, gold border, ink
   text. Only on real hover devices. */
@media (hover: hover) and (pointer: fine) {
    .kb-home-universes__link:hover {
        background-color: var(--kb-gold);
        border-color: var(--kb-gold);
        color: var(--kb-ink);
    }

    /* Subtle image zoom on real hover devices only — scale(1) →
       scale(1.02) over 800ms. Never translates, lifts, or shadows
       the card. */
    .kb-home-universes__card:hover .kb-home-universes__media-img {
        transform: scale(1.02);
    }
}

.kb-home-universes__link:active {
    background-color: var(--kb-gold);
    border-color: var(--kb-gold);
    color: var(--kb-ink);
}

.kb-home-universes__link:focus-visible {
    outline: 2px solid var(--kb-gold);
    outline-offset: 4px;
}

.kb-home-universes__link:visited {
    color: var(--kb-gold);
    border-color: var(--kb-gold);
}

/* ==========================================================================
   UNDER-CARD DECORATIVE DIVIDER — REMOVED
   The hairline + mirrored-loop ornament that previously sat below the
   three cards has been deleted from the widget markup. The selector
   rules that targeted it have been removed from the stylesheet
   alongside. This block intentionally defines nothing.
   ========================================================================== */

/* ==========================================================================
   Tablet (≤ 1199px)
   The centered 1140px wrapper still applies (it's the canonical KB
   pattern). The H2 scales to 42px. Cards compress in height to 540px
   and content padding tightens slightly.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-home-universes {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-home-universes__row {
        margin-top: 48px;
    }

    .kb-home-universes__title {
        font-size: 44px;
    }

    .kb-home-universes__card {
        height: 540px;
    }

    .kb-home-universes__content {
        left: 28px;
        right: 28px;
        bottom: 30px;
    }

    .kb-home-universes__card-title {
        font-size: 24px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px) — single-column editorial stack
   Per the spec: heading first, then a single-column stack of the
   three cards (Couture Mariage / Tenues d'Occasion / Daywear Sur
   Mesure). Each card stays large / editorial (~520px tall) and
   sits inside the 20px mobile gutters with a 18px gap between
   cards. No horizontal overflow.

   The image hover zoom is explicitly disabled on touch devices to
   prevent sticky-hover artifacts.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-home-universes {
        padding-top: var(--kb-section-space-mobile);
        padding-inline: 0;
    }

    .kb-home-universes__head {
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-home-universes__eyebrow {
        font-size: 11px;
        gap: 10px;
        justify-content: flex-start;
    }

    .kb-home-universes__head {
        text-align: left;
        align-items: flex-start;
    }

    .kb-home-universes__title {
        font-size: 36px;
        line-height: 1.08;
        text-align: left;
        align-items: flex-start;
    }

    .kb-home-universes__row {
        margin-top: 40px;
        grid-template-columns: 1fr;
        /* 18px sits in the spec's 16–20px gap range so the three
           stacked cards read as a clean editorial column. */
        gap: 18px;
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-home-universes__card {
        height: 520px;
    }

    .kb-home-universes__content {
        left: 24px;
        right: 24px;
        bottom: 28px;
    }

    .kb-home-universes__num {
        font-size: 20px;
    }

    .kb-home-universes__num-rule {
        width: 22px;
        margin-top: 12px;
    }

    .kb-home-universes__card-title {
        font-size: 26px;
        margin-top: 12px;
    }

    .kb-home-universes__card-ornament {
        margin-top: 12px;
    }

    .kb-home-universes__desc {
        margin-top: 12px;
    }

    .kb-home-universes__link {
        margin-top: 20px;
        height: 48px;
    }

    /* Disable sticky image hover zoom on touch devices. The CSS
       already gates the hover styles behind
       (hover: hover) and (pointer: fine), so this is a safety net
       to keep the cards visually quiet on touch. */
    .kb-home-universes__card:hover .kb-home-universes__media-img {
        transform: scale(1);
    }
}

/* Tablet (768–1024px) — middle point between desktop and mobile.
   Only semantic typography: title 40px. */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-home-universes__title {
        font-size: 40px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 06
   ------------------------------------------------------------
   Per the spec, two discrete reveal groups:
     - heading: fade-up ~20px, 900ms
     - cards row: fade-up ~22px, 1000ms, delay 120ms (the whole
       row is ONE reveal object; no per-card stagger)
   The decorative divider is part of the row's content flow and
   rides with the cards (it has no data-kb-reveal attribute of its
   own, so it remains visible immediately).
   ========================================================================== */
.kb-home-universes__head[data-kb-reveal="fade-up"] {
    transition-delay: 0ms;
    transition-duration: 900ms;
    --kb-reveal-distance: 20px;
}

.kb-home-universes__row[data-kb-reveal="fade-up"] {
    transition-delay: 120ms;
    transition-duration: 1000ms;
    --kb-reveal-distance: 22px;
}

/* Mobile: same architecture, shorter distance / duration. */
@media (max-width: 767px) {
    .kb-home-universes__head[data-kb-reveal="fade-up"],
    .kb-home-universes__row[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
    }
}