/* ==========================================================================
   KB Home Savoir-Faire (Section 08) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-home-savoirfaire. All values driven by tokens.css.

   Composition (final):
     Centered 1140px editorial section. NO full-bleed breakout, NO
     100vw, NO negative viewport margins. The section is the
     canonical 1140px content width and owns the 100px TOP gap to
     the section above (Section 07) only — no bottom padding, so
     the next section owns its own top spacing.

     Inner composition: vertical stack of two groups, both inside
     the 1140px content frame.
       TOP — 2-column grid (45fr copy / 55fr 4-tile mosaic).
             align-items: stretch, so the right mosaic fills 100%
             of the left copy/stats block height. The 4-tile
             mosaic is a 72fr / 28fr two-column grid (2 rows):
               Row 1 → 1 wide image + 1 narrow image
               Row 2 → 1 wide image + 1 narrow image
       BOTTOM — full-width 5-tile row, 5 equal 1fr columns
             across the same 1140px section width. Begins at the
             same LEFT edge as the copy block (NOT viewport
             full-bleed).

     Each tile is a real <img> (object-fit:cover) with a small
     uppercase Porcelain label at the bottom-left and a 1px
     Porcelain hairline above the label (purely structural,
     not decoration on the eyebrow).

   Typography contract (strict, per project rules):
     - Eyebrow: Montserrat 12px / 500 / uppercase / 0.18em / Gold.
     - H2:      Raleway, non-italic, ENTIRELY Ink.
     - Body:    Montserrat, Ink.
     - Stats:   Raleway display number (Ink) + Montserrat label (Ink).
     - Labels:  Montserrat 11px / 500 / uppercase / 0.18em / Porcelain.
     No serif anywhere. No italic anywhere. No Gold in the title.
     No decorative eyebrow line. No decorative star. No title
     underline. No fancy ornaments.

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

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 08
   ------------------------------------------------------------
   The Elementor container that holds this section is reset to
   padding 0 / width 100% so our own section root is the single
   source of truth for the outer dimensions. Mirrors the same
   escape used by the other KB sections (Vision / Process /
   Universes).
   ========================================================================== */
.e-con:has(.kb-home-savoirfaire) {
    --container-default-width: 100% !important;
    --container-max-width: 100% !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
}

.e-con:has(.kb-home-savoirfaire) > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    --container-default-padding: 0px !important;
    --container-default-padding-block: 0px !important;
    --container-default-padding-inline: 0px !important;
}

/* ==========================================================================
   Section root
   Owns the 100px TOP gap to Section 07 only. Owns NO bottom padding.
   ========================================================================== */
.kb-home-savoirfaire {
    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);
}

/* ==========================================================================
   Inner composition — vertical stack of two groups
     1. TOP — horizontal 2-column grid (copy + 4-image mosaic).
            align-items: stretch so the right mosaic fills 100%
            of the left copy/stats block height.
     2. BOTTOM — full-width 5-tile row, spans the same 1140px
            section width as the copy block (NOT viewport full-
            bleed). Begins at the same left edge as the text.

   The 24px desktop gap between the top columns sits inside the
   same --kb-grid-gap-desktop token the other KB sections use.
   ========================================================================== */
.kb-home-savoirfaire__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
}

.kb-home-savoirfaire__top {
    width: 100%;
    display: grid;
    grid-template-columns: 45fr 55fr;
    column-gap: var(--kb-grid-gap-desktop);
    /* stretch → the right mosaic fills 100% of the left copy
       block height (eyebrow + H2 + body + stats). */
    align-items: stretch;
}

/* ==========================================================================
   LEFT COLUMN — editorial copy
   Single flex column that holds eyebrow / H2 / body / stats as
   ONE reveal object (the data-kb-reveal sits on the wrapper, not
   on its children). The wrapper is anchored to the top of its
   grid cell so the eyebrow starts ~0px from the section top.
   ========================================================================== */
.kb-home-savoirfaire__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Eyebrow — uses the canonical .kb-section-eyebrow primitive
   defined in base.css (12px / 500 / uppercase / 0.18em / Gold).
   Local override: left-align and a slightly smaller bottom
   margin (~20px desktop, ~18px mobile) so the gap to the H2
   sits in the project's 18-24px spec range. NO leading rule,
   NO trailing rule — the eyebrow is plain Gold typography on
   the Porcelain ground. */
.kb-home-savoirfaire__eyebrow {
    text-align: left;
    margin-bottom: 20px;
}

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

/* H2 — Raleway display, three lines, ENTIRELY non-italic, ENTIRELY
   Ink. No Gold word, no serif, no italic, no decorative underline.
   text-wrap: balance keeps the three-line block editorial rather
   than "first line short, last line overflowing". */
.kb-home-savoirfaire__title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    text-wrap: balance;
    /* The whole H2 is one consistent heading — never per-line
       colour swap, never italic, never Gold. */
}

.kb-home-savoirfaire__title em,
.kb-home-savoirfaire__title i {
    font-style: normal;
    color: var(--kb-ink);
}

/* Body — Montserrat 16px / line-height 1.7 / Ink. Restrained
   editorial paragraph that lives ~24px below the H2. */
.kb-home-savoirfaire__body {
    margin: 24px 0 0 0;
    max-width: 440px;
    font-family: var(--kb-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-ink);
    text-wrap: pretty;
}

/* ==========================================================================
   STATS — three restrained editorial stats with thin vertical
   separators. The separators are CONTENT STRUCTURE (a 1px Ink
   divider on the inner edge of stat #2 and stat #3), not eyebrow
   decoration, and the spec explicitly allows them.

   The stats row is a single flex row with a 1px Ink vertical rule
   between each pair. Each stat is a column: big Raleway number
   (Ink) + small Montserrat label (Ink).
   ========================================================================== */
.kb-home-savoirfaire__stats {
    margin-top: 44px;
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 440px;
}

.kb-home-savoirfaire__stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-inline: 16px;
    color: var(--kb-ink);
}

/* First stat: no left padding so the row sits flush with the
   left edge of the body copy. */
.kb-home-savoirfaire__stat:first-child {
    padding-left: 0;
}

/* Last stat: no right padding. */
.kb-home-savoirfaire__stat:last-child {
    padding-right: 0;
}

/* Thin vertical separator between stats. The divider is
   structural (1px solid Ink at low opacity) — not a decorative
   eyebrow line. It sits flush on the left edge of stat #2 and
   stat #3. */
.kb-home-savoirfaire__stat + .kb-home-savoirfaire__stat {
    border-left: 1px solid var(--kb-ink-divider);
}

.kb-home-savoirfaire__stat-number {
    font-family: var(--kb-font-display);
    font-size: 40px;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
}

.kb-home-savoirfaire__stat-label {
    margin-top: 10px;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--kb-ink);
    text-wrap: balance;
}

/* ==========================================================================
   TOP MOSAIC — 4-tile editorial mosaic beside the copy block
   2-column CSS grid with a 72fr / 28fr ratio so the left
   "wide" image stays dominant while the right "narrow" image
   is visibly wider than the previous 4fr slice. Two equal
   rows. Each tile is a real <img> (object-fit:cover) that
   fills 100% of its grid cell — no fixed pixel heights, the
   right column auto-stretches to the left copy block height
   via the parent grid's align-items: stretch.

   The whole top mosaic is ONE reveal object (data-kb-reveal
   on the wrapper). The tiles are NOT individually revealed.
   ========================================================================== */
.kb-home-savoirfaire__mosaic--top {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 72fr) minmax(0, 28fr);
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "lg-a sm-a"
        "lg-b sm-b";
    gap: 8px;
}

/* ==========================================================================
   BOTTOM MOSAIC — 5-tile full-width editorial row
   Owns its own row, spans the full 1140px section width (NOT
   viewport full-bleed) and starts at the same left edge as
   the copy block above. The five tiles are equal 1fr columns
   so the row reads as a clean editorial strip.

   The whole bottom mosaic is ONE reveal object. The tiles
   are NOT individually revealed.
   ========================================================================== */
.kb-home-savoirfaire__mosaic--bottom {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 180px;
    grid-template-areas: "xs-a xs-b xs-c xs-d xs-e";
    gap: 8px;
}

/* Each tile is a relative figure that holds the <img> (absolutely
   positioned, object-fit:cover), a 1px Porcelain hairline above
   the label, and the small uppercase Porcelain label. No radius,
   no shadow, no border. */
.kb-home-savoirfaire__tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
    color: var(--kb-porcelain);
}

.kb-home-savoirfaire__tile--lg-a { grid-area: lg-a; }
.kb-home-savoirfaire__tile--sm-a { grid-area: sm-a; }
.kb-home-savoirfaire__tile--lg-b { grid-area: lg-b; }
.kb-home-savoirfaire__tile--sm-b { grid-area: sm-b; }
.kb-home-savoirfaire__tile--xs-a { grid-area: xs-a; }
.kb-home-savoirfaire__tile--xs-b { grid-area: xs-b; }
.kb-home-savoirfaire__tile--xs-c { grid-area: xs-c; }
.kb-home-savoirfaire__tile--xs-d { grid-area: xs-d; }
.kb-home-savoirfaire__tile--xs-e { grid-area: xs-e; }

/* --------------------------------------------------------------------------
   TILE IMAGE — fills 100% of the tile on every breakpoint.
   The same bulletproof sizing pattern used in home-universes.css:
   the global `img { height: auto }` reset is defeated with
   !important so the photograph always fills its tile.
   -------------------------------------------------------------------------- */
.kb-home-savoirfaire__tile-img {
    display: block;
    position: absolute;
    inset: 0;
    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;
    transform: scale(1);
    transform-origin: center center;
    transition: transform 850ms var(--kb-reveal-easing);
}

.kb-home-savoirfaire__tile-placeholder {
    position: absolute;
    inset: 0;
    display: block;
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

/* Thin 1px Porcelain hairline that sits just above the label.
   This is a structural element of the tile (a divider between
   the image and the label), NOT an eyebrow decoration. It is
   24px wide, low opacity, anchored to the bottom-left of the
   tile.

   Position note (image label readability):
   Wrapped two-line labels ("GESTES PRÉCIEUX" / "FINITIONS
   IRRÉPROCHABLES") reach further up from the bottom of the
   tile than a one-line label. The rule is therefore anchored
   to bottom: 56px so it always sits ABOVE the label, with a
   consistent ~10px breathing gap, regardless of whether the
   label wraps onto one or two lines. No overlap. */
.kb-home-savoirfaire__tile-rule {
    position: absolute;
    left: 18px;
    bottom: 44px;
    width: 24px;
    height: 1px;
    background-color: var(--kb-porcelain);
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
}

/* Small uppercase Porcelain label at the bottom-left of each
   tile. Montserrat 11px / 500 / uppercase / 0.18em. Restrained
   tracking, no decoration.

   A single restrained text-shadow is applied globally to ALL
   tile labels so they remain readable on both light and dark
   parts of the underlying photograph. The shadow is subtle
   (~4px blur, 55% black) and does not introduce any dark
   background box, heavy halo, or visual ornament — it is a
   one-line text-shadow that lives on the existing shared
   label selector so it is applied once to every tile label. */
.kb-home-savoirfaire__tile-label {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-porcelain);
    text-wrap: balance;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

/* Subtle image zoom on real hover devices only — scale(1) →
   scale(1.02) over 850ms with the canonical reveal easing.
   Never translates, lifts, or shadows the tile. */
@media (hover: hover) and (pointer: fine) {
    .kb-home-savoirfaire__tile:hover .kb-home-savoirfaire__tile-img {
        transform: scale(1.02);
    }
}

/* ==========================================================================
   TILE-SPECIFIC FIXES — Section 08 (3 surgical overrides)
   ------------------------------------------------------------
   These rules ONLY touch the four tiles named below. The shared
   `.kb-home-savoirfaire__tile-rule` and shared
   `.kb-home-savoirfaire__tile-label` selectors are NOT modified.
   ========================================================================== */

/* 1) Tiles 1 (BRODERIES D'EXCEPTION) + 2 (GESTES PRÉCIEUX) —
   frontend-screenshot authority: render these two decorative
   lines as a visibly thicker 2px hairline so they read as
   equal weight to the other tile rules. Width / colour /
   opacity are kept identical to the standard. The shared
   `.kb-home-savoirfaire__tile-rule` selector is NOT modified. */
.kb-home-savoirfaire__tile--lg-a .kb-home-savoirfaire__tile-rule,
.kb-home-savoirfaire__tile--sm-a .kb-home-savoirfaire__tile-rule {
    width: 24px;
    height: 2px;
    background-color: var(--kb-porcelain);
    opacity: 0.85;
}

/* 2) Tiles 2 (GESTES PRÉCIEUX) + 9 (FINITIONS IRRÉPROCHABLES) —
   both have wrapped two-line labels. Lift ONLY these two rules
   so the line-to-text visual gap matches the correctly spaced
   two-line tiles (MATIÈRES NOBLES, SÉLECTION MINUTIEUSE,
   COUTURE EXPERTE). The shared `bottom` value is NOT changed. */
.kb-home-savoirfaire__tile--sm-a .kb-home-savoirfaire__tile-rule,
.kb-home-savoirfaire__tile--xs-e .kb-home-savoirfaire__tile-rule {
    bottom: 60px;
}

/* 3) Tile 4 (COUPE PARFAITE) — bright image area. Locally
   stronger label text-shadow plus a subtle dark gradient
   behind the bottom label ONLY (the rest of the image stays
   untouched). The gradient is a single 64px-tall
   black→transparent fade with low opacity, stacked between
   the image (z-auto) and the label / rule (z-index 2). */
.kb-home-savoirfaire__tile--sm-b .kb-home-savoirfaire__tile-label {
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.kb-home-savoirfaire__tile--sm-b::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, .35) 0%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ==========================================================================
   Tablet (≤ 1199px)
   The centered 1140px wrapper still applies. The H2 scales to
   ~38px. The mosaic row heights compress to 170px / 170px / 140px.
   The gap between mosaic tiles tightens to 6px.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-home-savoirfaire {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-home-savoirfaire__inner {
        gap: 24px;
    }

    .kb-home-savoirfaire__title {
        font-size: 38px;
    }

    .kb-home-savoirfaire__body {
        font-size: 15px;
    }

    .kb-home-savoirfaire__stats {
        margin-top: 36px;
    }

    .kb-home-savoirfaire__stat-number {
        font-size: 36px;
    }

    .kb-home-savoirfaire__stat-label {
        font-size: 12px;
    }

    .kb-home-savoirfaire__mosaic--top {
        gap: 6px;
    }

    .kb-home-savoirfaire__mosaic--bottom {
        grid-auto-rows: 160px;
        gap: 6px;
    }
}

/* ==========================================================================
   Tablet portrait (≤ 1023px) — single-column stack
   The top row collapses: copy block above, 4-tile mosaic
   below. The bottom 5-tile mosaic keeps its own full-width
   row below. Clean vertical rhythm, no horizontal overflow.
   ========================================================================== */
@media (max-width: 1023px) {
    .kb-home-savoirfaire__top {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px) — single-column editorial stack
   The section switches to a true mobile single-column composition:
   copy block first, then a stacked column of 4 top mosaic tiles,
   then a stacked column of 5 bottom mosaic tiles. Each tile uses
   a fixed aspect ratio (~4:3) so the section reads as a clean
   editorial scroll.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-home-savoirfaire {
        padding-top: var(--kb-section-space-mobile);
    }

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

    .kb-home-savoirfaire__eyebrow {
        font-size: 11px;
        margin-bottom: 18px;
    }

    .kb-home-savoirfaire__title {
        font-size: 36px;
        line-height: 1.14;
    }

    .kb-home-savoirfaire__body {
        margin-top: 20px;
        font-size: 15px;
    }

    .kb-home-savoirfaire__stats {
        margin-top: 32px;
        max-width: none;
    }

    .kb-home-savoirfaire__stat-number {
        font-size: 32px;
    }

    .kb-home-savoirfaire__stat-label {
        font-size: 11px;
        line-height: 1.4;
    }

    .kb-home-savoirfaire__mosaic--top {
        padding-inline: var(--kb-gutter-mobile);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "lg-a"
            "sm-a"
            "lg-b"
            "sm-b";
        gap: 12px;
    }

    .kb-home-savoirfaire__mosaic--bottom {
        padding-inline: var(--kb-gutter-mobile);
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        grid-template-areas:
            "xs-a"
            "xs-b"
            "xs-c"
            "xs-d"
            "xs-e";
        gap: 12px;
    }

    .kb-home-savoirfaire__tile {
        aspect-ratio: 4 / 3;
    }

    .kb-home-savoirfaire__tile-rule {
        left: 16px;
        bottom: 42px;
        width: 20px;
    }

    /* Mobile companion to the desktop tile-specific fix #2:
       lift the 2-line-label rule on GESTES + FINITIONS so the
       line-to-text gap stays consistent with the other
       correctly spaced two-line tiles. */
    .kb-home-savoirfaire__tile--sm-a .kb-home-savoirfaire__tile-rule,
    .kb-home-savoirfaire__tile--xs-e .kb-home-savoirfaire__tile-rule {
        bottom: 54px;
    }

    .kb-home-savoirfaire__tile-label {
        left: 16px;
        right: 16px;
        bottom: 14px;
        font-size: 10px;
        letter-spacing: 0.16em;
    }

    /* Disable sticky image hover zoom on touch devices. */
    .kb-home-savoirfaire__tile:hover .kb-home-savoirfaire__tile-img {
        transform: scale(1);
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 08
   ------------------------------------------------------------
   Per spec, the section uses three discreet reveal objects:
     - left copy group:  fade-up ~20px, 900ms,    delay 0ms
     - top 4-tile mosaic: fade-up ~22px, 1000ms,  delay 120ms
     - bottom 5-tile row: fade-up ~22px, 1000ms,  delay 220ms
   The stats and individual tiles ride with their parent reveal
   group (no per-element stagger) so the entrance stays subtle
   and editorial.
   ========================================================================== */
.kb-home-savoirfaire__copy[data-kb-reveal="fade-up"] {
    transition-delay: 0ms;
    transition-duration: 900ms;
    --kb-reveal-distance: 20px;
}

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

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

@media (max-width: 767px) {
    .kb-home-savoirfaire__copy[data-kb-reveal="fade-up"],
    .kb-home-savoirfaire__mosaic--top[data-kb-reveal="fade-up"],
    .kb-home-savoirfaire__mosaic--bottom[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
    }
}

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