/* ==============================================
   page-banner.css
   Hero banner – Featured Image & Gradient variants
   ============================================== */

/* ── Container ── */
.initialise-page-banner {
    position: relative;
    width: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ── Image variant ──────────────────────────────
 * URL is passed in via the CSS custom property
 * --banner-img set on the element by PHP.        */
.page-banner--image {
    background-image:    var(--banner-img);
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
}

/* Gradient scrim so the title is always readable */
.page-banner--image .page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .25) 0%,
        rgba(0, 0, 0, .60) 100%
    );
    z-index: 1;
}

/* ── Gradient variant ── */
.page-banner--gradient {
    background: linear-gradient(
        135deg,
        var(--clr-blue, #0273b0) 0%,
        #013d5e 100%
    );
}

/* No overlay needed on a solid gradient */
.page-banner--gradient .page-banner-overlay {
    display: none;
}

/* ── Title + content ── */
.page-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 24px;
    max-width: 900px;
    width: 100%;
}

.page-banner-title {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-shadow:
        0 2px 8px  rgba(0, 0, 0, .45),
        0 1px 3px  rgba(0, 0, 0, .3);
    letter-spacing: -.01em;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .initialise-page-banner  { min-height: 200px; }
    .page-banner-content     { padding: 40px 20px; }
}