/* css/pagine.css - Componenti delle pagine interne (casi, eventi, giornate, pssp, prenota, impegno sociale).
   Si appoggia a style.css e home.css: stesse variabili, stessi colori, stessi componenti. */

.pagina-testa { padding: 64px 0 34px; text-align: center; }
.pagina-testa h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; margin: 10px auto 16px; max-width: 24ch; }
.pagina-testa .section-intro { margin-left: auto; margin-right: auto; }
.pagina-testa .section-intro a { color: var(--accent-primary); font-weight: 700; }
.pagina-stretta { max-width: 900px; }
.pagina-cta { text-align: center; }
.pagina-cta p { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 18px; }

/* video e mappe in proporzione 16:9 */
.video-16-9 { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; margin: 14px 0; }
.video-16-9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-16-9.mappa { background: var(--bg-secondary); }

/* collaborazioni */
.casi-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.caso { background: var(--card-bg); border: 1px solid var(--border-color); border-top: 5px solid var(--ramo-biz); border-radius: var(--radius-lg); padding: 24px; }
.caso h2 { font-size: 1.3rem; margin: 10px 0 8px; text-align: left; }
.caso p { color: var(--text-secondary); line-height: 1.55; margin: 0 0 8px; }
.caso .badge, .evento-card .badge { display: inline-block; align-self: flex-start; font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); background: rgba(128, 54, 138, 0.18); color: var(--text-primary); }
.caso-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #ffffff; border-radius: var(--radius-lg); margin: 14px 0; padding: 30px; }
.caso-logo img { max-height: 100%; width: auto; }
.caso-largo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.caso-largo .caso-logo { margin: 0; aspect-ratio: auto; height: 100%; min-height: 160px; }
.caso-largo .caso-logo img { max-width: 100%; height: auto; }

/* impegno sociale: schede a due per riga */
.prodotti-2 { grid-template-columns: repeat(2, 1fr); }
.prodotti-2 .prodotto h2 { font-size: 1.3rem; margin: 0 0 10px; text-align: left; }

/* galleria di foto */
.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }

/* eventi */
.eventi-griglia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.evento-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--border-color); border-top: 5px solid var(--ramo-biz); border-radius: var(--radius-lg); padding: 24px; }
.evento-card h2 { font-size: 1.25rem; margin: 0 0 8px; text-align: left; }
.evento-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 8px; color: var(--accent-primary); font-weight: 700; font-size: 0.92rem; }
.evento-tipo { margin: 0 0 10px; color: var(--text-primary); font-weight: 600; }
.evento-card p { color: var(--text-secondary); line-height: 1.55; }
.evento-card img { width: 100%; height: auto; border-radius: var(--radius-sm); margin: 6px 0 12px; }
.evento-link { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--accent-primary); }

/* due colonne (giornate) */
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.due-colonne .colonna h2 { font-size: 1.3rem; text-align: left; margin: 0 0 10px; }
.due-colonne .colonna p { color: var(--text-secondary); line-height: 1.6; }
.due-colonne .colonna a { color: var(--accent-primary); font-weight: 700; }
.programma { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 10px; }
.programma dt { font-weight: 800; color: var(--accent-primary); }
.programma dd { margin: 0; color: var(--text-secondary); }

/* modulo esterno (Microsoft Forms) */
.modulo-esterno { position: relative; width: 100%; height: 900px; border-radius: var(--radius-lg); overflow: hidden; background: #ffffff; }
.modulo-esterno iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 860px) {
  .casi-griglia, .eventi-griglia, .prodotti-2, .due-colonne, .caso-largo { grid-template-columns: 1fr; }
  .galleria { grid-template-columns: 1fr 1fr; }
}