/* ==========================================================================
   BLOCK: PAGE HEAD - dark banner: kicker, weight-contrast title, strap,
   optional repository search. Compact variant via .page-head-slim.
   ========================================================================== */

@scope (.block-page-head) {
    /* Grid-stacked hero: a real <img> (not a CSS background) under a
       tint layer, content on top. The banner's height stays CONTENT
       driven: the media uses block-size: 0 + min-block-size: 100% so it
       contributes nothing to row sizing, then stretches to the row the
       content defined (avoids the intrinsic-height feedback loop). */
    :scope {
        display: grid;
        grid-template: 1fr / 1fr;
        overflow: clip;
        background: var(--bg-contrast);
        color: var(--text-inverse);
        container-type: inline-size;
        container-name: pagehead;
    }
    :scope > * { grid-area: 1 / 1; }

    .head-media {
        inline-size: 100%;
        block-size: 0;
        min-block-size: 100%;
        object-fit: cover;
        display: block;
    }
    /* Tint pulls the image back into the black so the text pops */
    .head-scrim { background: rgba(37, 40, 43, 0.8); }

    .page-head-inner { z-index: 1; }
    .page-head-inner {
        display: grid;
        gap: clamp(18px, 2cqw, 28px);
        justify-items: start;
        padding-block: clamp(52px, 9cqw, 150px);
    }
    :scope(.page-head-slim) .page-head-inner { padding-block: clamp(36px, 6cqw, 96px); }

    .kicker { color: var(--accent-lime); }
    h1 {
        font-weight: 100;
        font-size: clamp(2.2rem, 6.5cqw, 5.5rem);
        line-height: 1;
        letter-spacing: -0.01em;
    }
    h1 strong { font-weight: 900; }
    .page-strap {
        font-weight: 300;
        font-size: clamp(1rem, 1.2cqw, 1.2rem);
        color: rgba(255,255,255,0.75);
        max-inline-size: 62ch;
        line-height: 1.8;
    }

    /* Repository search */
    .head-search {
        display: flex;
        inline-size: min(620px, 100%);
        border: 1px solid rgba(255,255,255,0.3);
        transition: border-color 0.3s;
        margin-block-start: 14px;
    }
    .head-search:has(input:focus-visible) { border-color: var(--accent-lime); }
    .head-search input {
        flex: 1;
        min-inline-size: 0;
        background: transparent;
        border: 0;
        outline: none;
        color: #fff;
        font: inherit;
        font-size: 1rem;
        font-weight: 300;
        padding: clamp(14px, 1.8cqw, 20px) clamp(16px, 2cqw, 24px);
    }
    .head-search input::placeholder { color: rgba(255,255,255,0.55); }
    .head-search button {
        background: var(--accent-lime);
        color: #000;
        font-weight: 700;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        padding-inline: 22px;
        transition: background 0.25s;
    }
    .head-search button:hover { background: #fff; }
}