/* Page Hero — shared base styles for all hero blocks
 * (page-hero, publication-hero, and future hero variants)
 *
 * Each block's style.css adds only its unique rules on top of this base.
 */

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

.page-hero {
    background-color: var(--color-blue-dark);
    padding-block: clamp(var(--space-12), 6vw, var(--space-20));
    position: relative;
    margin-block: 0;
}

/* Background pattern — repeats vertically along the right edge.
 * Image is 2x resolution (2800x136px); rendered at 1x (1400x68px). */
.page-hero::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-image: url('../../../assets/images/hero-bck-pattern-2x.png');
    background-repeat: repeat-y;
    background-position: right top;
    background-size: 1400px 68px;
    pointer-events: none;
    z-index: 0;
}

.page-hero--no-pattern::before,
.page-hero--has-bg::before {
    display: none;
}

/* --- Background image --- */

.page-hero--has-bg {
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
}

.page-hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(1, 1, 51, 0.7);
}

/* --- Inner container --- */

.page-hero__inner {
    width: min(var(--max-width-content), 100% - 2 * var(--site-padding));
    margin-inline: auto;
    padding-inline: 0;
    position: relative;
    z-index: 1;
}

/* --- Eyebrow (optional label above title) --- */

.page-hero__eyebrow {
    display: inline-block;
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-blue-light);
    text-decoration-line: none;
    margin-block-end: var(--space-3);
}

a.page-hero__eyebrow:hover {
    color: var(--color-blue-light);
    text-decoration-line: underline;
}

/* --- Title (default sizing — blocks can override) --- */

.page-hero__title {
    font-family: var(--font-serif);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-warm-medium);
    line-height: var(--leading-tight);
    margin: 0;
    margin-block-end: var(--space-3);
}

/* --- Subtitle (shared across heroes that use .page-hero__subtitle) --- */

.page-hero__subtitle {
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 2.5vw, var(--text-2xl));
    font-weight: var(--font-weight-normal);
    color: var(--color-white);
    margin: 0;
    line-height: var(--leading-relaxed);
}

.page-hero__subtitle:empty {
    display: none;
}

/* --- Inline links inside hero body copy ---
 * Catches WYSIWYG links inside any hero text container (subtitle, intro,
 * description, etc.). Targets <p> descendants to avoid clobbering named
 * link classes (eyebrow, author-link, platform-link) which live outside <p>. */

.page-hero p a {
    color: var(--color-blue-light);
}

.page-hero p a:hover {
    color: var(--color-white);
}

/* --- Author links (used by publication hero, available to others) --- */

.page-hero__author-link {
    color: var(--color-blue-light);
    text-decoration-line: none;
    font-weight: var(--font-weight-semibold);
}

.page-hero__author-link:hover {
    color: var(--color-blue-light);
    text-decoration-line: underline;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    .page-hero *,
    .page-hero *::before,
    .page-hero *::after {
        transition: none !important;
        animation: none !important;
    }
}