/* ==========================================================================
   KB About Hero — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-about-hero (and the shared .kb-hero reset
   below). 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 / two CTAs) 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 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-about-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 creator / atelier subject) stays fully
   visible. Same multi-stop curve family as the Home / Contact Hero,
   recalibrated for this composition. */
.kb-about-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) 72%, 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 About 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-about-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-about-hero__copy {
    padding-inline-start: max(0px, calc((100vw - var(--kb-content-width)) / 2));
    min-width: 0;
    flex: 0 0 auto;
}

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

/* ---- Media background layer --------------------------------------------- */
.kb-about-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-about-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Right-biased focal point. The source photograph is composed
       so the creator / atelier 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-about-hero__eyebrow class only acts as a section-scoped hook
   — no typography duplication here. No decorative line, no
   underline, no ornament. */
.kb-about-hero__eyebrow {
    margin: 0 0 var(--kb-space-m) 0;
}

/* ---- Hero title ---------------------------------------------------------
   Single H1 on the page. Raleway display, hairline weight, line-
   height 1.05, text-wrap: balance for editorial proportion. Porcelain
   on the Bordeaux overlay for AA-grade contrast. Entire title uses
   the SAME Porcelain color — no per-word Gold / Bordeaux / italic.
   Non-italic, no serif, no underline. */
.kb-about-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.05;
    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-about-hero__text {
    margin: 0 0 var(--kb-space-l) 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,
   --kb-transition-button. Porcelain primary, Gold secondary. Hover
   inversion gated behind (hover: hover) and (pointer: fine) so touch
   devices never get stuck in the filled state. */
.kb-about-hero__ctas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kb-space-s);
    margin-top: var(--kb-space-m);
}

.kb-about-hero__ctas .kb-button {
    width: auto;
    flex: 0 0 auto;
}

.kb-about-hero__cta {
    flex: 0 0 auto;
    transition:
        background-color var(--kb-transition-button),
        color var(--kb-transition-button),
        border-color var(--kb-transition-button);
}

/* PRIMARY / PORCELAIN CTA — outline architecture, Porcelain frame. */
.kb-about-hero__cta--primary,
.kb-about-hero__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}
.kb-about-hero__cta--primary:active {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    border-color: var(--kb-porcelain);
}
.kb-about-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-about-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-about-hero__cta--secondary,
.kb-about-hero__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
}
.kb-about-hero__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
}
.kb-about-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-about-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 72px. Body 16px.
   ========================================================================== */
@media (max-width: 1199px) {
    .kb-about-hero {
        min-height: calc(100svh - var(--kb-header-height-tablet));
    }

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

    .kb-about-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-about-hero__title {
        font-size: 53px;
    }

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

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

/* ==========================================================================
   Mobile (≤ 767px)
   - Full-width background, copy remains readable.
   - H1 scales to 48px. Body 16px.
   - Eyebrow scales to 11px.
   - CTAs stack vertically, full-width, inside the 20px mobile gutter.
   - Layout: align the copy to the upper portion of the Hero on
     mobile so the content reads comfortably below the Header.
   - No serif. No italic. No radius. No shadow.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-about-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-about-hero::after {
        background:
            linear-gradient(
                to bottom,
                transparent 15%,
                color-mix(in srgb, var(--kb-bordeaux) 26%, transparent) 100%
            ),
            linear-gradient(
                to right,
                color-mix(in srgb, var(--kb-bordeaux) 76%, transparent) 0%,
                color-mix(in srgb, var(--kb-bordeaux) 52%, transparent) 32%,
                color-mix(in srgb, var(--kb-bordeaux) 24%, transparent) 58%,
                transparent 80%
            );
    }

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

    .kb-about-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-about-hero__copy-inner {
        max-width: none;
        width: 100%;
    }

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

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

    .kb-about-hero__title {
        font-size: 46px;
        line-height: 1.05;
    }

    .kb-about-hero__text {
        font-size: 17px;
        line-height: 1.7;
        max-width: none;
        margin-bottom: var(--kb-space-m);
    }

    .kb-about-hero__ctas {
        flex-direction: column;
        align-items: stretch;
        gap: var(--kb-space-s);
        width: 100%;
        margin-top: var(--kb-space-m);
    }

    .kb-about-hero__ctas .kb-button {
        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, body text, and CTAs ride the parent copy
   wrapper — they are NOT animated independently.
   ========================================================================== */

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

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

.kb-about-hero__media {
    animation-name: kb-about-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-about-hero__copy {
    animation-name: kb-about-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-about-hero__media,
    .kb-about-hero__copy {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

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

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