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

   Composition (final):
     Section 04 owns a single 100px TOP gap to Section 03 (via
     --kb-section-space-desktop). It then renders two stacked
     editorial blocks under the same full-bleed root:

       A. KB_HOME_PROCESS__DARK   — full-viewport-width dark canvas.
          An absolute <img> backdrop covers the entire block (top,
          bottom, left, right). A restrained Bordeaux → Ink gradient
          overlay sits above the image and below the content, with
          stronger coverage on the left/center for text readability
          and a transparent right edge so the couture tools on the
          right side of the photograph remain visible. The inner
          composition is centered to the 1140px content frame and
          holds (top → bottom) a small Gold ornament, an editorial
          H2 (upright prefix + italic emphasized word), and a
          five-step process row with subtle Gold connector hairlines
          between each step.

       B. KB_HOME_PROCESS__PROMISE — Porcelain surface that follows
          the dark block directly (no extra section gap, no extra
          100px between them). A three-part desktop composition
          centered inside the 1140px content frame:
            [ PROMISE copy ]  |  [ IMAGE (360px) ]  |  [ VISION + À PROPOS CTA ]
          column-gap ~48px, no decorative double frame on the image.

   Elementor contract: every image is still a real <img> selected
   through MEDIA content controls. No inline style="background-image"
   is ever emitted by the widget. The backdrop figure is a true
   absolute layer (position:absolute, inset:0) that converts the
   selected MEDIA control into a full-bleed background.

   Full-bleed escape: same surgical pattern as the Hero, Section 02
   and Section 03. Scoped strictly via :has(.kb-home-process) so
   unrelated .e-con containers stay untouched. No global reset. No
   100vw math. No negative-margin hack.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED ESCAPE — Section 04
   ------------------------------------------------------------
   The KB design system requires this section to be true full-bleed
   (outer 100% viewport width, inner content aligned to the 1140px
   content grid) and the homepage Elementor container may be boxed.
   Without this reset, the parent theme's .atlasyn-container and
   Elementor's .e-con would center the section with side margins
   AND add default block padding on top of our 100px, producing
   a 200px gap. Scoped strictly via :has(.kb-home-process) so
   unrelated .e-con containers stay untouched.
   ========================================================================== */

.e-con:has(.kb-home-process) {
    --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-home-process) > .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
   Owns the 100px TOP gap to Section 03. Owns NO bottom padding —
   the next section will own its own top padding so the
   100px-top-only architecture stays locked. The dark + promise
   blocks connect directly inside the same root.
   ========================================================================== */
.kb-home-process {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    overflow: hidden;
    padding-top: var(--kb-section-space-desktop);
}

/* ==========================================================================
   A. TOP DARK BLOCK
   Full-viewport-width dark canvas. The backdrop <img> is a true
   absolute layer (inset:0) so the photograph covers the ENTIRE
   dark block — no exposed Porcelain edges left/right. The overlay
   sits between the image (z-index 0) and the content (z-index 2)
   so the editorial text always has a calm brand-aligned readable
   field on the left while the right side of the photograph
   (couture tools / fabric / measuring tape) stays fully visible.
   ========================================================================== */
.kb-home-process__dark {
    position: relative;
    width: 100%;
    /* Definite dark-block height. Dramatic but not another full
       Hero. The inner content centers vertically against this
       number without needing 100vh. */
    min-height: 660px;
    overflow: hidden;
    /* Subtle theme-controlled fallback surface for when no
       backdrop has been approved yet. A soft Bordeaux → Ink
       diagonal wash keeps the canvas from rendering as an empty
       void while waiting for a real photograph. Sits BEHIND the
       image (which is then on top of it via object-fit:cover)
       and is never visible once the asset is in place. */
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
    color: var(--kb-porcelain);
}

/* Backdrop — absolute <img> that covers the entire dark block. */
.kb-home-process__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    overflow: hidden;
}

.kb-home-process__backdrop img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Right-biased focal point: art direction concentrates couture
       details toward the right, so "right center" keeps the tools
       (thread, measuring tape, sketch, fabric) visible after the
       object-fit:cover crop. Tuned in CSS only — never exposed to
       Elementor. */
    object-position: right center;
}

/* Placeholder surface for the editor canvas / pre-asset state.
   1px Gold hairline so the editor preview is still legible before
   a real backdrop is uploaded. Production always replaces the
   placeholder with a real <img>. */
.kb-home-process__backdrop--placeholder {
    background-color: var(--kb-bordeaux);
    background-image:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

/* Overlay — restrained Bordeaux → Ink left-to-right wash.
   Lives between the image (z-index 0) and the content (z-index 2)
   so the editorial text always has a calm brand-aligned readable
   field on the left/center while the right side of the photograph
   stays fully visible. Built from --kb-ink + --kb-bordeaux so the
   palette tracks the design system exactly. */
.kb-home-process__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--kb-ink) 82%, transparent) 0%,
        color-mix(in srgb, var(--kb-bordeaux) 68%, transparent) 45%,
        color-mix(in srgb, var(--kb-ink) 22%, transparent) 100%
    );
}

/* Inner composition — 1140px content frame.
   Sits above the overlay (z-index 2) and vertically centers the
   ornament + H2 + process row inside the dark block. min-height:
   inherit keeps the flex parent matching the dark block's
   definite min-height so the content has a real height to center
   against. */
.kb-home-process__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: inherit;
    width: 100%;
    max-width: var(--kb-content-width);
    margin-inline: auto;
    padding-block: var(--kb-space-major);
    /* Align the inner to the same 1140px content frame used by
       every other Section. The "left viewport edge → content
       edge" math is owned by the dark block, so on viewports
       wider than 1140px the inner content stays centered to the
       1140px frame. The dark backdrop still spans edge to edge. */
}

/* ==========================================================================
   ORNAMENT
   Small Gold decorative ornament above the H2. Elementor MEDIA
   control — optional, the section works without it. Rendered as
   a real <img> via the .kb-home-process__ornament slot. No
   Unicode flower, no serif symbol. Kept small and understated.
   ========================================================================== */
.kb-home-process__ornament {
    margin: 0 0 var(--kb-space-m) 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.kb-home-process__ornament img {
    display: block;
    width: auto;
    height: 28px;
    max-width: 80px;
    object-fit: contain;
    /* Gold tint is achieved by the source asset; the slot stays
       neutral so a transparent PNG keeps its clean cut-out. */
}

/* ==========================================================================
   EDITORIAL H2
   Built from a plain prefix span + an italic <em> emphasized
   word. Both are Raleway, light weight, on the Porcelain text
   field. The italic accent gives the emphasized word a subtle
   editorial lift without breaking the locked no-serif rule.
   text-wrap: balance keeps the line break editorial (not a "first
   line short, second line overflowing" SaaS look).

   Desktop title 44px (locked home typography spec). Tablet
   collapses to the same 44px so the requested semantic size is
   never overridden by an old conflicting rule.
   ========================================================================== */
.kb-home-process__title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 44px;
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--kb-porcelain);
    text-wrap: balance;
    /* Editorial footprint. Capped so the title reads as a broad
       editorial block, not a screen-spanning headline. */
    max-width: 820px;
}

.kb-home-process__title-prefix {
    /* Plain upright part of the title. White-space: pre-line so
       explicit \n line breaks from the Elementor textarea are
       respected, and the prefix can flow naturally on small
       viewports without collapsing. */
    white-space: pre-line;
}

.kb-home-process__title-em {
    /* Per the project NEVER-ITALIC rule, the emphasized word is
       now visually identical to the prefix. color: inherit so it
       follows whatever the H2 parent declares (Porcelain on the
       dark block), opacity: 1 so it never dims. <em> markup is
       preserved for semantics only. */
    font-style: normal;
    font-weight: 300;
    color: inherit;
    opacity: 1;
    margin-left: 0.18em;
}

/* ==========================================================================
   PROCESS STEPS ROW
   5 fixed structural numbers (01..05) + 5 editable labels. One
   horizontal row, evenly distributed across the 1140px content
   frame. Subtle Gold horizontal connector hairlines between each
   step (CSS only, no Elementor controls). The line is a border-top
   pinned to the bottom of each step cell so it never crosses the
   step text itself.
   ========================================================================== */
.kb-home-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    /* Grid: 5 even columns. 1fr distributes the row evenly across
       the 1140px content frame. min-width:0 prevents the column
       from forcing horizontal overflow on narrow viewports. */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    /* Editorial rhythm — title → steps. */
    margin-top: 64px;
}

.kb-home-process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 var(--kb-space-m) 0 0;
    min-width: 0;
}

/* Subtle Gold horizontal connector hairline BETWEEN steps.
   Rendered as a 1px top border on every step except the first.
   Lives BELOW the step number/label via the padding-top on the
   number, so the line never crosses the text itself. */
.kb-home-process__step::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    max-width: 44px;
    height: 1px;
    background-color: var(--kb-gold);
    opacity: 0.55;
}

.kb-home-process__step:last-child {
    padding-right: 0;
}

.kb-home-process__step-num {
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--kb-gold);
    /* Push the number BELOW the hairline so the line never crosses
       the text itself. */
    margin-top: 14px;
}

.kb-home-process__step-label {
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kb-porcelain);
    /* text-wrap: balance keeps the label width intentional on
       single-line steps. */
    text-wrap: balance;
}

/* ==========================================================================
   Section 04 ships ONLY the dark process / savoir-faire block.
   The previous Porcelain Promise / Vision / À propos sub-block
   (and its dedicated column grid, couture photo frame, copy
   columns, gold CTA, and reveal wiring) was deleted from the
   widget markup alongside the purge of every selector that
   targeted it. The selectors below intentionally define nothing.
   ========================================================================== */

/* ==========================================================================
   Tablet (≤ 1199px)
   Only basic overflow protection + responsive scale-down. Full
   tablet design for Section 04 will be done in a separate pass
   after desktop is approved — this block is a guard rail, not a
   redesign. Honors the spec: "Do NOT deeply art-direct mobile in
   this pass if Section 03 mobile is still being completed."
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-home-process {
        padding-top: var(--kb-section-space-tablet);
    }

    .kb-home-process__inner {
        padding-inline: var(--kb-gutter-tablet);
    }

    .kb-home-process__title {
        font-size: 44px;
    }

    .kb-home-process__steps {
        margin-top: 56px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px) — overflow safety only.
   The spec explicitly defers dedicated mobile refinement to a
   later pass. This block is a guard rail: no horizontal overflow,
   content remains accessible, background remains full-bleed,
   process row can wrap/stack safely at narrower widths.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-home-process {
        padding-top: var(--kb-section-space-mobile);
    }

    .kb-home-process__dark {
        /* Allow the dark block to grow with the content on
           very narrow viewports. The desktop min-height would
           leave a tall empty pocket above a 3-row process row. */
        min-height: 560px;
    }

    .kb-home-process__inner {
        padding-inline: var(--kb-gutter-mobile);
        padding-block: var(--kb-space-l);
    }

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

    /* Process row: collapse to a 2-column grid on small viewports
       so the steps never overflow horizontally and the five
       labels stay legible. The 5th step moves to a second row
       on its own. The Gold hairlines are repositioned to the
       LEFT of the row so they read as a vertical "step timeline"
       instead of horizontal "between-step" connectors. */
    .kb-home-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
        column-gap: 24px;
        margin-top: 40px;
    }

    .kb-home-process__step {
        padding: 0 0 0 var(--kb-space-m);
    }

    .kb-home-process__step::before {
        top: 6px;
        left: 0;
        width: 16px;
    }

    .kb-home-process__step-num {
        font-size: 13px;
    }

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

/* Tablet (768–1024px) — middle point between desktop and mobile.
   Only semantic typography: title 40px, body 15px, eyebrow 11.5px.
   No layout / spacing / geometry changes. */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-home-process__title {
        font-size: 40px;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 04
   ------------------------------------------------------------
   Per the spec: animate the dark block's main textual content as
   ONE group (ornament + title) and the process row as ONE group.
   The five steps move as ONE unit — they are NEVER animated
   individually. The lower block exposes three reveal objects
   (Promise copy, image, Vision column) with subtle timing
   consistent with Sections 02/03.

   The backdrop image is intentionally NOT in the reveal set —
   per the spec: "Do NOT zoom/pan the dark background dramatically.
   Static photography is preferred."

   Timing per spec:
     - dark head  (ornament + title):  fade-up ~20px, 900–1000ms, 0ms
     - dark steps (process row):       fade-up ~16–20px, 120ms delay
     - lower Promise copy:             fade-up, 0ms delay
     - lower Promise image:            fade-up, 120ms delay
     - lower Vision column:            fade-up, 240ms delay
   ========================================================================== */
.kb-home-process__head[data-kb-reveal="fade-up"] {
    transition-delay: 0ms;
    transition-duration: 950ms;
    --kb-reveal-distance: 20px;
}

.kb-home-process__steps[data-kb-reveal="fade-up"] {
    transition-delay: 120ms;
    transition-duration: 900ms;
    --kb-reveal-distance: 18px;
}

/* Mobile: same architecture, shorter distance / duration. */
@media (max-width: 767px) {
    .kb-home-process__head[data-kb-reveal="fade-up"],
    .kb-home-process__steps[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
        transition-delay: 0ms;
    }
}