/* ===========================
   ENTORN SECTION
   =========================== */
.section-entorn {
    padding: var(--section-padding) 0;
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-cream) 100%);
}

.entorn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* H-09 (2026-07-10, GRUP 6): a la home, 4 medies (3 fotos + 1 video, ~1.000px) precedien el
   titol «El Montseny als teus peus»: no sabies de que anava la seccio fins d'haver-les passat
   totes. Amb el grid apilat, el text va primer. Mateix gest que el BLOC D a la pagina d'Entorn.
   Selector home-only per construccio: la pagina /entorn/ usa `.section-entorn-intro|-natura|…`,
   mai `.section-entorn` (verificat: 1 coincidencia a la home, 0 a /entorn/).
   ⚠️ Els 900px NO son arbitraris: son el breakpoint on `sprint52.css` fa `.section-entorn
   .entorn-grid{grid-template-columns:1fr}`. Si sprint52 canvia (es dissoldra amb el redisseny
   d'entorn), aquest `order` s'ha de moure amb ell.
   NOTA a11y: com a E4, l'ordre visual deixa de coincidir amb el de tabulacio (el DOM segueix
   sent imatges -> text; el boto de play del video rep focus abans que el titol). Moure-ho al
   DOM traslladaria el desajust al desktop, on el teclat pesa mes. */
@media (max-width: 900px) {
    .section-entorn .entorn-text { order: -1; }
}

.entorn-grid-reverse {
    grid-template-columns: 1fr 1fr;
}

.entorn-images {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.entorn-img {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1/1;
}

.entorn-img:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
}

.entorn-img:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.entorn-img:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

.entorn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.entorn-img:hover img {
    transform: scale(1.1);
}

.entorn-text h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 20px;
}

.entorn-text p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: var(--color-text);
}

/* --- Responsive ENTORN (fusionat de _responsive-1024/480 — F3.4, 2026-06-23) ---
   .entorn-grid gap:50px era MORT (sprint64 imposa 32px, computed-verificat) i
   .entorn-images 1fr 1fr era redundant (= base) → omesos. .entorn-activities/.activity-*
   eren CSS MORT (0 HTML a 19 pàgines + 0 JS) → base i responsive ELIMINATS (dead-base cleanup 2026-06-23). */
@media (max-width: 1024px) {
    .entorn-grid {
        grid-template-columns: 1fr;
    }
    .entorn-img:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    .entorn-img:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }
    .entorn-img:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 480px) {
    .entorn-text h3 {
        font-size: 1.3rem;
    }
}

/* ===========================
   CTA BANNER SECTION  (consolidat F3.2/F3.4 — 2026-06-22)
   Plega: _fixes-p0, _responsive-1024/768/480, new-sections, sprint52, sprint59, sprint64.
   Nomenclatura unificada → .cta-banner-actions (la del HTML). .cta-banner-buttons era codi mort.
   Tokens --mv-* intactes (els resol F3.5). Responsive al final (mètode F3.4).
   =========================== */
.section-cta-banner {
    position: relative;
    padding: var(--space-lg) 20px; /* 48px 20px (sprint64 padding-block + fixes-p0 inline) */
    background-size: cover;
    background-position: center !important; /* Passada 5 (2026-06-19): anul·la el reposicionament JS (parallax legacy) */
    background-repeat: no-repeat;
    background-attachment: scroll;
    text-align: center;
    overflow: hidden;
}

/* CWV-03 (2026-10-21): la foto de la banda és un <picture> diferit (template-parts/cta-banner.php), no un fons CSS.
   Mateix aspecte que el background-size:cover + background-position:center d'abans; sota el ::before i la capa
   (z-index 1) i el contingut (z-index 2). */
.section-cta-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}
.section-cta-banner__media > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

.section-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(92, 64, 51, 0.48),
        rgba(45, 90, 39, 0.48)
    );
    z-index: 1;
}

/* 2a capa, ACTIVA des del 2026-09-24 (D-45, T3). El ::before de marca tot sol NO garantia el contrast (el comentari
   d'aquí deia que sí): sense aquesta capa, entre un 33 i un 85 % del fons del paràgraf quedava per sota de 4,5:1
   (mesurat píxel a píxel). Fins a 1024 px la part de dalt és més fosca (bloc responsive del final). Gate: banners.spec.js. */
.cta-banner-overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 26, 0.30) 0%,
        rgba(45, 30, 22, 0.62) 100%
    );
    z-index: 1;
}

.cta-banner-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    color: var(--color-white);
}

.cta-banner-content h2 {
    color: var(--color-white);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    margin-bottom: 18px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.cta-banner-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 35px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.cta-banner-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Botons del CTA — base (sprint52) + estats (sprint59). El :hover de sprint52 era redundant amb sprint59 (mateix valor, menys especificitat) → omès (2026-06-22). */
.section-cta-banner .btn-primary {
    background: var(--color-primary);
}
.section-cta-banner .cta-banner-actions .btn-primary,
.section-cta-banner .cta-banner-actions .btn-outline-light {
    transition: background 220ms ease,
                color 220ms ease,
                transform 220ms cubic-bezier(.2, .8, .2, 1),
                box-shadow 220ms ease,
                border-color 220ms ease;
}
.section-cta-banner .cta-banner-actions .btn-primary:hover {
    background: var(--color-primary-light, #94655A);
    box-shadow: 0 8px 24px rgba(122, 79, 56, 0.28);
    transform: translateY(-2px);
}
.section-cta-banner .cta-banner-actions .btn-primary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 8px rgba(122, 79, 56, 0.20);
}
.section-cta-banner .cta-banner-actions .btn-primary:focus-visible,
.section-cta-banner .cta-banner-actions .btn-outline-light:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 3px;
}
.section-cta-banner .cta-banner-actions .btn-outline-light:active {
    transform: translateY(0) scale(0.97);
}

/* Responsive CTA (al final — mètode F3.4) */
@media (min-width: 768px) {
    .section-cta-banner .cta-banner-actions {
        flex-wrap: nowrap;
        gap: 16px;
    }
    .section-cta-banner .cta-banner-actions .btn {
        white-space: nowrap;
    }
}

/* Fins a 1024 px, la capa és més fosca a dalt (0,30 → 0,40): el paràgraf cau més amunt, i al d'Allotjament, sobre el cel,
   quedava un 17 % del fons per sota de 4,5:1 a 390 px; i a Entorno (ES), a 900 px, un píxel a 4,496 (D-45, T3; mesurat
   2026-09-24 als 12 bàners). Amb el reforç, el mínim és de 4,84 a 390 i de 5,09 entre 820 i 1024. */
@media (max-width: 1024px) {
    .cta-banner-overlay {
        background: linear-gradient(
            180deg,
            rgba(26, 26, 26, 0.40) 0%,
            rgba(45, 30, 22, 0.62) 100%
        );
    }
}

@media (max-width: 480px) {
    .cta-banner-actions {
        flex-direction: column;
        gap: 12px;
    }
    .cta-banner-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-cta-banner .cta-banner-actions .btn-primary,
    .section-cta-banner .cta-banner-actions .btn-outline-light {
        transition: background 120ms, color 120ms, border-color 120ms;
    }
    .section-cta-banner .cta-banner-actions .btn-primary:hover,
    .section-cta-banner .cta-banner-actions .btn-primary:active,
    .section-cta-banner .cta-banner-actions .btn-outline-light:active {
        transform: none;
    }
}