/* ==========================================================================
   KB Experience Section 04 / L'Intention — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-experience-intention. All values driven by tokens.css.

   Composition (final):
     Porcelain section ground. Centered 1140px content frame.
     Incoming section spacing is 100px top (desktop), 80px top (tablet),
     64px top (mobile). No bottom padding — the next section owns its
     own top spacing.

     The layout is a single-column vertical stack. The DOM order
     matches the locked mobile order naturally (no CSS-order hacks
     needed on mobile). The items are:

       1. .kb-experience-intention__eyebrow  (centered)
       2. .kb-experience-intention__title    (centered)
       3. .kb-experience-intention__visual   (full 1140px width)
            (main + small-left + large-left-sketch + bordeaux + right-sketch)
       4. .kb-experience-intention__notes    (3-column row)
            (note 01 + note 02 --center + note 03 --strong)

     On DESKTOP / TABLET the layout is a single-column vertical
     stack: centered header at the top, then the full-width
     visual collage (1140px content frame), then the 3-column
     notes row. The five collage images are absolutely
     positioned inside the visual wrapper to recreate the
     editorial collage. The notes form a 3-column row below
     the collage, separated by subtle 1px Gold vertical
     dividers.

     The reference image controls the COMPOSITION (image placement,
     overlap logic, hierarchy, asymmetry, negative space). The
     project design system controls the STYLE (Porcelain ground,
     Raleway / Montserrat typography, Gold / Bordeaux / Ink palette,
     no serif, no italic, no icon, no radius, no shadow, no
     decorative line under the title, no card, no box, no CTA,
     no arrow, no botanical line art).

     Desktop (1140px content width):
       HEADER (full width, centered horizontally):
         - Gold eyebrow (Montserrat / 12px / 500 / uppercase / 0.18em)
         - Two-line Raleway title (Ink, light, non-italic)
         - Both items text-align: center, items aligned to center

       VISUAL (full 1140px width, immediately below header):
         - One dominant LANDSCAPE main image (~700 × 460px)
           centered horizontally with controlled space on the
           left and right for the sketches to overlap
         - One smaller LANDSCAPE paper detail (~180 × 130px)
           tucked behind the upper-left of the large sketch
         - One LARGE vertical sketch (~240 × 340px) overlapping
           the left side of the main image
         - One Bordeaux material detail (~170 × 220px) overlapping
           the lower-right of the main image
         - One TALL vertical sketch (~220 × 360px) extending the
           composition toward the far right
         - Five images have DIFFERENT scale, ratio, and alignment
           — NEVER same size, NEVER grid-aligned
         - All wrappers are transparent (no dark placeholder
           rectangles behind any image)

       NOTES ROW (full 1140px content width) — editorial row.
         - 3 columns (~0.95fr / 1.15fr / 0.9fr) with subtle 1px
           Gold vertical dividers between them
         - All Montserrat / Ink / restrained / non-italic
         - The third note has a slightly stronger weight to close
           the row
         - Sits 32px below the visual collage (no dead space)

   Section spacing (locked):
     100px desktop / 80px tablet / 64px mobile. TOP-ONLY.
     No bottom padding (the next section owns its own top spacing).

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

   No serif. No italic. No "Maison" wording. No decorative eyebrow
   line. No title underline. No flower / star ornament. No cards.
   No boxes. No icons. No radius. No border. No shadow on images.
   No CTA. No arrows. The vertical dividers between the bottom
   notes are 1px subtle Gold structural separators — they are NOT
   decorative borders.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 04
   ------------------------------------------------------------
   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.
   ========================================================================== */
.e-con:has(.kb-experience-intention) {
    --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-experience-intention) > .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 — 1140px centered, 100px top spacing.
   Porcelain ground. Ink text. No bottom padding.
   ========================================================================== */
.kb-experience-intention {
    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-experience-intention__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ==========================================================================
   LAYOUT — desktop single-column stack.
   The layout is a vertical stack of three full-width items:
   header (centered) / visual collage (full width) / notes row.
   No 2-column grid. No left/right column. The visual collage
   spans the full 1140px content width and the header sits
   centered above it.
   On mobile the items naturally fall into the locked mobile
   order (header / visual / notes) with no CSS-order hacks.
   ========================================================================== */
.kb-experience-intention__layout {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}

/* ---- Item width / area assignments (no grid areas anymore) ---- */
.kb-experience-intention__eyebrow,
.kb-experience-intention__title,
.kb-experience-intention__visual,
.kb-experience-intention__notes {
    width: 100%;
    max-width: 100%;
}

.kb-experience-intention__visual {
    min-width: 0;
    min-height: 520px;
    position: relative;
    margin-top: 44px;
}

.kb-experience-intention__notes {
    margin-top: 32px;
}

/* ==========================================================================
   EYEBROW
   Reuses the canonical .kb-section-eyebrow primitive (base.css) for
   Montserrat / 12px / 500 / uppercase / 0.18em / Gold. Centered
   horizontally inside the centered header. NO decorative line, NO
   ornament, NO underline.
   ========================================================================== */
.kb-experience-intention__eyebrow {
    margin: 0 0 28px 0;
    text-align: center;
}

/* ==========================================================================
   TITLE
   Raleway, Ink, non-italic, light weight. Each line is a
   structural <span> so the line breaks are part of the rendered
   structure (not styled with <br>). Two-line editorial title.
   Centered horizontally. Items center so the line blocks align
   to the center axis.
   ========================================================================== */
.kb-experience-intention__title {
    margin: 0 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: center;
    text-wrap: balance;
}

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

.kb-experience-intention__title-line {
    display: block;
}

/* ==========================================================================
   VISUAL COLLAGE — full-width row.
   The visual row is a single positioned wrapper that hosts the
   five layered images. The wrapper reserves REAL layout space
   (its min-height) for every overlapping image so nothing escapes
   the section and nothing collides with the notes row. The
   wrapper is FULL WIDTH (matches the 1140px content frame) so
   the collage spans the entire section. NO dark fill behind
   any image — all wrappers are transparent. The Bordeaux /
   Ink placeholder rectangles that previously sat behind the
   images are REMOVED.
   ========================================================================== */

/* Main atelier image — dominant landscape. Centered horizontally
   with controlled space on the left and right for the sketches
   to overlap. */
.kb-experience-intention__main {
    position: absolute;
    top: 30px;
    left: 200px;
    width: 700px;
    height: 460px;
    max-width: calc(100% - 200px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    z-index: 2;
}

.kb-experience-intention__main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* (Small left detail image has been removed from this section.
   The large left sketch now stands alone on the left side of
   the composition. No placeholder, no empty wrapper, no
   reserved space.) */

/* Large left sketch — strong vertical secondary. Overlaps the
   left side of the main atelier image. Sits IN FRONT of the
   small left detail. */
.kb-experience-intention__sketch--left {
    position: absolute;
    top: 90px;
    left: 30px;
    width: 240px;
    height: 340px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    z-index: 3;
}

.kb-experience-intention__sketch--left img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Bordeaux detail — accent overlapping the lower-right of the
   main image. Sits IN FRONT of the main image but does NOT
   obscure it. Sits BEHIND the right sketch. The actual
   Bordeaux IMAGE asset remains; only the surrounding dark
   placeholder block is removed. */
.kb-experience-intention__detail--bordeaux {
    position: absolute;
    top: 280px;
    right: 220px;
    width: 170px;
    height: 220px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    z-index: 4;
}

.kb-experience-intention__detail--bordeaux img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Right sketch — tall vertical extending the composition toward
   the far right. Sits IN FRONT of everything on the right.

   HORIZONTAL: positioned so its LEFT edge overlaps the RIGHT
   edge of the main atelier image by 25px. The main image sits
   at left: 200px, width: 700px → its right edge is at x = 900px.
   The visual wrapper is 100% of the 1140px content frame, so
   `right: 45px` with width: 220px places the sketch's left edge
   at x = 875 (1140 − 45 − 220 = 875). Main image right edge is
   at x = 900, so the overlap is 900 − 875 = 25px (within the
   20–30px target). No subpixel seam.

   VERTICAL: vertically centered to the main atelier image.
   The visual wrapper is the positioning context (position:
   relative) with min-height 520px. The main image center
   is at y = 30 + 460 / 2 = 260px. The visual center is at
   y = 520 / 2 = 260px. They match — `top: 50%;
   transform: translateY(-50%)` places the sketch's vertical
   center at y = 260px, exactly aligned to the main image. */
.kb-experience-intention__sketch--right {
    position: absolute;
    top: 50%;
    right: 45px;
    width: 220px;
    height: 360px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    transform: translateY(-50%);
    z-index: 5;
}

.kb-experience-intention__sketch--right img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   EDITORIAL NOTES ROW — 3 columns with subtle Gold dividers.
   The wrapper .kb-experience-intention__notes is a 3-column
   grid. Each note is one column. The center and strong notes
   carry a 1px Gold inline-start border (a STRUCTURAL separator,
   not a decorative border). All Montserrat / Ink / non-italic.
   The third note has a slightly stronger weight to close the row.
   ========================================================================== */
.kb-experience-intention__notes {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
    column-gap: 0;
    align-items: start;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.kb-experience-intention__note {
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: pretty;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

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

.kb-experience-intention__note-line {
    display: block;
}

/* Center + strong notes — 1px subtle Gold inline-start divider
   plus a generous inline-start padding so the divider reads as
   a structural separator and not as a border stuck to the text. */
.kb-experience-intention__note--center,
.kb-experience-intention__note--strong {
    border-inline-start: 1px solid rgba(176, 143, 71, 0.45);
    padding-inline-start: 48px;
}

.kb-experience-intention__note--strong {
    font-weight: 500;
}

/* ==========================================================================
   TABLET (≤ 1199px)
   80px top spacing. Single-column stack remains. Header stays
   centered. The visual collage scales all five images
   proportionally to fit the narrower section. The notes row
   stays 3 columns but the inner column gap shrinks and the
   dividers' padding shrinks.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-experience-intention {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-experience-intention__eyebrow {
        margin-bottom: 22px;
    }

    .kb-experience-intention__title {
        font-size: 44px;
        margin-bottom: 32px;
    }

    .kb-experience-intention__visual {
        min-height: 460px;
        margin-top: 32px;
    }

    .kb-experience-intention__main {
        top: 24px;
        left: 160px;
        width: 600px;
        height: 400px;
    }

    .kb-experience-intention__sketch--left {
        top: 80px;
        left: 24px;
        width: 220px;
        height: 300px;
    }

    .kb-experience-intention__detail--bordeaux {
        top: 250px;
        right: 180px;
        width: 150px;
        height: 200px;
    }

    .kb-experience-intention__sketch--right {
        top: 44px;
        right: 24px;
        width: 190px;
        height: 310px;
    }

    .kb-experience-intention__notes {
        margin-top: 32px;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
    }

    .kb-experience-intention__note--center,
    .kb-experience-intention__note--strong {
        padding-inline-start: 36px;
    }

    .kb-experience-intention__note {
        font-size: 15px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   64px top spacing. Single column. The layout is already a
   single-column flex stack (no 2-column grid) so no layout
   reset is needed. Header stays centered. The visual collage
   is FULLY RECOMPOSED for mobile:
     - Main atelier image is the first stacked element, dominant
       and centered inside the 20px gutter
     - The small left detail sits on top of the main image's
       upper-left, peeking out
     - The large left sketch overlaps the lower-left of the main
       image
     - The Bordeaux detail overlaps the lower-right of the main
       image
     - The right sketch sits as a tall extension overlapping the
       right edge of the main image

   The visual reserves a real min-height so nothing collides
   with the notes row. The notes row becomes a single column
   with NO vertical dividers (spacing only). The three notes
   stack with 28px gaps.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-experience-intention {
        padding-top: var(--kb-section-space-mobile);
        /* Locked 20px mobile gutter on the section content
           container. All children (eyebrow, title, notes,
           and the visual collage) respect this gutter
           automatically because they sit inside the section's
           content box. */
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-experience-intention__eyebrow {
        margin-bottom: 18px;
        text-align: left;
    }

    .kb-experience-intention__title {
        font-size: 36px;
        margin-bottom: 0;
        align-items: flex-start;
        text-align: left;
    }

    /* Mobile visual wrapper. The main image is the dominant
       base of the collage and defines the wrapper's natural
       height (no more desktop-stage scaling). All three
       accent images are sized as a percentage of the main
       image's width and positioned absolutely within the
       same wrapper. Internal padding is 0 — the 20px gutter
       belongs to the section, never to the media collage. */
    .kb-experience-intention__visual {
        position: relative;
        width: 100%;
        min-height: 0;
        margin: 32px 0;
        padding: 0;
        transform: none;
        transform-origin: top center;
    }

    /* Main atelier image: cropped from the LEFT so its LEFT
       edge sits at the horizontal CENTER of the left sketch
       (left sketch is at left:0; width:35% → center at 17.5%).
       Main image now starts at left:17.5% with width:67.5%, so
       its right edge remains at 85% (preserving the right
       sketch overlap relationship unchanged). Both sketches
       now feel symmetrically attached to the main image's
       edges, with the left sketch centered on the new left
       edge of the main image.

       Height is unchanged: aspect-ratio 700 / 460 still
       derives the height from the width. */
    .kb-experience-intention__main {
        position: relative;
        top: 0;
        left: 17.5%;
        right: auto;
        width: 67.5%;
        max-width: 67.5%;
        height: auto;
        aspect-ratio: 700 / 460;
        margin: 0;
    }

    /* Large left sketch: ~35% of the main image width. Sits
       on the LEFT edge. Vertically centered on the main
       image's left edge: top: 50% + translateY(-50%) places
       the sketch's vertical center exactly at the main
       image's vertical center. z-axis overlap with the main
       image (general overlap relationship preserved). */
    .kb-experience-intention__sketch--left {
        position: absolute;
        top: 50%;
        left: 0;
        right: auto;
        width: 35%;
        height: auto;
        aspect-ratio: 240 / 340;
        transform: translateY(-50%);
        z-index: 3;
    }

    /* Right sketch: ~30% of the main image width. Sits on
       the RIGHT edge, vertically centered relative to the
       main image. Slight z-axis overlap with the main
       image. */
    .kb-experience-intention__sketch--right {
        position: absolute;
        top: 50%;
        right: 0;
        left: auto;
        width: 30%;
        height: auto;
        aspect-ratio: 220 / 360;
        transform: translateY(-50%);
        z-index: 5;
    }

    /* Bordeaux detail: hidden on mobile. Desktop keeps the
       full element untouched (its desktop rule is outside
       this media query). The Elementor control and the
       rendered <figure> stay in the DOM. */
    .kb-experience-intention__detail--bordeaux {
        display: none;
    }

    .kb-experience-intention__notes {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-top: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        padding: 0;
    }

    .kb-experience-intention__note--center,
    .kb-experience-intention__note--strong {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        text-align: left;
        font-weight: inherit;
    }

    .kb-experience-intention__note--strong {
        font-weight: 500;
    }

    .kb-experience-intention__note {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 04 Experience / L'Intention
   ------------------------------------------------------------
   The DOM order of the items naturally groups them into three
   editorial reveal groups:
     - header: eyebrow, title (2 items)
     - visual: visual composition (1 item)
     - notes: notes wrapper (1 item)
   Each group has a base data-kb-reveal="fade-up" on every item,
   with sequential delays so the items cascade in document order.
   The reveal system itself is unchanged. We only bind the
   existing fade-up behaviour + per-item delays here.
   ========================================================================== */
.kb-experience-intention__eyebrow[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 18px;
    transition-delay: 0ms;
    transition-duration: 800ms;
}

.kb-experience-intention__title[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 90ms;
    transition-duration: 1000ms;
}

.kb-experience-intention__visual[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 28px;
    transition-delay: 200ms;
    transition-duration: 1100ms;
}

.kb-experience-intention__notes[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-delay: 360ms;
    transition-duration: 1000ms;
}

@media (max-width: 767px) {
    .kb-experience-intention__eyebrow[data-kb-reveal="fade-up"],
    .kb-experience-intention__title[data-kb-reveal="fade-up"],
    .kb-experience-intention__visual[data-kb-reveal="fade-up"],
    .kb-experience-intention__notes[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
        transition-delay: 0ms;
    }
}

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