/* ==========================================================================
   KB Créations Section 03 / Pièce Signature — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-creations-signature. All values driven by tokens.css.

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

     GRID — two columns inside the 1140px composition:
       LEFT  : image composition (560px) — dominant vertical
               main creation image + embroidery detail overlapping
               the LOWER-RIGHT + smaller sketch image below.
               A small restrained Bordeaux rectangle sits behind
               the sketch / detail region (CSS only).
       RIGHT : creation story — eyebrow, creation name (Raleway,
               Ink, non-italic), collection meta (Bordeaux),
               description (Montserrat / Ink), 4 technical detail
               groups in a 2 × 2 editorial grid (labels in
               Bordeaux, values in Ink, hairline dividers), and
               one restrained editorial text link (Montserrat /
               Gold / uppercase / tracked). No large CTA button.

     The TOP of the eyebrow on the RIGHT must align with the
     TOP edge of the main image on the LEFT
     (align-items: start). No vertical centering.

   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 boxes. No icons. No radius. No border. No shadow
   on images. No two large CTA buttons. No price. No ecommerce
   controls. No decorative line beside the eyebrow.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 03 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-signature) {
    --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-signature) > .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-signature {
    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-signature__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: image composition LEFT / story RIGHT
   Desktop:
     grid-template-columns: 560px minmax(0, 1fr);
     column-gap: 72px;
     align-items: start;   <-- TOP of eyebrow aligns with TOP
                              edge of the main image.
   ========================================================================== */
.kb-creations-signature__grid {
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    column-gap: 72px;
    align-items: start;
    row-gap: 0;
    width: 100%;
    max-width: var(--kb-content-width);
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ==========================================================================
   IMAGE COMPOSITION (LEFT)
   ------------------------------------------------------------
   A relative wrapper that reserves enough lower space for the
   embroidery detail + sketch images to overlap without ever
   escaping the LEFT media column. Both small images are kept
   FULLY inside the wrapper — the embroidery is allowed a
   small intentional extension beyond the main image right
   edge (right: -40) but stops well before the 72px column
   gap that separates the LEFT media column from the RIGHT
   text column (32px clearance). The wrapper is the source
   of truth for vertical reservation: padding-bottom owns
   the space the sketch needs to feel layered beneath the
   main photograph without escaping into the next section.
   ========================================================================== */
.kb-creations-signature__composition {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0;
    /* Wrapper = main image (760px) + the small extension the
       sketch needs to feel layered beneath the main photograph
       (40px). The smaller secondary images (46% / 32% widths)
       do not need more reservation than this. No unnecessary
       empty Porcelain area. */
    padding: 0 0 40px 0;
    min-width: 0;
    /* overflow is intentionally NOT hidden on this wrapper:
       the embroidery detail image is allowed to extend a
       small controlled amount past the wrapper's right edge
       (right: -70) so its right edge can reach the editorial
       target shown in the reference. The 72px column gap that
       separates the LEFT media column from the RIGHT text
       column keeps the embroidery safely away from any text
       (70px extension + 2px clearance to the text column). */
}

/* Main creation image — full width of the LEFT column, tall
   vertical, object-fit: cover. No border, no radius, no
   shadow. */
.kb-creations-signature__main {
    position: relative;
    width: 100%;
    height: 760px;
    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-signature__main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Embroidery detail image — small landscape inset, ~46% width
   of the main image, 16:10 aspect. Overlaps the LOWER-RIGHT
   portion of the main image. The right edge extends 44px
   beyond the main image right edge (right: -44) so it
   still feels intentionally offset to the right while
   leaving a clean ~28px visible Porcelain gap to the left
   edge of the RIGHT text column (72px column gap minus
   44px extension = 28px clearance). The composition
   wrapper's 40px padding-bottom still keeps the sketch
   contained vertically, so nothing escapes into the next
   section. */
.kb-creations-signature__embroidery {
    position: absolute;
    right: -44px;
    bottom: 115px;
    width: 46%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 90%,
        var(--kb-bordeaux)
    );
    z-index: 2;
}

.kb-creations-signature__embroidery img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

/* Sketch image — smallest in the composition, ~32% width of
   the main image, 3:4 portrait. Sits BELOW the embroidery
   detail, slightly toward the center/right of the main
   image composition. right: 90 keeps it offset inward
   from the embroidery, bottom: 0 anchors its baseline to
   the wrapper bottom. The wrapper's 40px padding-bottom
   reserves the space the sketch needs to extend 40px
   below the main image's bottom edge. */
.kb-creations-signature__sketch {
    position: absolute;
    right: 90px;
    bottom: 0;
    width: 32%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    background-color: color-mix(
        in srgb,
        var(--kb-ink) 90%,
        var(--kb-bordeaux)
    );
    z-index: 3;
}

.kb-creations-signature__sketch img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   STORY (RIGHT)
   Three editorial groups stacked vertically:
     1. identity (eyebrow + name + meta + description)
     2. technical details (2 × 2 grid, hairline dividers)
     3. editorial link
   The TOP of the eyebrow in group 1 must align with the TOP
   edge of the main image on the LEFT. align-items: start on
   the parent grid already guarantees that.
   ========================================================================== */
.kb-creations-signature__story {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
    row-gap: 56px;
}

/* ----- Identity ----- */
.kb-creations-signature__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    padding: 0;
    min-width: 0;
    max-width: 100%;
}

.kb-creations-signature__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
}

.kb-creations-signature__name {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--kb-ink);
    text-transform: none;
    text-align: left;
    text-wrap: balance;
    max-width: 12ch;
}

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

.kb-creations-signature__meta {
    margin: 22px 0 0 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);
}

.kb-creations-signature__description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    gap: 14px;
    max-width: 460px;
    width: 100%;
}

.kb-creations-signature__paragraph {
    margin: 0 0 10px;
    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.75;
    color: var(--kb-ink);
    text-wrap: pretty;
    max-width: 100%;
}

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

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

/* ----- Technical details (2 × 2 editorial grid) ----- */
.kb-creations-signature__technical {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-width: 0;
    position: relative;
}

.kb-creations-signature__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    margin: 0;
    padding: 0 0 var(--kb-space-l) 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

/* (Technical grid uses a clean 2 × 2 layout with column-gap
   alone. No vertical divider, no pseudo-element separator,
   no decorative line between the two columns.) */

/* Label row — "01 / SILHOUETTE" style. Number in Raleway Gold,
   label in Montserrat uppercase Bordeaux. */
.kb-creations-signature__detail-label {
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
    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-bordeaux);
}

.kb-creations-signature__detail-number {
    font-family: var(--kb-font-display);
    font-size: 13px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.05em;
    color: var(--kb-gold);
    text-transform: none;
}

.kb-creations-signature__detail-value {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    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-signature__detail-value em,
.kb-creations-signature__detail-value i {
    font-style: normal;
    color: var(--kb-ink);
}

.kb-creations-signature__detail-value-line {
    display: block;
}

/* ----- Editorial link (single, restrained) ----- */
.kb-creations-signature__link-wrap {
    margin: 0;
    padding: 0;
}

.kb-creations-signature__link {
    display: inline-block;
    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-gold);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    transition: color var(--kb-transition-ui);
}

.kb-creations-signature__link:hover,
.kb-creations-signature__link:focus-visible {
    color: var(--kb-bordeaux);
}

/* ==========================================================================
   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 / sketch images do not collide with the right column.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-creations-signature {
        padding-top: var(--kb-section-space-tablet);
    }

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

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

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

    .kb-creations-signature__composition {
        max-width: 420px;
        padding-bottom: 100px;
    }

    .kb-creations-signature__main {
        height: 580px;
    }

    .kb-creations-signature__embroidery {
        right: 0;
        bottom: 90px;
        width: 58%;
    }

    .kb-creations-signature__sketch {
        right: 16px;
        bottom: 16px;
        width: 44%;
    }

    .kb-creations-signature__description {
        max-width: 100%;
    }

    .kb-creations-signature__technical {
        column-gap: 40px;
    }
}

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

     1. eyebrow
     2. creation name
     3. collection meta
     4. main image composition
        (main + embroidery detail + sketch)
     5. description
     6. technical details
     7. editorial link

   The image composition stays editorial: main image remains
   dominant, embroidery detail overlaps the LOWER-RIGHT of the
   main image, sketch sits underneath. Wrapper reserves real
   lower space so the following content never collides with
   the sketch overlap.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-creations-signature {
        padding-top: var(--kb-section-space-mobile);
    }

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

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

    /* On mobile the grid becomes a single flex column. We use
       `display: contents` on the story so its direct children
       (identity, description, technical, link) participate in
       the grid's flex ordering as if they were grid siblings
       of the composition. The final mobile order is then
       controlled with explicit `order` values on each child:

         1. identity (eyebrow + name + meta)
         2. composition (main + embroidery + sketch)
         3. description
         4. technical
         5. link

       Desktop layout is unaffected (story keeps its own flex
       column on the RIGHT side of the two-column grid). */
    .kb-creations-signature__story {
        display: contents;
    }

    .kb-creations-signature__identity {
        order: 1;
        align-items: flex-start;
        text-align: left;
    }

    .kb-creations-signature__composition {
        order: 2;
        max-width: 100%;
        width: 100%;
        padding: 0 0 96px 0;
        margin-top: 32px;
    }

    .kb-creations-signature__description {
        order: 3;
        margin: 0;
        max-width: 100%;
    }

    .kb-creations-signature__technical {
        order: 4;
        margin-top: 40px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }

    .kb-creations-signature__link-wrap {
        order: 5;
        margin-top: 8px;
    }

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

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

    .kb-creations-signature__meta {
        font-size: 12px;
        margin-top: 18px;
    }

    /* Main image — full width, slightly shorter on mobile. */
    .kb-creations-signature__main {
        width: 100%;
        height: 480px;
    }

    /* Lower two-image composition (embroidery + sketch) is
       centered on the horizontal axis of the main image /
       composition wrapper, NOT pinned to the right. Uses
       left: 50% + translateX(-50%) so the pair shares the
       same horizontal center as the main image regardless
       of wrapper width. Vertical overlap (bottom: 70 /
       bottom: 12) and z-index layering (embroidery 2,
       sketch 3) are preserved. */
    .kb-creations-signature__embroidery {
        left: 50%;
        right: auto;
        bottom: 70px;
        transform: translateX(-50%);
        width: 58%;
    }

    .kb-creations-signature__sketch {
        left: 50%;
        right: auto;
        bottom: 12px;
        transform: translateX(-50%);
        width: 44%;
    }

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

    .kb-creations-signature__detail {
        padding-bottom: var(--kb-space-l);
    }

    .kb-creations-signature__detail-value {
        font-size: 13px;
    }

    /* (No divider to hide — removed.) */
}

/* ==========================================================================
   SCROLL REVEAL — Section 03 Créations / Pièce Signature
   ------------------------------------------------------------
   Three visual groups animate as their own editorial units:
     - identity (eyebrow + name + meta + description, ONE
       object). The description is hoisted via the
       identity__description order rule on mobile so the
       identity reveals as one block on desktop and splits
       into the correct final order on mobile.
     - image composition (main + embroidery + sketch,
       ONE object — they layer onto one another and reveal
       as a single editorial photo set).
     - technical details (ONE object — the 2 × 2 grid settles
       as a single editorial unit).
   The reveal system is unchanged. We only bind the existing
   fade-up behaviour to the group nodes.
   ========================================================================== */
.kb-creations-signature__identity[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 24px;
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

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

.kb-creations-signature__technical[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 20px;
    transition-delay: 220ms;
    transition-duration: 1000ms;
}

.kb-creations-signature__link-wrap[data-kb-reveal="fade-up"] {
    --kb-reveal-distance: 16px;
    transition-delay: 320ms;
    transition-duration: 900ms;
}

@media (max-width: 767px) {
    .kb-creations-signature__identity[data-kb-reveal="fade-up"],
    .kb-creations-signature__composition[data-kb-reveal="fade-up"],
    .kb-creations-signature__technical[data-kb-reveal="fade-up"],
    .kb-creations-signature__link-wrap[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-signature__name {
        font-size: 40px;
    }
}