/*
 * Category banner — clipped hero image strip below the article-style
 * header on /articles/{cat} and /media/{cat}. Replaces the legacy
 * .page_title hero pattern (image as title background) with a clear
 * separation: title block on white above, banner image below. Image
 * is clipped via object-fit:cover so any source aspect ratio works.
 *
 * Skipped on the /articles and /media "all" indexes (no per-category
 * background) — controllers pass $background = null for those.
 *
 * Sits between the .article header and the .section--peach listing
 * surface; pulled outside the .article__container so the banner
 * spans the full article width (1080 px max) rather than the narrower
 * 720 px article body.
 */

.redesign .cat-banner {
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 0 24px;
}

.redesign .cat-banner__inner {
    width: 100%;
    height: clamp(160px, 22vw, 260px);
    overflow: hidden;
    border-radius: 16px;
    background: var(--brand-offwhite-peach);
    /* Soft sea-green-tinted shadow matches .media-lift */
    box-shadow: 0 18px 48px rgba(32, 52, 60, 0.18);
}

.redesign .cat-banner__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 600px) {
    .redesign .cat-banner { padding: 0 16px; margin-top: 24px; }
    .redesign .cat-banner__inner { border-radius: 12px; }
}