/* ===========================
   RESPONSIVE: NEW TEMPLATES
   =========================== */
@media (max-width: 1024px) {
    .entorn-feature-block {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* 2026-07-10 (BLOC D): apilat, el bloc mostrava 3 fotos full-width ABANS del titol
       "Natura i Senderisme". El text passa davant. Aquest @1024 es exactament el rang en
       que .entorn-feature-block es d'una sola columna, o sigui que no afecta el desktop.
       NOTA: canvia l'ordre VISUAL, no el del DOM (cap element interactiu implicat). */
    .entorn-feature-text {
        order: -1;
    }

    .entorn-activitats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Com Arribar: 3 targetes → 1 columna a tablet (≤1024) per evitar cel·les buides amb l'alternativa full-width */
    .arribar-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contacte-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* E4 (2026-07-10, GRUP 5): amb el grid apilat, la info de contacte va ABANS del formulari.
       Aquest es el rang exacte en que `.contacte-grid` es d'1 columna (la regla de sobre), NO
       @768: a 900 i 1024px tambe esta apilat. El formulari fa 1.047px -> avui cal baixar-lo
       sencer per trobar-hi el telefon.
       NOTA: aqui l'ordre visual deixa de coincidir amb el de tabulacio (el DOM segueix sent
       formulari -> info). No es un incompliment (1.3.2 vol una seq. de DOM significativa, i ho
       es; 2.4.3 vol que l'ordre preservi sentit i operativitat, i els preserva), pero SI una
       incoherencia. Moure-ho al DOM no l'elimina: la trasllada al desktop, on el teclat pesa
       mes i la info viu a la columna dreta. La deixem on menys pesa. (Compareu amb el text-first
       d'Entorn del BLOC D: alla era gratuit perque aquell bloc no te cap element interactiu.) */
    .contacte-info { order: -1; }

    .nous-espais-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .preus-condicions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header-hero {
        min-height: 280px;
        max-height: 400px;
    }

    .page-header-hero .page-title {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .entorn-feature-images {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .entorn-feature-img--large {
        grid-row: auto;
    }

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

    /* Com Arribar: mapa més baix + 1 sola columna de targetes + banda i botó adaptats */
    .arribar-mapa-leaflet {
        height: 340px;
        min-height: 340px;
    }
    .arribar-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .arribar-card {
        padding: 26px 22px;
    }
    .arribar-comu {
        padding: 28px 22px;
    }
    .arribar-mapa-cta {
        position: static;
        margin: 14px 0 0;
        width: 100%;
        justify-content: center;
        box-shadow: none;
    }
    .arribar-info-box ul {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .preus-fila {
        padding: 18px 25px;
    }

    .preus-fila--header {
        padding: 12px 25px;
    }

    .preus-preu {
        font-size: 1.1rem;
    }

    .preus-inclou-grid {
        grid-template-columns: 1fr;
    }

    .contacte-form-row {
        grid-template-columns: 1fr;
    }

    .nous-espais-features {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {
    .page-header-hero {
        min-height: 240px;
    }

    .section-entorn-intro,
    .section-preus-intro {
        padding: 35px 0 20px;
    }

    .entorn-intro-text,
    .preus-intro-text {
        font-size: 1rem;
    }

    .entorn-poble-card {
        padding: 25px 20px;
    }

    /* 2026-07-10 (BLOC C responsive): la seccio d'activitats era molt airejada (1.705px).
       Tanquem el gap (heretat de @1024) i el padding. La mida de la icona (70px) es manté
       per decisió de l'usuari. */
    .entorn-activitats-grid {
        gap: 18px;
        margin-top: 28px;
    }

    .entorn-activitat-item {
        /* 18px horitzontals estrenyien el text i una targeta guanyava una linia (+24px);
           tornem a 15px (2026-07-10, BLOC D). */
        padding: 24px 15px;
    }

    .preus-card-header {
        padding: 30px 20px;
    }

    .preus-card-header h2 {
        font-size: 1.5rem;
    }

    .preus-fila {
        padding: 15px 20px;
        font-size: 0.95rem;
    }

    .preus-fila--header {
        padding: 10px 20px;
    }

    .preus-preu {
        font-size: 1rem;
    }

    .contacte-info-card {
        padding: 30px 20px;
    }

    .arribar-step {
        gap: 12px;
    }

    .arribar-step-num {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .arribar-title {
        font-size: 1.9rem;
    }

    .arribar-comu-title {
        font-size: 1.35rem;
    }

    .nous-espais-desc {
        font-size: 1.05rem;
    }
}

/* .cta-banner-actions plegat a components/_entorn-cta.css (F3.2/F3.4, 2026-06-22). */