/*
 * Osmova Hero — block styling contract.
 *
 * Plain CSS (the parent ships no Tailwind/build): semantic `o-hero*` classes,
 * neutral baseline tokens (--osmova-base-*) with literal fallbacks so the block
 * renders standalone, native nesting, no !important. A child theme re-skins by
 * overriding these tokens or the classes in its own build.
 *
 * Height variants: --h-short | --h-tall | --h-full (set via the `height` field).
 */

.o-hero {
    --o-hero-height: 72vh;
    --o-hero-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.55) 100%);
    --o-hero-ink: #ffffff;

    position: relative;
    display: flex;
    overflow: hidden;
    min-height: var(--o-hero-height);
    color: var(--o-hero-ink);

    &.o-hero--h-short {
        --o-hero-height: 48vh;
    }

    &.o-hero--h-md {
        --o-hero-height: 60vh;
    }

    &.o-hero--h-tall {
        --o-hero-height: 72vh;
    }

    &.o-hero--h-full {
        --o-hero-height: 100vh;
    }
}

/* Media layer — both an <img> and the URL-background span fill the section. */
.o-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.o-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.o-hero__img--bg {
    display: block;
    background-position: center;
    background-size: cover;
}

/* Full-bleed scrim improves text contrast over imagery. */
.o-hero--scrim .o-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--o-hero-scrim);
}

/* --- Full-bleed layout --------------------------------------------------- */

.o-hero__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
    padding: clamp(1.5rem, 5vw, 4rem);
}

.o-hero__content {
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.o-hero__sup {
    margin: 0;
    font-size: var(--text-kicker, 0.8rem);
    font-weight: var(--text-kicker--font-weight, 700);
    letter-spacing: var(--text-kicker--letter-spacing, 0.18em);
    text-transform: var(--type-kicker-case, uppercase);
    opacity: 0.85;
}

.o-hero__title {
    margin: 0;
    font-size: var(--text-hero, clamp(2rem, 6vw, 4rem));
    line-height: var(--text-hero--line-height, 1.02);
    text-wrap: balance;
}

.o-hero__sub {
    margin: 0;
    font-size: var(--text-body-lg, clamp(1rem, 2vw, 1.25rem));
    opacity: 0.9;
}

.o-hero__link {
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.85rem 1.75rem;
    border: 1px solid currentColor;
    color: inherit;
    font-size: var(--text-button, 0.8rem);
    font-weight: var(--text-button--font-weight, 700);
    letter-spacing: var(--text-button--letter-spacing, 0.16em);
    text-transform: var(--type-button-case, uppercase);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover,
    &:focus-visible {
        background: var(--o-hero-ink);
        color: #111827;
    }
}

/* Optional vertical edge label (rotated, pinned to the right edge). */
.o-hero__edge {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0.75rem;
    transform-origin: right center;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* --- Split layout -------------------------------------------------------- */

.o-hero--split {
    display: block;
}

.o-hero__panels {
    display: grid;
    grid-template-columns: 1fr;
    min-height: var(--o-hero-height);
}

.o-hero__panel {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    min-height: calc(var(--o-hero-height) / 2);
    color: inherit;
    text-decoration: none;
}

.o-hero__panel .o-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
}

.o-hero__panel--scrim .o-hero__media::after {
    background: rgba(0, 0, 0, 0.4);
}

a.o-hero__panel:hover .o-hero__media::after,
a.o-hero__panel:focus-visible .o-hero__media::after {
    background: rgba(0, 0, 0, 0.5);
}

.o-hero__panel-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: clamp(1.25rem, 4vw, 3rem);
}

.o-hero__panel-label {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.o-hero__panel-sub {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

/* Centered wordmark overlay, sits above both panels. */
.o-hero__wordmark {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem 1rem;
    font-size: clamp(1.25rem, 4vw, 2.5rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Two-up split from the medium breakpoint (48rem). */
@media (min-width: 48rem) {
    .o-hero__panels {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }

    .o-hero__panel {
        min-height: var(--o-hero-height);
    }
}

/* --- Shared scroll-snap / Swiper carousel contract ---------------------- */

.o-hero--carousel {
    --o-carousel-control-size: 2.75rem;
    --o-carousel-dot-size: 0.75rem;
    --o-carousel-gap: 0.5rem;
    --o-carousel-slides-per-view: 1;
    --o-carousel-space-between: 0px;

    display: block;
}

.o-hero__slides {
    display: flex;
    gap: var(--o-carousel-space-between);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
}

/* Hide the scrollbar only when visible hash pagination remains as an affordance. */
.o-hero--has-pagination .o-hero__slides {
    scrollbar-width: none;
}

.o-hero--has-pagination .o-hero__slides::-webkit-scrollbar {
    display: none;
}

.o-hero__slide {
    position: relative;
    display: flex;
    flex: 0 0 calc((100% - (var(--o-carousel-space-between) * (var(--o-carousel-slides-per-view) - 1))) / var(--o-carousel-slides-per-view));
    min-height: var(--o-hero-height);
    overflow: hidden;
    scroll-snap-align: start;
}

/* Swiper receives the same track/slides and controls, not an alternate skin. */
/* Keep native scroll-snap intact until Swiper has actually initialized. */
.o-hero[data-o-carousel-initialized="swiper"] .o-hero__slides {
    gap: 0;
    overflow: visible;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.o-hero[data-o-carousel-initialized="swiper"] .o-hero__slide {
    flex: 0 0 auto;
}

.o-hero__slide--scrim .o-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--o-hero-scrim);
}

.o-hero__controls {
    position: absolute;
    z-index: 2;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: var(--o-carousel-gap);
}

.o-hero__control,
.o-hero__toggle {
    min-width: var(--o-carousel-control-size);
    min-height: var(--o-carousel-control-size);
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
}

.o-hero__control:disabled {
    opacity: 0.45;
}

/* A standalone autoplay toggle (no arrows) is a compact icon in the corner;
   its accessible name stays on aria-label. */
.o-hero > .o-hero__toggle {
    position: absolute;
    z-index: 2;
    left: 1rem;
    bottom: 1rem;
    width: var(--o-carousel-control-size);
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.o-hero > .o-hero__toggle:hover,
.o-hero > .o-hero__toggle:focus-visible {
    opacity: 1;
}

.o-hero > .o-hero__toggle::before {
    content: "\275A\275A";
    font-size: 0.6rem;
    letter-spacing: 0.1em;
}

.o-hero > .o-hero__toggle[aria-pressed="true"]::before {
    content: "\25B6";
    font-size: 0.7rem;
}

.o-hero__dots {
    position: absolute;
    z-index: 2;
    bottom: 1rem;
    left: 50%;
    display: flex;
    max-width: calc(100% - 2rem);
    gap: var(--o-carousel-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    transform: translateX(-50%);
}

.o-hero__dots::-webkit-scrollbar {
    display: none;
}

.o-hero__dots a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px touch target (WCAG 2.5.5) while the visible dot stays small. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
}

/* Visual dot rendered via pseudo-element so the anchor hit area stays large. */
.o-hero__dots a::before {
    content: "";
    display: block;
    width: var(--o-carousel-dot-size);
    height: var(--o-carousel-dot-size);
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.o-hero__dots a[aria-current="true"]::before {
    background: currentColor;
}

@media (max-width: 40rem) {
    .o-hero--has-pagination .o-hero__controls {
        bottom: calc(1rem + 2.75rem + 0.5rem);
    }
}

/* Static hash pagination remains visible; JS-only controls appear after init. */
.o-hero:not([data-o-carousel-initialized]) .o-hero__controls,
.o-hero:not([data-o-carousel-initialized]) > .o-hero__toggle,
[data-o-carousel-toggle][hidden] {
    display: none;
}

.o-hero__dots a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

.o-hero__control:focus-visible,
.o-hero__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .o-hero__slides {
        scroll-behavior: auto;
    }
}

/* Woo's non-block adapter passes this modifier into the same renderer. */
.o-shop-hero {
    --o-hero-height: auto;

    min-height: 0;
    background: var(--o-woo-ink, #111827);
    color: var(--o-woo-bg, #ffffff);
}

.o-shop-hero .o-hero__body {
    width: min(100% - (var(--osmova-base-gutter, 1rem) * 2), var(--osmova-base-container-width, 72rem));
    margin-inline: auto;
    padding-block: 2.5rem;
}

.o-shop-hero .o-hero__content {
    gap: 0.5rem;
}

.o-shop-hero .o-hero__title {
    font-size: var(--text-h1, clamp(1.75rem, 4vw, 2.5rem));
    line-height: var(--text-h1--line-height, 1.1);
}

/* Editor placeholder. */
.o-hero--placeholder {
    min-height: auto;
    padding: 2rem;
    background: #f3f4f6;
    color: #6b7280;
    text-align: center;
}