/* ─────────────────────────────────────────────────────────────────
   Block: header
   Hero-style header section with title + subtitle + CTA + image.
   Same family as block-hero. Default scheme = steel (dark).
   ───────────────────────────────────────────────────────────── */

.block-header {
    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;
}

/* Ink gradient overlay --------------------------------------- */
.block-header::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) 60%, 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-header > .container-fluid { position: relative; z-index: 1; }

/* Headline / subtitle ---------------------------------------- */
.block-header .hero-content { color: var(--scheme-fg); }

.block-header .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-header .hero-title em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

.block-header .hero-subtitle {
    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-5);
    max-width: 38rem;
}

/* Buttons row -------------------------------------------------- */
.block-header .hero-content .btn,
.block-header .hero-content .btn-primary {
    margin: var(--ds-space-2) var(--ds-space-2) var(--ds-space-2) 0;
}

/* Media column — image uses .ds-image .ds-image-hero classes from design-system.css.
   Hero panel uses larger radius than default .ds-image (sm). */
.block-header .header-media img.ds-image,
.block-header .header-media img { border-radius: var(--ds-radius-lg); }

/* Responsive -------------------------------------------------- */
@media (max-width: 991.98px) {
    .block-header {
        padding-top: var(--ds-space-7);
        padding-bottom: var(--ds-space-7);
    }
    .block-header .hero-title { font-size: var(--ds-fs-display-lg); }
}
@media (max-width: 600px) {
    .block-header {
        padding-top: var(--ds-space-6);
        padding-bottom: var(--ds-space-6);
    }
    .block-header .hero-title { font-size: var(--ds-fs-display-md); }
    .block-header .header-media img.ds-image,
    .block-header .header-media img { border-radius: var(--ds-radius); }
}