/* --- Impostazioni Globali e Variabili --- */
:root {
    --primary-color: #0d2c4b; /* Blu Aviazione Scuro */
    --secondary-color: #fca311; /* Arancione/Oro per accenti */
    --background-color: #f4f5f7; /* Grigio Chiaro */
    --text-color: #333333;
    --light-text-color: #ffffff;
    --card-bg-color: #ffffff;
    --footer-bg-color: #1e1e1e;
    --main-font: 'Open Sans', sans-serif;                 /* dal 02/10/2026; prima Poppins */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* La misura di base di tutto il sito.
   Tutto il foglio e' in rem, quindi questa riga scala insieme titoli,
   testo, spaziature e pulsanti: e' l'unica leva che cambia la densita'
   senza dover rivedere sessanta regole una per una.
   16px e' il valore predefinito del browser ed era troppo generoso per
   l'area riservata, dove su una schermata devono starci moduli da venti
   campi. */
html {
    font-size: 14px;
}

body {
    font-family: var(--main-font);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Header e Navigazione --- */
.main-header {
    background-color: var(--light-text-color);
    /* Il riempimento e' sceso da 1rem a 0.6rem quando il marchio e' passato
       a 68px: la barra deve crescere con il logo, non farlo uscire dal suo
       contenitore ne' schiacciarlo contro i bordi. */
    padding: 0.6rem 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
}

/* Il marchio ha un'altezza fissa e larghezza automatica: qualunque
   proporzione abbia il file, la barra non cambia altezza.

   Il nome NON e' scritto accanto come testo: il file logo-text-default.png
   lo contiene gia'. Scriverlo di nuovo lo direbbe due volte, anche a un
   lettore di schermo. Sotto i 480px il <picture> passa da solo a
   logo-responsive.png, che e' il solo stemma: il lockup con la scritta,
   ridotto a quella larghezza, diventerebbe illeggibile. */
.logo-marchio {
    height: 68px;
    width: auto;
    display: block;
}

/* Sotto i 480px il <picture> passa al solo stemma, che e' quadrato: puo'
   restare piu' alto senza rubare larghezza al menu. */
@media (max-width: 480px) {
    .logo-marchio { height: 52px; }
}

/* =====================================================
   PAGINA FLOTTA
   =====================================================
   Tre gruppi (AG, VDS, alianti), ognuno una griglia di schede.

   auto-fit invece di un numero fisso di colonne: le macchine sono 5, 2
   e 7, e con un numero fisso l'ultima riga di ogni gruppo resterebbe
   spaiata a una larghezza e non a un'altra. Cosi' il numero di colonne
   lo decide lo spazio disponibile. */

.flotta-gruppo {
    margin: 3.5rem 0;
}

.flotta-titolo {
    color: var(--primary-color);
    font-size: 1.6rem;
    border-bottom: 3px solid var(--secondary-color);
    padding-bottom: 0.6rem;
    margin-bottom: 0.8rem;
}

.flotta-titolo i {
    margin-right: 0.6rem;
    color: var(--secondary-color);
}

.flotta-intro {
    color: #667085;
    margin-bottom: 2rem;
    max-width: 60ch;                     /* una riga troppo lunga non si rilegge */
}

.flotta-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.macchina {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;                    /* la foto segue gli angoli arrotondati */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

/* Il riquadro della foto ha proporzioni fisse e uno sfondo grigio: finche'
   la foto manca si vede un rettangolo, non un'icona di immagine rotta, e
   la pagina non salta quando le foto arrivano. */
.macchina-foto {
    aspect-ratio: 3 / 2;
    background-color: #e6e8eb;
    overflow: hidden;
}

.macchina-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;                   /* riempie il riquadro senza deformare */
    display: block;
}

.macchina-testo {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;                        /* le schede della stessa riga finiscono pari */
}

/* La matricola e' l'identificativo, e va letta come tale: monospaziata,
   in piccolo, sopra al modello. */
.matricola {
    font-family: ui-monospace, "Consolas", "Courier New", monospace;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--secondary-color);
    font-weight: 700;
}

.macchina-testo h4 {
    color: var(--primary-color);
    font-size: 1.25rem;
    margin: 0.2rem 0 0.8rem 0;
}

.macchina-testo p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.macchina-uso {
    margin-top: auto !important;         /* si appoggia in fondo alla scheda */
    padding-top: 1rem;
    color: #667085;
    font-size: 0.85rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Voce di menu della pagina che si sta guardando. */
.main-nav a.attiva {
    color: var(--secondary-color);
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.main-nav a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    transition: color 0.3s ease;
    /* Una voce di menu non va mai a capo in mezzo: "Scuola di Volo" su
       due righe non e' una voce che si stringe, e' una voce rotta. Se lo
       spazio non basta lo si scopre subito, invece di vederlo dopo su un
       tablet di qualcun altro. */
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--secondary-color);
}

.nav-button {
    background-color: var(--primary-color);
    color: var(--light-text-color) !important;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.nav-button:hover {
    background-color: #0056b3;
    color: var(--light-text-color) !important;
}


/* --- Sezione Hero (Solo Home Page) --- */
.hero {
    /* min-height e non height: con la scheda in evidenza il contenuto puo'
       essere piu' alto di 70vh, e con height fissa uscirebbe dal riquadro. */
    min-height: 70vh;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--light-text-color);
    padding: 0 1rem;
    /* Serve a .hero-credito e allo strato dello sfondo, che si appoggiano
       a questo riquadro. Senza, si appoggerebbero alla pagina intera e
       finirebbero in fondo al piede. */
    position: relative;
    /* Il fondale si ingrandisce piano: senza questo, mentre cresce esce
       dai bordi e spinge fuori la pagina una barra di scorrimento
       orizzontale che compare e sparisce da sola. */
    overflow: hidden;
}

/* =====================================================
   LO SFONDO STA SU UNO STRATO SUO
   =====================================================
   E non sul riquadro, per due ragioni.

   La prima: cosi' si puo' ingrandire lentissimamente senza trascinarsi
   dietro il titolo e i pulsanti - si anima questo strato, e il testo
   sopra sta fermo. Un ingrandimento dell'8 per cento in quaranta
   secondi non si vede mentre avviene, ma la pagina smette di sembrare
   una fotografia appesa al muro.

   La seconda: la velatura resta scritta qui invece che dentro il
   JavaScript. js/sfondo.js si limita a dire QUALE foto, mettendola nella
   variabile --sfondo; come si vede lo decide il foglio di stile, che e'
   il posto giusto.

   Il percorso di ripiego e' ../images/ e NON images/: in un foglio di
   stile gli indirizzi relativi si risolvono rispetto al FOGLIO, non alla
   pagina. Questo file sta in /css/, quindi 'images/...' cercherebbe
   /css/images/dolomites_bg2.jpg, che non esiste - e lo sfondo verrebbe
   grigio senza che niente lo segnali. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Velatura piu' leggera in alto, dove sta il cielo, e piu' scura in
       basso, dove stanno il riquadro dell'invito e la fascia blu che
       segue: la foto si vede di piu' e il testo si legge lo stesso. Il
       blu del fondo e' quello del sito, cosi' la hero sfuma nella
       sezione sotto invece di finire con uno scalino. */
    background-image: linear-gradient(180deg,
                          rgba(13, 44, 75, 0.20) 0%,
                          rgba(0, 0, 0, 0.35) 45%,
                          rgba(13, 44, 75, 0.80) 100%),
                      var(--sfondo, url('../images/dolomites_bg2.jpg'));
    background-size: cover;
    background-position: center;
    animation: respiro-hero 15s linear infinite alternate;
}

/* IL RESPIRO VA AVANTI E INDIETRO, PER SEMPRE, A VELOCITA' COSTANTE.

   La prima versione faceva un ingrandimento solo, in quaranta secondi,
   con ease-out. Non si vedeva mai, e per due ragioni che si sommavano:
   ease-out mette quasi tutto il movimento nei PRIMI secondi, e i primi
   secondi sono esattamente quelli in cui la foto non c'e' ancora -
   js/sfondo.js la scarica per intero prima di metterla. Quando la foto
   compariva, l'animazione era gia' nella sua coda lenta o gia' finita:
   sullo schermo restava una fotografia immobile.

   Con "linear infinite alternate" non c'e' un momento buono in cui
   guardare: si muove sempre, allo stesso passo, e quando arriva in fondo
   torna indietro invece di fermarsi.

   12% in QUINDICI secondi sono circa sedici pixel al secondo sul bordo.
   A trenta secondi il movimento c'era ma andava cercato; a quindici si
   vede stando fermi a guardare, e resta sotto la soglia in cui una cosa
   che si muove sullo sfondo comincia a disturbare la lettura del titolo
   che ci sta sopra. */
@keyframes respiro-hero {
    from { transform: scale(1); }
    to   { transform: scale(1.12); }
}

/* Chi ha chiesto al sistema operativo di non far muovere le cose lo ha
   fatto per un motivo: c'e' chi dalle animazioni ha le vertigini. */
@media (prefers-reduced-motion: reduce) {
    .hero::before { animation: none; }
}

/* Sopra lo strato dello sfondo, che ha z-index 0. */
.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content {
    width: 100%;
    max-width: 44rem;
}

/* L'ombra sotto il titolo non si vede come ombra: si vede come titolo
   che si legge anche quando la foto del giorno e' neve o nuvole. */
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.hero-content p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* =====================================================
   L'INVITO AL PRIMO VOLO
   =====================================================
   Un riquadro intero che e' un collegamento solo: occhiello, titolo,
   la frase che dice cosa succede, e la freccia. Come pulsante arancione
   con tre righe dentro pesava come un cartello; come riquadro di vetro
   sopra la foto si legge come un invito, e la freccia arancione basta a
   dire dove si clicca.

   Il vetro (backdrop-filter) e' un di piu': dove il browser non lo
   conosce resta il fondo blu semitrasparente, che da solo basta a
   leggere il testo. */
.hero-invito {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.2rem 1.25rem 1.2rem 1.6rem;
    text-align: left;
    text-decoration: none;
    color: var(--light-text-color);
    background-color: rgba(13, 44, 75, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 4px solid var(--secondary-color);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-invito:hover,
.hero-invito:focus-visible {
    transform: translateY(-3px);
    background-color: rgba(13, 44, 75, 0.72);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.hero-invito-testi {
    flex: 1 1 auto;
    min-width: 0;
}

.hero-invito-occhiello {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--secondary-color);
    margin-bottom: 0.3rem;
}

.hero-invito-titolo {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}

.hero-invito-frase {
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.hero-invito-freccia {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 1.15rem;
    transition: transform 0.3s ease;
}

.hero-invito:hover .hero-invito-freccia,
.hero-invito:focus-visible .hero-invito-freccia {
    transform: translateX(4px);
}

/* Il secondo invito, sotto e piu' piccolo: chi ha gia' deciso di
   diventare pilota lo trova, chi e' solo curioso non ne e' distratto. */
.hero-content .hero-secondario {
    margin: 1.25rem 0 0 0;
    font-size: 1rem;
    /* Due pulsanti affiancati, Diventa pilota e Volo in montagna: su un
       telefono vanno a capo da soli invece di stringersi. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.hero-secondario .cta-button {
    padding: 0.6rem 1.6rem;
    font-size: 0.95rem;
}

/* Il secondo invito e' secondario davvero: bordo e niente fondello, cosi'
   l'occhio va sul primo. Resta un pulsante, non un link perso nel fondo. */
.cta-button.leggero {
    background-color: transparent;
    border: 2px solid var(--light-text-color);
    color: var(--light-text-color);
}

.cta-button.leggero:hover,
.cta-button.leggero:focus-visible {
    background-color: var(--light-text-color);
    color: var(--primary-color);
}

/* Il nome di chi ha scattato la foto di sfondo.
   Lo scrive js/sfondo.js e solo quando una foto c'e': se lo sfondo e' la
   montagna del foglio di stile, il paragrafo non viene creato affatto e
   qui non c'e' niente da nascondere.
   In basso a destra e non al centro: sta sopra la fascia dove il titolo
   non arriva mai, e il pulsante "Diventa Pilota" resta la cosa piu' in
   vista della pagina. L'ombra serve perche' la foto sotto puo' essere
   chiara - la neve, le nuvole - e un testo bianco su bianco non si
   legge. */
.hero-credito {
    position: absolute;
    right: 1rem;
    bottom: 0.8rem;
    z-index: 1;                          /* sopra lo strato dello sfondo */
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;                /* non deve rubare il clic al pulsante */
}

/* display: inline-block e non inline (che e' il default di <a>): su un
   elemento inline il padding verticale NON alza la riga. Il fondello colorato
   esce sopra e sotto senza spostare niente, e il testo che segue ci finisce
   sotto — nell'elenco soci il pulsante "+ NUOVO SOCIO" copriva la riga
   "544 soci". Sul sito pubblico non si vedeva solo perche' i pulsanti stanno
   dentro blocchi con molto spazio attorno.

   Rimette in funzione anche il sollevamento al passaggio del mouse: transform
   non ha alcun effetto sugli elementi inline non rimpiazzati, quindi il
   translateY qui sotto finora non faceva niente. */
.cta-button {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- Intestazione Pagine Interne --- */
.page-header {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    padding: 4rem 0;
    text-align: center;
}

.page-header h1 {
    font-size: 3rem;
}

.page-header p {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* --- Area Contenuti Principale --- */
.content-area {
    padding: 4rem 0;
}

.info-section {
    text-align: center;
    margin-bottom: 4rem;
}

.info-section h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.info-section .subtitle {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    color: #555;
}

/* --- Layout a Card --- */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.card {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

.card h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.card-link {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
}

.card-link:hover {
    color: var(--secondary-color);
}

/* --- Sezione Team (Pagina Chi Siamo) --- */
.team-section {
    margin-top: 4rem;
    text-align: center;
}

.team-section h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 3rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-member {
    background: var(--card-bg-color);
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.team-member h3 {
    margin-top: 1rem;
    color: var(--primary-color);
}

.team-member span {
    color: var(--secondary-color);
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}

/* --- I filtri per argomento, in cima all'elenco delle news ---

   I bottoni stanno nell'HTML con l'attributo hidden e li accende
   js/argomenti.js, uno per uno e solo se quell'argomento ha almeno una
   notizia. Senza JavaScript non se ne vede nessuno e si leggono tutte
   le notizie: e' com'era la pagina prima che gli argomenti esistessero.

   Le tre regole [hidden] qui sotto NON sono di troppo. Il foglio di
   stile del browser nasconde gli elementi con hidden scrivendo
   "display: none", ma e' una regola debolissima: qualunque display
   dichiarato qui - il flex della barra, l'inline-block dei bottoni, il
   flex di .news-article.con-foto - la batte, e l'elemento resterebbe
   visibile con l'attributo addosso. E' il modo piu' silenzioso che
   esista di rompere un filtro. */

.news-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.news-filtri[hidden] { display: none; }

.news-filtro {
    display: inline-block;
    font-family: var(--main-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--card-bg-color);
    border: 2px solid var(--primary-color);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.news-filtro[hidden] { display: none; }

.news-filtro:hover { background-color: var(--background-color); }

/* Il bottone premuto si distingue per RIEMPIMENTO e non per una
   sfumatura di colore: su uno schermo al sole, o per chi non distingue
   bene i colori, due arancioni leggermente diversi sono lo stesso
   arancione. Pieno contro vuoto si vede sempre. */
.news-filtro.attivo {
    color: var(--light-text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.news-filtro.attivo:hover { background-color: var(--primary-color); }

/* Il contorno del fuoco e' arancione e staccato dal bordo: sul bottone
   attivo, che e' gia' blu pieno, un contorno blu non si vedrebbe. Chi
   naviga da tastiera deve sapere sempre dove si trova. */
.news-filtro:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
}

/* La riga di conteggio la costruisce lo script, non l'HTML: senza
   JavaScript non si filtra e non c'e' niente da contare. */
.news-filtri-stato {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.75;
}

/* --- Lista News (Pagina News) --- */
.news-list .news-article {
    background-color: var(--card-bg-color);
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.news-article h2 {
    color: var(--primary-color);
}

.news-article h2 a {
    color: inherit;
    text-decoration: none;
}

.news-article h2 a:hover { color: var(--secondary-color); }

/* --- La miniatura di fianco alla notizia in elenco ---

   Compare solo se la notizia ha una foto: la classe con-foto la mette il
   generatore. Senza, la notizia resta a tutta larghezza, e non c'e'
   nessun riquadro grigio a tenere il posto di qualcosa che non esiste.

   La foto sta PRIMA nel sorgente e a sinistra nella pagina: e' la prima
   cosa che si guarda e la prima che si prova a cliccare, e per chi
   naviga con la tastiera l'ordine e' lo stesso di quello che vede. */

.news-list .news-article.con-foto {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* LA NOTIZIA ESCLUSA DAL FILTRO, e la riga che va letta due volte.
   Sta QUI, dopo .con-foto, e nomina .con-foto esplicitamente. Il
   perche' e' una lezione presa in faccia: prima stava piu' su e diceva
   solo ".news-list .news-article[hidden]", che ha la stessa specificita'
   di ".news-list .news-article.con-foto" - tre classi contro tre - e a
   parita' vince quella scritta DOPO. Risultato: le notizie con foto
   restavano visibili sotto qualunque filtro, mentre quelle senza foto
   sparivano. Il conteggio in cima diceva il numero giusto, e la pagina
   ne mostrava altre: il modo piu' silenzioso di rompere un filtro.

   Chi tocca queste righe: l'attributo hidden non e' una garanzia, e'
   solo un display:none del foglio di stile del browser. Qualunque
   regola con display esplicito lo scavalca. */
.news-list .news-article[hidden],
.news-list .news-article.con-foto[hidden] { display: none; }

.article-foto {
    flex: 0 0 200px;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;                      /* toglie lo spazio sotto l'immagine inline */
}

/* object-fit cover e un'altezza fissa: le foto arrivano con proporzioni
   qualunque, e senza questo l'elenco diventa una scaletta di riquadri
   alti diversi. Si perde un pezzo ai lati, che su una miniatura da tre
   centimetri non e' un prezzo. */
/* .news-list davanti: piu' specifico di ".news-article img" qui sotto, che
   altrimenti riporterebbe l'altezza ad auto e farebbe saltare
   l'incolonnamento delle miniature. */
/* LA MINIATURA TIENE LE PROPORZIONI DELLA FOTO.

   Prima era alta 140px fissi con object-fit: cover, cioe' la foto veniva
   ritagliata a forza dentro un rettangolo 200x140. Su una foto in piedi
   quel ritaglio parte dal centro e taglia via le teste - che nella foto
   di una premiazione sono esattamente il contenuto.

   Con height: auto l'altezza la decide la foto. Le righe dell'elenco
   diventano di altezze diverse, ed e' il prezzo giusto: una miniatura
   che taglia il soggetto non e' una miniatura, e' un'altra foto.

   La pagina non salta lo stesso, perche' width e height del file sono
   scritti nel tag - li mette il generatore, vedi GeneratoreSito.Misure. */
.news-list .article-foto img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.article-foto:hover img { transform: scale(1.05); }

.article-testo { flex: 1 1 auto; min-width: 0; }   /* min-width 0: senza, il testo lungo non si stringe */

/* Sotto i 600px la foto va sopra e a tutta larghezza: 200px di foto piu'
   il testo, su un telefono, lascerebbero al testo una colonna di poche
   parole. */
@media (max-width: 600px) {
    .news-list .news-article.con-foto { flex-direction: column; }
    .article-foto { flex: 1 1 auto; width: 100%; }
    /* Sotto i 600px la foto sta sopra il testo e prende tutta la
       larghezza: l'altezza continua a seguire le proporzioni. */
    .news-list .article-foto img { height: auto; }
}

/* --- Le immagini dentro la notizia aperta ---

   Grandi, a tutta larghezza della colonna. height auto perche' le
   proporzioni qui vanno rispettate: e' la foto il contenuto, non una
   decorazione di fianco a un titolo. */

.news-article img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.article-copertina {
    margin: 0 0 1.5rem 0;
    line-height: 0;
}

.article-copertina img { width: 100%; }

.article-meta {
    margin: 0.5rem 0 1rem 0;
    color: #777;
    font-size: 0.9rem;
}

.article-meta span {
    margin-right: 1.5rem;
}

.article-meta i {
    margin-right: 0.5rem;
}

.read-more-link {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.read-more-link:hover {
    color: var(--secondary-color);
}

/* --- Footer --- */
.main-footer {
    background-color: var(--footer-bg-color);
    color: #a9a9a9;
    padding-top: 3rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
}

.footer-section h4 {
    color: var(--light-text-color);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footer-section a {
    color: #a9a9a9;
    text-decoration: none;
}

.footer-section a:hover {
    color: var(--light-text-color);
}

.footer-section i {
    margin-right: 0.5rem;
}

.footer-bottom {
    border-top: 1px solid #444;
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

/* --- Media Queries per la Responsività ---

   IL CONFINE E' A 900px E NON A 768.

   Un iPad in verticale ha 810 o 834 pixel di larghezza: sopra i 768,
   quindi riceveva il menu disteso in orizzontale. Le otto voci in riga
   non ci stavano, e non potendo uscire dallo schermo andavano a capo
   DENTRO SE STESSE - "Chi / Siamo", "Scuola / di Volo" - con
   l'intestazione alta il doppio e il sito con l'aria di essersi rotto.

   900 copre l'iPad in verticale e i portatili piccoli, e lascia il menu
   disteso dove c'e' davvero lo spazio per tenerlo. */
@media (max-width: 900px) {
    .main-header .container {
        flex-direction: column;
        gap: 1rem;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .hero-invito {
        gap: 0.9rem;
        padding: 1rem 1rem 1rem 1.2rem;
    }
    .hero-invito-titolo {
        font-size: 1.25rem;
    }
    .hero-invito-frase {
        font-size: 0.88rem;
    }
    .hero-invito-freccia {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1rem;
    }
    .info-section h2 {
        font-size: 2rem;
    }
    .page-header h1 {
        font-size: 2.5rem;
    }
}

/* --- Stili per Menu Hamburger --- */
.mobile-nav-toggle {
    display: none; /* Nascosto di default sui desktop */
}

/* Stessa soglia del blocco qui sopra: le due cose vanno insieme, e
   separarle vorrebbe dire una larghezza in cui l'intestazione e' gia' in
   colonna ma il menu e' ancora disteso. */
@media (max-width: 900px) {
    .main-nav {
        /* Nasconde il menu fuori dallo schermo */
        position: fixed;
        inset: 0 0 0 30%; /* Da destra fino al 30% dello schermo */
        flex-direction: column;
        padding: min(20vh, 10rem) 2em;
        
        background: hsl(0 0% 100% / 0.1); /* Sfondo semi-trasparente */
        backdrop-filter: blur(1rem); /* Effetto vetro smerigliato */
        
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }

    .main-nav[data-visible="true"] {
        transform: translateX(0%); /* Mostra il menu */
    }

    .main-nav ul {
        flex-direction: column; /* Voci del menu in colonna */
        align-items: flex-start;
        gap: 2rem;
    }

    .mobile-nav-toggle {
        display: block;
        position: absolute;
        z-index: 9999;
        background-color: transparent;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="%230d2c4b"><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>');
        background-repeat: no-repeat;
        width: 2rem;
        height: 2rem;
        border: 0;
        top: 1.5rem;
        right: 1.5rem;
    }

    .mobile-nav-toggle[aria-expanded="true"] {
         background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="%230d2c4b"><path d="M19.3 5.3l-1.4-1.4L12 10.6 6.1 4.7 4.7 6.1 10.6 12l-5.9 5.9 1.4 1.4L12 13.4l5.9 5.9 1.4-1.4L13.4 12l5.9-5.9z"/></svg>');
    }
    
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }
}

/* --- Stili per Selettore Lingua (VERSIONE CORRETTA E MIGLIORATA) --- */
.language-selector {
    position: relative; /* Mantiene il menu ancorato al genitore */
}

/* Applichiamo il padding qui per creare un'area "ponte" invisibile */
.language-selector > a {
    padding-bottom: 1rem; 
}

.language-selector ul {
    display: block; /* Lo teniamo sempre visibile ma lo nascondiamo con altri metodi */
    opacity: 0; /* Lo rendiamo invisibile */
    visibility: hidden; /* Lo nascondiamo agli screen reader quando non visibile */
    
    position: absolute;
    top: 100%; /* Posizionato esattamente sotto l'header */
    right: 0;
    background-color: var(--card-bg-color);
    list-style: none;
    padding: 0.5rem 0;
    
    margin-top: 0; /* Rimosso il margine che creava il problema */
    
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 120px;
    z-index: 10;
    
    /* Aggiungiamo una transizione per un effetto di comparsa più morbido */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateY(10px); /* Parte leggermente più in basso */
}

.language-selector:hover ul {
    opacity: 1; /* Lo rendiamo visibile */
    visibility: visible; /* Lo rendiamo accessibile */
    transform: translateY(0); /* Torna alla sua posizione originale */
}

.language-selector ul li a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--primary-color);
}

.language-selector ul li a:hover {
    background-color: var(--background-color);
    color: var(--secondary-color);
}

.language-selector .fa-caret-down {
    font-size: 0.8rem;
    margin-left: 0.3rem;
}




/* --- La tendina PRENOTAZIONI (provvisoria, 04/10/2026) ---
   Come quella della lingua, ma si apre anche con il tocco e con la
   tastiera (:focus-within), e si allinea a sinistra della sua voce. Nel
   menu a scomparsa del telefono le due voci stanno sempre in vista, sotto
   il titolo: una tendina dentro un menu verticale si chiude da sola. */
.menu-tendina { position: relative; }

.menu-tendina > a { padding-bottom: 1rem; }

.menu-tendina ul {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--card-bg-color);
    list-style: none;
    padding: 0.5rem 0;
    margin-top: 0;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-width: 170px;
    z-index: 10;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    transform: translateY(10px);
}

.menu-tendina:hover ul,
.menu-tendina:focus-within ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-tendina ul li a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--primary-color);
    white-space: nowrap;
}

.menu-tendina ul li a:hover {
    background-color: var(--background-color);
    color: var(--secondary-color);
}

.menu-tendina .fa-caret-down {
    font-size: 0.8rem;
    margin-left: 0.3rem;
}

@media (max-width: 900px) {
    .menu-tendina ul {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: transparent;
        min-width: 0;
        padding: 0 0 0 1rem;
    }
    .menu-tendina .fa-caret-down { display: none; }
}

/* ===================================*/
/* --- Stili per Pagina Contatti --- */
/* ===================================*/

.contact-form-container {
    max-width: 700px;
    margin: 0 auto; /* Centra il form */
    padding: 2.5rem;
    background-color: var(--card-bg-color);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-form-container h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* "(facoltativo)" accanto all'etichetta, piu' leggero del resto: dice
   che quel campo si puo' saltare senza doverlo scrivere nella nota in
   fondo, che nessuno legge prima di compilare. */
.contact-form label .facoltativo {
    font-weight: 400;
    font-size: 0.85em;
    color: #667085;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--main-font);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Le caselle degli interessi del modulo contatti.

   Un fieldset e non un div: le otto caselle sono UNA domanda con otto
   risposte possibili, e la legend e' il testo della domanda. Un lettore
   di schermo la ripete prima di ogni casella, cosi' chi non vede il
   riquadro sa comunque a cosa sta rispondendo.

   Le tre regole qui sotto esistono tutte per disfare una cosa che vale
   per gli altri campi del modulo:

     - .contact-form input mette width:100%, che su una casella di
       spunta produce un quadratino largo quanto la pagina;
     - .contact-form label mette display:block e font-weight:600, cioe'
       manderebbe l'etichetta a capo sotto la sua casella e la
       scriverebbe in grassetto come se fosse il titolo di un campo. */
.contact-form .interessi {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem 1.2rem 0.6rem 1.2rem;
    margin-bottom: 1.5rem;
}

.contact-form .interessi legend {
    padding: 0 0.4rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Stessa resa di .contact-form label .facoltativo, che non arriva fin
   qui perche' quel testo sta dentro una legend e non dentro una label. */
.contact-form .interessi legend .facoltativo {
    font-weight: 400;
    font-size: 0.85em;
    color: #667085;
}

.contact-form .interessi label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-weight: 400;
    color: inherit;
    cursor: pointer;
}

.contact-form .interessi input[type="checkbox"] {
    width: auto;
    flex: none;
    margin: 0.2rem 0 0 0;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 5px rgba(13, 44, 75, 0.3);
}

.contact-form button[type="submit"] {
    width: 100%;
    border: none;
    cursor: pointer;
}

/* La casella trappola del modulo contatti.

   Fuori dallo schermo e non display:none: alcuni riempitori automatici
   saltano i campi con display:none proprio perche' hanno imparato che
   sono trappole. Cosi' invece il campo esiste, ha dimensione zero e sta
   a mille pixel da qui: per il programma e' un campo come gli altri, per
   una persona non c'e'.

   aria-hidden nell'HTML e tabindex -1 tengono fuori anche chi naviga con
   la tastiera o con un lettore di schermo: a loro il campo non deve
   comparire piu' che agli altri. */
.campo-nascosto {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.nota-modulo {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 0.82rem;
    color: #667085;
    text-align: center;
}

/* L'icona in cima alla pagina di esito dell'invio: dice com'e' andata
   prima ancora che si legga il titolo. */
.esito-icona {
    margin: 0 0 0.5rem 0;
    text-align: center;
    font-size: 2.4rem;
    color: var(--secondary-color);
}


/* ===================================*/
/* --- Stili per Pagina Login --- */
/* ===================================*/

.login-container {
    max-width: 450px;
    margin: 4rem auto;
    padding: 2.5rem;
    background-color: var(--card-bg-color);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.login-container h2 {
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.login-form .form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

.login-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.login-form input {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: var(--main-font);
    font-size: 1rem;
}

.login-form button[type="submit"] {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 1rem;
}

.forgot-password {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--primary-color);
    text-decoration: none;
}
.forgot-password:hover {
    text-decoration: underline;
}


/* --- Stili per Area Soci --- */
.header-soci {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.user-info {
    font-weight: 600;
    color: var(--primary-color);
}
.logout-button {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    margin-left: 1rem;
    font-weight: 700;
}

.container-fullwidth {
    width: 100%;
    max-width: 100%;
}

.soci-area {
    display: flex;
    min-height: calc(100vh - 80px); /* Altezza minima (tutta la pagina meno l'header) */
}

.soci-menu {
    flex: 0 0 250px; /* Base fissa di 250px, non si espande, non si restringe */
    background-color: var(--primary-color);
    padding: 2rem 0;
}

.soci-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.soci-menu nav a {
    display: block;
    padding: 1rem 1.5rem;
    color: var(--light-text-color);
    text-decoration: none;
    font-weight: 600;
    border-left: 4px solid transparent;
    transition: background-color 0.3s ease, border-left 0.3s ease;
}
.soci-menu nav a i {
    margin-right: 1rem;
}

.soci-menu nav a:hover {
    background-color: #0056b3;
}

.soci-menu nav li.active a {
    background-color: #0056b3;
    border-left: 4px solid var(--secondary-color);
}

.soci-content {
    flex-grow: 1; /* Occupa tutto lo spazio rimanente */
    padding: 2rem 3rem;
    background-color: #f4f5f7; /* Sfondo leggermente grigio per la content area */
}
.soci-content h1 {
    color: var(--primary-color);
    border-bottom: 2px solid #ddd;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

/* --- Storia del club (pagina Chi Siamo) --- */
.storia {
    margin-top: 4rem;
}

.storia h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 2rem;
    text-align: center;
}

/* La cronologia e' una <ol>: l'ordine E' il contenuto, e chi legge con
   uno screen reader o con i CSS disattivati deve trovarsela in ordine
   comunque. Il numero automatico pero' non serve -- l'anno lo dice gia'
   meglio -- e viene tolto. */
.storia .cronologia {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 3px solid var(--secondary-color);
}

.storia .cronologia li {
    position: relative;
    padding: 0 0 2rem 2.2rem;
    min-height: 2.6rem;
}

/* Il segno sulla linea del tempo: un cerchio con dentro l'icona di cosa
   e' successo. Le icone sono di Font Awesome, gia' caricato dal sito, e
   non immagini: si ricolorano insieme al resto e non pesano nulla.
   L'icona e' DECORAZIONE -- quello che l'evento e' sta scritto nel testo
   accanto -- percio' non ha bisogno di un'alternativa testuale. */
.storia .cronologia .segno {
    position: absolute;
    left: -19px;
    top: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: var(--light-text-color);
    border: 3px solid var(--background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.storia .cronologia li:hover .segno {
    background-color: var(--secondary-color);
}

.storia .cronologia .anno {
    display: block;
    padding-top: 0.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.2rem;
}

.storia .cronologia p {
    margin: 0;
    line-height: 1.7;
}

.storia .presidenti {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card-bg-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.storia .presidenti th {
    background-color: var(--primary-color);
    color: var(--light-text-color);
    text-align: left;
    padding: 0.8rem 1rem;
    font-weight: 600;
}

.storia .presidenti td {
    padding: 0.6rem 1rem;
    border-top: 1px solid #e5e9ef;
}

.storia .presidenti td:first-child {
    width: 3.5rem;
    color: #667085;
    text-align: right;
}

.storia .presidenti tbody tr:nth-child(even) {
    background-color: #f7f9fb;
}

@media (max-width: 600px) {
    .storia h2 { font-size: 1.8rem; }
    .storia .presidenti td:first-child { display: none; }
    .storia .presidenti th:first-child { display: none; }
}

/* --- Social nel footer --- */
/* Le icone prima del testo e non dopo: sono loro che si riconoscono al
   volo, la parola "Seguici" e' solo la didascalia. */
.main-footer .social {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1rem;
}

.main-footer .social a {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--light-text-color);
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.main-footer .social a:hover {
    opacity: 1;
    color: var(--secondary-color);
}

.main-footer .social .social-testo {
    font-size: 0.9rem;
    opacity: 0.8;
}

.storia .nota-tabella {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: #667085;
}

/* Icona sopra il nome, nelle schede del direttivo. */
.team-member .team-icon {
    font-size: 2.2rem;
    color: var(--secondary-color);
}

.team-member h3 {
    margin-top: 0.6rem;
}

/* Icona accanto al titolo di sezione. Piu' piccola del testo e in
   arancio: accompagna il titolo, non compete con lui. */
.storia h2 .titolo-icona,
.team-section h2 .titolo-icona {
    color: var(--secondary-color);
    font-size: 0.8em;
    margin-right: 0.4rem;
}

/* =====================================================
   WEBCAM E METEO (fascia in cima alla home)
   =====================================================
   Sta sopra tutto il resto perche' chi apre il sito il sabato mattina
   non viene a leggere la storia del club: viene a vedere se si vola. */

.live-strip {
    background-color: var(--primary-color);
    padding: 2.5rem 0;
}

.live-strip h2 {
    color: var(--light-text-color);
    font-size: 1.6rem;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

.live-strip h2 i {
    color: var(--secondary-color);
    margin-right: 0.4rem;
}

.live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.live-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg-color);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.live-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* Il riquadro dell'immagine c'e' gia' adesso che l'immagine non c'e'
   ancora: quando arrivera' la webcam prendera' questo spazio, e la
   pagina non cambiera' altezza sotto gli occhi di chi la guarda. */
.live-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #17406b 0%, #0d2c4b 100%);
    color: rgba(255, 255, 255, 0.55);
    font-size: 2.8rem;
}

/* L'immagine sta SOPRA l'icona, che resta nel markup e fa da ripiego.
   Al primo avvio images/live/ e' vuota: senza l'icona dietro, il
   browser disegnerebbe il segno di immagine rotta. Con l'icona, e con
   js/live.js che nasconde l'<img> quando non carica, resta un riquadro
   con il simbolo della montagna - che non promette niente. */
.live-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* hidden e' un attributo HTML, e il display:flex del contenitore lo
   scavalcherebbe: senza questa riga l'immagine rotta resterebbe
   visibile anche dopo che lo script l'ha nascosta. */
.live-media img[hidden] {
    display: none;
}

/* Il pallino che pulsa. prefers-reduced-motion lo ferma: un puntino che
   lampeggia sotto gli occhi non e' una cosa che si puo' imporre. */
.live-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.55);
    color: var(--light-text-color);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.live-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #e5484d;
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .live-badge::before { animation: none; }
    .live-card:hover { transform: none; }
}

.live-card.meteo .live-media {
    background: linear-gradient(135deg, #2a6fb0 0%, #17406b 100%);
}

/* I valori della stazione dentro il riquadro blu, al posto dell'icona.
   Prende tutto lo spazio del riquadro perche' l'icona che sostituisce
   era centrata: se occupasse meno, la tessera cambierebbe forma nel
   momento in cui i dati arrivano. */
/* Quattro voci, non tre: con l'aggiunta della rugiada lo spazio si e'
   stretto, e i numeri devono restare leggibili da lontano. Percio' due
   colonne invece di una colonna sola - il riquadro e' piu' largo che
   alto, e in colonna gli ultimi valori sarebbero usciti dal fondo. */
.live-meteo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: center;
    justify-items: center;
    gap: 0.7rem 0.5rem;
    width: 100%;
    padding: 0.6rem 0.9rem;
    text-align: center;
}

.live-meteo[hidden] { display: none; }

.live-meteo-voce {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

/* Il numero grande e l'etichetta piccola sotto, e non il contrario: da
   lontano si legge il valore, l'etichetta serve solo a chi si e' gia'
   fermato a guardare. */
.live-meteo-numero {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

/* Una riga che corregge un'aspettativa sbagliata: "dal VDS non si accede
   al corso di montagna" arriva dopo tre paragrafi che raccontano quanto
   e' bello quel corso, e chi legge in diagonale la salterebbe. Percio' e'
   staccata dal testo e ha la barra rossa a lato: si vede prima di
   leggerla. Non e' un errore e non e' un divieto di legge, quindi non e'
   rossa dentro - solo segnata. */
.nota-attenzione {
    margin: 1.2rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid #b91c1c;
    background-color: #fdf2f2;
    border-radius: 0 5px 5px 0;
    line-height: 1.6;
}

/* La seconda riga del vento: l'intensita' sotto la direzione. Piu'
   piccola del valore principale ma piu' grande dell'etichetta, perche'
   e' un dato e non un titolo. */
.live-meteo-secondo {
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.live-meteo-nome {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* =====================================================
   UNA TESSERA CHE NON C'E' ANCORA
   =====================================================
   La webcam della pista arrivera'. Fino ad allora la tessera resta al
   suo posto - cosi' quando arrivera' la pagina non cambiera' forma - ma
   NON e' un collegamento: nel codice e' un <div>, non un <a>.

   E' il punto che conta. Un link che non porta da nessuna parte si
   clicca, non succede niente, e chi guarda conclude che il sito e'
   rotto. Un riquadro che dice "in arrivo" e non si clicca non promette
   niente, quindi non delude.

   Di conseguenza qui si tolgono le due cose che dicono "cliccami": il
   sollevamento al passaggio del mouse e il pallino rosso che pulsa,
   che significa "in diretta" e sarebbe una bugia. */

/* Di chi e' l'immagine. Piccola ma leggibile: e' la contropartita di
   mostrare la webcam di qualcun altro, e va scritta anche quando c'e'
   il consenso. Il collegamento porta al loro sito, non alla nostra
   copia. */
.live-fonte {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
}

.live-fonte a {
    color: inherit;
    text-decoration: underline;
}

/* Il riquadro dell'immagine e' un collegamento a webcam.html: va tolta
   la sottolineatura, che su un <a> il browser mette di suo. */
a.live-media {
    text-decoration: none;
    cursor: pointer;
}

/* "Tutte le webcam ->" sotto l'attribuzione. Un'immagine cliccabile e
   basta non si capisce che lo sia: la riga di testo lo dice. */
.live-altre {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.live-altre a {
    color: var(--secondary-color);
    text-decoration: none;
}

.live-altre a:hover { text-decoration: underline; }

.live-card.in-arrivo {
    opacity: 0.72;
    cursor: default;
}

/* =====================================================
   LA PAGINA DELL'AEROPORTO
   =====================================================
   Blocchi uno sotto l'altro, ognuno una cosa sola: dati del campo,
   cartina, NOTAM, vento.

   Quelli ancora da riempire portano la classe .in-arrivo e l'etichetta
   accanto al titolo. Sbiaditi e senza collegamenti: dicono "ci sara'"
   invece di far cliccare a vuoto. E' la stessa scelta della tessera
   della webcam pista, e per la stessa ragione. */

.aeroporto-dati,
.aeroporto-blocco {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.aeroporto-dati h3,
.aeroporto-blocco h3 {
    margin: 0 0 0.8rem 0;
    font-size: 1.1rem;
}

.aeroporto-dati h3 i,
.aeroporto-blocco h3 i {
    margin-right: 0.5rem;
    color: var(--secondary-color);
}

.aeroporto-blocco.in-arrivo { opacity: 0.72; }

/* L'attributo hidden dell'HTML basterebbe da solo, ma se un giorno
   qualcuno desse un display a .aeroporto-blocco lo scavalcherebbe - e
   la sezione dei NOTAM ricomparirebbe vuota, con l'attribuzione a un
   fornitore che non stiamo usando. Due righe per non dipendere da
   quello che non c'e' ancora. */
.aeroporto-blocco[hidden] { display: none; }

/* L'etichetta accanto al titolo, non un distintivo sull'immagine: qui
   non c'e' immagine, e la scritta deve stare dove si legge il titolo. */
.etichetta-attesa {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: #e4e7ec;
    color: #667085;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* Tabella etichetta/valore dei dati del campo. Prima colonna stretta e
   in grassetto: si legge come una scheda, non come un elenco. */
.dati-campo {
    width: 100%;
    border-collapse: collapse;
}

.dati-campo th,
.dati-campo td {
    padding: 0.5rem 0.2rem;
    text-align: left;
    border-bottom: 1px solid #e6e8eb;
}

.dati-campo tr:last-child th,
.dati-campo tr:last-child td { border-bottom: none; }

.dati-campo th {
    width: 40%;
    font-weight: 600;
    color: var(--primary-color);
}

@media (min-width: 600px) {
    .dati-campo th { width: 220px; }
}

/* =====================================================
   I NOTAM
   =====================================================
   Li disegna js/notam.js. Un blocco per avviso: identificativo,
   validita', testo.

   Il testo sta in un <pre>: le andate a capo di un NOTAM sono
   significative, corrispondono a come lo si legge sulla carta, e un
   <p> le mangerebbe tutte. Serve pero' white-space: pre-wrap invece
   del pre secco, altrimenti su un telefono le righe lunghe escono
   dallo schermo. */

.notam-stato {
    font-size: 0.85rem;
    color: #667085;
    margin-bottom: 0.8rem;
}

.notam-blocco {
    padding: 0.9rem 0;
    border-top: 1px solid #e6e8eb;
}

.notam-blocco:first-child { border-top: none; padding-top: 0; }

/* I due gruppi: l'aeroporto e lo spazio aereo intorno (dalla 2.43). */
.notam-gruppo {
    margin: 1.4rem 0 0.4rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #fca311;
    font-size: 1rem;
    color: var(--primary-color);
}

.notam-gruppo:first-child { margin-top: 0; }

/* Nella pagina dell'aeroporto lo spazio aereo intorno e' solo un pulsante
   verso notam.html: il suo titolo non ha la riga arancio, ne basta una. */
.notam-gruppo-zona { border-bottom: none; padding-bottom: 0; }

/* Il pulsante che porta alla pagina dei NOTAM della zona (notam.html): come
   i cta-button del sito, perche' e' un pulsante e deve sembrarlo (dal
   04/10/2026; prima era un riquadro grigio che si leggeva come una nota). */
.notam-zona-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.8rem 1.6rem;
    border-radius: 50px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.notam-zona-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.notam-zona-link i { margin-right: 0.4rem; }

.notam-gruppo + .notam-blocco,
.notam-stato + .notam-blocco { border-top: none; }

.notam-blocco h4 {
    margin: 0 0 0.3rem 0;
    font-size: 0.95rem;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    color: var(--primary-color);
}

.notam-validita {
    margin: 0;
    font-size: 0.8rem;
    color: #667085;
}

.notam-testo {
    margin: 0.5rem 0 0 0;
    padding: 0.7rem 0.9rem;
    background-color: #f5f7fa;
    border-radius: 6px;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;               /* le andate a capo restano, le righe lunghe rientrano */
    overflow-wrap: anywhere;             /* una sigla lunghissima non sfonda il riquadro */
}

/* Attivo adesso? (dalla 2.45, js/orari.js): l'etichetta sotto l'identificativo
   e, per quelli attivi, il bordo rosso a sinistra. */
.notam-stato-ora {
    display: inline-block;
    margin: 0 0 0.35rem 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.notam-stato-ora:empty,
.notam-stato-ora[hidden] { display: none; }

.notam-stato-attivo  { background-color: #c92a2a; color: #ffffff; }
.notam-stato-spento  { background-color: #e6f4ea; color: #1e6b34; }
.notam-stato-presto  { background-color: #fff3bf; color: #7a5a00; }   /* si attiva entro sette giorni */
.notam-stato-incerto { background-color: #eef2f7; color: #475467; }

.notam-attivo {
    border-left: 4px solid #c92a2a;
    padding-left: 0.8rem;
}

.notam-orari { font-weight: 600; color: #475467; }

/* La mappa dell'area (js/mappa.js), sempre visibile. */
.mappa-scatola { margin-top: 0.6rem; }

.mappa-riquadro {
    height: 260px;
    border-radius: 6px;
    border: 1px solid #e6e8eb;
    background-color: #eef2f7;
    z-index: 0;                          /* i livelli di Leaflet restano sotto il menu */
}

.mappa-nota {
    margin: 0.3rem 0 0 0;
    font-size: 0.75rem;
    color: #667085;
}

/* Le sigle spiegate (js/sigle.js), in una riga che si apre. */
.sigle { margin-top: 0.5rem; font-size: 0.82rem; }

.sigle summary {
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 600;
}

.sigle dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.15rem 0.8rem;
    margin: 0.4rem 0 0 0;
}

.sigle dt {
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-weight: 700;
}

.sigle dd { margin: 0; }

.sigle-nota {
    margin: 0.4rem 0 0 0;
    font-size: 0.75rem;
    color: #667085;
}

/* Le carte SWLL (dalla 2.45, js/swll.js): una grande, le altre sotto in piccolo. */
.swll-figura { margin: 0.6rem 0 0 0; }

.swll-carta {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    background-color: #ffffff;
}

.swll-altre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.swll-miniatura {
    width: 120px;
    padding: 0.25rem;
    border: 2px solid #e6e8eb;
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    color: var(--primary-color);
}

.swll-miniatura img { display: block; width: 100%; height: auto; margin-bottom: 0.2rem; }

.swll-scelta { border-color: #fca311; }

/* I SIGMET: quelli che coprono Belluno hanno il bordo e l'etichetta arancio. */
.sigmet-qui {
    border-left: 4px solid #e8590c;
    padding-left: 0.8rem;
}

.sigmet-etichetta {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: #e8590c;
    color: #ffffff;
    font-family: var(--main-font);
    font-size: 0.75rem;
    font-weight: 700;
    vertical-align: middle;
}

/* Il QNH di Treviso, in cima alla pagina dell'aeroporto: il numero che il
   pilota mette sull'altimetro, scritto in modo da trovarlo a colpo d'occhio. */
.stazione-qnh[hidden] { display: none; }

.stazione-qnh {
    display: inline-block;
    margin: 0.4rem 0 0.8rem 0;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    background-color: #f5f7fa;
    border-left: 4px solid #fca311;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
}

.notam-fonte {
    margin-top: 1rem;
    font-size: 0.78rem;
    color: #667085;
}

/* =====================================================
   METAR E TAF
   =====================================================
   Un blocco per stazione. Il codice ICAO e' in evidenza e il nome
   dell'aeroporto gli sta accanto: e' l'informazione che non deve
   sfuggire, perche' nessuna di queste stazioni e' Belluno.

   L'avvertenza che lo dice sta in cima alla sezione, con il fondo
   colorato: e' l'unica cosa della pagina che qualcuno potrebbe leggere
   di fretta e fraintendere, quindi si vede prima dei dati. */

.aeroporto-avvertenza {
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--secondary-color);
    background-color: #fff8ec;
    font-size: 0.85rem;
    line-height: 1.45;
}

.meteo-blocco {
    padding: 1rem 0;
    border-top: 1px solid #e6e8eb;
}

.meteo-blocco:first-child { border-top: none; padding-top: 0; }

.meteo-blocco h4 {
    margin: 0 0 0.2rem 0;
    font-size: 1rem;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    color: var(--primary-color);
}

/* Il nome disteso non e' in carattere a larghezza fissa: quello serve
   al codice ICAO, che si legge sigla per sigla. */
.meteo-nome {
    font-family: inherit;
    font-weight: 400;
    font-size: 0.85rem;
    color: #667085;
}

.meteo-quando,
.meteo-valore {
    margin: 0.15rem 0;
    font-size: 0.82rem;
}

.meteo-quando { color: #667085; }

.meteo-etichetta {
    display: inline-block;
    min-width: 6.5rem;
    font-weight: 600;
    color: #667085;
}

.meteo-sottotitolo {
    margin: 0.9rem 0 0.15rem 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color);
}

/* Come il testo dei NOTAM: larghezza fissa, andate a capo conservate,
   righe lunghe che rientrano invece di uscire dallo schermo. */
.meteo-grezzo {
    margin: 0.4rem 0 0 0;
    padding: 0.6rem 0.8rem;
    background-color: #f5f7fa;
    border-radius: 6px;
    font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* I due pulsanti del blocco del vento vanno a capo insieme sugli
   schermi stretti, invece di stringersi fino a diventare illeggibili. */
.aeroporto-pulsanti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
}

/* La carta AIP dentro il suo blocco.
   =====================================================
   L'immagine porta width e height nell'HTML per non far ballare la
   pagina mentre carica; qui si lascia scalare in larghezza e si
   ricalcola l'altezza da sola, altrimenti su schermo stretto uscirebbe
   dal riquadro.

   Il tetto di 706px non e' estetica: e' la base vera del file, e dentro
   il contenitore da 1100px ci sarebbe spazio per stirarla oltre. Stirata
   si sfoca proprio dove conta, sulle scritte piccole della testata e
   della scala. Chi la vuole piu' grande scarica il PDF, che e'
   vettoriale.

   Fondo bianco e cornice perche' la carta e' bianca: senza, sul fondo
   chiaro della scheda non si capisce dove finisce. */
.carta-aip {
    display: block;
    width: 100%;
    max-width: 353px;
    height: auto;
    margin: 1rem auto 0 auto;
    background-color: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
}

/* Le cartine di Avioportolano.
   =====================================================
   Due anteprime affiancate, una per PDF, e su telefono una sotto
   l'altra. L'anteprima intera e' il collegamento: e' la condizione del
   permesso (l'immagine che apre il PDF), e un bersaglio grande quanto
   la cartina non si manca.

   Il tetto di 360px per immagine e' come per la carta AIP: oltre si
   leggerebbe peggio, non meglio. Chi vuole i dettagli apre il PDF. */
.avioportolano-carte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 360px));
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.avioportolano-carta {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
}

.avioportolano-carta img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0.6rem;
    background-color: #ffffff;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.avioportolano-carta:hover img,
.avioportolano-carta:focus-visible img {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.avioportolano-fonte {
    margin-top: 1rem;
    font-size: 0.9rem;
    text-align: center;
}

/* Il secondo pulsante e' vuoto: due pulsanti pieni affiancati non
   dicono quale dei due e' quello principale. */
.cta-button.secondario {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

/* =====================================================
   LA PAGINA CON TUTTE LE WEBCAM
   =====================================================
   webcam.html. Riquadri larghi, uno sotto l'altro su schermo stretto e
   a due colonne da 900px in su: qui l'immagine e' il contenuto, non
   un'anteprima, quindi si guadagna piu' dandole spazio che
   affiancandone quattro.

   Il riquadro dell'immagine riusa .live-media della home - stesso
   rapporto 16/9, stessa icona di ripiego, stesso pallino "live" - cosi'
   una modifica alla fascia della home si riflette qui senza doversene
   ricordare. */

.webcam-elenco {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 900px) {
    .webcam-elenco { grid-template-columns: repeat(2, 1fr); }
}

.webcam-blocco {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.webcam-blocco .webcam-testo {
    padding: 0.9rem 1.2rem 1.2rem 1.2rem;
}

.webcam-blocco h2 {
    margin: 0 0 0.2rem 0;
    font-size: 1.1rem;
}

/* Come la tessera in arrivo della home: sbiadita e non cliccabile,
   perche' non promette niente. */
.webcam-blocco.in-arrivo { opacity: 0.72; }

.live-card.in-arrivo:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.live-badge.attesa::before {
    background-color: rgba(255, 255, 255, 0.6);
    animation: none;
}

.live-testo {
    padding: 1rem 1.2rem 1.2rem 1.2rem;
}

.live-testo h3 {
    margin: 0 0 0.3rem 0;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.live-testo p {
    margin: 0;
    font-size: 0.88rem;
    color: #667085;
    line-height: 1.5;
}

.live-nota {
    margin: 1.2rem 0 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.live-nota i {
    margin-right: 0.3rem;
}

/* --- Consiglio direttivo e revisori (pagina Chi Siamo) --- */
.consiglio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
    text-align: left;
}

.consigliere {
    display: flex;
    gap: 1rem;
    background: var(--card-bg-color);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* La foto e' un tondo di dimensione fissa: le fotografie arrivano con
   tagli e proporzioni diverse, e senza un contenitore fisso la griglia
   si muoverebbe a ogni ritratto nuovo. Il ritaglio lo fa object-fit, e
   l'immagine sul disco resta intera. */
.consigliere-foto {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e8edf3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.consigliere-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 30% e non "center": in un ritratto la testa sta in alto, e un
       ritaglio centrato la taglia. */
    object-position: center 30%;
}

/* Chi non ha ancora una fotografia: un'icona nel tondo, non un riquadro
   vuoto ne' l'icona di immagine rotta. Le foto possono arrivare una
   alla volta senza che la pagina intanto sembri sbagliata. */
.consigliere-foto.senza-foto {
    color: #98a2b3;
    font-size: 2.2rem;
}

.consigliere-testo h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.15rem;
}

.consigliere-testo .carica {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 0.85rem;
}

.consigliere-testo p {
    margin: 0 0 0.4rem 0;
    font-size: 0.88rem;
    line-height: 1.6;
}

.consigliere-testo .contatto {
    font-size: 0.82rem;
    word-break: break-all;
}

.consigliere-testo .contatto a {
    color: var(--primary-color);
    text-decoration: none;
}

.consigliere-testo .contatto a:hover { text-decoration: underline; }

/* Sotto i 480px la scheda va in colonna: 96px di foto piu' un testo
   lungo, affiancati, lascerebbero al testo una colonna di poche
   parole. */
@media (max-width: 480px) {
    .consigliere { flex-direction: column; align-items: center; text-align: center; }
    .consigliere-testo { text-align: left; }
}

/* --- Dettagli dei corsi (Pagina Scuola di Volo) ---

   Le schede in alto sono un indice: dicono in due righe di che corso si
   tratta e portano qui. Il testo lungo sta in queste sezioni, una per
   corso, ciascuna con la sua ancora. Chi arriva dalla scheda si trova
   subito sotto il titolo giusto. */

.corso {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    padding: 2.5rem;
    margin-top: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    scroll-margin-top: 100px;            /* la barra in alto e' fissa e coprirebbe il titolo */
}

.corso h2 {
    font-size: 1.9rem;
    color: var(--primary-color);
    border-bottom: 3px solid var(--secondary-color);
    padding-bottom: 0.6rem;
    margin-bottom: 1.2rem;
}

.corso h2 .titolo-icona { color: var(--secondary-color); margin-right: 0.6rem; }

.corso h3 {
    font-size: 1.15rem;
    color: var(--primary-color);
    margin: 1.8rem 0 0.5rem 0;
}

.corso p { margin-bottom: 0.9rem; line-height: 1.7; }

.corso > .subtitle {
    font-size: 1.05rem;
    color: #555;
    border-left: 4px solid var(--secondary-color);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

/* I quattro numeri che riassumono il corso. Sono la prima cosa che
   chiede chi valuta se iscriversi: quanto studio, quanto volo, su cosa,
   per quanto tempo. In griglia e non in riga di testo, perche' cosi' si
   leggono a colpo d'occhio senza dover cercare dentro un paragrafo. */
.corso-fatti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 0.5rem 0;
}

.fatto {
    background-color: var(--background-color);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    text-align: center;
}

.fatto .etichetta {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #667085;
    margin-bottom: 0.25rem;
}

.fatto .valore {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-color);
}

.corso .elenco {
    margin: 0 0 1rem 1.2rem;
    padding-left: 0.6rem;
    line-height: 1.7;
}

.corso .elenco li { margin-bottom: 0.5rem; }

.corso .contatto {
    margin-top: 2rem;
    padding: 1rem 1.2rem;
    background-color: var(--background-color);
    border-left: 4px solid var(--secondary-color);
    border-radius: 0 8px 8px 0;
}

.corso .contatto i { color: var(--secondary-color); margin-right: 0.5rem; }

.corso .contatto a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.corso .contatto a:hover { color: var(--secondary-color); }

@media (max-width: 600px) {
    .corso { padding: 1.5rem; }
    .corso h2 { font-size: 1.45rem; }
}

/* =====================================================
   SCUOLA DI VOLO: FASCIA FOTOGRAFICA E GRIGLIA DEI CORSI
   =====================================================
   La scuola non e' piu' una pagina sola: scuola-di-volo.html e' un
   ingresso che smista, e ogni disciplina ha la sua pagina. Queste regole
   servono a quell'ingresso e alla testata delle sei pagine figlie.

   La fascia sta FUORI da .container di proposito: e' l'unica cosa del
   sito che deve toccare i due bordi dello schermo, e dentro un
   contenitore da 1100 px non lo farebbe mai. */

.fascia-foto {
    position: relative;
    line-height: 0;                      /* senza, sotto l'immagine resta la striscia della riga di testo */
    background-color: var(--primary-color);
}

/* L'altezza e' imposta e non ricavata dalle proporzioni del file: le
   foto sono 1600x600, ma su un telefono quelle proporzioni darebbero una
   striscia alta 140 px in cui non si capisce cosa si guarda. Con
   object-fit: cover si ritaglia invece di deformare. */
.fascia-foto img {
    display: block;
    width: 100%;
    height: clamp(200px, 30vw, 420px);
    object-fit: cover;
}

/* La frase sopra la foto ha bisogno della sfumatura scura sotto di se':
   il testo bianco su una fotografia che non controlliamo e' illeggibile
   il giorno in cui la foto viene sostituita con una piu' chiara. */
.fascia-foto .fascia-frase {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4rem 1.5rem 1.6rem 1.5rem;
    margin: 0;
    background: linear-gradient(to top, rgba(13, 44, 75, 0.85), rgba(13, 44, 75, 0));
    color: var(--light-text-color);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 600px) {
    .fascia-foto .fascia-frase {
        font-size: 1rem;
        padding: 3rem 1rem 1rem 1rem;
    }
}

/* --- I quadrati che portano alle sei pagine --- */

.scuola-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

/* Il quadrato intero e' il collegamento, non solo il titolo o la
   freccia: e' un bersaglio grande, che sul telefono e' l'unica cosa che
   conta davvero. */
.scuola-quadrato {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--card-bg-color);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scuola-quadrato:hover,
.scuola-quadrato:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
}

.scuola-quadrato .quadrato-foto {
    line-height: 0;
    background-color: var(--primary-color);
}

.scuola-quadrato .quadrato-foto img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.scuola-quadrato .quadrato-testo {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

.scuola-quadrato h3 {
    font-size: 1.35rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.scuola-quadrato p {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* margin-top: auto incolla la freccia al fondo: cosi' quadrati con
   descrizioni di lunghezza diversa hanno comunque la freccia allineata. */
.scuola-quadrato .quadrato-freccia {
    margin-top: auto;
    font-weight: 600;
    color: var(--primary-color);
}

.scuola-quadrato:hover .quadrato-freccia { color: var(--secondary-color); }

/* --- Il volo in montagna, che deve vedersi per primo ---
   E' l'unica scuola in Italia che lo fa: se stesse in fila con gli altri
   cinque quadrati nessuno capirebbe che e' la cosa rara. Occupa tutte le
   colonne e sta in cima alla griglia. */
.scuola-quadrato.evidenza {
    grid-column: 1 / -1;
    border: 2px solid var(--secondary-color);
}

.scuola-quadrato.evidenza h3 { font-size: 1.8rem; }

.scuola-quadrato.evidenza p { font-size: 1.05rem; }

.scuola-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (min-width: 760px) {
    .scuola-quadrato.evidenza { flex-direction: row; }

    .scuola-quadrato.evidenza .quadrato-foto { flex: 0 0 46%; }

    /* height: 100% fa seguire alla foto l'altezza del testo di fianco;
       min-height evita che con due righe sole diventi una fessura. */
    .scuola-quadrato.evidenza .quadrato-foto img {
        height: 100%;
        min-height: 280px;
    }

    .scuola-quadrato.evidenza .quadrato-testo {
        justify-content: center;
        padding: 2.5rem;
    }
}

/* --- Fotografia dentro il testo di una pagina corso --- */
.foto-corso {
    margin: 2rem 0;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.foto-corso img {
    display: block;
    width: 100%;
    height: auto;
}

.foto-corso figcaption {
    line-height: 1.5;
    font-size: 0.9rem;
    color: #667085;
    padding: 0.7rem 0.2rem 0 0.2rem;
}

/* --- Il ritorno alla pagina della scuola ---
   Sta in fondo a ogni pagina figlia: chi e' arrivato qui da un motore di
   ricerca non ha una cronologia da cui tornare indietro. */
.scuola-ritorno {
    margin-top: 3rem;
    text-align: center;
}

.scuola-ritorno a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.scuola-ritorno a:hover { color: var(--secondary-color); }

/* =====================================================
   GALLERIA DELLE FOTO DEI SOCI
   =====================================================
   La griglia la riempie js/galleria.js leggendo dati/galleria.json, che
   il servizio riscrive a ogni scelta del gestore del sito. Le miniature
   sono file veri da 480 px e non immagini grandi rimpicciolite dal
   browser: vedi PUBBLICO/Fotografie.cs.

   auto-fill e non un numero fisso di colonne: su un portatile ne stanno
   quattro, su un telefono due, e non c'e' una misura da indovinare. */

.galleria-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Un pulsante e non un div: si apre col dito, col mouse e con la
   tastiera, e chi naviga a tabulazioni ci arriva. Sembra un riquadro
   perche' i bordi del pulsante sono tolti a mano. */
.foto-voce {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #e6e8eb;
    cursor: pointer;
    line-height: 0;
}

.foto-voce img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.foto-voce:hover img,
.foto-voce:focus-visible img { transform: scale(1.04); }

/* Il nome di chi ha scattato, in basso sulla foto. La sfumatura serve
   perche' sotto ci puo' essere la neve, e un testo bianco su bianco non
   si legge. */
.foto-autore {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 0.6rem 0.5rem 0.6rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: var(--light-text-color);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
}

/* =====================================================
   LA FOTO APERTA
   =====================================================
   Il pannello lo costruisce il JavaScript una volta sola e lo riusa. Sta
   fisso sopra la pagina: si chiude col fondo, con la croce e con Esc,
   perche' tre vie di uscita sono quelle che la gente prova. */

.foto-aperta {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem 1rem;
    background-color: rgba(8, 20, 38, 0.92);
}

/* hidden e' un attributo HTML, e il display:flex qui sopra lo
   scavalcherebbe: senza questa riga il pannello resta aperto per sempre. */
.foto-aperta[hidden] { display: none; }

.foto-aperta img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.foto-credito {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.foto-chiudi {
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--light-text-color);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.foto-chiudi:hover,
.foto-chiudi:focus-visible { background-color: rgba(255, 255, 255, 0.3); }

/* Con una foto aperta la pagina sotto non deve scorrere: su un telefono,
   trascinando per spostare la foto, si scorreva il sito dietro. */
body.con-foto-aperta { overflow: hidden; }

/* =====================================================
   PAGINA CONTATTI
   =====================================================
   Due righe da due riquadri: indirizzo e mappa, poi orari e recapiti.
   Il modulo resta in fondo - chi apre questa pagina, nove volte su
   dieci, vuole un numero di telefono e non un campo da riempire.

   auto-fit con minimo 300px: su un telefono i riquadri si incolonnano
   da soli, e la mappa finisce sopra il testo invece che di fianco. */

.contatti-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.contatti-blocco {
    background-color: var(--card-bg-color);
    border-radius: 8px;
    padding: 1.6rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.contatti-blocco h2 {
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
}

.contatti-blocco h2 i {
    color: var(--secondary-color);
    margin-right: 0.5rem;
}

.contatti-nota {
    color: #667085;
    font-size: 0.92rem;
    margin-top: 0.8rem;
}

/* Il riquadro della mappa non ha riempimento: la mappa arriva ai bordi,
   che e' il modo in cui le mappe si guardano. */
.contatti-blocco:has(.mappa) { padding: 0; overflow: hidden; }

.mappa {
    aspect-ratio: 4 / 3;
    background-color: #e6e8eb;           /* si vede il riquadro mentre carica */
}

.mappa-telaio {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Gli orari in grande: e' il dato che si viene a cercare, e in mezzo a
   un paragrafo si perde. */
.orari {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    font-size: 1.15rem;
    color: var(--primary-color);
}

.orari .orario strong {
    color: var(--secondary-color);
    margin-right: 0.3rem;
}

/* I recapiti sono collegamenti veri: su un telefono il numero si chiama
   con un dito, e l'indirizzo apre il programma di posta. */
.contatti-recapiti {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.contatti-recapiti a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.05rem;
    overflow-wrap: anywhere;             /* l'indirizzo di posta non allarga la scheda */
}

.contatti-recapiti a i {
    color: var(--secondary-color);
    margin-right: 0.6rem;
}

.contatti-recapiti a:hover { color: var(--secondary-color); }

.contatti-pulsanti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

/* La variante chiara del pulsante secondario nasce per la hero, dove il
   fondo e' una fotografia scura. Qui sotto e' su fondo bianco, e un
   bordo bianco su bianco non si vede. */
.cta-button.leggero.scuro {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.cta-button.leggero.scuro:hover,
.cta-button.leggero.scuro:focus-visible {
    background-color: var(--primary-color);
    color: var(--light-text-color);
}

/* La riga sopra la griglia: dice quante foto ci sono, e prima che il
   JavaScript risponda dice che stanno arrivando. */
.galleria-stato {
    color: #667085;
    font-size: 0.95rem;
}


/* =====================================================
   IL BOLLINO DELLA DTO
   =====================================================
   Il numero di certificazione stava dentro un paragrafo, in mezzo a una
   frase: chi cerca "e' una scuola vera?" non lo trovava. Qui e' una riga
   sua, con il bordo oro del sito, sopra i corsi.

   Non e' un vanto: e' la risposta alla prima domanda che si fa chi non
   conosce il club e sta valutando dove spendere qualche migliaio di
   euro. */
.dto-bollino {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    max-width: 900px;
    margin: 0 auto 2.5rem auto;
    padding: 1rem 1.3rem;
    background-color: #fffaf0;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    line-height: 1.55;
    font-size: 0.95rem;
}

.dto-bollino i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    font-size: 1.3rem;
    color: var(--secondary-color);
}

/* =====================================================
   IL BOTTONE CHE PORTA AL MODULO
   =====================================================
   Il modulo di contatto sta in fondo alla pagina, dopo mappa, orari e
   recapiti, e su un telefono e' a tre schermate di distanza: chi apre la
   pagina per scrivere non lo vede e se ne va. Questo e' un collegamento
   a un'ancora, non uno script - funziona anche col JavaScript spento e
   non impedisce a nessuno di leggere prima il resto. */
.vai-al-modulo-riga {
    max-width: 1100px;
    margin: 1.5rem auto 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.vai-al-modulo i { margin-right: 0.5rem; }

/* =====================================================
   LA FIRMA DI CHI HA FATTO IL SITO
   =====================================================
   Non c'e' piu' nessuna regola qui perche' la firma non si vede: sta in
   un commento HTML in fondo alle tre home, dove la legge chi guarda il
   sorgente. Le regole .firma-sito sono state tolte insieme al paragrafo,
   per non lasciare in giro stile senza niente da vestire. */

/* La notizia in copertina, nella home sotto la grande immagine.
   =====================================================
   La scrive il servizio fra i marcatori COPERTINA (GeneratoreSito). Due
   colonne su schermo largo, l'immagine e il testo; su telefono una sotto
   l'altro. L'immagine e' spesso una locandina verticale: la si contiene
   senza tagliarla (object-fit: contain), con un tetto all'altezza perche'
   non spinga tutto il resto in fondo alla pagina. */
.copertina-notizia {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 2.5rem 0;
}

.copertina-notizia[hidden] { display: none; }

.copertina-foto {
    display: flex;
    justify-content: center;
}

.copertina-pulsanti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
}

/* Il pulsante di iscrizione nella pagina di una notizia. */
.notizia-iscrizione {
    margin: 1.2rem 0;
    text-align: center;
}

.copertina-dentro {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2rem;
    align-items: center;
}

.copertina-foto img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    border-radius: 8px;
}

.copertina-occhiello {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background-color: #fca311;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.copertina-testo h2 {
    margin: 0 0 0.8rem 0;
    font-size: 2rem;
    line-height: 1.2;
}

.copertina-testo h2 a {
    color: #ffffff;
    text-decoration: none;
}

.copertina-testo p {
    margin: 0 0 1.4rem 0;
    font-size: 1.1rem;
    opacity: 0.92;
}

@media (max-width: 760px) {
    .copertina-dentro { grid-template-columns: 1fr; }
    .copertina-foto img { max-height: 380px; }
    .copertina-testo { text-align: center; }
    .copertina-pulsanti { justify-content: center; }
    .copertina-testo h2 { font-size: 1.6rem; }
}

/* La parte alta della home con la notizia o l'evento in evidenza.
   =====================================================
   UNA COSA SOLA (dal 04/10/2026; prima erano due colonne affiancate):
   se c'e' la scheda che il servizio scrive fra i marcatori COPERTINA, si
   vede solo lei, centrata e piu' larga, e il contenuto di sempre ("Vola
   con noi", primo volo, pulsanti) sparisce. Due inviti uno accanto
   all'altro facevano confusione. Senza scheda, o dopo la sua data di fine
   (lo script la mette hidden), torna il contenuto di sempre.
   :has() lo decide nel foglio di stile, senza JavaScript in piu'. */
.hero-griglia {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
}

.hero-copertina { display: none; }

.hero-griglia:has(.copertina-notizia:not([hidden])) {
    max-width: 900px;
}

.hero-griglia:has(.copertina-notizia:not([hidden])) .hero-copertina { display: block; width: 100%; }

.hero-griglia:has(.copertina-notizia:not([hidden])) .hero-content { display: none; }

/* La scheda sopra la foto: fondo blu semitrasparente, perche' si legga su
   qualunque sfondo del giorno, neve compresa. */
.hero .copertina-notizia {
    padding: 1.25rem;
    border-radius: 12px;
    background-color: rgba(13, 44, 75, 0.85);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    text-align: left;
}

.hero .copertina-dentro {
    max-width: none;
    padding: 0;
    gap: 1.2rem;
}

.hero .copertina-foto img { max-height: 300px; }

.hero .copertina-testo h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.hero .copertina-testo p {
    font-size: 0.98rem;
    margin-bottom: 1rem;
}

.hero .copertina-testo h2 a { text-shadow: none; }

@media (max-width: 520px) {
    .hero .copertina-dentro { grid-template-columns: 1fr; }
    .hero .copertina-foto img { max-height: 260px; }
    .hero .copertina-notizia { text-align: center; }
    .hero .copertina-pulsanti { justify-content: center; }
}

/* =====================================================
   EMAGRAMMA E TERMICA (dalla 2.48, js/sondaggio.js)
   ===================================================== */
.sondaggio-giorni, .sondaggio-ore {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.8rem 0;
    align-items: center;
}

.sondaggio-giorno, .sondaggio-ora {
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--primary-color);
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--primary-color);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sondaggio-ora { padding: 0.25rem 0.55rem; font-size: 0.85rem; border-width: 1px; }

.sondaggio-giorno.attivo, .sondaggio-ora.attivo {
    background-color: var(--primary-color);
    color: #ffffff;
}

.sondaggio-ore-etichetta { font-size: 0.85rem; color: #475467; margin-right: 0.3rem; }

.sondaggio-riassunto {
    margin: 0 0 0.8rem 0;
    padding: 0.6rem 0.9rem;
    background-color: #f5f7fa;
    border-left: 4px solid #fca311;
    border-radius: 6px;
}

.sondaggio-corpo {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.2rem;
    align-items: start;
}

@media (max-width: 800px) {
    .sondaggio-corpo { grid-template-columns: 1fr; }
}

.sondaggio-figura { margin: 0; }

.sondaggio-grafico {
    display: block;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #e6e8eb;
    border-radius: 6px;
    font-family: var(--main-font);
}

.sg-griglia    { stroke: #eef2f7; stroke-width: 1; }
.sg-isoterma   { stroke: #e3e8ef; stroke-width: 1; }
.sg-zero       { stroke: #74c0fc; stroke-width: 1.5; }
.sg-adiabatica { stroke: #f1d9b5; stroke-width: 1; stroke-dasharray: 4 4; }
.sg-cornice    { fill: none; stroke: #c9d1db; stroke-width: 1; }
.sg-temperatura { fill: none; stroke: #c92a2a; stroke-width: 2.5; }
.sg-rugiada     { fill: none; stroke: #2b8a3e; stroke-width: 2.5; }
.sg-particella  { fill: none; stroke: #e8590c; stroke-width: 2; stroke-dasharray: 6 4; }
.sg-base       { stroke: #1971c2; stroke-width: 1.5; stroke-dasharray: 2 3; }
.sg-cima       { stroke: #e8590c; stroke-width: 1.5; stroke-dasharray: 2 3; }
.sg-vento      { fill: none; stroke: #0d2c4b; stroke-width: 1.6; }
.sg-etichetta  { fill: #475467; font-size: 11px; }

.sondaggio-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: #475467;
}

.sondaggio-legenda span::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 0;
    margin-right: 0.35rem;
    vertical-align: middle;
    border-top: 3px solid;
}

.lg-temperatura::before { border-color: #c92a2a !important; }
.lg-rugiada::before     { border-color: #2b8a3e !important; }
.lg-particella::before  { border-color: #e8590c !important; border-top-style: dashed !important; }
.lg-base::before        { border-color: #1971c2 !important; border-top-style: dotted !important; }
.lg-cima::before        { border-color: #e8590c !important; border-top-style: dotted !important; }

.sondaggio-dati {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.8rem;
    margin: 0;
    font-size: 0.92rem;
}

.sondaggio-dati dt { font-weight: 600; color: #475467; }
.sondaggio-dati dd { margin: 0; }

.sondaggio-allarme {
    margin: 0 0 0.6rem 0;
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    background-color: #c92a2a;
    color: #ffffff;
    font-weight: 700;
}

.sondaggio-tabella { margin-top: 1.2rem; width: 100%; font-size: 0.88rem; }
.sondaggio-tabella tbody tr { cursor: pointer; }
.sondaggio-tabella tbody tr:hover { background-color: #f5f7fa; }
.sondaggio-tabella .sondaggio-scelta { background-color: #fff3bf; }
.sondaggio-tabella .sondaggio-rischio td:first-child { border-left: 4px solid #c92a2a; }

.sondaggio-scorri { max-width: 100%; overflow-x: auto; }

.sondaggio-tabella { border-collapse: collapse; }
.sondaggio-tabella th, .sondaggio-tabella td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
    white-space: nowrap;
}
.sondaggio-tabella th { color: var(--primary-color); font-weight: 700; border-bottom: 2px solid #fca311; }