/* ==========================================================================
   KB Contact Hero — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-contact-hero (and the shared .kb-hero reset
   below). Same single-canvas architecture as the Home Hero: a full-
   bleed background image, a soft Bordeaux left-to-right gradient
   overlay for readable copy on the left, and the editorial block
   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
   (eyebrow / H1 / body / two CTAs / location meta) is one restrained
   entrance composition.

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

.kb-contact-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 so the two 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 Hero, recalibrated for
   this composition. */
.kb-contact-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) 70%, transparent) 0%,
        color-mix(in srgb, var(--kb-bordeaux) 58%, transparent) 16%,
        color-mix(in srgb, var(--kb-bordeaux) 44%, transparent) 32%,
        color-mix(in srgb, var(--kb-bordeaux) 30%, 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 Contact 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-contact-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 (~60% of 1140 ≈ 684px) so the editorial column reads
   as the left half while the photograph stays visible on the right. */
.kb-contact-hero__copy {
    padding-inline-start: max(0px, calc((100vw - var(--kb-content-width)) / 2));
    min-width: 0;
    flex: 0 0 auto;
}

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

/* ---- Media background layer --------------------------------------------- */
.kb-contact-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-contact-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-contact-hero__eyebrow class only acts as a section-scoped
   hook — no typography duplication here. */
.kb-contact-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 line breaks. The newline characters
   from the Elementor control are preserved by nl2br() in the PHP
   template so the title renders exactly as authored. Porcelain on
   the Bordeaux overlay for AA-grade contrast. Non-italic, no serif. */
.kb-contact-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.01em;
    color: var(--kb-porcelain);
    font-style: normal;
    text-wrap: balance;
}

/* ---- Supporting text ---------------------------------------------------- */
.kb-contact-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;
}

/* ---- CTA group ----------------------------------------------------------
   Two CTAs share the same outline architecture as the Home 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-contact-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-contact-hero__ctas .kb-button {
    width: auto;
    flex: 0 0 auto;
}

.kb-contact-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-contact-hero__cta--primary,
.kb-contact-hero__cta--primary:visited {
    background-color: transparent;
    color: var(--kb-porcelain);
    border-color: var(--kb-porcelain);
}
.kb-contact-hero__cta--primary:active {
    background-color: var(--kb-porcelain);
    color: var(--kb-ink);
    border-color: var(--kb-porcelain);
}
.kb-contact-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-contact-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-contact-hero__cta--secondary,
.kb-contact-hero__cta--secondary:visited {
    background-color: transparent;
    color: var(--kb-gold);
    border-color: var(--kb-gold);
}
.kb-contact-hero__cta--secondary:active {
    background-color: var(--kb-gold);
    color: var(--kb-ink);
    border-color: var(--kb-gold);
}
.kb-contact-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-contact-hero__cta--secondary:hover {
        background-color: var(--kb-gold);
        color: var(--kb-ink);
        border-color: var(--kb-gold);
    }
}

/* ---- Location meta ------------------------------------------------------
   Restrained line below the CTAs. Muted Porcelain, small body face,
   no icon, no ornament. Single source of margin-top (24px) so the
   spacing rule stays consistent with the rest of the design system. */
.kb-contact-hero__meta {
    margin: var(--kb-space-m) 0 0 0;
    font-family: var(--kb-font-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--kb-porcelain-muted);
    font-style: normal;
}

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

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

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

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

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

/* ==========================================================================
   Mobile (≤ 767px)
   - Full-width background, copy remains readable.
   - Title scales to 42px. Body 16px.
   - CTAs stack vertically, full-width, inside the 20px mobile gutter.
   - Layout: align the copy to the bottom of the Hero on mobile so
     the content sits in the lower portion, not floating at the top
     under the Header.
   - No serif. No italic. No radius. No shadow.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-contact-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-contact-hero::after {
        background:
            linear-gradient(
                to bottom,
                transparent 15%,
                color-mix(in srgb, var(--kb-bordeaux) 22%, transparent) 100%
            ),
            linear-gradient(
                to right,
                color-mix(in srgb, var(--kb-bordeaux) 72%, transparent) 0%,
                color-mix(in srgb, var(--kb-bordeaux) 48%, transparent) 32%,
                color-mix(in srgb, var(--kb-bordeaux) 22%, transparent) 58%,
                transparent 80%
            );
    }

    .kb-contact-hero__layout {
        align-items: center;
    }

    .kb-contact-hero__copy {
        width: 100%;
        padding-inline-start: var(--kb-gutter-mobile);
        padding-inline-end: var(--kb-gutter-mobile);
        padding-top: var(--kb-space-l);
        padding-bottom: var(--kb-space-xl);
    }

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

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

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

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

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

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

    .kb-contact-hero__ctas .kb-button {
        width: 100%;
        flex: 0 0 auto;
    }

    .kb-contact-hero__meta {
        font-size: 13px;
    }
}

/* ==========================================================================
   HERO EDITORIAL ENTRANCE (page-load CSS keyframes)
   ------------------------------------------------------------
   Same architecture as the Home 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.
   Buttons, location meta, and inner copy children ride the parent
   wrapper — they are NOT animated independently.
   ========================================================================== */

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

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

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

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

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

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