/* ---------------------------------------------------------------
   Blog Hero — sn_productfeed
   Fascia full-width (fuori dal .container), testo allineato al container di pagina
--------------------------------------------------------------- */

.snpf-blog-hero {
    position: relative;
    background-color: #1a2e44;   /* fallback se nessuna immagine */
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    margin-bottom: 40px;
}

.snpf-blog-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.22) 100%
    );
    z-index: 0;
}

/* Il .container viene ereditato dal tema; qui aggiungiamo solo il padding verticale */
.snpf-blog-hero > .container {
    position: relative;
    z-index: 1;
    padding-top: 80px;
    padding-bottom: 80px;
}

.snpf-blog-hero__inner {
    text-align: center;
}

.snpf-blog-hero__title {
    color: #ffffff;
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1024px) {
    .snpf-blog-hero > .container {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .snpf-blog-hero__title {
        font-size: 3.4rem;
    }
}

@media (max-width: 767px) {
    .snpf-blog-hero > .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .snpf-blog-hero__title {
        font-size: 2.4rem;
    }
}

/* ---------------------------------------------------------------
   Variante categoria blog — gradiente verde, nessuna immagine
--------------------------------------------------------------- */

.snpf-blog-hero--cat {
    background-image: linear-gradient(135deg, #3D6932 0%, #77BC1F 100%);
}

.snpf-blog-hero--cat .snpf-blog-hero__overlay {
    background: rgba(0, 0, 0, 0.15);   /* overlay leggero per leggibilità */
}