/* ==========================================================================
   KB Home Final CTA (Section 10) — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-home-finalcta. All values driven by tokens.css.

   Composition (final):
     Section owns the 100px TOP gap to Section 09 only (no bottom
     padding — the Footer owns its own top spacing). The visible
     content is a SINGLE rounded CTA container sitting inside the
     1140px content frame (no full-bleed breakout). The container
     is the ONLY surface in the project that is allowed to use
     border-radius (24px desktop / 18px mobile). overflow: hidden
     keeps the background image + overlay clipped to the rounded
     edges. The global --kb-radius token is NOT changed.

     The container carries:
       - ONE single background image (a real <img> from a MEDIA
         content control). No collage, no multiple background
         layers, no multi-image split.
       - a restrained Bordeaux/dark overlay so the left copy stays
         readable while the couture subject on the right remains
         visible.
       - a top row (logo upper-left, "À VOTRE ÉCOUTE" label upper-
         right with a small restrained couture ornament rendered
         entirely in CSS — no external SVG / no Elementor image).
       - a copy group (title / body / CTAs / contact meta)
         positioned in the lower-left half of the container, with
         the couture image naturally visible toward the right
         through the background.

   Elementor contract: every image (background, logo) is a real
   <img> selected through a MEDIA content control. No inline
   style="background-image:..." is ever emitted by the widget.
   The Bordeaux overlay is a CSS ::after. The couture ornament
   beside "À VOTRE ÉCOUTE" is a CSS pseudo-element (no asset).

   Type rules:
     - Title: Raleway, Porcelain, non-italic, uniform color across
       the ENTIRE title. "conversation." is NEVER italic, Gold, or
       serif. No decorative divider under the title.
     - Body: Montserrat, Porcelain / muted Porcelain.
     - Buttons: the existing site-wide .kb-button primitive (54px
       height, 28px inline padding, Montserrat 13px / 500, 0.12em,
       radius 0, --kb-transition-button). The local --primary and
       --secondary modifiers ONLY override color tokens on top of
       the existing primitive — the primitive is never modified.

   Reveal:
     A single restrained reveal group (.kb-home-finalcta__copy) is
     marked with data-kb-reveal="fade-up". The top row, the buttons,
     and the contact meta are NEVER animated individually — they all
     ride the parent group, matching the existing Sections 02–09
     architecture.
   ========================================================================== */

/* ==========================================================================
   Section root
   Owns the 100px TOP gap to Section 09 only. Owns NO bottom padding.
   Wrapper width follows the canonical KB pattern (min() clamp) so
   the section is never wider than 1140px and never collides with
   narrow viewports. The rounded CTA container lives as a child
   inside the wrapper (not on the section root) so the section
   itself stays a clean rectangle.
   ========================================================================== */
.kb-home-finalcta {
    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: transparent;
    color: var(--kb-ink);
    overflow: visible;
    padding-top: var(--kb-section-space-desktop);
    /* Section 10 owns the 100px TOP gap to Section 09 (above) and
       the 100px BOTTOM gap to the Footer (below) on desktop. The
       bottom gap is owned by the final CTA so the Footer does not
       need to add its own top padding (which would affect every
       other page that reuses the Footer). The bottom gap is held
       in padding-bottom (not margin-bottom) so the visible 100px
       cannot be collapsed by an outer Elementor section wrapper.
       Tablet / mobile mirror the standard 80 / 64 token ladder. */
    padding-bottom: 100px;
}

/* ==========================================================================
   Rounded CTA container (the only radius surface in the project)
   Background lives here so the radius + overflow:hidden clip both
   the image and the overlay together. 24px desktop / 18px mobile.
   ========================================================================== */
.kb-home-finalcta__inner {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--kb-ink);
    color: var(--kb-porcelain);
    /* Generous internal padding so the editorial copy never collides
       with the rounded edges. The copy group is positioned in the
       lower-left via min-height + flex on the layout. */
    isolation: isolate;
}

/* ==========================================================================
   Single background image
   Real <img> rendered from the MEDIA content control. position:absolute
   + inset:0 makes it cover the entire rounded container. z-index 0
   keeps it BEHIND the overlay (z-index 1) and the layout (z-index 2).
   background-size: cover is satisfied by the <img> object-fit:cover
   rule; no CSS background-image is ever emitted. object-position is
   right-biased (center 60%) so the couture subject naturally shows
   on the right side of the container while the left side carries
   the copy + overlay.
   ========================================================================== */
.kb-home-finalcta__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    overflow: hidden;
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

.kb-home-finalcta__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Right-biased focal point so the couture subject on the right
       side of the source composition stays visible after the
       rounded crop. Tuned in CSS only — never exposed to Elementor. */
    object-position: 65% center;
}

/* ==========================================================================
   Restrained Bordeaux/dark overlay
   Lives between the image (z-index 0) and the layout (z-index 2) so
   the editorial text on the left always has a calm brand-aligned
   readable field while the right side of the photograph stays
   visible. Multi-stop horizontal fade anchored on the left, easing
   into transparent by ~80% so the subject on the right is never
   tinted. Uses color-mix() against --kb-bordeaux so the overlay
   tracks the design system exactly — no hardcoded rgba literals,
   no muddy full-image veil.
   ========================================================================== */
.kb-home-finalcta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kb-bordeaux) 82%, transparent) 0%,
        color-mix(in srgb, var(--kb-bordeaux) 70%, transparent) 14%,
        color-mix(in srgb, var(--kb-bordeaux) 56%, transparent) 28%,
        color-mix(in srgb, var(--kb-bordeaux) 42%, transparent) 42%,
        color-mix(in srgb, var(--kb-bordeaux) 28%, transparent) 56%,
        color-mix(in srgb, var(--kb-bordeaux) 14%, transparent) 70%,
        color-mix(in srgb, var(--kb-bordeaux) 4%, transparent) 82%,
        transparent 92%
    );
}

/* ==========================================================================
   Layout — top row + copy group
   The layout is a column flex: top row at the top, copy group at
   the bottom (with flex-grow:1 to push it down). The container has
   a definite min-height (desktop) so the copy sits in the lower
   portion of the rounded canvas with the right side naturally
   showing the couture subject through the background.
   ========================================================================== */
.kb-home-finalcta__layout {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 560px;
    padding: 36px 56px 56px 56px;
}

.kb-home-finalcta__top-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 44px;
}

/* Logo — real <img> from the MEDIA control. Height is capped so the
   logo never dominates the editorial block. The logo is rendered
   with its natural color (the supplied artwork may already be
   Porcelain / light). */
.kb-home-finalcta__logo {
    flex: 0 0 auto;
    max-height: 88px;
    line-height: 0;
}

.kb-home-finalcta__logo img {
    display: block;
    max-height: 88px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   "À VOTRE ÉCOUTE" upper-right label + restrained couture ornament
   Montserrat 12px / 500 / uppercase / 0.18em / Porcelain (locked
   home eyebrow spec). The small ornament beside it is a CSS
   pseudo-element: a thin 1px Gold rule plus a tiny centered dot.
   It is a restrained editorial mark compatible with the project's
   eyebrow system — NOT the reference flourish, NOT a star, NOT a
   giant ornament. The ornament is purely decorative (aria-hidden)
   so it does not interfere with screen readers.
   ========================================================================== */
.kb-home-finalcta__ear {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--kb-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--kb-porcelain-muted);
    font-style: normal;
}

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

/* Couture ornament removed — kept text-only per the Section 10
   micro-fix. The .kb-home-finalcta__ear-mark element was deleted
   from the widget markup alongside this rule purge. */

/* ==========================================================================
   Copy group
   Lives in the lower portion of the rounded container. flex-grow:1
   pushes it down to the bottom-left. max-width caps the editorial
   footprint at ~60% of the container width so the right side stays
   visually free for the couture subject to breathe through the
   background. The whole group moves as ONE reveal (fade-up).
   ========================================================================== */
.kb-home-finalcta__copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 28px;
    width: 100%;
    max-width: 60%;
    margin-top: var(--kb-space-xl);
}

/* ==========================================================================
   Title
   Raleway, Porcelain, non-italic. SAME color across the ENTIRE
   title (including "conversation."). No decorative divider directly
   underneath. white-space: pre-line honors the editor's \n line
   break. text-wrap: balance keeps the two-line block editorial.
   font-weight 300 / line-height 1.08 / size 44px desktop (locked
   home typography spec).
   ========================================================================== */
.kb-home-finalcta__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);
    font-style: normal;
    text-wrap: balance;
    white-space: pre-line;
}

/* ==========================================================================
   Body copy
   Montserrat 15–16px / 400 / line-height 1.7 / Porcelain muted
   (slightly lower contrast than the title so the title still
   anchors the visual hierarchy). Line breaks honored via
   white-space: pre-line. Capped at ~56ch so the line length
   stays editorial.
   ========================================================================== */
.kb-home-finalcta__body {
    margin: 0;
    max-width: 56ch;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--kb-porcelain-muted);
    white-space: pre-line;
    text-wrap: pretty;
    font-style: normal;
}

/* ==========================================================================
   CTA group
   Two canonical outline buttons side-by-side at desktop. Reuses
   the site-wide .kb-button primitive (54px height, 28px padding,
   Montserrat 13px / 500, 0.12em, radius 0, --kb-transition-button).
   Only color tokens are overridden on top of the primitive —
   height / padding / font / radius / transition are never touched
   here.

   Primary (Porcelain) and Secondary (Gold) follow the same Hero
   hover inversion pattern: fine-pointer hover fills the frame and
   inverts the label color to Ink. :active is kept outside the
   pointer media query for touch press feedback. :focus-visible
   uses a restrained Bordeaux outline so keyboard focus is
   independent of pointer type.
   ========================================================================== */
.kb-home-finalcta__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: var(--kb-space-s);
}

.kb-home-finalcta__cta {
    /* Hero-equivalent motion: promote the base 300ms transition to
       --kb-transition-button (500ms easeOutQuint). background-color,
       color, border-color only — no transform, no scale. */
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

/* PRIMARY / PORCELAIN */
.kb-home-finalcta__cta--primary,
.kb-home-finalcta__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}

.kb-home-finalcta__cta--primary:active {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    border-color: var(--kb-porcelain);
}

.kb-home-finalcta__cta--primary:focus-visible {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-home-finalcta__cta--primary:hover {
        background-color: var(--kb-porcelain);
        color: var(--kb-ink);
        border-color: var(--kb-porcelain);
    }
}

/* SECONDARY / GOLD */
.kb-home-finalcta__cta--secondary,
.kb-home-finalcta__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    /* Subtle drop shadow under the Gold label so it stays
       legible over the photographic background. Removed on
       hover when the button flips to Gold background + Ink
       text (the Ink text on Gold needs no shadow). */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.kb-home-finalcta__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
    text-shadow: none;
}

.kb-home-finalcta__cta--secondary:focus-visible {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    outline: 2px solid var(--kb-bordeaux);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .kb-home-finalcta__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
        text-shadow: none;
    }
}

/* ==========================================================================
   Contact meta row
   Three items (phone / email / location) separated by thin Porcelain
   structural rules. Each item carries a tiny CSS icon (single
   glyph, restrained) + the editorial text. Montserrat 13px / 400 /
   Porcelain muted. NOT animated individually — rides the parent
   .kb-home-finalcta__copy reveal.
   ========================================================================== */
.kb-home-finalcta__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: var(--kb-space-s);
    padding-top: var(--kb-space-m);
    border-top: 1px solid var(--kb-porcelain-divider);
    width: 100%;
    max-width: 100%;
}

.kb-home-finalcta__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--kb-porcelain-muted);
    font-style: normal;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.kb-home-finalcta__meta-item + .kb-home-finalcta__meta-item {
    position: relative;
    padding-left: 18px;
}

.kb-home-finalcta__meta-item + .kb-home-finalcta__meta-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: var(--kb-porcelain-divider);
}

.kb-home-finalcta__meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--kb-gold);
    line-height: 0;
    flex: 0 0 auto;
}

.kb-home-finalcta__meta-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

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

/* ==========================================================================
   Tablet (≤ 1199px)
   Section padding switches to the tablet token. Container padding
   tightens. Title scales to 42px. The copy group still occupies
   the lower-left; the right ~40% stays free for the subject to
   breathe. CTAs keep the same outline architecture.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-home-finalcta {
        padding-top: var(--kb-section-space-tablet);
        padding-bottom: var(--kb-section-space-tablet);
    }

    .kb-home-finalcta__layout {
        min-height: 480px;
        padding: 32px 44px 44px 44px;
    }

    .kb-home-finalcta__copy {
        max-width: 64%;
    }

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

/* ==========================================================================
   Mobile (≤ 767px) — single-column editorial stack
   Container padding tightens to 24px. Radius drops to 18px. Title
   scales to 36px. CTAs stack vertically full-width. Contact meta
   stacks vertically without the inline separators. The overlay
   keeps a left-anchored readable field while the right side stays
   unobstructed. No horizontal overflow at 390 / 375 / 360.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-home-finalcta {
        padding-top: var(--kb-section-space-mobile);
        padding-bottom: var(--kb-section-space-mobile);
    }

    .kb-home-finalcta__inner {
        border-radius: 18px;
    }

    .kb-home-finalcta__layout {
        min-height: 0;
        padding: 24px 24px 32px 24px;
    }

    /* Top row collapses gracefully on narrow viewports. Logo and
       ear label stay on a single line, but shrink together. */
    .kb-home-finalcta__top-row {
        gap: 12px;
    }

    .kb-home-finalcta__logo {
        max-height: 72px;
    }

    .kb-home-finalcta__logo img {
        max-height: 72px;
    }

    .kb-home-finalcta__ear {
        font-size: 10px;
        letter-spacing: 0.18em;
        gap: 10px;
    }

    /* Copy group occupies the full width on mobile so the editorial
       block never collides with the right edge. */
    .kb-home-finalcta__copy {
        max-width: 100%;
        gap: 22px;
        margin-top: var(--kb-space-l);
    }

    .kb-home-finalcta__title {
        font-size: 36px;
        line-height: 1.1;
    }

    .kb-home-finalcta__body {
        font-size: 15px;
        line-height: 1.7;
    }

    /* CTAs stack vertically full-width. The site-wide .kb-button
       primitive (54px height, etc.) is untouched. */
    .kb-home-finalcta__ctas {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .kb-home-finalcta__cta {
        width: 100%;
    }

    /* Contact meta stacks vertically on mobile and the inline
       separators collapse. A subtle top hairline (already on the
       meta group) still separates the meta block from the CTAs. */
    .kb-home-finalcta__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .kb-home-finalcta__meta-item + .kb-home-finalcta__meta-item {
        padding-left: 0;
    }

    .kb-home-finalcta__meta-item + .kb-home-finalcta__meta-item::before {
        display: none;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Section 10
   ------------------------------------------------------------
   Per the spec, exactly ONE reveal group: the entire copy group
   (title / body / CTAs / contact meta) — fade-up, ~22px, ~950ms,
   ~120ms delay. The top row (logo + ear label), the background
   image, and the overlay are NOT animated — they are present
   from the first paint so the rounded CTA canvas is already
   calm and editorial when the copy group lands.

   Mobile: shorter distance / duration. Reduced-motion safety net
   is already in base.css — no per-section override needed.
   ========================================================================== */
.kb-home-finalcta__copy[data-kb-reveal="fade-up"] {
    transition-delay: 120ms;
    transition-duration: 950ms;
    --kb-reveal-distance: 22px;
}

@media (max-width: 767px) {
    .kb-home-finalcta__copy[data-kb-reveal="fade-up"] {
        --kb-reveal-distance: 14px;
        transition-duration: 800ms;
    }
}

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