/* ============================================================
   OROSEIMETEO · QUALITÀ DELL'ARIA
   Riferimento tipografico: V-MODEL / PANORAMICA MAPPE
   ============================================================ */


/* ============================================================
   PAGINA
   ============================================================ */

.air-page{
    padding:34px 0 56px;
    background:#fff;
}

.air-page .container{
    width:min(1220px,calc(100% - 32px));
}


/* ============================================================
   HERO
   ============================================================ */

.air-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:36px;
    padding:34px 30px;
    border:1px solid #edf3f6;
    border-radius:17px;
    background:#fbfdfe;
}

.air-kicker,
.air-section-kicker{
    display:block;
    color:#168bb4;
    font-size:13px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.air-hero h1{
    margin:7px 0 14px;
    color:#17465f;
    font-size:44px;
    line-height:1.04;
    font-weight:800;
    letter-spacing:-1.3px;
}

.air-hero p{
    max-width:800px;
    margin:0;
    color:#607c8d;
    font-size:18px;
    line-height:1.7;
}


/* ============================================================
   STATO SENSORE
   ============================================================ */

.air-live-state{
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
    min-width:195px;
    padding:15px 17px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:13px;
    background:#fff;
}

.air-live-dot{
    width:11px;
    height:11px;
    flex:0 0 auto;
    border-radius:50%;
    background:#9aadb7;
    box-shadow:0 0 0 5px rgba(154,173,183,.12);
}

.air-live-state.is-online .air-live-dot{
    background:#39a766;
    box-shadow:0 0 0 5px rgba(57,167,102,.12);
}

.air-live-state.is-stale .air-live-dot{
    background:#d49b38;
    box-shadow:0 0 0 5px rgba(212,155,56,.12);
}

.air-live-state small{
    display:block;
    color:#8095a2;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.air-live-state strong{
    display:block;
    margin-top:4px;
    color:#315e76;
    font-size:15px;
    line-height:1.35;
    font-weight:800;
}


/* ============================================================
   BLOCCO DATI ATTUALI
   ============================================================ */

.air-current-grid{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:14px;
    margin-top:20px;
}

.air-aqi-card,
.air-kpi,
.air-chart-card,
.air-table-card{
    border:1px solid rgba(84,120,136,.14);
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.055);
}


/* ============================================================
   AQI ATTUALE
   ============================================================ */

.air-aqi-card{
    padding:22px;
    border-radius:16px;
}

.air-aqi-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding-bottom:16px;
    border-bottom:1px solid #edf3f6;
}

.air-aqi-head span{
    display:block;
    color:#788f9c;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.air-aqi-head h2{
    margin:5px 0 0;
    color:#17465f;
    font-size:25px;
    line-height:1.1;
    font-weight:800;
}

.air-updated{
    font-size:12px !important;
    text-align:right;
    text-transform:none !important;
    letter-spacing:0 !important;
}

.air-aqi-main{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:22px;
    align-items:center;
    padding:22px 0 18px;
}

.air-aqi-gauge{
    position:relative;
    width:164px;
    height:164px;
    border-radius:50%;
    background:
        conic-gradient(
            from 225deg,
            var(--aqi-color) 0deg var(--aqi-progress),
            #e9f0f3 var(--aqi-progress) 270deg,
            transparent 270deg 360deg
        );
}

.air-aqi-gauge:before{
    content:"";
    position:absolute;
    inset:15px;
    border-radius:50%;
    background:#fff;
}

.air-aqi-gauge:after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42px;
    background:#fff;
}

.air-aqi-gauge-center{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-bottom:8px;
}

.air-aqi-gauge-center strong{
    color:#17465f;
    font-size:44px;
    line-height:1;
    font-weight:800;
    letter-spacing:-1px;
}

.air-aqi-gauge-center span{
    margin-top:6px;
    color:#718b9a;
    font-size:12px;
    line-height:1.3;
    font-weight:800;
}

.air-aqi-copy strong{
    color:#17465f;
    font-size:25px;
    line-height:1.12;
    font-weight:800;
}

.air-aqi-copy p{
    max-width:440px;
    margin:9px 0 0;
    color:#718b9a;
    font-size:15px;
    line-height:1.6;
}

.air-aqi-scale{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:3px;
    height:7px;
    overflow:hidden;
    border-radius:999px;
}

.air-aqi-scale i:nth-child(1){background:#2fa76a;}
.air-aqi-scale i:nth-child(2){background:#ddbd35;}
.air-aqi-scale i:nth-child(3){background:#e58e3f;}
.air-aqi-scale i:nth-child(4){background:#d95d5d;}
.air-aqi-scale i:nth-child(5){background:#8c65b6;}
.air-aqi-scale i:nth-child(6){background:#75404f;}


/* ============================================================
   KPI ATTUALI
   ============================================================ */

.air-kpi-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.air-kpi{
    min-width:0;
    padding:19px 17px;
    border-radius:15px;
    background:#fff;
}

.air-kpi:after{
    display:none;
}

.air-kpi span{
    display:block;
    color:#788f9c;
    font-size:12px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.air-kpi strong{
    display:block;
    margin-top:10px;
    color:#17465f;
    line-height:1;
}

.air-kpi strong b{
    font-size:33px;
    font-weight:800;
    letter-spacing:-1px;
}

.air-kpi strong small{
    color:#607d8e;
    font-size:13px;
    font-weight:700;
}

.air-kpi p{
    margin:9px 0 0;
    color:#899da8;
    font-size:12px;
    line-height:1.45;
}


/* ============================================================
   SEZIONI
   ============================================================ */

.air-section{
    margin-top:36px;
}

.air-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:20px;
}

.air-section-head h2{
    margin:6px 0 0;
    color:#17465f;
    font-size:34px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.7px;
}

.air-section-head p{
    margin:7px 0 0;
    color:#8095a2;
    font-size:15px;
    line-height:1.6;
}


/* ============================================================
   GRAFICI
   ============================================================ */

.air-chart-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.air-chart-card{
    min-width:0;
    overflow:hidden;
    border-radius:16px;
}

.air-chart-card header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    min-height:76px;
    padding:18px 20px 14px;
    border-bottom:1px solid #edf3f6;
}

.air-chart-card h3{
    margin:0;
    color:#17465f;
    font-size:19px;
    line-height:1.25;
    font-weight:800;
}

.air-chart-card header p{
    margin:5px 0 0;
    color:#879aa5;
    font-size:13px;
    line-height:1.45;
}

.air-chart-card header > span{
    flex:0 0 auto;
    padding:7px 10px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:10px;
    background:#f7fbfd;
    color:#6b8797;
    font-size:11px;
    line-height:1;
    font-weight:800;
}

.air-chart{
    height:300px;
}


/* ============================================================
   SELETTORE MESE
   ============================================================ */

.air-month-control{
    display:flex;
    align-items:center;
    gap:9px;
}

.air-month-control > span{
    color:#78909f;
    font-size:12px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.air-month-control select{
    min-height:44px;
    padding:0 38px 0 12px;
    border:1px solid #d0e1e9;
    border-radius:11px;
    background:#fff;
    color:#17465f;
    font:inherit;
    font-size:14px;
}


/* ============================================================
   RIEPILOGO MENSILE
   ============================================================ */

.air-report-summary{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:10px;
    margin-bottom:18px;
}

.air-report-summary article{
    min-width:0;
    padding:17px 15px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.045);
}

.air-report-summary span{
    display:block;
    color:#788f9c;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.air-report-summary strong{
    display:block;
    margin-top:7px;
    color:#17465f;
    font-size:23px;
    line-height:1.05;
    font-weight:800;
    white-space:nowrap;
}

.air-report-charts{
    margin-bottom:18px;
}


/* ============================================================
   TABELLA REPORT AIRQ
   Rimane volutamente compatta.
   ============================================================ */

.air-table-card{
    overflow:hidden;
    border-radius:16px;
}

.air-table-title{
    padding:19px 20px;
    border-bottom:1px solid #edf3f6;
}

.air-table-title h3{
    margin:0;
    color:#17465f;
    font-size:20px;
    line-height:1.2;
    font-weight:800;
}

.air-table-title p{
    margin:6px 0 0;
    color:#879aa5;
    font-size:13px;
    line-height:1.5;
}

.air-table-scroll{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

.air-report-table{
    width:100%;
    min-width:1080px;
    max-width:none;
    margin:0;
    table-layout:auto;
    border-collapse:separate;
    border-spacing:0;
    color:#506f81;
    font-size:12px;
}

.air-report-table th{
    padding:10px 2px;
    border-bottom:1px solid #dfe9ee;
    background:#f7fafc;
    color:#607c8b;
    font-size:9px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.025em;
    text-transform:uppercase;
    text-align:center;
    white-space:nowrap;
}

.air-report-table td{
    padding:8px 2px;
    border-bottom:1px solid #edf2f5;
    color:#506f81;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
}

.air-report-table tbody tr:last-child td{
    border-bottom:0;
}

.air-report-table tbody tr:hover td{
    background:#fbfdfe;
}


/* ============================================================
   LARGHEZZE COLONNE
   ============================================================ */

.air-report-table th:nth-child(1),
.air-report-table td:nth-child(1){
    min-width:52px;
    width:52px;
}

.air-report-table th:nth-child(2),
.air-report-table td:nth-child(2){
    min-width:62px;
    width:62px;
}

.air-report-table th:nth-child(3),
.air-report-table td:nth-child(3){
    min-width:58px;
    width:58px;
}

.air-report-table th:nth-child(4),
.air-report-table td:nth-child(4){
    min-width:54px;
    width:54px;
}

.air-report-table th:nth-child(5),
.air-report-table td:nth-child(5){
    min-width:66px;
    width:66px;
}

.air-report-table th:nth-child(6),
.air-report-table td:nth-child(6){
    min-width:62px;
    width:62px;
}

.air-report-table th:nth-child(7),
.air-report-table td:nth-child(7){
    min-width:54px;
    width:54px;
}

.air-report-table th:nth-child(8),
.air-report-table td:nth-child(8){
    min-width:60px;
    width:60px;
}

.air-report-table th:nth-child(9),
.air-report-table td:nth-child(9){
    min-width:58px;
    width:58px;
}

.air-report-table th:nth-child(10),
.air-report-table td:nth-child(10){
    min-width:54px;
    width:54px;
}

.air-report-table th:nth-child(11),
.air-report-table td:nth-child(11){
    min-width:66px;
    width:66px;
}

.air-report-table th:nth-child(12),
.air-report-table td:nth-child(12){
    min-width:88px;
    width:88px;
}


/* ============================================================
   PRIMA COLONNA STICKY
   ============================================================ */

.air-report-table th:first-child,
.air-report-table td:first-child{
    position:sticky;
    left:0;
    z-index:3;
    background:#fff;
    box-shadow:1px 0 0 #e6eef2;
    color:#315e75;
    font-weight:800;
}

.air-report-table thead th:first-child{
    z-index:4;
    background:#f7fafc;
}


/* ============================================================
   INTESTAZIONI RIPETUTE
   ============================================================ */

.air-table-repeat-head th{
    position:static;
    top:auto;
    z-index:1;
    padding:10px 2px;
    border-top:1px solid #d9e6ec;
    border-bottom:1px solid #d9e6ec;
    background:#f7fafc;
    color:#607c8b;
    font-size:9px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.025em;
    text-transform:uppercase;
    text-align:center;
    white-space:nowrap;
}

.air-table-repeat-head th:first-child{
    position:sticky;
    left:0;
    z-index:3;
    background:#f7fafc;
    box-shadow:1px 0 0 #e6eef2;
}

.air-table-repeat-head-middle th{
    border-top-color:#d2e2e9;
}

.air-table-repeat-head-bottom th{
    border-top-color:#d2e2e9;
    border-bottom:0;
}


/* ============================================================
   VALORI COLORATI TABELLA
   ============================================================ */

.air-value-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    min-height:28px;
    padding:0 5px;
    border:1px solid transparent;
    border-radius:8px;
    font-size:11px;
    line-height:1;
    font-weight:800;
}

.air-value-chip.is-na{
    border-color:#e1e9ed;
    background:#f7f9fa;
    color:#91a2ab;
}

.air-value-chip.is-air-low{
    border-color:#c8e4d3;
    background:#f0f8f3;
    color:#438360;
}

.air-value-chip.is-air-good{
    border-color:#d9dfad;
    background:#faf9ed;
    color:#8c872c;
}

.air-value-chip.is-air-moderate{
    border-color:#ecd5a2;
    background:#fdf7e9;
    color:#a97b26;
}

.air-value-chip.is-air-high{
    border-color:#ebc49d;
    background:#fcf0e5;
    color:#b66c31;
}

.air-value-chip.is-air-very-high{
    border-color:#e1b0ad;
    background:#faeceb;
    color:#b0524f;
}

.air-value-chip.is-air-extreme{
    border-color:#ceb9de;
    background:#f5eff9;
    color:#8056a0;
}

.air-report-table td.air-time-cell{
    color:#627e8e;
}

.air-aqi-cell{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:70px;
    min-height:28px;
    padding:0 7px;
    border-radius:8px;
    color:#fff;
    font-size:10px;
    line-height:1;
    font-weight:800;
}


/* ============================================================
   LEGENDA AQI
   ============================================================ */

.air-aqi-legend{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.air-aqi-legend article{
    min-width:0;
    padding:18px 16px;
    border:1px solid rgba(84,120,136,.14);
    border-left:5px solid var(--legend-color,#8ca0aa);
    border-radius:15px;
    background:#fff;
}

.air-aqi-legend strong{
    display:block;
    color:#17465f;
    font-size:18px;
    line-height:1.2;
    font-weight:800;
}

.air-aqi-legend span{
    display:block;
    margin-top:6px;
    color:#718b9a;
    font-size:13px;
    line-height:1.4;
    font-weight:800;
}

.air-aqi-legend p{
    margin:9px 0 0;
    color:#879aa5;
    font-size:13px;
    line-height:1.55;
}


/* ============================================================
   NOTA
   ============================================================ */

.air-note{
    margin-top:18px;
    padding:16px 18px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:14px;
    background:#f8fbfd;
    color:#708794;
    font-size:13px;
    line-height:1.65;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1050px){

    .air-report-summary{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}


@media(max-width:820px){

    .air-current-grid{
        grid-template-columns:1fr;
    }

    .air-chart-grid{
        grid-template-columns:1fr;
    }

    .air-aqi-legend{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:760px){

    .air-page{
        padding:20px 0 42px;
    }

    .air-page .container{
        width:min(100% - 20px,1220px);
    }


    /* Hero */

    .air-hero{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        padding:26px 22px;
        border-radius:15px;
    }

    .air-kicker,
    .air-section-kicker{
        font-size:12px;
    }

    .air-hero h1{
        margin:7px 0 15px;
        font-size:40px;
        line-height:1.04;
        letter-spacing:-1px;
    }

    .air-hero p{
        font-size:17px;
        line-height:1.68;
    }

    .air-live-state{
        width:100%;
        padding:15px 16px;
    }

    .air-live-state small{
        font-size:11px;
    }

    .air-live-state strong{
        font-size:15px;
    }


    /* AQI */

    .air-aqi-card{
        padding:20px 18px;
    }

    .air-aqi-head span{
        font-size:11px;
    }

    .air-aqi-head h2{
        font-size:24px;
    }

    .air-updated{
        font-size:11px !important;
    }

    .air-aqi-main{
        grid-template-columns:130px 1fr;
        gap:16px;
    }

    .air-aqi-gauge{
        width:124px;
        height:124px;
    }

    .air-aqi-gauge:before{
        inset:12px;
    }

    .air-aqi-gauge:after{
        height:31px;
    }

    .air-aqi-gauge-center strong{
        font-size:36px;
    }

    .air-aqi-gauge-center span{
        font-size:11px;
    }

    .air-aqi-copy strong{
        font-size:22px;
    }

    .air-aqi-copy p{
        font-size:15px;
        line-height:1.6;
    }


    /* KPI */

    .air-kpi{
        padding:17px 14px;
        border-radius:13px;
    }

    .air-kpi span{
        font-size:11px;
    }

    .air-kpi strong b{
        font-size:29px;
    }

    .air-kpi strong small{
        font-size:12px;
    }

    .air-kpi p{
        font-size:12px;
        line-height:1.45;
    }


    /* Sezioni */

    .air-section{
        margin-top:32px;
    }

    .air-section-head{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        margin-bottom:16px;
    }

    .air-section-head h2{
        font-size:31px;
        line-height:1.12;
    }

    .air-section-head p{
        font-size:15px;
        line-height:1.6;
    }


    /* Grafici */

    .air-chart-card header{
        min-height:72px;
        padding:17px 17px 14px;
    }

    .air-chart-card h3{
        font-size:18px;
    }

    .air-chart-card header p{
        font-size:13px;
    }

    .air-chart-card header > span{
        font-size:11px;
    }

    .air-chart{
        height:275px;
    }


    /* Selettore mese */

    .air-month-control{
        width:100%;
        justify-content:space-between;
    }

    .air-month-control > span{
        font-size:12px;
    }

    .air-month-control select{
        flex:1;
        max-width:220px;
        font-size:14px;
    }


    /* Riepilogo */

    .air-report-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .air-report-summary article{
        padding:15px 13px;
        border-radius:13px;
    }

    .air-report-summary span{
        font-size:11px;
        line-height:1.35;
    }

    .air-report-summary strong{
        margin-top:7px;
        font-size:22px;
        line-height:1.08;
    }


    /* Titolo tabella */

    .air-table-title{
        padding:17px 16px;
    }

    .air-table-title h3{
        font-size:19px;
    }

    .air-table-title p{
        font-size:12px;
        line-height:1.5;
    }


    /* Tabella */

    .air-report-table{
        width:max-content;
        min-width:0;
        max-width:none;
        margin:0;
        font-size:12px;
    }

    .air-report-table th{
        padding:9px 1px;
        font-size:9px;
    }

    .air-report-table td{
        padding:8px 1px;
    }

    .air-table-repeat-head th{
        padding:9px 1px;
        font-size:9px;
    }

    .air-report-table th:nth-child(1),
    .air-report-table td:nth-child(1){
        min-width:48px;
        width:48px;
    }

    .air-report-table th:nth-child(2),
    .air-report-table td:nth-child(2){
        min-width:58px;
        width:58px;
    }

    .air-report-table th:nth-child(3),
    .air-report-table td:nth-child(3){
        min-width:54px;
        width:54px;
    }

    .air-report-table th:nth-child(4),
    .air-report-table td:nth-child(4){
        min-width:50px;
        width:50px;
    }

    .air-report-table th:nth-child(5),
    .air-report-table td:nth-child(5){
        min-width:62px;
        width:62px;
    }

    .air-report-table th:nth-child(6),
    .air-report-table td:nth-child(6){
        min-width:58px;
        width:58px;
    }

    .air-report-table th:nth-child(7),
    .air-report-table td:nth-child(7){
        min-width:50px;
        width:50px;
    }

    .air-report-table th:nth-child(8),
    .air-report-table td:nth-child(8){
        min-width:56px;
        width:56px;
    }

    .air-report-table th:nth-child(9),
    .air-report-table td:nth-child(9){
        min-width:54px;
        width:54px;
    }

    .air-report-table th:nth-child(10),
    .air-report-table td:nth-child(10){
        min-width:50px;
        width:50px;
    }

    .air-report-table th:nth-child(11),
    .air-report-table td:nth-child(11){
        min-width:62px;
        width:62px;
    }

    .air-report-table th:nth-child(12),
    .air-report-table td:nth-child(12){
        min-width:82px;
        width:82px;
    }

    .air-report-table th:first-child,
    .air-report-table td:first-child{
        box-shadow:
            4px 0 8px rgba(24,77,105,.05),
            1px 0 0 #e6eef2;
    }

    .air-value-chip{
        min-width:38px;
        min-height:28px;
        padding:0 3px;
        font-size:11px;
    }

    .air-aqi-cell{
        min-width:64px;
        min-height:28px;
        padding:0 5px;
        font-size:9px;
    }


    /* Legenda */

    .air-aqi-legend strong{
        font-size:17px;
    }

    .air-aqi-legend span{
        font-size:13px;
    }

    .air-aqi-legend p{
        font-size:13px;
    }


    /* Nota */

    .air-note{
        font-size:13px;
        line-height:1.6;
    }
}


/* ============================================================
   SMARTPHONE COMPATTO
   ============================================================ */

@media(max-width:430px){

    .air-aqi-main{
        grid-template-columns:1fr;
        text-align:center;
    }

    .air-aqi-gauge{
        margin:auto;
    }

    .air-aqi-copy p{
        margin-inline:auto;
    }

    .air-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .air-aqi-legend{
        grid-template-columns:1fr;
    }

    .air-chart{
        height:255px;
    }

    .air-report-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .air-report-summary strong{
        font-size:22px;
    }
}