/* ==========================================================================
   KB Services Section 08 — Votre Silhouette (Final CTA)
   Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-services-finalcta. All values driven by tokens.css.

   Composition (final):
     Section root is BOXED to the canonical 1140px content frame
     (no full-bleed breakout). Inside sits ONE rounded CTA panel
     — the only surface in the project allowed to use a
     border-radius (24px desktop / 20px tablet / 18px mobile). The
     panel carries:
       - ONE single full-panel background image (a real <img>
         from a MEDIA content control). NOT a collage, NOT
         multiple <img> elements, NOT multiple CSS background-image
         layers. object-fit: cover; object-position right-biased so
         the couture subject on the right remains visible after the
         rounded crop and the Bordeaux overlay fade.
       - A restrained Bordeaux / Ink-Bordeaux overlay that improves
         text readability on the left, preserves photographic depth
         on the right, and fades naturally. No flat black veil.

     The editorial block is LEFT aligned and occupies ~58% of the
     inner width so the right side of the photograph stays free
     for the couture subject. The external CTA → Footer gap is
     owned by THIS section (padding-bottom 100 / 80 / 64) and lives
     OUTSIDE the dark panel — the dark surface ends where the
     rounded panel ends, then 100px of Porcelain breathing room
     before the Footer.

   Elementor contract: every image 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 div.

   Type rules:
     - Eyebrow: canonical .kb-section-eyebrow primitive
       (Montserrat / Gold / 12px desktop / 11px mobile / 500 /
       uppercase / 0.18em). NO line, NO underline, NO ornament.
     - Title: Raleway, Porcelain, non-italic, uniform color across
       the ENTIRE title. 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:
     One restrained reveal group (.kb-services-finalcta__copy)
     is marked with data-kb-reveal="fade-up". The contact meta row
     rides the parent group, never animated individually. The
     background image, the overlay and the panel are NEVER
     animated — they are present from the first paint so the
     cinematic CTA canvas is already calm and editorial.
   ========================================================================== */

/* ==========================================================================
   Section root
   Owns the 100px / 80px / 64px TOP gap to Section 07 (incoming
   section spacing) AND the 100px / 80px / 64px Porcelain gap to
   the Footer (outgoing). The 1140px width uses the canonical
   min(100% - 2*gutter, content-width) clamp so responsive
   gutters apply naturally.
   ========================================================================== */
.kb-services-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);
    /* Services Section 08 → Footer gap (owned by THIS section so
       the Footer does not need its own top padding). 100px desktop
       / 80px tablet / 64px mobile. The dark surface ends BEFORE
       this gap — the gap is pure Porcelain. */
    padding-bottom: 100px;
}

@media (max-width: 1199px) {
    .kb-services-finalcta {
        padding-top: var(--kb-section-space-tablet);
        padding-bottom: 80px;
    }
}

@media (max-width: 767px) {
    .kb-services-finalcta {
        padding-top: var(--kb-section-space-mobile);
        padding-bottom: 64px;
    }
}

/* ==========================================================================
   Rounded CTA panel (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 / 20px
   tablet / 18px mobile (the established local Final CTA
   exception). The global --kb-radius token stays untouched.
   ========================================================================== */
.kb-services-finalcta__panel {
    position: relative;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--kb-ink);
    color: var(--kb-porcelain);
    isolation: isolate;
}

/* ==========================================================================
   Single full-panel background image
   Real <img> rendered from the MEDIA content control. position:
   absolute + inset:0 makes it cover the entire rounded panel.
   z-index 0 keeps it BEHIND the overlay (z-index 1) and the
   inner (z-index 2). object-fit: cover; object-position
   right-biased so the couture subject on the right side stays
   visible after the rounded crop and the Bordeaux overlay fade.
   The fallback gradient (Bordeaux → Ink) keeps the panel calm if
   the media is ever empty.
   ========================================================================== */
.kb-services-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-services-finalcta__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Right-biased focal point so the couture material / embroidery
       / atelier subject on the right side stays visible after the
       rounded crop and the Bordeaux overlay fade. Tuned in CSS
       only — never exposed to Elementor. */
    object-position: 70% center;
}

/* ==========================================================================
   Restrained Bordeaux / Ink-Bordeaux overlay
   Lives between the image (z-index 0) and the inner (z-index 2)
   so the left-aligned editorial copy always has a calm
   brand-aligned readable field while the right side of the
   photograph stays visible. Multi-stop horizontal gradient
   anchored on the left, easing into transparent by ~75% so the
   couture subject on the right is never tinted. Uses rgba
   literals against the Bordeaux / Ink tokens so the overlay
   tracks the brand system exactly — no muddy full-image veil.
   ========================================================================== */
.kb-services-finalcta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(31, 25, 25, 0.90) 0%,
        rgba(69, 24, 34, 0.80) 45%,
        rgba(31, 25, 25, 0.42) 72%,
        rgba(31, 25, 25, 0.14) 100%
    );
}

/* ==========================================================================
   Boxed inner editorial frame
   Holds the entire visible content (eyebrow / title / body /
   CTAs / contact meta). Generous internal padding so the editorial
   copy never collides with the rounded edges. The panel height
   is content-driven (no oversized min-height) so the rounded CTA
   naturally becomes more compact when the editorial block is
   widened on desktop.
   ========================================================================== */
.kb-services-finalcta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 64px 56px 56px 56px;
}

/* ==========================================================================
   Top row — logo (upper-left) + "À VOTRE ÉCOUTE" (upper-right)
   Standard Final CTA top header reused verbatim from the Home /
   À Propos Final CTA architecture. Same logo asset/control, same
   size, same position, same spacing, same typography. Logo and
   label are NEVER animated individually — they ride the parent
   group so the rounded panel is already calm and editorial when
   the copy lands.
   ========================================================================== */
.kb-services-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. */
.kb-services-finalcta__logo {
    flex: 0 0 auto;
    max-height: 88px;
    line-height: 0;
}

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

/* "À VOTRE ÉCOUTE" upper-right label
   Montserrat 12px / 500 / uppercase / 0.22em / Porcelain muted.
   Matches the Home Final CTA eyebrow spec exactly. */
.kb-services-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-services-finalcta__ear-text {
    display: inline-block;
}

/* ==========================================================================
   Copy group
   Lives in the left portion of the rounded panel. Widened to
   ~58% of the inner width on desktop so the title wraps into
   fewer lines, the two CTAs stay on a single row, and the
   contact strip fits on a single row — letting the panel become
   naturally shorter. The right side of the photograph (~42%)
   remains visible for the couture subject. The whole group moves
   as ONE reveal (fade-up).
   ========================================================================== */
.kb-services-finalcta__copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
    width: 100%;
    max-width: 58%;
    margin-top: var(--kb-space-xl);
}

/* ==========================================================================
   Eyebrow — uses the canonical .kb-section-eyebrow primitive
   (Montserrat / Gold / 12px / 500 / uppercase / 0.18em). NO line,
   NO underline, NO ornament. Local class only owns the bottom
   margin so it sits flush above the title; typography / color /
   spacing are inherited from the primitive.
   ========================================================================== */
.kb-services-finalcta__eyebrow {
    margin: 0 0 var(--kb-space-s) 0;
}

/* ==========================================================================
   Title
   Raleway, Porcelain, non-italic. SAME color across the ENTIRE
   title. 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 ~56px desktop for a cinematic final-CTA
   scale.
   ========================================================================== */
.kb-services-finalcta__title {
    margin: 0;
    font-family: var(--kb-font-display);
    font-size: 56px;
    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 15px / 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 ~52ch so the line length
   stays editorial.
   ========================================================================== */
.kb-services-finalcta__body {
    margin: 0;
    max-width: 52ch;
    font-family: var(--kb-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    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-services-finalcta__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.kb-services-finalcta__cta {
    /* 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-services-finalcta__cta--primary,
.kb-services-finalcta__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}

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

.kb-services-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-services-finalcta__cta--primary:hover {
        background-color: var(--kb-porcelain);
        color: var(--kb-ink);
        border-color: var(--kb-porcelain);
    }
}

/* SECONDARY / GOLD */
.kb-services-finalcta__cta--secondary,
.kb-services-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. */
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

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

.kb-services-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-services-finalcta__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
        text-shadow: none;
    }
}

/* ==========================================================================
   Contact meta block
   Three items (phone / email / location) preceded by a thin
   restrained Gold horizontal divider (structural separation
   inside the CTA panel). Each item carries a clean inline SVG
   icon + the editorial text. Vertical Porcelain separators
   between items on desktop. Montserrat 13px / 400 / Porcelain
   muted. Rides the parent .kb-services-finalcta__copy reveal
   group, never animated individually.
   ========================================================================== */
.kb-services-finalcta__contact {
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-m);
    width: 100%;
    max-width: 100%;
    margin-top: var(--kb-space-l);
}

/* Subtle restrained Gold hairline above the contact row.
   Sits as a single full-width rule, never a decorative noise. */
.kb-services-finalcta__divider {
    width: 100%;
    height: 1px;
    background-color: var(--kb-gold);
    opacity: 0.5;
}

.kb-services-finalcta__contact-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.kb-services-finalcta__contact-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    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-services-finalcta__contact-item + .kb-services-finalcta__contact-item {
    position: relative;
    padding-left: 18px;
}

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

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

.kb-services-finalcta__contact-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.kb-services-finalcta__contact-text {
    display: inline-block;
}

/* ==========================================================================
   Tablet (≤ 1199px)
   Section padding switches to the tablet token. Panel radius
   drops to 20px. Inner padding tightens. Title scales to 46px.
   The copy group still occupies the left; the right ~32% stays
   free for the subject to breathe. CTAs keep the same outline
   architecture.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-services-finalcta__panel {
        border-radius: 20px;
    }

    .kb-services-finalcta__inner {
        padding: 56px 32px 48px 32px;
    }

    .kb-services-finalcta__copy {
        max-width: 68%;
    }

    .kb-services-finalcta__title {
        font-size: 46px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px) — single-column editorial stack
   Panel radius drops to 18px. Inner padding tightens to 20px
   gutter. 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. The background focal point
   shifts slightly to keep the subject visible at small viewports.
   No horizontal overflow at 390 / 375 / 360.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-services-finalcta__panel {
        border-radius: 18px;
    }

    .kb-services-finalcta__inner {
        min-height: 0;
        padding: 40px 20px 36px 20px;
    }

    /* Top row collapses gracefully on narrow viewports. Logo and
       ear label stay on a single line, but shrink together —
       mirrors the Home / À Propos Final CTA exactly. */
    .kb-services-finalcta__top-row {
        gap: 12px;
    }

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

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

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

    /* Stronger overlay on mobile so the left-aligned copy stays
       fully readable on smaller screens where the couture subject
       on the right would otherwise pull focus. */
    .kb-services-finalcta__overlay {
        background: linear-gradient(
            90deg,
            rgba(31, 25, 25, 0.94) 0%,
            rgba(69, 24, 34, 0.86) 30%,
            rgba(31, 25, 25, 0.55) 60%,
            rgba(31, 25, 25, 0.22) 100%
        );
    }

    /* Background focal point shifts slightly to keep the subject
       visible on narrow viewports. */
    .kb-services-finalcta__media img {
        object-position: 75% center;
    }

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

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

    .kb-services-finalcta__body {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.7;
    }

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

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

    /* Contact meta stacks vertically on mobile and the inline
       separators collapse. The restrained Gold top hairline (on
       the contact block) still separates the contact row from
       the CTAs. */
    .kb-services-finalcta__contact {
        margin-top: var(--kb-space-m);
    }

    .kb-services-finalcta__contact-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .kb-services-finalcta__contact-item + .kb-services-finalcta__contact-item {
        padding-left: 0;
    }

    .kb-services-finalcta__contact-item + .kb-services-finalcta__contact-item::before {
        display: none;
    }
}

/* ==========================================================================
   SCROLL REVEAL — Services Section 08
   ------------------------------------------------------------
   Per the spec, exactly ONE reveal group:
     .kb-services-finalcta__copy — eyebrow / title / body /
     CTAs / contact meta.
   Fade-up, ~22px desktop / ~14px mobile, ~950ms / ~800ms,
   ~120ms delay. The background image, the overlay, the panel
   and the contact meta row are NEVER animated individually —
   they ride the parent group, matching the existing final CTA
   architecture.

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

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