/**
 * @file        section/subhero/subhero.css
 * @location    /section/subhero/subhero.css
 * @description Dynamic subpage hero strip. Prefix: sbh__
 *              Used on all legal subpages (Impressum, Datenschutz, Nutzung).
 *              Loaded automatically by index.home.php when subhero section
 *              is listed in $ambl__pages['sections'].
 *
 *              COLORS (COLOR-GUIDE.md — all ≥ 7:1):
 *                BG:        C1 #07003D
 *                Eyebrow:   C10/C1  10.31:1 ✓
 *                H1:        C2/C1   12.61:1 ✓
 *                Lead:      #c0d8ec/C1 8.57:1 ✓
 *                Breadcrumb: C10/C1 10.31:1 ✓
 *                Meta:      C10/C1  10.31:1 ✓
 *
 * @version     1.0.0
 * @changelog
 *   1.0.0  2026-03-19  Extracted from lgl.css section 1.
 */



/* Full-width Navy strip */
.sbh__hero {
    background:    var(--color-navy);
    padding:       var(--space-10) 0 var(--space-9);
    border-bottom: 3px solid var(--color-blue);
}
.sbh__inner {
    /* padding via Bootstrap container-xl */
}

/* Breadcrumb — C10/C1 10.31:1 ✓ */
.sbh__breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    list-style:  none;
    padding:     0;
    margin:      0 0 var(--space-5);
    font-size:   var(--text-xs);
    font-weight: var(--weight-bold);
    color:       var(--color-ice);
}
.sbh__breadcrumb a {
    color:           var(--color-ice);
    text-decoration: none;
    transition:      color var(--transition-fast);
}
.sbh__breadcrumb a:hover         { color: var(--color-white); }
.sbh__breadcrumb a:focus-visible {
    outline: 2px solid var(--color-ice);
    outline-offset: 2px;
    border-radius: 2px;
}
.sbh__sep { color: rgba(221,234,245,.35); font-size: .7rem; }

/* Eyebrow — C10/C1 10.31:1 ✓ */
.sbh__eyebrow {
    display:        flex;
    align-items:    center;
    gap:            var(--space-2);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-black);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color:          var(--color-ice);
    margin:         0 0 var(--space-3);
}

/* H1 — appears once per page — C2/C1 12.61:1 ✓ */
.sbh__title {
    font-size:      var(--text-4xl, 2.25rem);
    font-weight:    var(--weight-black);
    color:          var(--color-white);
    letter-spacing: var(--tracking-tight);
    line-height:    var(--leading-tight);
    margin:         0 0 var(--space-3);
}

/* Lead — #c0d8ec/C1 8.57:1 ✓ */
.sbh__lead {
    font-size:   var(--text-base);
    color:       var(--color-on-dark);
    line-height: var(--leading-relaxed);
    max-width:   620px;
    margin:      0;
}

/* Meta strip — C10/C1 10.31:1 ✓ */
.sbh__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         var(--space-5);
    margin:      var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top:  1px solid rgba(255,255,255,.12);
}
.sbh__meta-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-xs);
    font-weight: var(--weight-bold);
    color:       var(--color-ice);
}
.sbh__meta-item .bi { font-size: .85rem; opacity: .8; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 992px) {
    .sbh__title { font-size: var(--text-3xl); }
}
@media (max-width: 768px) {
    .sbh__hero  { padding: var(--space-8) 0 var(--space-7); }
    .sbh__title { font-size: var(--text-2xl); }
}
@media (max-width: 600px) {
    .sbh__inner { /* padding via container-xl responsive */ }
    .sbh__meta  { gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
    .sbh__breadcrumb a { transition: none; }
}