/* ==========================================================================
   KB FAQ Hero — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-faq-hero. Same single-canvas architecture as
   the Home Hero and the Contact Hero: a full-bleed background image,
   a soft Bordeaux left-to-right gradient overlay for readable copy on
   the LEFT, and the editorial block (eyebrow / H1 / body) layered on
   top of the left side of the canvas.

   The right side of the photograph stays unobstructed (the subject
   reads as if positioned to the right), and the entire copy column
   is one restrained entrance composition. No CTA. No decorative
   underline under the H1. No eyebrow ornament. No "Maison De Couture"
   wording. No serif. No italic.

   All values driven by tokens.css. No radius. No shadow.
   Elementor is content-only — all styling lives here.
   ========================================================================== */

.kb-faq-hero {
    position: relative;
    width: 100%;
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    overflow: hidden;
    /* Definite Hero height — same viewport-minus-header rule as the
       Home Hero and the Contact Hero so the three read as one family. */
    min-height: calc(100svh - var(--kb-header-height-desktop));
}

/* Soft Bordeaux left-to-right gradient. Lives between the image
   (z-index 0) and the copy (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 (the atelier subject) stays fully
   visible. Same multi-stop curve family as the Home / Contact
   Hero, recalibrated for this composition. The far-left is the
   deepest pocket so the eyebrow + H1 always sit inside the
   readable field regardless of the source photograph. */
.kb-faq-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kb-bordeaux) 74%, transparent) 0%,
        color-mix(in srgb, var(--kb-bordeaux) 60%, transparent) 16%,
        color-mix(in srgb, var(--kb-bordeaux) 46%, transparent) 32%,
        color-mix(in srgb, var(--kb-bordeaux) 32%, transparent) 48%,
        color-mix(in srgb, var(--kb-bordeaux) 18%, transparent) 62%,
        color-mix(in srgb, var(--kb-bordeaux) 8%, transparent) 76%,
        color-mix(in srgb, var(--kb-bordeaux) 3%, transparent) 86%,
        transparent 90%
    );
}

/* ==========================================================================
   FULL-BLEED ESCAPE — shared .kb-hero reset.

   The shared .kb-hero contract already defined in home-hero.css
   makes any page containing a .kb-hero full-bleed (escaping the
   parent theme .atlasyn-container 1200px wrapper and the Elementor
   .e-con 1140px wrapper). The FAQ Hero adds the .kb-hero class to
   its root element so the existing reset applies without
   duplication here. No global reset, no negative margins, no 100vw
   math. Tablet / mobile rules that should be re-applied locally on
   this section live in the @media blocks below.
   ========================================================================== */

/* ---- Single-canvas layout ----------------------------------------------- */
.kb-faq-hero__layout {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-height: inherit;
    width: 100%;
}

/* ---- Copy block ---------------------------------------------------------
   padding-inline-start: max(0, (100vw - 1140) / 2) pins the copy's
   left edge to the 1140px content frame on viewports >= 1140px. On
   narrower viewports the max() collapses to 0 so the copy sits at
   viewport left. The copy block footprint is owned by the inner
   max-width (~55% of 1140 ≈ 627px) so the editorial column reads
   as the left half while the photograph stays visible on the right. */
.kb-faq-hero__copy {
    padding-inline-start: max(0px, calc((100vw - var(--kb-content-width)) / 2));
    min-width: 0;
    flex: 0 0 auto;
}

.kb-faq-hero__copy-inner {
    width: 100%;
    max-width: calc(var(--kb-content-width) * 0.55);
    margin-inline-start: 0;
}

/* ---- Media background layer --------------------------------------------- */
.kb-faq-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 0;
    overflow: hidden;
    /* Theme-controlled fallback surface for when no Hero image is
       approved yet — soft Bordeaux → Ink diagonal wash keeps the
       canvas from rendering as an empty void. */
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

.kb-faq-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Right-biased focal point. The source photograph is composed
       so the subject sits primarily on the right; with
       object-fit:cover filling a viewport-wide canvas, "right
       center" keeps the subject visible on the right while the
       left side stays open for the readable overlay + copy. */
    object-position: right center;
}

/* ---- Eyebrow ------------------------------------------------------------
   Reuses the canonical .kb-section-eyebrow primitive (base.css) for
   Montserrat / 12px / 500 / uppercase / 0.18em / Gold. The
   .kb-faq-hero__eyebrow class only acts as a section-scoped hook
   — no typography duplication here. No decorative line, no
   underline, no ornament. */
.kb-faq-hero__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
}

/* ---- Hero title ---------------------------------------------------------
   Single H1 on the page. Raleway display, hairline weight, line-
   height 1, text-wrap: balance for editorial proportion. Porcelain
   on the Bordeaux overlay for AA-grade contrast. Non-italic, no
   serif, no underline. */
.kb-faq-hero__title {
    margin: 0 0 var(--kb-space-m) 0;
    font-family: var(--kb-font-display);
    font-size: 60px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--kb-porcelain);
    font-style: normal;
    text-wrap: balance;
    text-decoration: none;
}

/* ---- Supporting text ----------------------------------------------------
   Restrained body column. Porcelain, small body face, no italic. */
.kb-faq-hero__text {
    margin: 0 0 0 0;
    font-family: var(--kb-font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--kb-porcelain);
    max-width: 48ch;
    text-wrap: pretty;
    font-style: normal;
}

/* ---- CTA group ----------------------------------------------------------
   Two CTAs share the same outline architecture as the Home Hero and
   the Contact Hero: transparent ground, 1px frame, square corners,
   54px height, 13px Montserrat label, 0.12em tracking, cubic-bezier
   (.22,1,.36,1) 500ms transition.

   IMPORTANT: the button shape (height, padding, display, font, border,
   radius, text-decoration, uppercase) is declared HERE, in the scoped
   .kb-faq-hero__cta rule, and is intentionally NOT delegated to the
   global .kb-button class. The widget template still renders the
   .kb-button class for design-system tagging, but this self-contained
   definition guarantees the button shape is correct even if the base
   primitive is missing, delayed, or overridden. This is what fixes
   the "buttons render as plain text" regression.

   Reuses the canonical Porcelain (primary) + Gold (secondary) color
   vocabulary used throughout the rest of the site so the pair reads
   as one family. Hover inversion is gated behind (hover: hover) and
   (pointer: fine) so touch devices never get stuck in the filled
   state. */
.kb-faq-hero__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

/* Self-contained button base. Declares every property the button
   needs to look like a button (no dependency on the global .kb-button
   class for shape, font, or border). .kb-button stays on the element
   for design-system tagging and inherits its own tokens harmlessly. */
.kb-faq-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
    height: 54px;
    padding-inline: 28px;
    font-family: var(--kb-font-body);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
    transition:
        background-color 500ms cubic-bezier(0.22, 1, 0.36, 1),
        color 500ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* PRIMARY / PORCELAIN CTA — outline architecture, Porcelain frame. */
.kb-faq-hero__cta--primary,
.kb-faq-hero__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}
.kb-faq-hero__cta--primary:active {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    border-color: var(--kb-porcelain);
}
.kb-faq-hero__cta--primary:focus-visible {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .kb-faq-hero__cta--primary:hover {
        background-color: var(--kb-porcelain);
        color: var(--kb-ink);
        border-color: var(--kb-porcelain);
    }
}

/* SECONDARY / GOLD CTA — outline architecture, Gold frame. */
.kb-faq-hero__cta--secondary,
.kb-faq-hero__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
}
.kb-faq-hero__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
}
.kb-faq-hero__cta--secondary:focus-visible {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
    outline: 2px solid var(--kb-gold);
    outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .kb-faq-hero__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
    }
}

/* ==========================================================================
   Tablet (≤ 1199px)
   - Same single-canvas principle as desktop.
   - Min-height accounts for the tablet header (80px).
   - H1 scales to 80px. Body 16px.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-faq-hero {
        min-height: calc(100svh - var(--kb-header-height-tablet));
    }

    .kb-faq-hero__title {
        font-size: 60px;
    }

    .kb-faq-hero__text {
        font-size: 17px;
        max-width: 40ch;
    }
}

/* ==========================================================================
   Tablet (768px – 1024px) — typography refinement
   ------------------------------------------------------------
   The wider tablet band (≤ 1199px) above keeps the title at the
   desktop 60px so 1025–1199px stays in lockstep with desktop. This
   narrower 768–1024px band refines the Hero typography to the
   visual middle point between the already-correct desktop and
   mobile specs:

     - title       53px  (between 60px desktop / 46px mobile)
     - descriptive 17px  (same as desktop / mobile)
     - eyebrow     11.5px (between 12px desktop / 11px mobile)

   Desktop and mobile are intentionally untouched.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .kb-faq-hero__title {
        font-size: 53px;
    }

    .kb-faq-hero__text {
        font-size: 17px;
    }

    .kb-faq-hero__eyebrow {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   Mobile (≤ 767px)
   - Full-width background, copy remains readable.
   - H1 scales to 56px. Body 16px.
   - Eyebrow scales to 11px.
   - Copy block aligns to the bottom of the Hero on mobile so the
     content sits in the lower portion, not floating at the top
     under the Header.
   - Stronger Bordeaux atmosphere for guaranteed readability on
     small screens regardless of the source photograph.
   - No serif. No italic. No radius. No shadow.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-faq-hero {
        min-height: calc(100svh - var(--kb-header-height-mobile));
    }

    /* Mobile Bordeaux atmosphere: layered horizontal + vertical fade.
       The horizontal layer (second, sits behind) provides the brand
       tint on the left; the vertical layer (first, on top) adds a
       subtle bottom darken so the copy sits in a controlled readable
       pocket. The upper-right of the canvas stays clear for the
       photograph subject. */
    .kb-faq-hero::after {
        background:
            linear-gradient(
                to bottom,
                transparent 15%,
                color-mix(in srgb, var(--kb-bordeaux) 28%, transparent) 100%
            ),
            linear-gradient(
                to right,
                color-mix(in srgb, var(--kb-bordeaux) 78%, transparent) 0%,
                color-mix(in srgb, var(--kb-bordeaux) 56%, transparent) 32%,
                color-mix(in srgb, var(--kb-bordeaux) 28%, transparent) 58%,
                transparent 80%
            );
    }

    .kb-faq-hero__layout {
        align-items: center;
        justify-content: center;
    }

    .kb-faq-hero__copy {
        align-self: center;
        width: 100%;
        padding-inline-start: var(--kb-gutter-mobile);
        padding-inline-end: var(--kb-gutter-mobile);
        padding-top: 48px;
        padding-bottom: var(--kb-space-l);
    }

    .kb-faq-hero__copy-inner {
        max-width: none;
        width: 100%;
    }

    .kb-faq-hero__media img {
        object-position: 70% center;
    }

    .kb-faq-hero__eyebrow {
        font-size: 11px;
        margin-bottom: 20px;
    }

    .kb-faq-hero__title {
        font-size: 46px;
        line-height: 1;
    }

    .kb-faq-hero__text {
        font-size: 17px;
        line-height: 1.7;
        max-width: none;
    }

    .kb-faq-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        margin-top: 24px;
    }

    .kb-faq-hero__cta {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   HERO EDITORIAL ENTRANCE (page-load CSS keyframes)
   ------------------------------------------------------------
   Same architecture as the Home Hero and the Contact Hero. The
   Hero is above the fold and present at first render, so it uses
   its OWN dedicated CSS @keyframes (NOT the generic
   [data-kb-reveal] / IntersectionObserver system used by below-
   the-fold sections). CSS animations are deterministic for above-
   the-fold load — no first-paint class sequencing race, no
   IntersectionObserver dependency, no forced reflow.

   The image + the entire copy group are the two animated layers.
   The eyebrow, H1, and body text ride the parent copy wrapper —
   they are NOT animated independently.
   ========================================================================== */

@keyframes kb-faq-hero-media-enter {
    from {
        opacity: 0;
        transform: scale(1.025);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes kb-faq-hero-copy-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.kb-faq-hero__media {
    animation-name: kb-faq-hero-media-enter;
    animation-duration: 1200ms;
    animation-timing-function: var(--kb-reveal-easing);
    animation-delay: 0ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.kb-faq-hero__copy {
    animation-name: kb-faq-hero-copy-enter;
    animation-duration: 1100ms;
    animation-timing-function: var(--kb-reveal-easing);
    animation-delay: 180ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@media (prefers-reduced-motion: reduce) {
    .kb-faq-hero__media,
    .kb-faq-hero__copy {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 767px) {
    .kb-faq-hero__media {
        animation-duration: 1000ms;
    }

    .kb-faq-hero__copy {
        animation-duration: 950ms;
        animation-delay: 140ms;
    }
}

/* FAQ section escape: remove top/bottom padding of Elementor wrapper. */
.e-con:has(.kb-faq-hero) > .e-con-inner {
    padding-block: 0;
}