/* ==========================================================================
   KB Experience Section 07 / À Votre Mesure — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-experience-measure. 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 has TWO clear zones — a CENTERED editorial header
     followed by a 3-image horizontal sequence:

       1. .kb-experience-measure__header
            (eyebrow + title + body, all centered)
       2. .kb-experience-measure__gallery
            (3 image wrappers in a single horizontal row)

     The reference image controls the COMPOSITION (centered header,
     generous negative space, equal-weight three-image sequence,
     clean editorial rhythm, large breathing room between copy and
     imagery). The project design system controls the STYLE:
     Porcelain ground, Raleway / Montserrat typography, Gold
     eyebrow, no decorative eyebrow line, no title underline, no
     cards, no boxes, no icons, no radius, no border, no shadow,
     no overlap between images, no caption, no CTA, no serif, no
     italic.

     Desktop (1140px content width):
       HEADER (centered, max-width 720px) — restrained editorial
         copy block.
         - Gold eyebrow (Montserrat / 12px / 500 / uppercase / 0.18em)
         - Two-line Raleway title (Ink, light, non-italic, ~44-48px)
         - Restrained Montserrat body (Ink, ~15px, 2-3 lines)

       GALLERY (full 1140px content width) — three equal-weight
         image wrappers in a single row.
         - 3 columns, equal-width, 24px column gap
         - Each .kb-experience-measure__image wrapper is 4:5
           aspect ratio (same width + height across all three)
         - Each <img> uses object-fit: cover with a per-image
           object-position so each photograph's main subject
           stays visible after the cover crop
         - No card, no border, no radius, no shadow
         - No caption, no overlay text

   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 styling 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 overlap between images. No caption. No CTA. No arrows.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 07
   ------------------------------------------------------------
   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-measure) {
    --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-measure) > .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-measure {
    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-measure__inner {
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* ==========================================================================
   HEADER — centered editorial block.
   The header is a flat column with a Restrained max-width (~720px) so
   the copy never stretches the full 1140px. The whole header is a
   single fade-up reveal group.
   ========================================================================== */
.kb-experience-measure__header {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 72px;
}

/* ==========================================================================
   EYEBROW
   Reuses the canonical .kb-section-eyebrow primitive (base.css) for
   Montserrat / 12px / 500 / uppercase / 0.18em / Gold. The local
   class only owns the bottom margin so the gap to the title is
   a single source. NO decorative line, NO ornament, NO underline.
   Reference's gold underline is intentionally OMITTED.
   ========================================================================== */
.kb-experience-measure__eyebrow {
    margin: 0 0 28px 0;
    text-align: center;
}

/* ==========================================================================
   TITLE
   Raleway, Ink, non-italic, light weight. Centered. Each line is a
   structural <span> so the line breaks are part of the rendered
   structure (not styled with <br>). Two-line editorial title.
   ========================================================================== */
.kb-experience-measure__title {
    margin: 0 0 32px 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.12;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: center;
    text-wrap: balance;
}

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

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

/* ==========================================================================
   BODY
   Montserrat, Ink, comfortable line-height. Centered. Each line is
   a structural <span> so the line breaks are part of the rendered
   structure. The body sits inside the same 720px header column.
   ========================================================================== */
.kb-experience-measure__text {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.75;
    color: var(--kb-ink);
    text-transform: none;
    text-align: center;
    text-wrap: pretty;
    max-width: 640px;
}

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

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

/* ==========================================================================
   GALLERY — three equal-weight image wrappers in a single row.
   The gallery is a 3-column grid. Each column shares the SAME
   width, height and 4:5 aspect ratio so the three photographs
   align top-to-top and bottom-to-bottom. The visual rhythm comes
   from different photographic scales INSIDE the same framework.
   No card, no border, no radius, no shadow, no overlap.
   ========================================================================== */
.kb-experience-measure__gallery {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
    min-width: 0;
}

/* Each image wrapper — 4:5 aspect ratio, same dimensions across
   the three images. The wrapper is a real <figure> with a fixed
   aspect-ratio so the three images ALWAYS have identical height
   regardless of the source photograph's intrinsic ratio. */
.kb-experience-measure__image {
    margin: 0;
    padding: 0;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

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

/* Per-image object-position so the main subject of each
   photograph stays visible after the cover crop. These are
   locked in CSS — they are NOT exposed in the Elementor editor. */
.kb-experience-measure__image--01 img {
    object-position: center;
}

.kb-experience-measure__image--02 img {
    object-position: center;
}

.kb-experience-measure__image--03 img {
    object-position: center;
}

/* ==========================================================================
   TABLET (≤ 1199px)
   80px top spacing. The 3-column gallery stays intact (tablet
   width still accommodates three portrait 4:5 columns). The
   header max-width remains 720px so the centered copy never
   stretches. Typography scales down one step.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-experience-measure {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-experience-measure__header {
        margin-bottom: 60px;
    }

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

    .kb-experience-measure__title {
        font-size: 44px;
        margin-bottom: 28px;
    }

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

    .kb-experience-measure__gallery {
        column-gap: 20px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   64px top spacing. Single column. The 3-column gallery collapses
   to a single vertical stack — the three image wrappers share
   the SAME width, height and 4:5 aspect ratio. They are separated
   by a 16px gap (within the 16-20px spec range) so the sequence
   reads as a calm stacked editorial contact sheet.

   The locked mobile order is naturally the DOM order:
     1. header (eyebrow + title + body, all centered)
     2. image 01
     3. image 02
     4. image 03
   ========================================================================== */
@media (max-width: 767px) {
    .kb-experience-measure {
        padding-top: var(--kb-section-space-mobile);
    }

    /* Single mobile content gutter — every direct child
       (eyebrow / title / body / images) lives inside this
       20px inset so the section never bleeds into the
       viewport edge and never has to apply padding to
       individual text elements. */
    .kb-experience-measure__inner {
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-experience-measure__header {
        max-width: 100%;
        margin-bottom: 32px;
        text-align: left;
        align-items: flex-start;
    }

    .kb-experience-measure__eyebrow {
        margin-bottom: 24px;
    }

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

    .kb-experience-measure__text {
        max-width: 100%;
        font-size: 15px;
        align-items: flex-start;
        text-align: left;
    }

    /* Gallery — single column, three stacked 4:5 images.
       Each image is full available width inside the 20px
       gutter. The 16px gap keeps the sequence calm and
       consistent. */
    .kb-experience-measure__gallery {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
        column-gap: 0;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 07 Experience / À Votre Mesure
   ------------------------------------------------------------
   The DOM order of the two groups naturally produces the
   locked reveal cadence:
     - header: eyebrow + title + body (one wrapper, one reveal)
     - gallery: three image wrappers (one wrapper, one reveal)
   Per-element timing / distance / delay are set here as scoped
   overrides. The reveal system itself is unchanged.
   ========================================================================== */
.kb-experience-measure__header[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-delay: 0ms;
    transition-duration: 900ms;
}

.kb-experience-measure__gallery[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 180ms;
    transition-duration: 1100ms;
}

@media (max-width: 767px) {
    .kb-experience-measure__header[data-kb-reveal="fade-up"],
    .kb-experience-measure__gallery[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-measure__title {
        font-size: 40px;
    }
}