/* ─────────────────────────────────────────────────────────────────
   Block: hero
   Full-bleed photo hero. Section bg is the photo; an ink-gradient
   overlay ensures text legibility. Default scheme = steel (dark).
   The hero element here renders <header class="hero block-hero …">.
   ───────────────────────────────────────────────────────────── */

.block-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--scheme-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--scheme-fg);
    font-family: var(--ds-font-body);
    padding-top: var(--ds-space-8);
    padding-bottom: var(--ds-space-8);
    overflow: hidden;
}

/* Scheme-aware ink gradient overlay --------------------------- */
.block-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) 65%, transparent) 100%
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--scheme-bg) 70%, transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 60%
        );
    pointer-events: none;
}

.block-hero > .container { position: relative; z-index: 1; }

/* Text column ------------------------------------------------- */
.block-hero .hero-text { color: var(--scheme-fg); }

.block-hero .hero-text h1,
.block-hero .hero-text .hero-title {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-xl);
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: 0 0 var(--ds-space-4) 0;
    letter-spacing: 0.005em;
}
.block-hero .hero-text h2 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-lg);
    line-height: 1.02;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: 0 0 var(--ds-space-4) 0;
}
.block-hero .hero-text em,
.block-hero .hero-text h1 em,
.block-hero .hero-text h2 em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

.block-hero .hero-text p,
.block-hero .hero-text .lead {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-lg);
    line-height: 1.55;
    color: var(--scheme-fg-soft);
    margin-bottom: var(--ds-space-4);
}

.block-hero .hero-text strong { color: var(--scheme-fg); font-weight: 700; }
.block-hero .hero-text a { color: var(--ds-cta); }

/* Buttons inside content keep theme treatment but ensure spacing */
.block-hero .hero-text .btn,
.block-hero .hero-text .btn-primary {
    margin: var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) 0;
}

/* Rating row -------------------------------------------------- */
.block-hero .hero-rating { gap: var(--ds-space-3); align-items: center; }

.block-hero .hero-avatars { padding-left: var(--ds-space-4); }
.block-hero .hero-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 4px solid var(--scheme-fg);
    margin-left: -1rem;
    object-fit: cover;
    background: var(--scheme-card-bg);
}

.block-hero .hero-rating-stars {
    font-size: var(--ds-fs-body-lg);
    color: var(--scheme-fg);
}
.block-hero .hero-stars-wrap { position: relative; margin-right: var(--ds-space-1); }
.block-hero .hero-stars-mask {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    background-color: var(--scheme-bg);
}
.block-hero .hero-rating-value { color: var(--scheme-fg); font-weight: 700; }
.block-hero .hero-rating-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-fs-body-sm);
    color: var(--scheme-fg-mute);
}

/* Media column ------------------------------------------------ */
.block-hero .hero-media { color: var(--scheme-fg); }
.block-hero .hero-media img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ds-radius-lg);
}

/* Responsive -------------------------------------------------- */
@media (max-width: 991.98px) {
    .block-hero {
        padding-top: var(--ds-space-7);
        padding-bottom: var(--ds-space-7);
    }
}
@media (max-width: 600px) {
    .block-hero {
        padding-top: var(--ds-space-6);
        padding-bottom: var(--ds-space-6);
    }
    .block-hero .hero-text h1,
    .block-hero .hero-text .hero-title { font-size: var(--ds-fs-display-lg); }
    .block-hero .hero-avatar { width: 2.5rem; height: 2.5rem; border-width: 3px; }
    .block-hero .hero-avatars { padding-left: var(--ds-space-3); }
}