/*
 * Unified cinematic hero system.
 * Replaces legacy boxed heroes on journal/editorial/legal/shorts/support/guide pages.
 */

:root {
    --hdn-cine-hero-max-width: min(1240px, calc(100% - 2.4rem));
    --hdn-cine-hero-text: #f7f3ea;
    --hdn-cine-hero-control-bg: rgba(6, 16, 38, 0.56);
    --hdn-cine-hero-control-border: rgba(247, 243, 234, 0.28);
}

body.hdn-journal-page,
body.hdn-editorial-page,
body.hdn-shorts-page,
body.hdn-support-page,
body.hdn-guide-page {
    overflow-x: clip;
}

:is(.hdn-journal2-hero,
    .hdn-journal2-single-hero,
    .hdn-editorial-hero,
    .hdn-shorts-hero,
    .hdn-support-hero,
    .hdn-guide-hero).hdn-cine-hero {
    position: relative;
    width: 100vw;
    max-width: none !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: clamp(360px, 70vh, 760px);
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: clip;
    isolation: isolate;
    background: linear-gradient(142deg, #081634 0%, #13274b 48%, #2c4468 100%);
}

:is(.hdn-journal2-hero,
    .hdn-journal2-single-hero,
    .hdn-editorial-hero,
    .hdn-shorts-hero,
    .hdn-support-hero,
    .hdn-guide-hero).hdn-cine-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 8%, rgba(186, 145, 88, 0.3), transparent 32%),
        radial-gradient(circle at 18% 92%, rgba(131, 159, 203, 0.18), transparent 40%);
}

:is(.hdn-journal2-hero,
    .hdn-journal2-single-hero,
    .hdn-editorial-hero,
    .hdn-shorts-hero,
    .hdn-support-hero,
    .hdn-guide-hero).hdn-cine-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: clamp(120px, 22vh, 220px);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 16, 38, 0), rgba(6, 16, 38, 0.62));
}

.hdn-cine-hero-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hdn-cine-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.72s ease, transform 8.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hdn-cine-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 1;
}

.hdn-cine-hero-slide> :is(img, video),
.hdn-cine-hero-embed,
.hdn-cine-hero-embed iframe {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border: 0;
}

.hdn-cine-hero-video {
    object-position: center 26%;
}

.hdn-cine-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 12, 30, 0.24) 0%, rgba(5, 12, 30, 0.54) 55%, rgba(5, 12, 30, 0.88) 100%),
        linear-gradient(112deg, rgba(5, 12, 30, 0.68) 0%, rgba(5, 12, 30, 0.24) 50%, rgba(5, 12, 30, 0.58) 100%);
}

.hdn-cine-hero-inner {
    position: relative;
    z-index: 3;
    width: var(--hdn-cine-hero-max-width);
    margin: 0 auto;
    padding: clamp(60px, 8vw, 100px) 0 clamp(34px, 6vw, 72px);
    color: var(--hdn-cine-hero-text);
    text-shadow: 0 6px 22px rgba(4, 10, 24, 0.42);
}

.hdn-cine-hero-inner :is(h1, h2, p, span, a) {
    color: inherit;
}

.hdn-support-hero.hdn-cine-hero .hdn-cine-hero-inner,
.hdn-guide-hero.hdn-cine-hero .hdn-cine-hero-inner {
    width: min(980px, calc(100% - 2.2rem));
    text-align: center;
}

.hdn-cine-hero-controls {
    position: absolute;
    left: 50%;
    bottom: clamp(14px, 2.6vw, 30px);
    z-index: 4;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--hdn-cine-hero-control-border);
    background: var(--hdn-cine-hero-control-bg);
    backdrop-filter: blur(10px);
}

.hdn-cine-hero-control {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(247, 243, 234, 0.34);
    background: rgba(247, 243, 234, 0.12);
    color: #f7f3ea;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hdn-cine-hero-control:hover,
.hdn-cine-hero-control:focus-visible {
    border-color: rgba(247, 243, 234, 0.62);
    background: rgba(247, 243, 234, 0.24);
    transform: translateY(-1px);
    outline: none;
}

.hdn-cine-hero-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hdn-cine-hero-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(247, 243, 234, 0.44);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hdn-cine-hero-dot:hover,
.hdn-cine-hero-dot:focus-visible,
.hdn-cine-hero-dot.is-active {
    background: rgba(247, 243, 234, 0.95);
    transform: scale(1.12);
    outline: none;
}

.hdn-cine-hero-caption {
    position: absolute;
    left: clamp(16px, 3.2vw, 38px);
    right: auto;
    bottom: clamp(18px, 3vw, 34px);
    z-index: 4;
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(247, 243, 234, 0.3);
    background: rgba(6, 16, 38, 0.54);
    color: rgba(247, 243, 234, 0.9);
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hdn-cine-hero:not(.has-media) .hdn-cine-hero-overlay {
    background:
        linear-gradient(180deg, rgba(5, 12, 30, 0.3) 0%, rgba(5, 12, 30, 0.7) 100%),
        linear-gradient(132deg, rgba(186, 145, 88, 0.2) 0%, rgba(5, 12, 30, 0) 44%);
}

@media (max-width: 1080px) {

    :is(.hdn-journal2-hero,
        .hdn-journal2-single-hero,
        .hdn-editorial-hero,
            .hdn-shorts-hero,
        .hdn-support-hero,
        .hdn-guide-hero).hdn-cine-hero {
        min-height: clamp(330px, 64vh, 680px);
    }

    .hdn-cine-hero-inner {
        width: min(1100px, calc(100% - 2rem));
    }
}

@media (max-width: 780px) {

    :is(.hdn-journal2-hero,
        .hdn-journal2-single-hero,
        .hdn-editorial-hero,
            .hdn-shorts-hero,
        .hdn-support-hero,
        .hdn-guide-hero).hdn-cine-hero {
        min-height: clamp(300px, 56vh, 520px);
    }

    .hdn-cine-hero-inner {
        width: calc(100% - 1.2rem);
        padding-top: clamp(40px, 8vw, 80px);
        padding-bottom: clamp(26px, 7vw, 44px);
    }

    .hdn-cine-hero-controls {
        bottom: 12px;
        padding: 7px 10px;
    }
}

@media (max-width: 560px) {
    .hdn-cine-hero-controls {
        gap: 8px;
    }

    .hdn-cine-hero-control {
        width: 32px;
        height: 32px;
    }

    .hdn-cine-hero-caption {
        left: 12px;
        bottom: 56px;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hdn-cine-hero-slide,
    .hdn-cine-hero-control,
    .hdn-cine-hero-dot {
        transition: none !important;
    }
}