/* ==========================================================================
   KB Couture Mariage — Elementor wrapper reset
   Page-scoped to /services/couture-mariage/ only. Resets Elementor's
   default 10px vertical padding on .e-con-inner for every Couture
   Mariage content section, while preserving padding-left / padding-right
   (gutters). Header (.kb-header) and Footer (.kb-footer) widgets do NOT
   use .e-con-inner, so they are untouched. Left/right padding and
   per-section spacing remain intact. The :has() selector targets
   each section root directly so the rule reaches every container
   regardless of body class.
   ========================================================================== */
.e-con-inner:has(.kb-couture-mariage-hero),
.e-con-inner:has(.kb-couture-mariage-allure),
.e-con-inner:has(.kb-couture-mariage-ligne),
.e-con-inner:has(.kb-couture-mariage-matiere),
.e-con-inner:has(.kb-couture-mariage-entree),
.e-con-inner:has(.kb-couture-mariage-journey),
.e-con-inner:has(.kb-couture-mariage-mouvement),
.e-con-inner:has(.kb-couture-mariage-mariee),
.e-con-inner:has(.kb-couture-mariage-interieur),
.e-con-inner:has(.kb-couture-mariage-finalcta) {
    padding-block: 0 !important;
}

/* ==========================================================================
   KB Couture Mariage Hero — Atlasyn × Khaoula Bouabidi
   Scoped strictly to .kb-couture-mariage-hero. Same single-canvas
   architecture as the rest of the Hero family: a full-bleed
   bridal background image, a soft Bordeaux left-to-right gradient
   overlay for copy readability, and the editorial copy block
   (eyebrow / H1 / body / one CTA) layered on the LEFT side of the
   canvas. The right side of the photograph stays unobstructed so
   the bride remains the dominant subject.

   Composition (locked):
   - Cinematic bridal background, bride primarily on the right.
   - Dark Bordeaux / near-black photographic fade on the left.
   - No cards. No icons. No decorative SaaS elements. No serif. No italic.
   - One CTA only: PRENDRE RENDEZ-VOUS → /contact/.

   Spacing rules:
   - The Hero is the FIRST section — no incoming 100/80/64px gap above.
   - The .kb-hero shared reset (home-hero.css) already handles the
     page-level block-padding reset, the full-bleed ancestor escape
     and the absence of any top gap for the first section.

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

.kb-couture-mariage-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
       rest of the Hero family. No top section gap: the Hero begins
       immediately beneath the global Header. */
    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, near-black readable field on the left while the right
   side of the photograph (the bride) stays fully visible and
   cinematic. Multi-stop curve calibrated for the bridal composition:
   the far-left pocket is the deepest Bordeaux/near-black so the
   eyebrow + H1 + body always sit inside the readable field regardless
   of the source photograph; the curve eases out smoothly so the
   fade feels photographic (not a flat SaaS gradient). */
.kb-couture-mariage-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--kb-ink) 88%, transparent) 0%,
        color-mix(in srgb, var(--kb-ink) 78%, var(--kb-bordeaux)) 10%,
        color-mix(in srgb, var(--kb-ink) 60%, var(--kb-bordeaux)) 22%,
        color-mix(in srgb, var(--kb-bordeaux) 70%, transparent) 36%,
        color-mix(in srgb, var(--kb-bordeaux) 48%, transparent) 50%,
        color-mix(in srgb, var(--kb-bordeaux) 26%, transparent) 64%,
        color-mix(in srgb, var(--kb-bordeaux) 10%, transparent) 76%,
        color-mix(in srgb, var(--kb-bordeaux) 3%, transparent) 86%,
        transparent 92%
    );
}

/* ==========================================================================
   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 Couture Mariage 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-couture-mariage-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 (~52% of 1140 ≈ 593px) — enough width for the 60px H1
   to wrap into exactly 3 visual lines on desktop while still leaving
   the right half of the canvas open for the bride. */
.kb-couture-mariage-hero__copy {
    padding-inline-start: max(0px, calc((100vw - var(--kb-content-width)) / 2));
    min-width: 0;
    flex: 0 0 auto;
}

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

/* ---- Media background layer --------------------------------------------- */
.kb-couture-mariage-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 — Bordeaux → Ink diagonal wash so the canvas never
       reads as an empty void. */
    background:
        linear-gradient(135deg, var(--kb-bordeaux) 0%, var(--kb-ink) 100%);
}

.kb-couture-mariage-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bridal focal point. The source photograph is composed so the
       bride (the dominant subject) sits primarily on the right; with
       object-fit:cover filling a viewport-wide canvas, "right center"
       keeps the bride visible on the right while the left side stays
       open for the readable Bordeaux/Ink 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-couture-mariage-hero__eyebrow class only acts as a section-
   scoped hook — no typography duplication here. No decorative line,
   no underline, no ornament. */
.kb-couture-mariage-hero__eyebrow {
    margin: 0 0 var(--kb-space-l) 0;
}

/* ---- Hero title ---------------------------------------------------------
   Single H1 on the page. Raleway display, hairline weight, line-
   height 1, text-wrap: balance for editorial proportion. The newline
   characters from the Elementor control are preserved by nl2br() in
   the PHP template so the three-line title renders exactly as
   authored ("Une création pensée / pour le jour qui / n'appartient
   qu'à vous."). Porcelain on the Bordeaux overlay for AA-grade
   contrast. Non-italic, no serif, no underline. Desktop scale: 60px
   (locked) — reads as an editorial H1, not a banner display. */
.kb-couture-mariage-hero__title {
    margin: 0 0 var(--kb-space-l) 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;
}

/* ---- Body copy ----------------------------------------------------------
   Restrained body column. Porcelain, small body face, no italic.
   Desktop size 17px (locked). Line-height 1.7 for editorial
   readability. 48ch reading column caps the line length so the body
   never crowds the bride on the right. */
.kb-couture-mariage-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 ----------------------------------------------------------
   Single primary CTA reuses the canonical Hero primary outline
   architecture (transparent ground, 1px Porcelain 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-couture-mariage-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. Hover inversion is gated
   behind (hover: hover) and (pointer: fine) so touch devices never
   get stuck in the filled state. */
.kb-couture-mariage-hero__actions {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kb-space-s);
}

.kb-couture-mariage-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);
}

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

/* ==========================================================================
   Tablet (768px – 1199px)
   - Same single-canvas principle as desktop.
   - Min-height accounts for the tablet header (80px).
   - 32px gutter applied via padding-inline.
   - H1 scales to 53px. Body 17px. Eyebrow 11.5px.
   - The copy block keeps the same ~52% width rule; the gradient is
     slightly stronger on the left so copy remains readable on a
     narrower canvas.
   - Object-position shifts inward to keep the bride visible on the
     right while the overlay swallows more of the left side.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    .kb-couture-mariage-hero {
        min-height: calc(100svh - var(--kb-header-height-tablet));
    }

    .kb-couture-mariage-hero__copy {
        padding-inline-start: var(--kb-gutter-tablet);
        padding-inline-end: var(--kb-gutter-tablet);
    }

    .kb-couture-mariage-hero__media img {
        object-position: 72% center;
    }

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

    .kb-couture-mariage-hero__title {
        font-size: 53px;
    }

    .kb-couture-mariage-hero__text {
        font-size: 17px;
        max-width: 44ch;
    }
}

/* ==========================================================================
   Mobile (≤ 767px)
   - Full-width background, copy remains readable.
   - H1 scales to 46px. Body 17px. Eyebrow 11px.
   - Copy block left-aligned with the canonical 20px gutter.
   - The entire text block (eyebrow → title → body → CTA) is
     VERTICALLY CENTERED via the existing flex structure on the
     .kb-couture-mariage-hero__layout wrapper. No top/translateY
     hacks; the wrapper's `align-items: center` already in place
     does the work.
   - Stronger Bordeaux atmosphere for guaranteed readability on
     small screens regardless of the source photograph.
   - Object-position is intentionally shifted right so the bride
     stays visible (no random desktop crop) and the left side stays
     clear for the overlay + copy.
   - CTA may use available width naturally; respects the Hero
     canonical button shape (54px / 13px / 0.12em).
   - No serif. No italic. No radius. No shadow.
   ========================================================================== */
@media (max-width: 767px) {
    .kb-couture-mariage-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 bride. */
    .kb-couture-mariage-hero::after {
        background:
            linear-gradient(
                to bottom,
                transparent 18%,
                color-mix(in srgb, var(--kb-ink) 32%, transparent) 100%
            ),
            linear-gradient(
                to right,
                color-mix(in srgb, var(--kb-ink) 82%, transparent) 0%,
                color-mix(in srgb, var(--kb-ink) 60%, var(--kb-bordeaux)) 24%,
                color-mix(in srgb, var(--kb-bordeaux) 40%, transparent) 50%,
                transparent 72%
            );
    }

    /* The single-canvas layout already uses `align-items: center` on
       the desktop. Mobile inherits that — the entire text block
       (eyebrow → title → body → CTA) is therefore vertically
       centered inside the Hero without any top / transform hacks. */
    .kb-couture-mariage-hero__layout {
        align-items: center;
    }

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

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

    .kb-couture-mariage-hero__media img {
        /* Mobile focal point: shift the visible window further right
           so the bride remains the dominant subject and the left
           side (covered by the overlay) carries the dark fade. */
        object-position: 78% center;
    }

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

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

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

    .kb-couture-mariage-hero__actions {
        margin-top: 28px;
    }
}

/* ==========================================================================
   HERO EDITORIAL ENTRANCE (page-load CSS keyframes)
   ------------------------------------------------------------
   Same architecture as the rest of the Hero family. 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 CTA ride the parent copy wrapper
   — they are NOT animated independently.
   ========================================================================== */

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

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

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

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

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