/* ==========================================================================
   KB Créations Section 02 / L'Écriture Couture — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-creations-writing. All values driven by tokens.css.

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

     GRID — two columns inside the 1140px composition:
       LEFT  : editorial manifesto (eyebrow, large Raleway H2,
               three Montserrat body paragraphs).
       RIGHT : a vertical creation image (dominant) with a smaller
               detail / craftsmanship image overlapping its
               LOWER-LEFT corner.

     The TOP of the eyebrow on the LEFT aligns with the TOP edge
     of the image composition on the RIGHT. No vertical
     centering of the text block against the image. (align-items:
     start.)

     STAGES — 3 equal columns across the full 1140px section
     width below the grid. 01 ÉCOUTE / 02 CRÉATION /
     03 RÉALISATION. Restrained vertical Bordeaux separators
     BETWEEN the columns. No cards, no boxes, no icons, no
     shadow, no rounded corners.

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

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

/* ==========================================================================
   GRID — two columns: manifesto LEFT / image composition RIGHT
   Desktop:
     grid-template-columns: minmax(0, 1fr) 500px;
     column-gap: 72px;
     align-items: start;   <-- TOP of eyebrow aligns with TOP edge
                              of the right image composition.
   ========================================================================== */
.kb-creations-writing__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 500px;
    column-gap: 72px;
    align-items: start;
    row-gap: 0;
    width: 100%;
    max-width: var(--kb-content-width);
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ==========================================================================
   MANIFESTO (LEFT)
   Single column, no decorative line, no title underline, no
   flower / star. Reveals as one group with the body copy.
   ========================================================================== */
.kb-creations-writing__manifesto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

.kb-creations-writing__eyebrow {
    margin: 0 0 28px 0;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kb-gold);
}

.kb-creations-writing__title {
    margin: 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.05;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: balance;
    max-width: 18ch;
}

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

.kb-creations-writing__title-line {
    display: block;
}

/* Body — 3 Montserrat paragraphs, comfortable line-height,
   visible separation between paragraphs. */
.kb-creations-writing__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 36px 0 0 0;
    padding: 0;
    gap: 18px;
    max-width: 520px;
    width: 100%;
}

.kb-creations-writing__paragraph {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.7;
    color: var(--kb-ink);
    text-wrap: pretty;
    max-width: 100%;
}

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

.kb-creations-writing__paragraph-line {
    display: block;
}

/* ==========================================================================
   IMAGE COMPOSITION (RIGHT)
   ------------------------------------------------------------
   The composition is a relative wrapper that reserves real
   vertical room for the detail image via padding-bottom. The
   detail image is absolutely positioned against the
   composition's bottom-right corner and is fully contained
   inside the Porcelain Section 02 — it never extends below
   the section, so the next Bordeaux section starts cleanly
   after Section 02 finishes. No overflow on the section, no
   random margin-top on Section 03.

   The detail image is right-anchored (right: 0) so its LEFT
   edge always sits safely inside the right-side image
   composition and never crosses into the left text/stages
   column. The width is 60% of the main image width so it
   reads as a smaller craftsmanship fragment overlapping the
   LOWER-RIGHT of the main image. The aspect-ratio keeps the
   image proportional regardless of the media selected.
   ========================================================================== */
.kb-creations-writing__composition {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0;
    padding: 0 0 160px 0;   /* reserve real room for the detail overhang */
    min-width: 0;
}

/* Main / creation image — full width of the right column, tall
   vertical, object-fit: cover. */
.kb-creations-writing__creation {
    position: relative;
    width: 100%;
    height: 660px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 92%,
        var(--kb-bordeaux)
    );
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

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

/* Detail image — absolutely positioned, visually CENTERED
   horizontally relative to the main image. left: 50% +
   translateX(-50%) anchors the image's horizontal center to
   the main image's horizontal center, regardless of width.
   The image remains fully inside the composition's
   padding-bottom reserved area (bottom: 0) so it never hangs
   below Section 02. width: 60% of the main image keeps the
   left edge safely inside the right-side image column. The
   detail image is on top of the main image (z-index: 2) so
   the overlap reads as layered editorial composition, not a
   stacked duplicate. */
.kb-creations-writing__detail {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 60%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 2;
}

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

/* ==========================================================================
   STAGES — owned by the LEFT content column.
   ------------------------------------------------------------
   The stages wrapper sits INSIDE .kb-creations-writing__manifesto,
   directly after the body copy. It must NOT participate in the
   outer section grid individually and must NOT span into the
   right image column. The three blocks share one horizontal
   baseline (align-items: start), equal available width
   (repeat(3, minmax(0, 1fr))), and 24px gap. The two restrained
   vertical Bordeaux separators sit cleanly BETWEEN 01/02 and
   02/03 (no separator before 01, no separator after 03). The
   separators are placed in dedicated 1px grid columns so they
   stay mathematically centered between the stages regardless
   of content width.

   Body → stages gap: 36px (kept tight, no large empty area).
   ========================================================================== */
.kb-creations-writing__stages {
    margin: 36px 0 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    min-width: 0;
    position: relative;
}

.kb-creations-writing__stage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
}

/* Explicit grid placement so the three stages anchor to
   columns 1, 3 and 5 of the 5-track grid. The two 1px columns
   (2 and 4) host the dividers. */
.kb-creations-writing__stage:nth-child(1) {
    grid-column: 1;
}

.kb-creations-writing__stage:nth-child(3) {
    grid-column: 3;
}

.kb-creations-writing__stage:nth-child(5) {
    grid-column: 5;
}

/* Restrained vertical Bordeaux separator between the columns.
   One small 1px line, full height of the stage row, anchored
   in its dedicated 1px grid column. No background panels. */
.kb-creations-writing__divider {
    display: block;
    width: 1px;
    align-self: stretch;
    height: auto;
    background-color: var(--kb-bordeaux-soft);
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.kb-creations-writing__divider:nth-child(2) {
    grid-column: 2;
}

.kb-creations-writing__divider:nth-child(4) {
    grid-column: 4;
}

/* Number — Raleway, Gold, light weight. Sits ABOVE the label. */
.kb-creations-writing__stage-number {
    display: block;
    font-family: var(--kb-font-display);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: var(--kb-gold);
    margin-bottom: var(--kb-space-s);
}

/* Label — Montserrat, uppercase, Ink/Bordeaux, tracked. */
.kb-creations-writing__stage-label {
    margin: 0 0 var(--kb-space-s) 0;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kb-bordeaux);
}

/* Description — Montserrat, Ink, comfortable line-height. */
.kb-creations-writing__stage-text {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.65;
    color: var(--kb-ink);
    text-wrap: pretty;
    max-width: 100%;
}

.kb-creations-writing__stage-text-line {
    display: block;
}

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

/* ==========================================================================
   TABLET (≤ 1199px)
   80px top spacing. 32px side gutter. Two columns kept while
   space allows. The right image composition tightens to 420px
   and the main image height drops. Overlap is reduced so the
   detail image does not collide with text.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-creations-writing {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-creations-writing__inner,
    .kb-creations-writing__grid {
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-creations-writing__grid {
        grid-template-columns: minmax(0, 1fr) 420px;
        column-gap: 56px;
    }

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

    .kb-creations-writing__body {
        max-width: 460px;
    }

    .kb-creations-writing__composition {
        max-width: 420px;
        padding-bottom: 130px;
    }

    .kb-creations-writing__creation {
        height: 540px;
    }

    .kb-creations-writing__detail {
        left: 50%;
        right: auto;
        bottom: 0;
        transform: translateX(-50%);
        width: 60%;
    }
}

/* ==========================================================================
   MOBILE (≤ 767px)
   64px top spacing. 20px side gutter. Grid is collapsed to a
   single column. Final mobile order (locked):

     1. eyebrow
     2. title
     3. main creation image + detail image composition
     4. body paragraphs
     5. 01 ÉCOUTE
     6. 02 CRÉATION
     7. 03 RÉALISATION

   The image composition stays editorial: main image remains
   dominant, detail image (centred) overlaps the LOWER-MIDDLE
   of the main image in a controlled way. ~30px breathing
   space between the title and the media block, and ~32px
   breathing space between the complete media block and the
   body copy. Stages stack vertically; vertical dividers
   become horizontal TOP separators between items.

   DOM ORDERING STRATEGY (mobile only):
   The composition is a SIBLING of the manifesto in the DOM
   (the desktop 2-column grid requires this). On mobile the
   manifesto is collapsed to `display: contents` so its
   children (eyebrow, title, body, stages) become direct
   flex children of the grid alongside the composition.
   Combined with explicit `order` on the composition (2),
   the body (3) and the stages (4), the flex layout
   interleaves the composition between the title and the
   body. Desktop is untouched: the manifesto keeps its box
   and the composition keeps its grid-column placement.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-creations-writing {
        padding-top: var(--kb-section-space-mobile);
    }

    .kb-creations-writing__inner,
    .kb-creations-writing__grid {
        padding-inline: var(--kb-gutter-mobile);
    }

    /* GRID → vertical flow. */
    .kb-creations-writing__grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 0;
        column-gap: 0;
    }

    /* Manifesto is collapsed on mobile so its children
       become direct flex children of the grid. The eyebrow
       and title keep the default order 0 (DOM order). The
       composition (order 2), body (order 3) and stages
       (order 4) are positioned explicitly so the final
       mobile order becomes:
         eyebrow (0) → title (0) → composition (2) →
         body (3) → stages (4). */
    .kb-creations-writing__manifesto {
        display: contents;
    }

    .kb-creations-writing__composition {
        order: 2;
        position: relative;
        max-width: 100%;
        width: 100%;
        padding: 0 0 110px 0;
        margin-top: 30px;          /* title → media gap (28–32px) */
    }

    .kb-creations-writing__body {
        order: 3;
        margin-top: 32px;          /* media → body gap */
        max-width: 100%;
    }

    .kb-creations-writing__stages {
        order: 4;
        margin-top: 32px;
    }

    /* Manifesto typography on mobile. */
    .kb-creations-writing__eyebrow {
        font-size: 12px;
        margin-bottom: 18px;
    }

    .kb-creations-writing__title {
        font-size: 36px;
        max-width: 100%;
    }

    .kb-creations-writing__body {
        gap: 14px;
    }

    .kb-creations-writing__paragraph {
        font-size: 15px;
        line-height: 1.65;
    }

    /* Main image — slightly inset on mobile so the detail
       overlap has room to extend leftward without escaping
       the section. 92% width, right-aligned inside the
       100% wrapper. */
    .kb-creations-writing__creation {
        width: 92%;
        margin-left: auto;
        margin-right: 0;
        height: 460px;
    }

    .kb-creations-writing__detail {
        left: 50%;
        right: auto;
        bottom: 0;
        transform: translateX(-50%);
        width: 58%;
    }

    /* Stages — full mobile reset. Stack vertically as a
       single column. Each item gets a thin top divider
       (except the first) so the editorial separation
       between stages is preserved. */
    .kb-creations-writing__stages {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin-top: 40px;
        row-gap: 0;
        column-gap: 0;
    }

    .kb-creations-writing__stage {
        width: 100%;
        max-width: 100%;
        padding: 24px 0 0 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        text-align: left;
    }

    .kb-creations-writing__stage:nth-child(1) {
        padding-top: 0;
    }

    /* Vertical dividers are converted into thin TOP
       separators between stages on mobile. */
    .kb-creations-writing__divider {
        width: 100%;
        height: 1px;
        align-self: stretch;
        background-color: var(--kb-bordeaux-soft);
        margin: 0;
        padding: 0;
    }

    .kb-creations-writing__stage-number {
        margin-bottom: 10px;
    }

    .kb-creations-writing__stage-label {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .kb-creations-writing__stage-text {
        font-size: 13px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 02 Créations / L'Écriture Couture
   ------------------------------------------------------------
   Three visual groups animate as their own editorial units:
     - left manifesto (eyebrow + title + body, ONE object)
     - image composition (creation image + detail image,
       ONE object — the detail is layered onto the main image
       and reveals with it)
     - stages (ONE object — the three columns settle as a
       single row)
   The reveal system is unchanged. We only bind the existing
   fade-up behaviour to the group nodes.
   ========================================================================== */
.kb-creations-writing__manifesto[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

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

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