/* ==========================================================================
   KB Home Creator (Section 07) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-home-creator. All values driven by tokens.css.

   Composition (final):
     Centered 1140px editorial split living inside the project's normal
     content frame. NO full-bleed breakout, NO 100vw, NO negative
     viewport margins — the section is normal section width like the
     other 1140px sections (Section 05, 06).

     Desktop split (final):
       440px portrait image + 72px gap + remainder (~628px) for the
       right column = 1140px exact.

     Left column: a tall editorial portrait (~700px) with a refined
     desaturated treatment applied in CSS (grayscale + sepia, no harsh
     pure black-and-white). The figure renders a real <img> selected
     through the MEDIA content control. object-fit: cover keeps the
     focal point on the creator. No card, no border, no radius.

     Right column: an inner content wrapper (max-width ~540–580px)
     centered vertically against the image (via grid stretch + flex
     center). Carries the eyebrow + Gold hairline, two-line H2
     (Raleway upright prefix + Raleway italic accent on "la matière"),
     a restrained short Gold divider, three short body paragraphs
     (Montserrat 15–16px, line-height 1.75, max-width 540px), the
     editorial text-link CTA at the end of the body flow, and the
     small uppercase signature + role label at the bottom.

   Section spacing (locked):
     Section 07 owns the 100px TOP gap to Section 06 only. No bottom
     padding — Section 08 (if any) will own its own top padding so
     the 100px-top-only architecture stays locked.

   Elementor contract: the portrait is still a real <img> selected
   through a MEDIA content control. No inline style="background-
   image:..." is ever emitted by the widget. All visual layering
   lives here in the child-theme CSS.

   No full-bleed escape. Unlike the Hero / Section 04 dark block,
   Section 07 does not need to span the viewport width — it lives
   inside the normal centered content frame. Global Elementor
   container rules are NOT touched.
   ========================================================================== */

/* ==========================================================================
   Section root
   Owns the 100px TOP gap to Section 06 only. Owns NO bottom padding.
   Wrapper width follows the canonical KB pattern:
     width: min(calc(100% - 2 * var(--kb-gutter-desktop)),
                var(--kb-content-width));
     max-width: var(--kb-content-width);
     margin-inline: auto;
   so the section is never wider than 1140px and never collides with
   narrow viewports. The inner is a CSS grid (440px image + 1fr
   content, 72px gap) so the right column stretches to the same
   700px row height as the image.
   ========================================================================== */
.kb-home-creator {
    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);
    overflow: hidden;
    padding-top: var(--kb-section-space-desktop);
}

/* ==========================================================================
   Desktop grid — Section 07 micro-fix
   The two-column composition now lives on .kb-home-creator__inner
   (not the section root) so the section root owns ONLY the centered
   1140px frame + 100px top spacing. Inner uses:
     440px portrait | 72px gap | 1fr content
   Children are pinned to explicit columns/rows so the visual order
   is decoupled from the DOM source order. */
.kb-home-creator__inner {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    column-gap: 72px;
    align-items: stretch;
}

.kb-home-creator__portrait {
    grid-column: 1;
    grid-row: 1;
}

.kb-home-creator__content {
    grid-column: 2;
    grid-row: 1;
}

/* ==========================================================================
   RIGHT PORTRAIT (desktop)
   Tall editorial portrait. 440px wide × 700px tall on desktop (within
   the spec's 680–720px target, picked 700px). The figure has NO
   background, padding, border, radius, shadow. The <img> renders
   at 100% / 100% with object-fit: cover so the portrait focal point
   stays on the creator. The desaturated treatment (grayscale + sepia
   + slight contrast reduction) is applied directly to the <img> so
   the source asset remains untouched and the filter can be tuned
   in one place.
   ========================================================================== */
.kb-home-creator__portrait {
    position: relative;
    width: 100%;
    height: 700px;
    margin: 0;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--kb-bordeaux) 6%, var(--kb-porcelain));
}

.kb-home-creator__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    /* Refined desaturated editorial treatment. NOT pure B&W.
       Keeps warm editorial softness (sepia .10) and a very mild
       contrast reduction. Tune here if the supplied image
       already carries the correct treatment — the rule below is
       the single source of truth. */
    filter: grayscale(0.78) sepia(0.10) contrast(0.96);
}

/* Placeholder surface for the editor canvas / pre-asset state. A
   soft Bordeaux→Ink wash keeps the left column from rendering as
   an empty void while waiting for a real photograph. Hidden behind
   the image once the asset is in place. */
.kb-home-creator__portrait-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
    display: block;
}

/* ==========================================================================
   LEFT CONTENT (desktop)
   The left column inside the 1140px centered wrapper. The page
   background is already Porcelain, so this column does NOT paint
   its own background block. The grid's align-items: stretch makes
   this column match the image's 700px height; the inner flex
   centers the editorial content vertically inside that column so
   the copy is not pinned to the top.
   ========================================================================== */
.kb-home-creator__content {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* Generous but restrained internal padding so the editorial
       copy never touches the right edge of the content frame. */
    padding-block: 8px;
}

/* ==========================================================================
   EYEBROW + GOLD HAIRLINE
   Montserrat 12px / 500 / uppercase / 0.18em / Gold. The same short
   Gold hairline treatment used in Sections 05 and 06: a thin Gold
   rule precedes the text on the same baseline so the eyebrow reads
   as a numbered editorial chapter mark.
   ========================================================================== */
.kb-home-creator__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--kb-gold);
}

.kb-home-creator__eyebrow-text {
    display: inline-block;
}

/* ==========================================================================
   EDITORIAL H2
   Two-line Raleway display. The prefix carries an explicit \n line
   break (white-space: pre-line) so "Une vision de la féminité," sits
   on line 1 and "traduite par" sits on line 2. The italic accent
   ("la matière.") follows "traduite par " inline on line 2. NO
   serif. text-wrap: balance keeps the title block editorial, not
   "first line short, second line overflowing".

   Desktop: 44px (locked home typography spec). font-weight 300.
   line-height 1.10. Ink. The italic accent is Raleway italic at the
   same approximate size — never dramatically larger.
   ========================================================================== */
.kb-home-creator__title {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: var(--kb-ink);
    text-wrap: balance;
    max-width: 18ch;
}

.kb-home-creator__title-prefix {
    white-space: pre-line;
}

.kb-home-creator__title-em {
    /* Per the project NEVER-ITALIC rule. <em> markup is preserved
       for semantics only. */
    font-style: normal;
    font-weight: 300;
    color: var(--kb-ink);
    margin-left: 0.18em;
}

/* ==========================================================================
   TITLE DECORATION — short Gold divider — REMOVED
   The hairline + inner element that previously sat between the H2
   and the body copy have been deleted from the widget markup.
   The selector rules that targeted them have been removed from
   the stylesheet alongside. This block intentionally defines
   nothing.
   ========================================================================== */

/* ==========================================================================
   BODY COPY
   Three short editorial paragraphs. Montserrat 15px / 400 / line-
   height 1.75 / Ink (locked home typography spec). Capped at 540px
   max-width so the wrap reads as an editorial body, not a full-width
   text block. Inter-paragraph spacing is owned by the <p> margin-
   bottom so a change in the number of paragraphs never disturbs
   the rhythm.

   The whole body block moves as ONE unit with the right content
   reveal (no per-paragraph animation).
   ========================================================================== */
.kb-home-creator__body {
    width: 100%;
    max-width: 540px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.kb-home-creator__body p {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--kb-ink);
    text-wrap: pretty;
}

/* ==========================================================================
   CTA — restrained editorial text-link
   Lives at the end of the section content (after the body, per
   spec). NOT a primary button — a Gold uppercase text link with a
   subtle Gold hairline and a thin arrow.

   Montserrat 13px / 500 / uppercase / 0.18em / Gold. Hover: Gold
   → Ink (no sticky hover via the coarse-pointer split).
   ========================================================================== */
.kb-home-creator__cta-wrap {
    margin-top: var(--kb-space-xl);
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

.kb-home-creator__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kb-gold);
    /* Subtle Gold underline hairline per spec. */
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--kb-gold) 55%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition:
        color var(--kb-transition-editorial),
        text-decoration-color var(--kb-transition-editorial),
        transform var(--kb-transition-editorial);
}

.kb-home-creator__cta-label {
    display: inline-block;
}

.kb-home-creator__cta-arrow {
    display: inline-block;
    font-family: var(--kb-font-body);
    font-size: 14px;
    line-height: 1;
    transition: transform var(--kb-transition-editorial);
}

@media (hover: hover) and (pointer: fine) {
    .kb-home-creator__cta:hover {
        color: var(--kb-ink);
        text-decoration-color: var(--kb-ink);
    }

    .kb-home-creator__cta:hover .kb-home-creator__cta-arrow {
        transform: translateX(4px);
    }
}

.kb-home-creator__cta:active {
    color: var(--kb-ink);
    text-decoration-color: var(--kb-ink);
}

.kb-home-creator__cta:focus-visible {
    color: var(--kb-gold);
    text-decoration-color: var(--kb-gold);
    outline: 2px solid var(--kb-gold);
    outline-offset: 6px;
}

/* ==========================================================================
   SIGNATURE / ROLE
   Below the CTA after generous but restrained spacing.

   Layout: a horizontal flex row that pairs an OPTIONAL logo (left)
   with the stacked name + role (right). The two <p> elements are
   grouped inside .kb-home-creator__signature-text so the row container
   only ever owns TWO children: [ logo | text-block ].
   - align-items: center so the logo and the two-line text block
     share a common vertical center.
   - gap: 16px between logo and text.
   - When no logo is selected, the text block is the only child and
     the row collapses to a single column with the original 6px gap
     so the desktop look is preserved.

   Signature name — Montserrat 11–12px / 500 / uppercase / Gold /
   .18em tracking. Small uppercase chapter-mark.
   Role — Montserrat 13–14px / 400 / muted Ink. Subtle label under
   the signature. Do NOT use "Maison De Couture" here.

   Logo — preserved aspect ratio, height ~44px desktop, width auto,
   object-fit: contain. No border, no radius, no background, no
   shadow, no padding. Sits flush-left of the text block.
   ========================================================================== */
.kb-home-creator__signature {
    margin-top: var(--kb-space-xl);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    max-width: 100%;
}

.kb-home-creator__signature-logo {
    display: block;
    flex: 0 0 62px;
    width: 62px;
    max-width: 62px;
    height: 62px;
    max-height: 62px;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.kb-home-creator__signature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    margin: 0;
}

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

.kb-home-creator__signature-role {
    margin: 0;
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: color-mix(in srgb, var(--kb-ink) 82%, transparent);
}

/* ==========================================================================
   Tablet (≤ 1199px)
   The centered 1140px wrapper still applies (it's the canonical KB
   pattern), but the split compresses: the title scales to 42px,
   the column gap tightens, and the image height drops to 660px.
   Below 1024px the section switches to a single vertical column
   (image-first) so the copy never has to compete with the portrait
   at narrow tablet widths — per spec, no cramped side-by-side text.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-home-creator {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-home-creator__inner {
        column-gap: 56px;
    }

    .kb-home-creator__portrait {
        height: 660px;
    }

    .kb-home-creator__title {
        font-size: 44px;
        max-width: none;
    }

    .kb-home-creator__body {
        max-width: 480px;
    }

    /* Signature row composition is preserved on tablet (logo left,
       text right). Logo is a small square monogram; scaled down
       slightly to 52×52 so it does not dominate the column. */
    .kb-home-creator__signature {
        gap: 12px;
    }

    .kb-home-creator__signature-logo {
        flex: 0 0 52px;
        width: 52px;
        max-width: 52px;
        height: 52px;
        max-height: 52px;
    }

    @media (max-width: 1024px) {
        .kb-home-creator__inner {
            grid-template-columns: 1fr;
            row-gap: var(--kb-space-xl);
        }

        /* The desktop explicit grid placement (portrait→1, content→2,
           both row 1) is only valid for the two-column desktop grid.
           Once the layout collapses to a single column, the children
           must stack via the natural source order. Reset both to
           auto-placement here. */
        .kb-home-creator__content,
        .kb-home-creator__portrait {
            grid-column: auto;
            grid-row: auto;
        }

        .kb-home-creator__portrait {
            max-width: 720px;
            margin-inline: auto;
            width: 100%;
        }

        .kb-home-creator__content {
            padding-block: 0 var(--kb-space-l);
        }
    }
}

/* ==========================================================================
   Mobile (≤ 767px) — single-column editorial stack
   Per the spec: image first, then eyebrow, title, divider, body,
   CTA, signature. The two halves stack vertically; the image keeps
   a tall opening footprint (500px) so the section still reads as a
   strong visual entry. In this pass the image is intentionally
   RIGHT-aligned (84% of the column width, with a 20px right gutter
   via --kb-gutter-mobile) to create the asymmetrical editorial
   composition — the left side of the section is intentional
   Porcelain negative space. The copy below stays normally left-
   aligned inside the 20px content gutters.

   Body text: 16px / line-height 1.7. CTA gap after body ~30px.
   Signature gap after CTA ~38px. Title: 36–40px, line-height 1.1.
   No horizontal overflow at 390 / 375 / 360.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-home-creator {
        padding-top: var(--kb-section-space-mobile);
    }

    /* Section 07 mobile micro-fix — content + image reorder.
       Convert the inner to a flex column and flatten the
       .kb-home-creator__content wrapper (display: contents) so
       its children (eyebrow, title, body, cta-wrap, signature)
       participate directly in the flex ordering. The portrait is
       placed at order 3 (between the title and the body) so the
       mobile reading order is: eyebrow → title → IMAGE → body
       → CTA → signature. The portrait still owns its own
       data-kb-reveal="image" and fades in independently. */
    .kb-home-creator__inner {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        row-gap: 0;
        column-gap: 0;
    }

    .kb-home-creator__portrait,
    .kb-home-creator__content {
        grid-column: auto;
        grid-row: auto;
    }

    .kb-home-creator__content {
        /* Flatten the content wrapper so its children sit at the
           same flex level as the portrait. */
        display: contents;
        padding: 0;
    }

    /* Flex ordering: eyebrow (1) → title (2) → portrait (3) →
       body (4) → cta (5) → signature (6). The portrait sits
       directly under the title. */
    .kb-home-creator__eyebrow   { order: 1; }
    .kb-home-creator__title     { order: 2; }
    .kb-home-creator__portrait  { order: 3; }
    .kb-home-creator__body      { order: 4; }
    .kb-home-creator__cta-wrap  { order: 5; }
    .kb-home-creator__signature { order: 6; }

    .kb-home-creator__portrait {
        /* Section 07 mobile micro-fix — image spans the FULL
           available mobile section width. The previous 84% /
           right-aligned crop is replaced with 100% and the
           horizontal margins are zeroed so the figure aligns
           with the section edges. Height is preserved at 500px
           so the crop stays consistent. */
        width: 100%;
        height: 500px;
        margin-inline: 0;
    }

    /* Each previously-wrapped child now needs the mobile gutter
       on its own since .kb-home-creator__content no longer
       provides padding (it is display: contents). */
    .kb-home-creator__eyebrow,
    .kb-home-creator__title,
    .kb-home-creator__body,
    .kb-home-creator__cta-wrap,
    .kb-home-creator__signature {
        padding-inline: var(--kb-gutter-mobile);
    }

    /* Spacing between the title and the portrait (the new
       "image after title" gap). Uses the project's spacing
       token so the rhythm matches the other sections. */
    .kb-home-creator__title {
        margin-bottom: var(--kb-space-l);
    }

    .kb-home-creator__eyebrow {
        font-size: 11px;
    }

    .kb-home-creator__title {
        font-size: 36px;
        line-height: 1.1;
        max-width: none;
    }

    .kb-home-creator__body {
        max-width: none;
        margin-top: 24px;
    }

    .kb-home-creator__body p {
        font-size: 16px;
        line-height: 1.7;
    }

    .kb-home-creator__cta-wrap {
        margin-top: 30px;
        gap: 14px;
    }

    .kb-home-creator__signature {
        /* Signature is hidden on mobile only (markup stays so it
           remains visible on desktop/tablet). */
        display: none;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 07
   ------------------------------------------------------------
   Per the spec, exactly TWO reveal groups:
     1. Portrait (desktop: right column) — image reveal, ~1000ms,
        fades in with a tiny scale. Treated as ONE object.
     2. Copy (desktop: left column — eyebrow / title / divider /
        body / CTA / signature) — fade-up, ~22px, ~950ms, ~120ms
        delay. Treated as ONE editorial block. Individual children
        are NEVER animated.

   The CTA, signature, divider etc. are not animated separately —
   they ride the parent .kb-home-creator__content reveal. The
   portrait is a sibling reveal group, fired at the same instant
   (no delay) so the two visual halves land in the same breath.

   Mobile: shorter distance / duration. Reduced-motion safety net
   is already in base.css — no per-section override needed.
   ========================================================================== */
.kb-home-creator__portrait[data-kb-reveal="image"] {
    transition-delay: 0ms;
    transition-duration: 1000ms;
}

.kb-home-creator__content[data-kb-reveal="fade-up"] {
    transition-delay: 120ms;
    transition-duration: 950ms;
    --kb-reveal-distance: 22px;
}

/* Mobile: same architecture, shorter distance / duration. */
@media (max-width: 767px) {
    .kb-home-creator__portrait[data-kb-reveal="image"] {
        transition-duration: 900ms;
    }

    .kb-home-creator__content[data-kb-reveal="fade-up"] {
        transition-delay: 120ms;
        transition-duration: 800ms;
        --kb-reveal-distance: 14px;
    }
}

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