/* ============================================================
   Box "Mare e Vento" della homepage
   Mappa WW3 (sfondo Hs delle onde) + particelle del vento.
   Riutilizzabile sia nell'anteprima sia nella Default.aspx definitiva.
   ============================================================ */

.mv-wrap {
    position: relative;
    width: 100%;
    height: 370px; /* = altezza delle immagini Meteosat/KNMI (.img-meteosat / .img-fronti) */
    border-radius: 4px;
    overflow: hidden;
}
.mv-map { width: 100%; height: 100%; }

/* Legenda Hs: fascia a tutta larghezza, attaccata al bordo inferiore */
.mv-legenda {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 650;
    background: rgba(0, 0, 0, .5); color: #fff;
    font-size: .66rem; text-align: center;
    padding: 3px 0 4px; pointer-events: none; line-height: 1.1;
}
.mv-legenda .barra {
    width: 92%; height: 6px; border-radius: 4px; margin: 2px auto 1px;
    background: linear-gradient(to right,
        rgb(6, 24, 70), rgb(16, 62, 135), rgb(38, 115, 185),
        rgb(122, 205, 86), rgb(232, 210, 40), rgb(253, 150, 46),
        rgb(223, 57, 29), rgb(165, 28, 28));
}
.mv-legenda .scala {
    display: flex; justify-content: space-between; width: 92%; margin: 0 auto;
}

/* Overlay trasparente cliccabile -> apre la mappa interattiva WW3_Overlay */
.mv-link {
    position: absolute; inset: 0; z-index: 700; display: flex;
    align-items: flex-end; justify-content: center; text-decoration: none;
}
.mv-cta {
    margin-bottom: 26px; background: rgba(12, 75, 123, .9); color: #fff;
    font-size: .78rem; font-weight: 600; padding: 5px 12px; border-radius: 14px;
    opacity: 0; transform: translateY(6px); transition: .18s;
}
.mv-link:hover .mv-cta { opacity: 1; transform: translateY(0); }

/* Il titolo eredita lo stile .box-titolo come gli altri box (stesso font).
   Solo "(ora locale)" e' reso piu' piccolo. */
.mv-box .box-titolo small { font-size: .8rem; font-weight: 400; opacity: .9; }


/* ============================================================
   Box "Rilevazioni del giorno" (al posto del METAR)
   Attuale vs media climatica + scostamento; giudizio sigma per la Temperatura.
   ============================================================ */
.rg-box .box-titolo small { font-size: .8rem; font-weight: 400; opacity: .9; }

.rg-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } /* = Almanacco/Maree */
.rg-table th {
    background: var(--colore-primario, #0C4B7B); color: #fff;
    padding: 4px 6px; text-align: right; font-weight: 600;
}
.rg-table th:first-child { text-align: left; }
.rg-table td { padding: 4px 6px; border-bottom: 1px solid #eee; text-align: right; }
.rg-table td:first-child { text-align: left; font-weight: 600; color: #333; }
.rg-table tbody tr:hover { background: #f2f7fc; }

.rg-att { white-space: nowrap; }
.rg-mm { color: #555; font-weight: 400; font-size: .85em; white-space: nowrap; }
.rg-nota { color: #888; font-weight: 400; font-size: .92em; }
.rg-scost { font-weight: 700; }
.rg-su  { color: #c0392b; } /* sopra la media */
.rg-giu { color: #2980b9; } /* sotto la media */
.rg-load { text-align: center; color: #888; padding: 12px; }

.rg-giudizio { font-size: .72rem; color: #555; margin-top: 7px; text-align: center; }
/* Stessa altezza E stessa larghezza degli altri due grafici della riga
   (temperatura e marea): --h-grafico e max-width arrivano da Homepage.css.
   Prima questo era alto 290 contro 270 e 235, e largo quanto il box. */
.rg-grafico { height: var(--h-grafico, 260px); max-width: 400px; margin: 8px auto 0; }
.rg-grafico canvas { width: 100% !important; height: 100% !important; }
.rg-g-nella-norma { color: #27ae60; }
.rg-g-anomalo     { color: #e67e22; }
.rg-g-eccezionale { color: #c0392b; }

/* ============================================================
   Mobile
   ============================================================ */

/* Su touch non esiste hover: la CTA "Esplora la mappa" deve essere
   sempre visibile, altrimenti nessuno scopre che il box e' cliccabile */
@media (hover: none) {
    .mv-cta { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .mv-wrap { height: 260px; }
    /* NB: l'altezza mobile dei grafici sta in Homepage.css (--h-grafico),
       perche' questo foglio lo carica solo l'anteprima mentre la variabile
       serve anche alla home vera. */
    /* Con la root a 14px i font qui sotto scendevano a 9-10px reali */
    .mv-legenda { font-size: .8rem; }
    .rg-giudizio { font-size: .85rem; }
    .rg-mm { font-size: 1em; }
    .rg-att { white-space: normal; }
    /* Min/Max nascoste su telefono. NON perche' sforino: misurato a 375px di
       viewport, la tabella sta nel contenitore (333px) sia con 2 che con 4
       colonne. E' una scelta di leggibilita': a 4 colonne ognuna avrebbe ~83px
       e valori come "12,9 km/h WNW" andrebbero su piu' righe. Restano
       Parametro e Attuale, il dato che si cerca al volo; il quadro completo
       si vede da tablet in su. */
    .rg-table th:nth-child(3), .rg-table td:nth-child(3),
    .rg-table th:nth-child(4), .rg-table td:nth-child(4) { display: none; }
}