/* ==========================================================================
   KB Daywear Sur Mesure Section 04 / Les Pièces — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-daywear-pieces. All values driven by
   tokens.css. Elementor = content only — every visual treatment
   lives here.

   Reference image controls the COMPOSITION:
     - Desktop: a HEADER row inside the 1140px frame
         LEFT   — eyebrow + title (left-aligned)
         RIGHT  — restrained microcopy aligned to the right
                  edge, sitting behind a thin vertical Gold
                  rule.
       Then a GALLERY row with FOUR images in ONE
       horizontal line. Image 2 is the widest column; images
       1, 3 and 4 share the same width. All four share the
       same height.
       Then a FOOTER row inside the 1140px frame
         LEFT   — short horizontal Gold rule + tracked
                  uppercase microcopy
         RIGHT  — thin vertical Gold rule + tracked
                  uppercase microcopy stack
     - Tablet: same composition, scaled typography, 32px
       gutter, 80px section padding.
     - Mobile: single column, scaled typography, 20px
       gutter, 64px section padding. Order: eyebrow ->
       title -> top microcopy -> gallery -> bottom-left
       microcopy -> bottom-right microcopy. Gallery uses
       a 2x2 grid for visual rhythm and to avoid
       horizontal overflow.

   Project design system controls the STYLE: Porcelain ground,
   Raleway display title in Ink, Montserrat microcopy in Ink,
   Gold rules (1px), no cards, no boxes, no icons, no radius,
   no border, no shadow, no filled CTA, no autoplay, no
   carousel on this section.

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

   Typography (locked):
     Desktop — title 44px / microcopy 12px / eyebrow 12px
     Tablet  — title 40px / microcopy 11px / eyebrow 11.5px
     Mobile  — title 36px / microcopy 11px / eyebrow 11px
     Title   = Raleway.
     Everything else = Montserrat.

   No serif. No italic. No decorative eyebrow line. No title
   underline. No cards. No boxes. No icons. No filled CTA.
   No image border. No image radius. No image shadow.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 04 Daywear Sur Mesure / Les Pièces
   ------------------------------------------------------------
   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-daywear-pieces) {
    --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: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
}

.e-con:has(.kb-daywear-pieces) > .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;
    height: auto !important;
    min-height: 0 !important;
}

/* ==========================================================================
   Section root — full-bleed Porcelain canvas, single centered
   1140px composition inside.
   Incoming top spacing only: 100px desktop. No bottom
   padding — the next section owns its own top spacing.
   ========================================================================== */
.kb-daywear-pieces {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    padding-top: var(--kb-section-space-desktop);
    padding-bottom: 0;
    overflow: hidden;
}

/* ==========================================================================
   INNER EDITORIAL LAYER — LOCKED 1140px CONTENT FRAME.
   The inner content frame is the 1140px site content width
   (centered on viewports > 1140px; takes the full viewport
   with 32px gutter on tablet and 20px gutter on mobile).
   ========================================================================== */
.kb-daywear-pieces__inner {
    position: relative;
    width: 100%;
    max-width: 1140px; /* LOCKED 1140px content frame — boxing rule */
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5vw, 64px);
}

/* ==========================================================================
   HEADER — top row inside the 1140px frame.
   ------------------------------------------------------------
   Left half: eyebrow + title (left-aligned).
   Right half: thin vertical Gold rule + restrained microcopy
   (right-aligned). The header is a 2-column flex row with
   space-between so the title hugs the left gutter and the
   microcopy hugs the right gutter. The vertical rule is
   placed BEFORE the microcopy block so the rule visually
   leads the eye into the text.
   ========================================================================== */
.kb-daywear-pieces__header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 64px);
    width: 100%;
}

.kb-daywear-pieces__header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: 620px;
    flex: 0 1 auto;
}

.kb-daywear-pieces__header-right {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
    text-align: right;
    min-width: 0;
    max-width: 280px;
    flex: 0 1 auto;
    margin-top: 36px;
}

/* ==========================================================================
   EYEBROW — reuses the canonical .kb-section-eyebrow primitive
   from base.css (Montserrat / 12px / 500 / uppercase / 0.18em /
   Gold). Local class only owns the gap to the title. NO
   decorative line, NO ornament, NO underline.
   ========================================================================== */
.kb-daywear-pieces__eyebrow {
    text-align: left;
    margin: 0 0 28px 0;
    color: var(--kb-gold);
}

/* ==========================================================================
   TITLE — LOCKED 44px (Services typography rule).
   Raleway, Ink, non-italic, light weight. Each line is a
   structural <span> so the line breaks from the Elementor
   control become real DOM lines. text-wrap: balance for
   refined proportion. No serif, no italic, no underline.
   ========================================================================== */
.kb-daywear-pieces__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: var(--kb-font-display);
    font-size: 44px; /* LOCKED */
    font-weight: 300;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: balance;
    text-decoration: none;
    max-width: 100%;
}

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

.kb-daywear-pieces__title-line {
    display: block;
}

/* ==========================================================================
   MICROCOPY — shared typography for top, bottom-left and
   bottom-right microcopy blocks. Tracked small body in
   Montserrat. Each line is a structural <span>.
   ========================================================================== */
.kb-daywear-pieces__microcopy {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 12px; /* LOCKED */
    font-weight: 400;
    font-style: normal;
    line-height: 1.6;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: pretty;
    max-width: 100%;
}

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

.kb-daywear-pieces__microcopy-line {
    display: block;
}

.kb-daywear-pieces__microcopy--top {
    text-align: right;
    max-width: 220px;
}

.kb-daywear-pieces__microcopy--bottom-left {
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.5;
    text-align: left;
}

.kb-daywear-pieces__microcopy--bottom-right {
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1.7;
    text-align: left;
}

/* ==========================================================================
   GOLD RULES — the only graphic ornament in the section.
   ------------------------------------------------------------
   Horizontal rule: 36px × 1px, sits above the bottom-left
   microcopy.
   Vertical rule: 1px wide, height matches the adjacent
   microcopy block. Used in the header (right side) and in
   the footer (right side).
   ========================================================================== */
.kb-daywear-pieces__horizontal-rule {
    display: block;
    width: 36px;
    height: 1px;
    background-color: var(--kb-gold);
    margin: 0 0 18px 0;
    border: 0;
    padding: 0;
    flex: 0 0 auto;
}

.kb-daywear-pieces__vertical-rule {
    display: block;
    width: 1px;
    background-color: var(--kb-gold);
    border: 0;
    padding: 0;
    flex: 0 0 auto;
}

.kb-daywear-pieces__vertical-rule--header {
    align-self: stretch;
    min-height: 60px;
    height: 100%;
}

.kb-daywear-pieces__vertical-rule--footer {
    align-self: stretch;
    min-height: 56px;
    height: 100%;
}

/* ==========================================================================
   GALLERY — four images in ONE horizontal editorial row.
   ------------------------------------------------------------
   The desktop composition is a 4-column grid where image 2
   is the dominant column:
     image-1 (≈ 1fr) | image-2 (≈ 1.6fr) | image-3 (≈ 1fr) | image-4 (≈ 1fr)
   All four images share the same height via `align-items:
   stretch` + a uniform aspect-ratio; object-fit: cover is
   applied to the inner <img>. A small column gap keeps the
   editorial spacing.
   ========================================================================== */
.kb-daywear-pieces__gallery {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr 1fr;
    column-gap: clamp(12px, 1.4vw, 20px);
    align-items: stretch;
    width: 100%;
}

.kb-daywear-pieces__image {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    max-width: 100%;
}

.kb-daywear-pieces__image img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

/* ==========================================================================
   FOOTER — bottom row inside the 1140px frame.
   ------------------------------------------------------------
   Left half: short horizontal Gold rule + tracked
   uppercase microcopy (left-aligned).
   Right half: thin vertical Gold rule + tracked uppercase
   microcopy stack (left-aligned within its own column, but
   pinned to the right edge of the 1140px frame).
   ========================================================================== */
.kb-daywear-pieces__footer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 64px);
    width: 100%;
}

.kb-daywear-pieces__footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: 320px;
    flex: 0 1 auto;
}

.kb-daywear-pieces__footer-right {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 16px;
    text-align: left;
    min-width: 0;
    max-width: 240px;
    flex: 0 1 auto;
}

/* ==========================================================================
   TABLET (≤ 1199px)
   ------------------------------------------------------------
   The 4-image gallery is preserved on tablet with a tighter
   column gap. The header / footer keep their 2-column
   structure with the 32px gutter. Typography scales down
   one step. The header-right block and footer-right block
   keep their right alignment.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-daywear-pieces {
        padding-top: var(--kb-section-space-tablet);
        padding-bottom: 0;
    }

    .kb-daywear-pieces__inner {
        width: calc(100% - 2 * var(--kb-gutter-tablet));
    }

    .kb-daywear-pieces__eyebrow {
        margin-bottom: 24px;
    }

    .kb-daywear-pieces__title {
        font-size: 40px;
        margin-bottom: 0;
    }

    .kb-daywear-pieces__microcopy {
        font-size: 11px;
    }

    .kb-daywear-pieces__header-right {
        max-width: 220px;
        margin-top: 32px;
    }

    .kb-daywear-pieces__gallery {
        column-gap: 12px;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   ------------------------------------------------------------
   The section is recomposed to a single column following
   the LOCKED mobile visual order:
     1. eyebrow
     2. title
     3. top microcopy
     4. gallery (2x2)
     5. bottom-left microcopy
     6. bottom-right microcopy

   The DOM order matches the visual order. The header and
   footer become single column stacks; the gallery becomes
   a 2x2 grid to keep the editorial rhythm without
   horizontal overflow. The 20px mobile gutter frames the
   composition. Typography is locked: title 36px / microcopy
   11px / eyebrow 11px.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-daywear-pieces {
        padding-block: var(--kb-section-space-mobile) 0;
        padding-inline: 0;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .kb-daywear-pieces__inner {
        width: calc(100% - 2 * var(--kb-gutter-mobile));
        max-width: 100%;
        height: auto;
        min-height: 0;
        padding-inline: 0;
        gap: 40px;
    }

    .kb-daywear-pieces__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    .kb-daywear-pieces__header-left {
        max-width: 100%;
    }

    .kb-daywear-pieces__header-right {
        max-width: 100%;
        margin-top: 0;
        justify-content: flex-start;
        gap: 12px;
    }

    .kb-daywear-pieces__eyebrow {
        margin-bottom: 20px;
        text-align: left;
    }

    .kb-daywear-pieces__title {
        font-size: 36px; /* LOCKED */
        line-height: 1.1;
        text-align: left;
    }

    .kb-daywear-pieces__microcopy--top {
        text-align: left;
        max-width: 100%;
        font-size: 15px;
    }

    /* The 4-image horizontal gallery collapses to a 2x2
       grid on mobile so the editorial rhythm is preserved
       without any horizontal overflow. The second image
       keeps its wider presence inside its row (spans 1
       column / 1 row in the 2x2). */
    .kb-daywear-pieces__gallery {
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
        row-gap: 12px;
    }

    /* Footer + bottom microcopy blocks are forced into
       NORMAL DOCUMENT FLOW on mobile so they participate
       in the section's intrinsic height. No absolute
       positioning, no offset, no transform placement. */
    .kb-daywear-pieces__footer {
        flex-direction: column;
        align-items: flex-start;
        position: static;
        inset: auto;
        transform: none;
        height: auto;
        min-height: 0;
        gap: 24px;
    }

    .kb-daywear-pieces__footer-left,
    .kb-daywear-pieces__footer-right {
        position: static;
        inset: auto;
        transform: none;
        height: auto;
        min-height: 0;
    }

    .kb-daywear-pieces__footer-left {
        max-width: 100%;
    }

    .kb-daywear-pieces__footer-right {
        max-width: 100%;
        justify-content: flex-start;
        gap: 12px;
    }

    .kb-daywear-pieces__microcopy--bottom-left,
    .kb-daywear-pieces__microcopy--bottom-right {
        position: static;
        inset: auto;
        transform: none;
        height: auto;
        min-height: 0;
    }

    .kb-daywear-pieces__vertical-rule--header,
    .kb-daywear-pieces__vertical-rule--footer {
        min-height: 48px;
    }
}

/* ==========================================================================
   ELEMENTOR WRAPPER BOUNDARY NORMALIZATION — 04 → 05
   ------------------------------------------------------------
   Mobile-only normalization of the exact Elementor
   wrapper chain at the boundary between Section 04
   (LES PIÈCES) and Section 05 (LE MOUVEMENT).

   The internal widget layouts of `.kb-daywear-pieces`
   and `.kb-daywear-sur-mesure-mouvement` are NOT
   touched. Only the Elementor container / inner /
   widget / widget-container wrappers are forced into
   a single normal block flow so the reported bottom
   of `.elementor-element-4a91015` is at or below the
   last visible pixel of Section 04, and the reported
   top of `.elementor-element-8e1fcbe` is exactly at
   the bottom of Section 04 (no overlap, no escape).
   Section 05 keeps its own 64px mobile top padding.
   ========================================================================== */
@media (max-width: 767px) {
    .elementor-element-4a91015,
    .elementor-element-4a91015 > .e-con-inner,
    .elementor-element-4a91015 .elementor-widget-atlasyn-kb-daywear-pieces,
    .elementor-element-4a91015 .elementor-widget-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        overflow: visible !important;
        flex: none !important;
    }

    .elementor-element-8e1fcbe,
    .elementor-element-8e1fcbe .elementor-widget-atlasyn-kb-daywear-sur-mesure-mouvement,
    .elementor-element-8e1fcbe .elementor-widget-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        flex: none !important;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 04 Daywear Sur Mesure / Les Pièces
   ------------------------------------------------------------
   The page-load reveal may happen ONCE on the header, the
   gallery, and the footer block. Internal text is NOT
   revealed independently.
   ========================================================================== */
.kb-daywear-pieces__header[data-kb-reveal="fade-up"],
.kb-daywear-pieces__gallery[data-kb-reveal="fade-up"],
.kb-daywear-pieces__footer[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-duration: 900ms;
}

.kb-daywear-pieces__gallery[data-kb-reveal="fade-up"] {
    transition-delay: 80ms;
}

.kb-daywear-pieces__footer[data-kb-reveal="fade-up"] {
    transition-delay: 160ms;
}

@media (max-width: 767px) {
    .kb-daywear-pieces__header[data-kb-reveal="fade-up"],
    .kb-daywear-pieces__gallery[data-kb-reveal="fade-up"],
    .kb-daywear-pieces__footer[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
        transition-delay: 0ms;
    }
}

/* ==========================================================================
   REDUCED MOTION — no entrance offset, opacity locked to 1.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .kb-daywear-pieces [data-kb-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}