/*
 * Paradigm strings flagship landing (/paradigm).
 * Page-namespaced BEM (.paradigm-*). Brand accents use var(--brand-*)
 * from resources/css/eb/brand.css — never hardcode #ff10a4 here.
 * Product-card + grid styles are inherited from catalog.css (loaded first).
 */

.paradigm-page {
    color: #212529;
}

/* -- Hero ---------------------------------------------------------------- */

.paradigm-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 60vh;
    padding: 4rem 0;
    color: #fff;
    background-color: #1a1a1a;
    /* Bottom-anchored, feathered scrim: darkens only the lower band where the
       hero copy sits (fully transparent by ~80% up), so the top of the photo
       reads at full clarity while the white H1/subhead stay AA-legible. The
       flat #1a1a1a stays the fallback behind a missing/unseeded image. */
    background-image:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.84) 0%,
            rgba(0, 0, 0, 0.66) 40%,
            rgba(0, 0, 0, 0.45) 58%,
            rgba(0, 0, 0, 0) 80%),
        var(--paradigm-hero-image, none);
    background-size: cover;
    background-position: center;
}

.paradigm-hero__inner {
    max-width: 640px;
}

.paradigm-hero__title {
    margin: 0 0 1rem;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.paradigm-hero__subhead {
    margin: 0 0 1.75rem;
    font-size: 1.25rem;
    line-height: 1.4;
    max-width: 32em;
}

.paradigm-hero__cta {
    display: inline-block;
}

/* -- In-page section nav ------------------------------------------------- */

.paradigm-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #1a1a1a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.paradigm-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
    padding: 0.85rem 0;
    list-style: none;
}

.paradigm-nav__link {
    color: #ccc;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

.paradigm-nav__link:hover,
.paradigm-nav__link:focus,
.paradigm-nav__link.is-active {
    color: var(--brand-primary);
}

/* -- Editorial sections -------------------------------------------------- */

.paradigm-section {
    padding: 4rem 0;
}

.paradigm-section--dark {
    color: #fff;
    background: #1a1a1a;
}

/* Full-bleed photographic editorial bands (Born to Innovate / Legendary Tone /
   Unparalleled Durability). The band photo (set via the --paradigm-band-bg
   custom property) is shown at full clarity — there is NO full-section darkening
   layer. Legibility comes instead from a localized, feathered scrim behind the
   copy (see `.paradigm-section--photo .paradigm-editorial` below). The flat band
   color (#1a1a1a, inherited from --dark) is the fallback behind a missing image
   and keeps the white copy legible if the photo fails to load. */
.paradigm-section--photo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78vh;
    background-image: var(--paradigm-band-bg, none);
    background-size: cover;
    background-position: center;
}

/* The centered copy owns the full band width when the section is a flex box. */
.paradigm-section--photo > .container {
    width: 100%;
}

/* Localized ADA scrim: a soft-edged RECTANGLE painted behind the copy (not an
   ellipse). A blurred `::before` pseudo-element fills the text box; its edges are
   feathered by `filter: blur()` so the dark rectangle melts into the photo with
   no hard box line, while its core stays solidly dark behind the glyphs. Making
   `.paradigm-editorial` a stacking context (position + z-index) composites the
   whole scrim-plus-text unit above the band photo; the pseudo sits at z-index -1
   within that context, so the text content paints over it with no per-child
   z-index needed. Generous padding keeps every glyph inside the fully-opaque core
   (blur only erodes ~1 blur-radius in from each edge).
   Contrast: the core holds alpha 0.82 flat black; over a worst-case pure-white
   photo that composites to ~#2e2e2e (relative luminance ~0.04), giving white body
   copy ~11:1 — well past the 4.5:1 AA floor — and the large-bold heading (3:1
   floor) has a wide margin. The solid section background-color remains the
   fallback behind a missing/unseeded image. */
.paradigm-section--photo .paradigm-editorial {
    position: relative;
    z-index: 0;
    padding: 3rem 3.5rem;
}

.paradigm-section--photo .paradigm-editorial::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.82);
    border-radius: 10px;
    filter: blur(24px);
}

.paradigm-editorial {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}

.paradigm-editorial__heading {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.paradigm-editorial__eyebrow {
    margin: 0 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-primary);
}

.paradigm-editorial__eyebrow--pink {
    color: var(--brand-primary);
}

.paradigm-editorial__body {
    font-size: 1.0625rem;
    line-height: 1.7;
}

.paradigm-section:not(.paradigm-section--dark) .paradigm-editorial__body {
    color: #333;
}

/* -- Video facades ------------------------------------------------------- */

.paradigm-video--button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    text-decoration: none;
}

/* The global .btn-outline pair is tuned for WHITE: --brand-accent-text is the
   darker pink that clears 4.5:1 on white but only ~2.7:1 on this section's
   #1a1a1a (WAVE on /paradigm, 2026-09-21). On the dark bands the button uses
   the bright accent instead — 4.86:1 on #1a1a1a, and the same pink the
   eyebrows beside it already use — and fills with the AA pair on hover. */
.paradigm-section--dark .paradigm-video--button {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.paradigm-section--dark .paradigm-video--button:hover,
.paradigm-section--dark .paradigm-video--button:focus-visible {
    background-color: var(--brand-primary-fill, var(--brand-primary));
    border-color: var(--brand-primary-fill, var(--brand-primary));
    color: var(--brand-on-primary, #fff);
}

.paradigm-video__icon {
    display: inline-flex;
}

.paradigm-video--thumb,
.paradigm-video--poster {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    background-color: #2a2a2a;
    background-image:
        linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 55%),
        var(--paradigm-video-thumb, none);
    background-size: cover;
    background-position: center;
}

.paradigm-video--thumb {
    aspect-ratio: 16 / 9;
}

.paradigm-video--poster {
    aspect-ratio: 16 / 9;
    align-items: center;
    justify-content: center;
}

.paradigm-video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: 1rem;
    transition: transform 0.15s ease;
}

.paradigm-video__play--lg {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.5rem;
}

.paradigm-video:hover .paradigm-video__play,
.paradigm-video:focus .paradigm-video__play {
    transform: translate(-50%, -50%) scale(1.08);
}

.paradigm-video__caption {
    position: relative;
    z-index: 1;
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
}

.paradigm-video__embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

.paradigm-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -- Break-resistance background-video band ------------------------------ */

/* The break-resistance band butts flush against the full-bleed films Swiper
   directly below it: zero the section's own vertical padding AND the video
   band's bottom margin so no gap opens between the video and the carousel. */
.paradigm-section--flush {
    padding-top: 0;
    padding-bottom: 0;
}

.paradigm-breakvid {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60vh;
    margin-bottom: 0;
    overflow: hidden;
    background: #0d0d0d;
}

.paradigm-breakvid__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.paradigm-breakvid__overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 4rem 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.55) 100%);
}

/* -- Artist films (full-bleed Swiper, flush under Break Resistance) ------- */

/* Edge-to-edge band: no padding/margin so it snaps flush beneath the Break
   Resistance section, and the slides run wall-to-wall with no gap. */
.paradigm-films {
    margin: 0;
    padding: 0;
    background: #0d0d0d;
}

.paradigm-films__swiper {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* No spaceBetween is configured on the Swiper, so slides are truly gapless. */
.paradigm-films__slide {
    height: auto;
}

/* The facade thumb fills its slide edge-to-edge (no rounded corners so the
   full-bleed strip has no seams between tiles). */
.paradigm-films__slide .paradigm-video--thumb {
    height: 100%;
    border-radius: 0;
}

/* Swiper's nav arrows over the dark film strip. */
.paradigm-films .swiper-button-prev,
.paradigm-films .swiper-button-next {
    color: #fff;
}

.paradigm-films .swiper-button-prev::after,
.paradigm-films .swiper-button-next::after {
    font-size: 1.75rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* -- Shop category CTAs -------------------------------------------------- */

.paradigm-products {
    padding: 4rem 0 5rem;
    background: #12b0a0;
    color: #fff;
}

/* Shop band over the ported photo. A LIGHT teal wash keeps the brand's teal
   "shop" identity while letting the blue-bg photo (set via --paradigm-band-bg)
   read through clearly — no heavy full-section darkening. The flat teal stays
   the fallback behind a missing image. AA legibility for the white heading is
   handled by a localized dark-teal scrim behind the title (below); the pink
   CTAs carry their own solid background. */
.paradigm-products--photo {
    background-color: #0f8a7d;
    background-image:
        linear-gradient(to bottom, rgba(15, 138, 125, 0.32) 0%, rgba(10, 96, 88, 0.42) 100%),
        var(--paradigm-band-bg, none);
    background-size: cover;
    background-position: center;
}

/* Localized ADA scrim behind the shop heading — a soft-edged dark-teal RECTANGLE
   (not an ellipse). `.section-title` is inline-block, so the scrim hugs the
   heading text as a compact feathered lozenge rather than banding the whole row.
   Same blurred-`::before` technique as the editorial bands: the heading becomes a
   stacking context and the pseudo sits behind the text at z-index -1, its edges
   feathered by `filter: blur()` so there is no hard box line. On-brand dark teal
   (not black) keeps the teal identity; alpha 0.82 composites over a worst-case
   white photo to a dark teal (~#38685f, luminance ~0.14), giving the white
   large-bold heading ~5:1 — past the 3:1 large-text AA floor. */
.paradigm-products--photo .section-title {
    position: relative;
    z-index: 0;
    padding: 1.25rem 2rem;
}

.paradigm-products--photo .section-title::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(6, 66, 60, 0.82);
    border-radius: 8px;
    filter: blur(18px);
}

.paradigm-shop__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.paradigm-shop__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.paradigm-shop__image-link {
    display: block;
    margin-bottom: 1.25rem;
}

.paradigm-shop__image {
    max-width: 100%;
    height: auto;
}

.paradigm-shop__cta {
    margin-top: auto;
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 991.98px) {
    .paradigm-hero__title {
        font-size: 2.25rem;
    }

    .paradigm-section--photo {
        min-height: 68vh;
    }
}

@media (max-width: 767.98px) {
    .paradigm-hero {
        min-height: 55vh;
        padding: 3rem 0;
    }

    .paradigm-hero__title {
        font-size: 1.75rem;
    }

    .paradigm-hero__subhead {
        font-size: 1.0625rem;
    }

    .paradigm-section {
        padding: 2.5rem 0;
    }

    .paradigm-section--flush {
        padding-top: 0;
        padding-bottom: 0;
    }

    .paradigm-editorial__heading {
        font-size: 1.6rem;
    }

    /* Tighten the localized scrim's feather-padding on narrow viewports so it
       still hugs the copy without overflowing the band, and shrink the blur to
       match the smaller padding so every glyph stays inside the opaque core. */
    .paradigm-section--photo .paradigm-editorial {
        padding: 2rem 1.5rem;
    }

    .paradigm-section--photo .paradigm-editorial::before {
        filter: blur(14px);
    }

    .paradigm-breakvid {
        min-height: 45vh;
    }

    .paradigm-section--photo {
        min-height: 60vh;
    }

    .paradigm-shop__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}