/* ==========================================================================
   KB Créations Section 06 / En Mouvement — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-creations-movement. All values driven by tokens.css.

   Composition (final):
     Centered 1140px editorial section on a Porcelain ground.

     HEADER — eyebrow (06 - EN MOUVEMENT) + large centered
     Raleway H2 "Une silhouette prend vie lorsqu'elle bouge."
     + a centered two-line intro paragraph in Montserrat /
     Ink. No decorative line, no underline, no ornament.

     THREE-IMAGE COMPOSITION — one CSS grid of three columns
     (280px / minmax(0, 1fr) / 280px) inside the 1140px
     frame. Column gap ~10px. The center image is the
     largest (~540px height) and reads as the dominant
     cinematic photograph. The two side images share a
     smaller height (~455px) and are vertically centered
     against the center image, producing a controlled
     staggered rhythm. align-items: center.

     No radius, no border, no shadow, no overlay, no
     caption, no card, no icon, no CTA. The composition
     reads as one editorial photographic sequence.

   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 icons. No CTA. No shadow on
   images. No border / radius on images. No horizontal
   divider.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 06 Créations
   ------------------------------------------------------------
   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-creations-movement) {
    --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-creations-movement) > .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-creations-movement {
    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);
    padding-top: var(--kb-section-space-desktop);
}

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

/* ==========================================================================
   HEADER — centered editorial block.
   ------------------------------------------------------------
   The whole header (eyebrow + title + intro) is ONE reveal
   group. Single column, all items centered, no decorative
   line, no title underline, no flower / star. The intro
   paragraph has a restrained max-width so it does not
   stretch too wide on desktop.
   ========================================================================== */
.kb-creations-movement__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

/* Eyebrow — single source of truth lives in .kb-section-eyebrow
   (base.css). The per-section class only owns local
   alignment + spacing. */
.kb-creations-movement__eyebrow {
    margin: 0 0 20px 0;
}

/* Title — Raleway, Ink, large editorial H2. No italic,
   no serif, no underline. Centered. */
.kb-creations-movement__title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: center;
    text-wrap: balance;
    max-width: 22ch;
}

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

/* Intro — two-line centered paragraph, Montserrat / Ink.
   Restrained max-width keeps the lines at a comfortable
   reading measure (~650-720px). */
.kb-creations-movement__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 28px 0 0 0;
    padding: 0;
    gap: 0;
    max-width: 700px;
    width: 100%;
}

.kb-creations-movement__intro-line {
    margin: 0;
    padding: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.75;
    color: var(--kb-ink);
    text-wrap: pretty;
    max-width: 100%;
}

.kb-creations-movement__intro-line em,
.kb-creations-movement__intro-line i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-creations-movement__intro-span {
    display: block;
}

/* ==========================================================================
   THREE-IMAGE COMPOSITION
   ------------------------------------------------------------
   One CSS grid of three columns (280px / minmax(0, 1fr) /
   280px) inside the 1140px frame. Column gap ~10px.
   align-items: center so the smaller side images are
   vertically centered against the larger middle image.
   The whole composition is ONE reveal group. The three
   images do NOT reveal independently.
   ========================================================================== */
.kb-creations-movement__sequence {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    column-gap: 10px;
    row-gap: 0;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 46px 0 0 0;
    padding: 0;
    min-width: 0;
}

.kb-creations-movement__figure {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 88%,
        var(--kb-bordeaux)
    );
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Side images — same shared height, vertically centered
   against the larger center image by the grid
   align-items: center rule. */
.kb-creations-movement__figure--1,
.kb-creations-movement__figure--3 {
    height: 455px;
}

/* Center image — dominant. ~540px height, intentionally
   taller than the sides. No radius, no border, no
   shadow. */
.kb-creations-movement__figure--2 {
    height: 540px;
}

/* Use img.class selector (specificity 0,1,1) to guarantee
   these fill rules win over the global `img { height: auto;
   max-width: 100% }` rule in base.css. The three image
   blocks must be COMPLETELY filled by their photos — no
   dark/Bordeaux wrapper background visible beneath any
   image. */
img.kb-creations-movement__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    transition: transform var(--kb-transition-editorial);
    transform: scale(1);
    will-change: transform;
}

/* Extremely restrained hover on fine-pointer devices only.
   No darkening, no caption, no button — just a tiny scale
   settle that respects the editorial direction. */
@media (hover: hover) and (pointer: fine) {
    .kb-creations-movement__figure:hover .kb-creations-movement__img {
        transform: scale(1.018);
    }
}

/* ==========================================================================
   TABLET (≤ 1199px)
   80px top spacing. 32px side gutter. The three-column
   composition is preserved at a compressed width
   (220px / 1fr / 220px) with the center image reduced
   to ~440px and the side images to ~360px. The narrow
   editorial gap is kept. The photographs keep their
   cinematic relationship without horizontal scroll.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-creations-movement {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-creations-movement__inner {
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-creations-movement__title {
        font-size: 44px;
    }

    .kb-creations-movement__intro {
        margin-top: 24px;
    }

    .kb-creations-movement__sequence {
        grid-template-columns: 220px minmax(0, 1fr) 220px;
        column-gap: 10px;
        margin-top: 40px;
    }

    .kb-creations-movement__figure--1,
    .kb-creations-movement__figure--3 {
        height: 360px;
    }

    .kb-creations-movement__figure--2 {
        height: 440px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   64px top spacing. 20px side gutter. Single vertical
   photographic column. Image 01 ~84% aligned LEFT,
   image 02 100% dominant, image 03 ~84% aligned RIGHT.
   14px gap. Header left-aligned per the existing Créations
   mobile system. No horizontal overflow.

   Final mobile order (locked):
     1. eyebrow
     2. title
     3. intro
     4. image 01 (left)
     5. image 02 (dominant)
     6. image 03 (right)
   ========================================================================== */
@media (max-width: 767px) {
    .kb-creations-movement {
        padding-top: var(--kb-section-space-mobile);
    }

    .kb-creations-movement__inner {
        padding-inline: var(--kb-gutter-mobile);
    }

    /* Header — left-aligned per existing mobile section
       system. No centered alignment on mobile. */
    .kb-creations-movement__head {
        align-items: flex-start;
        text-align: left;
    }

    .kb-creations-movement__eyebrow {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .kb-creations-movement__title {
        font-size: 36px;
        text-align: left;
        max-width: 100%;
    }

    .kb-creations-movement__intro {
        align-items: flex-start;
        text-align: left;
        margin-top: 20px;
        max-width: 100%;
    }

    .kb-creations-movement__intro-line {
        font-size: 15px;
        line-height: 1.7;
    }

    /* Three-image composition — single vertical column.
       All three images share the same horizontal center
       axis. Image 02 stays 100% wide (the visual anchor);
       images 01 and 03 are ~84% wide and centered against
       it via align-self: center so the column reads as one
       stacked, balanced composition. 14px gap. */
    .kb-creations-movement__sequence {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        row-gap: 14px;
        column-gap: 0;
        margin-top: 36px;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .kb-creations-movement__figure--1 {
        width: 84%;
        height: 360px;
        align-self: center;
    }

    .kb-creations-movement__figure--2 {
        width: 100%;
        height: 420px;
        align-self: center;
    }

    .kb-creations-movement__figure--3 {
        width: 84%;
        height: 360px;
        align-self: center;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 06 Créations / En Mouvement
   ------------------------------------------------------------
   Two visual groups animate as their own editorial units:
     - header (eyebrow + title + intro, ONE object)
     - three-image composition (ONE object — the three
       photographs settle together as a single cinematic
       sequence)
   The reveal system is unchanged. We only bind the
   existing fade-up behaviour to the two group nodes.
   ========================================================================== */
.kb-creations-movement__head[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

.kb-creations-movement__sequence[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 28px;
    transition-delay: 140ms;
    transition-duration: 1100ms;
}

@media (max-width: 767px) {
    .kb-creations-movement__head[data-kb-reveal="fade-up"],
    .kb-creations-movement__sequence[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 16px;
        transition-duration: 900ms;
    }
}

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