/* ==========================================================================
   KB Experience Section 03 / La Consultation — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-experience-consultation. 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.

     DOM order (flat list of 6 grid items — natural mobile order):
       1. .kb-experience-consultation__eyebrow
       2. .kb-experience-consultation__title
       3. .kb-experience-consultation__visual  (main + secondary left + secondary right + supporting block)
       4. .kb-experience-consultation__body--primary
       5. .kb-experience-consultation__body--secondary
       (no link / no CTA)

     On DESKTOP / TABLET the layout is an asymmetric 2-column grid
     driven by grid-template-areas. The eyebrow, title and both body
     paragraphs stack on the LEFT column (~360px). The visual
     composition occupies the RIGHT column. The supporting editorial
     block (small Gold eyebrow + five clean stacked Montserrat lines)
     is positioned INSIDE the visual wrapper in the negative space
     BETWEEN the two side images, so it reads as part of the collage
     rather than a detached text block at the bottom of the section.

     Desktop:
       LEFT COLUMN  (~32% / 360px) — copy column.
         - Gold eyebrow (Montserrat / 12px / 500 / uppercase / 0.18em)
         - Two-line Raleway title (Ink, light, non-italic)
         - Two restrained body paragraphs (Montserrat, Ink, ~15px)
         - No CTA / no link / no underline

       RIGHT COLUMN  (~66% / 720px) — visual composition.
         - One dominant LANDSCAPE main image (610 × 440px)
         - One smaller PORTRAIT detail overlapping the LOWER-LEFT
           of the main image (280 × 340px)
         - One smaller VERTICAL detail overlapping the RIGHT SIDE
           of the main image (200 × 280px)
         - Supporting block (Gold eyebrow + 5 stacked Montserrat
           lines) positioned BETWEEN the two side images, in the
           negative space UNDER the main image, so it is visually
           integrated into the collage

   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 link. No underline.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 03
   ------------------------------------------------------------
   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.
   ========================================================================== */
.e-con:has(.kb-experience-consultation) {
    --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-consultation) > .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-consultation {
    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-consultation__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ==========================================================================
   LAYOUT — desktop editorial composition.
   The left copy column flows in normal block layout: eyebrow, title,
   body01, body02 stack with controlled margins (32 / 32 / 24). The
   visual is absolutely positioned on the right so it does NOT
   contribute to the copy column's intrinsic height — no grid rows
   forcing vertical spread. The layout has min-height 640px to match
   the visual collage footprint.
   On mobile the visual is released from absolute positioning and
   the DOM order (eyebrow / title / visual / body01 / body02)
   naturally produces the locked mobile order.
   ========================================================================== */
.kb-experience-consultation__layout {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 640px;
}

/* Copy items: in normal flow, 360px wide on desktop. */
.kb-experience-consultation__eyebrow,
.kb-experience-consultation__title,
.kb-experience-consultation__body--primary,
.kb-experience-consultation__body--secondary {
    display: block;
    position: relative;
    width: 360px;
    max-width: 100%;
    z-index: 2;
}

/* Visual-area: absolutely positioned on the right, out of the
   copy flow. It hosts the layered visual collage AND the
   supporting block. min-height 640px matches the collage
   footprint. */
.kb-experience-consultation__visual-area {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 360px - 60px);
    max-width: 100%;
    min-width: 0;
    min-height: 640px;
    z-index: 1;
}

/* Visual: a relative fill child of the visual-area. The three
   figures are absolutely positioned INSIDE it. */
.kb-experience-consultation__visual {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 640px;
}

/* ==========================================================================
   EYEBROW
   Reuses the canonical .kb-section-eyebrow primitive (base.css) for
   Montserrat / 12px / 500 / uppercase / 0.18em / Gold.
   Eyebrow → Title gap: 32px (desktop). Tighter on tablet (18px)
   and mobile (16px).
   ========================================================================== */
.kb-experience-consultation__eyebrow {
    margin: 0 0 32px 0;
}

/* ==========================================================================
   TITLE
   Raleway, Ink, non-italic, light weight. Each line is a structural
   <span>. Title → body-01 gap: 32px (desktop). The first paragraph
   feels directly connected to the title.
   ========================================================================== */
.kb-experience-consultation__title {
    margin: 0 0 32px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    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: left;
    text-wrap: balance;
}

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

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

/* ==========================================================================
   BODY — two restrained paragraphs in normal flow.
   Body-01 → body-02 gap: 24px (desktop). The two paragraphs are
   independent elements that follow the title in normal document
   flow with a controlled, restrained gap.
   ========================================================================== */
.kb-experience-consultation__body {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    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;
}

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

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

.kb-experience-consultation__body--secondary {
    margin-top: 24px;
}

/* ==========================================================================
   VISUAL — right column collage.
   The visual column is a single positioned wrapper that hosts the
   three layered images AND the supporting block. The supporting
   block is absolutely positioned in the negative space BETWEEN
   the two side images, UNDER the main image, so it reads as an
   integrated part of the collage.
   ========================================================================== */

/* Main image — dominant landscape. Horizontally centered between
   the two lower side images (geometric midpoint), not at the
   visual center. Side image centers: left at 140 (left:0 + w:280),
   right at (visualWidth - 100) (right:0 + w:200). Midpoint =
   (140 + visualWidth - 100) / 2 = visualWidth/2 + 20. The
   transform translateX(calc(-50% + 20px)) places the main image
   center exactly at that midpoint. */
.kb-experience-consultation__main {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(calc(-50% + 20px));
    width: 610px;
    max-width: 100%;
    height: 440px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
    z-index: 1;
}

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

/* Detail — LOWER LEFT.
   Overlaps the lower-left of the main image. Pulled left of the
   main image's left edge by 24px so the detail's outer edge sits
   24px outside the main image footprint (editorial asymmetric
   overlap). Vertical position: top edge at 280px (so it overlaps
   the bottom 160px of the main image and extends ~180px below
   it). */
.kb-experience-consultation__detail--left {
    position: absolute;
    top: 280px;
    left: 0;
    width: 280px;
    height: 340px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
    z-index: 3;
}

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

/* Detail — RIGHT.
   Sits on the right side of the visual column. Vertical position:
   top edge at 240px (overlaps the lower-right ~200px of the main
   image and extends ~40px below it). Anchored to the right edge
   of the visual column. */
.kb-experience-consultation__detail--right {
    position: absolute;
    top: 240px;
    right: 0;
    width: 200px;
    height: 280px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
    z-index: 2;
}

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

/* ==========================================================================
   SUPPORTING BLOCK — positioned in the empty gap BETWEEN the
   right edge of the lower-left image and the left edge of the
   lower-right image. In LAYOUT coordinates: lower-left image
   right edge = 700, lower-right image left edge = 940, free
   gap = 240px. Support is 220px wide at left=710 → right=930,
   giving a 10px breathing gap on each side and sitting exactly
   at the midpoint of the free gap. Top=460px places it just
   below the main image's bottom edge (y=440) so it reads as
   part of the collage. z-index 4 keeps it above the side
   images. No cards, no boxes, no icons, no bullets. Pure
   typography and spacing.
   ========================================================================== */
.kb-experience-consultation__support {
    position: absolute;
    top: 460px;
    left: 710px;
    width: 220px;
    max-width: calc(100% - 730px);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    z-index: 4;
}

/* Supporting eyebrow — small Gold Montserrat uppercase tracked.
   Strictly secondary to the main section eyebrow. */
.kb-experience-consultation__support-eyebrow {
    display: block;
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 11px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--kb-gold);
}

/* Supporting list — five clean stacked Montserrat lines. No
   bullets, no icons, no cards. Controlled line spacing. */
.kb-experience-consultation__support-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

.kb-experience-consultation__support-item {
    display: block;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: pretty;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

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

/* ==========================================================================
   TABLET (≤ 1199px)
   80px top spacing. The block + absolute layout is preserved.
   Copy column narrows to 300px. Visual column scales proportionally
   (calc(100% - 336px)). The supporting block is repositioned to
   fit the narrower gap between the two side images.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-experience-consultation {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-experience-consultation__eyebrow,
    .kb-experience-consultation__title,
    .kb-experience-consultation__body--primary,
    .kb-experience-consultation__body--secondary {
        width: 300px;
    }

    .kb-experience-consultation__eyebrow {
        margin-bottom: 18px;
    }

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

    .kb-experience-consultation__body--secondary {
        margin-top: 22px;
    }

    .kb-experience-consultation__visual-area {
        width: calc(100% - 300px - 36px);
        min-height: 560px;
    }

    .kb-experience-consultation__visual {
        min-height: 560px;
    }

    .kb-experience-consultation__main {
        width: 520px;
        height: 380px;
    }

    .kb-experience-consultation__detail--left {
        top: 240px;
        left: 0;
        width: 240px;
        height: 290px;
    }

    .kb-experience-consultation__detail--right {
        top: 200px;
        right: 0;
        width: 170px;
        height: 240px;
    }

    .kb-experience-consultation__support {
        top: 400px;
        left: 596px;
        width: 200px;
        max-width: calc(100% - 280px);
        gap: 14px;
    }

    .kb-experience-consultation__support-item {
        font-size: 12px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   64px top spacing (--kb-section-space-mobile).
   20px left/right gutter (from the section's width rule:
   `width: min(100% - 2*var(--kb-gutter-desktop), 1140px)` —
   on viewports narrower than 1140px the section itself is
   100% - 40px, so 20px gutter is implicit).

   Order (locked, via flex `order` on .kb-experience-consultation__layout):
     1. __eyebrow           (order 1) — Gold uppercase
     2. __title             (order 2) — Raleway
     3. __body--primary     (order 3) — Montserrat, normal flow
     4. __body--secondary   (order 4) — Montserrat, normal flow
     5. __visual-area       (order 5) — SCALED desktop collage
     6. __support           (order 6) — normal flow after collage

   Collage scaling strategy (locked):
     The desktop image collage is treated as ONE visual stage
     (720 × 640, with the main + left detail + right detail at
     their exact desktop absolute positions). On mobile the
     visual-area becomes an aspect-ratio wrapper
     (aspect-ratio: 720 / 640) so its height is width × 640/720.
     The visual is fixed at 720 × 640, position: absolute, with
     transform: scale(calc(100% / 720px)) and transform-origin:
     top left. The visual's render exactly fills the visual-area.
     The wrapper's aspect-ratio RESERVES ONLY the scaled height
     (no phantom whitespace from the 720 × 640 box).

   The three images retain their EXACT desktop positions
     (top / left / right / width / height / z-index). The
     transform on the parent visual scales them as one unit
     so all overlaps and the geometric relationship are
     preserved. The desktop transform on the main image
     (translateX(calc(-50% + 20px))) is preserved.

   Mobile rhythm (locked):
     - eyebrow → title:           24px (margin-bottom on eyebrow)
     - title → body--primary:     32px (margin-bottom on title)
     - body--primary → body--sec: 24px (margin-bottom on body--primary)
     - body--secondary → collage: 32px (margin-bottom on body--secondary)
     - collage → support:         32px (margin-top on support)
     - support eyebrow → first:   16px (gap on support)
     - between supporting lines:  10px (gap on support-list)
   ========================================================================== */
@media (max-width: 767px) {
    .kb-experience-consultation {
        padding-top: var(--kb-section-space-mobile);
    }

    /* 20px left/right mobile gutter. The section already has
       its own viewport gutter via its width rule; this padding
       creates the INNER gutter so no text or media touches the
       section edge. */
    .kb-experience-consultation__inner {
        padding-inline: 20px;
    }

    /* Layout becomes a flex column so we can `order` the
       children into the mobile sequence (P1, P2 BEFORE the
       collage, support AFTER the collage). */
    .kb-experience-consultation__layout {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Mobile order. Margins supply the controlled vertical
       rhythm between siblings. */
    .kb-experience-consultation__eyebrow {
        order: 1;
        width: 100%;
        max-width: none;
        margin: 0 0 24px 0;
    }

    .kb-experience-consultation__title {
        order: 2;
        width: 100%;
        max-width: none;
        font-size: 36px;
        margin: 0 0 32px 0;
    }

    .kb-experience-consultation__body--primary {
        order: 3;
        width: 100%;
        max-width: none;
        margin: 0 0 24px 0;
    }

    .kb-experience-consultation__body--secondary {
        order: 4;
        width: 100%;
        max-width: none;
        margin: 0 0 32px 0;
    }

    .kb-experience-consultation__visual-area {
        order: 5;
    }

    .kb-experience-consultation__support {
        order: 6;
    }

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

    /* Visual-area — the scaling wrapper. aspect-ratio reserves
       ONLY the scaled height (no phantom whitespace from the
       720 × 640 stage). overflow: hidden clips any rounding
       artefact from the transform. container-type: inline-size
       makes this a container query container so the inner
       visual can use 100cqw to reference THIS element's width
       (NOT its own width) for the scale calculation. padding: 0
       — the gutter is on __inner, NOT on the media frame. */
    .kb-experience-consultation__visual-area {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 0;
        height: calc(100cqw * 640 / 720);
        overflow: hidden;
        container-type: inline-size;
    }

    /* Visual — the desktop stage, kept at its native 720 × 640
       size and scaled down with transform so all internal image
       positions and overlaps are preserved EXACTLY. The scale
       uses 100cqw (container query width = the visual-area's
       width = the available content width after the 20px inner
       gutter) divided by the actual stage width 720px. This
       makes the rendered collage fill the available mobile
       content width: rendered = 720 × (available / 720) =
       available. */
    .kb-experience-consultation__visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 720px;
        height: 640px;
        max-width: 720px;
        min-width: 0;
        min-height: 0;
        transform-origin: top left;
        transform: scale(calc(100cqw / 720px));
    }

    /* Main image — EXACT desktop position preserved, scales
       with the parent visual. The translateX(calc(-50% + 20px))
       is the desktop centering and is kept. */
    .kb-experience-consultation__main {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(calc(-50% + 20px));
        width: 610px;
        height: 440px;
        max-width: 610px;
        z-index: 1;
    }

    /* Detail LOWER-LEFT — EXACT desktop position preserved. */
    .kb-experience-consultation__detail--left {
        position: absolute;
        top: 280px;
        left: 0;
        right: auto;
        width: 280px;
        height: 340px;
        z-index: 3;
    }

    /* Detail RIGHT — EXACT desktop position preserved. */
    .kb-experience-consultation__detail--right {
        position: absolute;
        top: 240px;
        left: auto;
        right: 0;
        width: 200px;
        height: 280px;
        z-index: 2;
    }

    /* Supporting block — released from absolute positioning,
       full available width inside the 20px gutter, in NORMAL
       FLOW below the scaled collage. 32px breathing room above,
       16px between eyebrow and first line, 10px between lines. */
    .kb-experience-consultation__support {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        margin: 32px 0 0 0;
        gap: 16px;
        text-align: center;
    }

    .kb-experience-consultation__support-eyebrow {
        font-size: 10px;
        width: 100%;
        text-align: center;
    }

    .kb-experience-consultation__support-list {
        gap: 10px;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: center;
    }

    .kb-experience-consultation__support-item {
        font-size: 13px;
        text-align: center;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 03 Experience / La Consultation
   ------------------------------------------------------------
   The DOM order of the 5 grid items naturally cascades the
   reveal. Each item carries data-kb-reveal="fade-up" with
   sequential delays so the items fade in document order.
   The reveal system itself is unchanged.
   ========================================================================== */
.kb-experience-consultation__eyebrow[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-delay: 0ms;
    transition-duration: 900ms;
}

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

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

.kb-experience-consultation__body--primary[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 18px;
    transition-delay: 320ms;
    transition-duration: 900ms;
}

.kb-experience-consultation__body--secondary[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 18px;
    transition-delay: 400ms;
    transition-duration: 900ms;
}

.kb-experience-consultation__support[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 18px;
    transition-delay: 280ms;
    transition-duration: 1000ms;
}

@media (max-width: 767px) {
    .kb-experience-consultation__eyebrow[data-kb-reveal="fade-up"],
    .kb-experience-consultation__title[data-kb-reveal="fade-up"],
    .kb-experience-consultation__visual-area[data-kb-reveal="fade-up"],
    .kb-experience-consultation__body--primary[data-kb-reveal="fade-up"],
    .kb-experience-consultation__body--secondary[data-kb-reveal="fade-up"],
    .kb-experience-consultation__support[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-consultation__title {
        font-size: 40px;
    }
}