/* ==========================================================================
   KB Couture Mariage Section 06 / Du Premier Regard à la Soirée
   Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-couture-mariage-journey. All values driven
   by tokens.css. Elementor = content only — every visual treatment
   lives here.

   Composition (final, locked to the reference image):

     Centered 1140px editorial section on a Porcelain ground
     (#F7EEE9).

       TOP — centered header inside 1140px:
             eyebrow (Montserrat / Gold / uppercase / tracked)
             → small Gold horizontal rule
             → large Raleway title (centered, 2 lines)
             NO body paragraph above the images.
             NO left-align. NO under-title ornament.

       IMAGES — ONE clean 4-column horizontal row.
         • 4 equal-width vertical portraits
         • all on ONE horizontal row on desktop
         • equal visual baseline
         • narrow editorial gaps (~14px)
         • same width, same height, same aspect ratio (4/5)
         • same crop logic (object-fit: cover)
         • same bottom alignment
         • NO carousel on desktop
         • NO masonry / staggered collage / 2x2 desktop grid
         • NO ecommerce product gallery
         • NO cards / borders / shadows / rounded corners

       CAPTIONS — centered beneath each image.
         • small number (Montserrat / small / Ink)
         • look title (Montserrat / uppercase / small)
         • short descriptive line (Montserrat / small / muted Ink)
         • captions NEVER compete with the section title hierarchy
         • all four caption blocks align cleanly beneath their image

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

   Tablet (≤ 1199px, ≥ 768px): 4 columns preserved so the
   editorial rhythm reads identically. Tightened to 12px gap.
   No carousel.

   Mobile (≤ 767px): 2 columns × 2 rows (01|02 / 03|04).
   Narrow ~10px gap. No horizontal scrolling. No carousel.

   No CTA. No button. No icons. No cards. No borders. No
   shadows. No rounded corners.

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

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 06 Couture Mariage / Du Premier Regard
   ------------------------------------------------------------
   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-couture-mariage-journey) {
    --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-couture-mariage-journey) > .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.
   No horizontal overflow on any viewport.
   ========================================================================== */
.kb-couture-mariage-journey {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    overflow: hidden;
}

.kb-couture-mariage-journey__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 header.
   ------------------------------------------------------------
   eyebrow → small Gold rule → title, all centered inside
   the 1140px composition. The rule is a real <span> in
   the markup so the structure is honest. The title falls
   onto two lines via a multi-line control input. No body
   paragraph above the images.
   ========================================================================== */
.kb-couture-mariage-journey__header {
    width: 100%;
    max-width: var(--kb-content-width);
    margin: 0 0 64px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    min-width: 0;
}

/* ---- Eyebrow ----
   Reuses the canonical .kb-section-eyebrow primitive
   (centered) for Montserrat / 12px desktop / 11.5px
   tablet / 11px mobile / 500 / uppercase / 0.18em / Gold.
   The local class only owns the bottom margin so the gap
   to the rule is a single source. NO decorative line,
   NO ornament, NO underline. */
.kb-couture-mariage-journey__eyebrow {
    margin: 0 0 18px 0;
    text-align: center;
    align-self: center;
}

/* ---- Gold rule ----
   Small restrained horizontal rule centered under the
   eyebrow. Acts as the visual punctuation between
   eyebrow and title. 1px high, 36px wide, Gold, square
   corners. aria-hidden because it is purely decorative. */
.kb-couture-mariage-journey__rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--kb-gold);
    border: 0;
    border-radius: 0;
    margin: 0 auto 32px auto;
    padding: 0;
    pointer-events: none;
}

/* ---- Title ----
   Raleway / 300 / Ink / non-italic. Two-line editorial
   title. Each line is a structural <span> so the line
   breaks from the Elementor control become real DOM
   lines. text-wrap: balance for refined proportion.
   Restrained max-width so the title falls onto two lines
   on desktop. NO serif, NO italic, NO underline, NO
   ornament. Desktop 44px / Tablet 40px / Mobile 36px. */
.kb-couture-mariage-journey__title {
    margin: 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.05;
    letter-spacing: -0.015em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: center;
    text-wrap: balance;
    text-decoration: none;
    /* Restrained width so the title falls onto two lines
       on desktop (≈ 9–10 words / ~640px). Prevents the
       title from stretching into one extremely long line. */
    max-width: 640px;
    width: 100%;
}

.kb-couture-mariage-journey__title em,
.kb-couture-mariage-journey__title i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-couture-mariage-journey__title-line {
    display: block;
}

/* ==========================================================================
   IMAGE ROW — 4-column horizontal grid.
   ------------------------------------------------------------
   grid-template-columns: repeat(4, minmax(0, 1fr)) guarantees
   every look is exactly the same width regardless of the
   inner caption text. Restrained editorial gap of 14px. The
   row is the source of truth for the look width; the column
   itself is the source of truth for the image aspect ratio
   (4/5) so all four images share the SAME width × SAME
   height × SAME crop. No 100vw, no overflow, no negative
   offsets. NO carousel. NO masonry. NO 2x2 desktop grid.
   ========================================================================== */
.kb-couture-mariage-journey__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   LOOK — single figure (image + caption) inside the row.
   ------------------------------------------------------------
   min-width: 0 so a long caption line can wrap inside its
   column instead of stretching the column. The image is
   absolutely positioned inside its ratio box so every
   column produces the same image height regardless of
   caption length.
   ========================================================================== */
.kb-couture-mariage-journey__look {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ==========================================================================
   MEDIA — 4/5 portrait box that owns the image height.
   ------------------------------------------------------------
   aspect-ratio: 4/5 makes all four images the SAME height
   (and therefore the SAME width because the columns are
   equal). The image fills the box via absolute positioning
   + object-fit: cover so the crop logic is identical
   across all four looks. No distortion. No background-image
   inline style. No radius / border / shadow.
   ========================================================================== */
.kb-couture-mariage-journey__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--kb-ink-divider-soft);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.kb-couture-mariage-journey__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.kb-couture-mariage-journey__media--placeholder {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--kb-ink) 6%, var(--kb-porcelain)) 0%,
            color-mix(in srgb, var(--kb-bordeaux) 8%, var(--kb-porcelain)) 100%
        );
}

/* ==========================================================================
   CAPTION — centered editorial metadata beneath the image.
   ------------------------------------------------------------
   Each caption is a small block of metadata: number, look
   title, short description. The caption hierarchy stays
   INTENTIONALLY smaller than the section title so the four
   looks read as supporting metadata for ONE evolution
   story, not as four competing headlines.
   ========================================================================== */
.kb-couture-mariage-journey__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 18px 0 0 0;
    padding: 0;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

/* ---- Number (01 / 02 / 03 / 04) ----
   Montserrat / small / Ink. Centered. Single source of
   gap (margin-bottom) so the rhythm is consistent across
   all four captions. */
.kb-couture-mariage-journey__number {
    display: block;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--kb-ink);
    text-align: center;
    margin: 0 0 6px 0;
    padding: 0;
}

/* ---- Look title (LA CÉRÉMONIE / LE COCKTAIL / LE DÎNER / LA SOIRÉE) ----
   Montserrat / uppercase / restrained / smaller than the
   section title. Centered. Single source of gap
   (margin-bottom). */
.kb-couture-mariage-journey__look-title {
    display: block;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kb-ink);
    text-align: center;
    margin: 0 0 6px 0;
    padding: 0;
}

/* ---- Description (short editorial line) ----
   Montserrat / small / muted Ink. Centered. Multi-line
   via structural <span> per line. */
.kb-couture-mariage-journey__description {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: none;
    color: color-mix(in srgb, var(--kb-ink) 70%, var(--kb-porcelain));
    max-width: 100%;
}

.kb-couture-mariage-journey__description-line {
    display: block;
}

/* ==========================================================================
   TABLET (≤ 1199px) — 80px top spacing, 32px gutters.
   ------------------------------------------------------------
   The 4-column grid stays intact so the editorial rhythm
   reads identically to desktop. The gap tightens from
   14px → 12px so the four images still share the 1140px
   content width comfortably. Typography scales to 40px
   (title) / 11.5px (eyebrow, via the canonical primitive).
   Header margin-bottom tightens proportionally.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-couture-mariage-journey {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-couture-mariage-journey__header {
        margin-bottom: 48px;
    }

    .kb-couture-mariage-journey__eyebrow {
        margin-bottom: 16px;
    }

    .kb-couture-mariage-journey__rule {
        margin-bottom: 28px;
    }

    .kb-couture-mariage-journey__title {
        font-size: 40px;
        max-width: 580px;
    }

    .kb-couture-mariage-journey__row {
        gap: 12px;
    }

    .kb-couture-mariage-journey__caption {
        margin-top: 16px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px) — 64px top spacing, 20px gutters.
   ------------------------------------------------------------
   The 4-column row would squeeze four portraits too small
   on a phone. The grid reflows to 2 columns × 2 rows
   (01|02 / 03|04) so the sequence reads clearly. The gap
   tightens to 10px. Captions remain centered beneath
   their own image. No horizontal scrolling. No carousel.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-couture-mariage-journey {
        padding-top: var(--kb-section-space-mobile);
    }

    .kb-couture-mariage-journey__inner {
        /* 20px mobile gutter on both sides so the row
           never reaches the viewport edge. */
        padding-inline: var(--kb-gutter-mobile);
    }

    .kb-couture-mariage-journey__header {
        margin-bottom: 36px;
    }

    .kb-couture-mariage-journey__eyebrow {
        margin-bottom: 14px;
    }

    .kb-couture-mariage-journey__rule {
        width: 32px;
        margin-bottom: 22px;
    }

    .kb-couture-mariage-journey__title {
        font-size: 36px;
        line-height: 1.08;
        max-width: 100%;
    }

    .kb-couture-mariage-journey__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .kb-couture-mariage-journey__caption {
        margin-top: 14px;
        gap: 4px;
    }

    .kb-couture-mariage-journey__number,
    .kb-couture-mariage-journey__look-title,
    .kb-couture-mariage-journey__description {
        font-size: 11px;
    }

    .kb-couture-mariage-journey__number {
        margin-bottom: 4px;
    }

    .kb-couture-mariage-journey__look-title {
        margin-bottom: 4px;
        letter-spacing: 0.16em;
    }
}

/* ==========================================================================
   SMALL MOBILE (≤ 380px) — collapse to 1 image per row.
   ------------------------------------------------------------
   On extremely narrow phones the 2-column 4/5 portraits
   become too narrow for the centered multi-line captions
   to remain elegant. The grid reflows to a single column
   so the captions stay readable and the editorial rhythm
   is preserved.
   ========================================================================== */
@media (max-width: 380px) {
    .kb-couture-mariage-journey__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .kb-couture-mariage-journey__media {
        /* 4/5 still works on a single column — the image
           gets the full mobile content width and the
           caption sits below it cleanly. */
        aspect-ratio: 4 / 5;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 06 Couture Mariage / Journey
   ------------------------------------------------------------
   The header and each individual look unit reveal as
   independent editorial moments so the four images do
   not appear all at once. The reveal system handles
   the entrance.
   ========================================================================== */
.kb-couture-mariage-journey__header[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

.kb-couture-mariage-journey__look[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

.kb-couture-mariage-journey__look:nth-child(2)[data-kb-reveal="fade-up"] {
    transition-delay: 80ms;
}

.kb-couture-mariage-journey__look:nth-child(3)[data-kb-reveal="fade-up"] {
    transition-delay: 160ms;
}

.kb-couture-mariage-journey__look:nth-child(4)[data-kb-reveal="fade-up"] {
    transition-delay: 240ms;
}

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

    .kb-couture-mariage-journey__look[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 900ms;
    }

    .kb-couture-mariage-journey__look:nth-child(2)[data-kb-reveal="fade-up"],
    .kb-couture-mariage-journey__look:nth-child(3)[data-kb-reveal="fade-up"],
    .kb-couture-mariage-journey__look:nth-child(4)[data-kb-reveal="fade-up"] {
        transition-delay: 0ms;
    }
}

/* ==========================================================================
   REDUCED MOTION — no entrance offset, opacity locked to 1.
   Mirrors the convention used by the other KB sections.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-couture-mariage-journey [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}