/* ==========================================================================
   Spreckelsen — Kollektions-Banner (Seitenvorlage "page-product-group.php")
   Gilt für ALLE Seiten mit dieser Vorlage (Eclipse, Ringe, Ketten, Ohrschmuck
   usw.), nicht nur für eine einzelne. Wird NUR dort geladen
   (is_page_template-Prüfung in functions.php).

   Problem vorher: ".banner" hatte nur "min-height: 320px" und kein
   "background-size" — bei voller Seitenbreite wurde das Bild (1140×300)
   dadurch stark hochskaliert und oben + unten beschnitten (z. B. Ohrringe
   liefen über den Rand). Lösung: deutlich mehr Höhe, kontrolliertes
   background-size, und eine Verlaufs-Abdunklung hinter dem Text, damit
   Titel/Untertitel auf jedem Hintergrundbild lesbar bleiben.
   ========================================================================== */

.banner {
    position: relative;
    min-height: 560px;
    background-size: cover !important;
    background-position: center !important;
    overflow: hidden;
}

/* Dunkler Verlauf hinter dem Text — unabhängig vom jeweiligen Bannerbild
   bleibt der Text dadurch immer lesbar, ohne das Bild selbst abzudunkeln. */
.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 20, 20, .10) 0%,
        rgba(0, 20, 20, .18) 35%,
        rgba(0, 20, 20, .48) 62%,
        rgba(0, 20, 20, .60) 100%
    );
    pointer-events: none;
}

.banner .title {
    position: relative;
    z-index: 1;
}

.banner .title h1 {
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.banner .title p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    .banner {
        min-height: 420px;
    }
}

@media (max-width: 600px) {
    .banner {
        min-height: 320px;
    }

    /* Der Theme-Titel ist für große Screens ausgelegt und läuft auf
       Mobile über den Rand hinaus (zu groß, zentriert, kein Umbruch-Schutz).
       Hier gezielt kleiner, linksbündig und mit Innenabstand, überschreibt
       das Theme per !important, unabhängig davon, wo dessen Regel steht. */
    .banner .title {
        text-align: left !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    .banner .title h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .banner .title p {
        font-size: 13px !important;
        text-align: left !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Seiten ohne Bannerbild (banner--noimg) bleiben unberührt — die bestehende
   Regel dafür steht bereits in product-group-v2.css. */
.banner--noimg,
.banner--noimg::before {
    background: none;
    min-height: 0;
}