/* ================================================================
   CINEMATIC TEACHING HERO — Day 2 pilot
   Full-bleed editorial photography with a reusable contrast veil.
   Link this component after teaching-content.css on approved pilots.
   ================================================================ */

.unit-hero.unit-hero--cinematic {
    isolation: isolate;
    background:
        linear-gradient(
            135deg,
            var(--unit-hero-bg-start, #123b2f),
            var(--unit-hero-bg-end, #0f766e)
        );
}

.unit-hero.unit-hero--cinematic::before {
    z-index: 0;
    opacity: 1;
    background-image:
        linear-gradient(
            to bottom,
            rgba(4, 12, 10, 0.18) 0%,
            rgba(4, 12, 10, 0.44) 52%,
            rgba(4, 12, 10, 0.78) 100%
        ),
        var(--tc-hero-photo) !important;
    background-position: var(--cinematic-hero-position, center) !important;
    background-size: cover !important;
    filter: saturate(0.92) contrast(1.04);
}

.unit-hero--cinematic .unit-hero__inner {
    z-index: 2;
}

.unit-hero--cinematic .unit-hero__title,
.unit-hero--cinematic .unit-hero__summary,
.unit-hero--cinematic .unit-hero__breadcrumb,
.unit-hero--cinematic .unit-hero__breadcrumb a,
.unit-hero--cinematic .unit-hero__breadcrumb span {
    color: #fff;
}

.unit-hero--cinematic .unit-hero__title {
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.58);
}

.unit-hero--cinematic .unit-hero__summary {
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}

.unit-hero__photo-credit {
    position: absolute;
    z-index: 3;
    right: 0.75rem;
    bottom: 0.45rem;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.92);
}

.unit-hero--cinematic:hover .unit-hero__photo-credit,
.unit-hero__photo-credit:focus-visible {
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .unit-hero.unit-hero--cinematic {
        padding-bottom: calc(var(--spacing-unit) * 5);
    }

    .unit-hero__photo-credit {
        right: 0.65rem;
        bottom: 0.4rem;
        max-width: calc(100% - 1.3rem);
        color: rgba(255, 255, 255, 0.78);
        text-align: right;
    }
}

@media print {
    .unit-hero__photo-credit {
        display: none !important;
    }
}