/* ============================================================
   OROSEIMETEO — PANNELLO STAZIONE V3
   ============================================================ */

.rete-station-panel{
    background:#f4f8fa;
}

.rete-station-panel-content{
    padding:24px 18px 30px;
}

.station-v3{
    width:100%;
    color:#173f56;
}


/* TESTATA */

.station-v3-head{
    padding:2px 48px 14px 2px;
    border-bottom:1px solid #dce7eb;
}

.station-v3-head h3{
    margin:0 0 4px;
    font-size:26px;
    line-height:1.08;
    font-weight:900;
}

.station-v3-place{
    color:#7c929d;
    font-size:12px;
}

.station-v3-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:9px;
}


/* NAV */

.station-v3-nav{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;

    margin:13px 0;

    padding:5px;

    border:1px solid #dce7eb;
    border-radius:14px;

    background:#fff;
}

.station-v3-nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;

    min-width:0;
    min-height:50px;

    padding:6px 3px;

    border-radius:10px;

    color:#718894;
    text-decoration:none;

    font-size:9px;
    font-weight:850;
}

.station-v3-nav-item.active{
    background:#eaf5f8;
    color:#1685aa;
}

.station-v3-nav-icon{
    display:flex;
    width:20px;
    height:20px;
}

.station-v3-nav-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* DATO PRINCIPALE */

.station-v3-main{
    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:16px;
    padding:14px;

    border:1px solid #d4e6ec;
    border-radius:16px;

    background:#eaf5f8;
}

.station-v3-main-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 42px;
    width:42px;
    height:42px;

    border-radius:13px;
    background:#fff;
    color:#1687aa;
}

.station-v3-main-icon svg,
.station-v3-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.station-v3-main small{
    display:block;
    margin-bottom:2px;

    color:#67818e;

    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.station-v3-main strong{
    display:block;

    font-size:29px;
    line-height:1;
    font-weight:900;
}


/* SEZIONI */

.station-v3-section{
    margin-top:15px;
}

.station-v3-section h4{
    margin:0 2px 8px;

    color:#5d7988;

    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}


/* DATI ATTUALI */

.station-v3-current-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.station-v3-current{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;
    min-height:55px;

    padding:8px 9px;

    border:1px solid #dce7eb;
    border-radius:12px;

    background:#fff;
}

.station-v3-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 27px;
    width:27px;
    height:27px;

    border-radius:8px;
}

.station-v3-icon.is-temperature,
.station-v3-icon.is-heat,
.station-v3-icon.is-max{
    color:#c84a3e;
    background:#fdecea;
}

.station-v3-icon.is-min{
    color:#3279bd;
    background:#e9f2fc;
}

.station-v3-icon.is-humidity,
.station-v3-icon.is-rain{
    color:#258aca;
    background:#e7f4fb;
}

.station-v3-icon.is-dewpoint{
    color:#269d91;
    background:#e6f6f3;
}

.station-v3-icon.is-pressure{
    color:#7765c7;
    background:#f0edfb;
}

.station-v3-icon.is-wind{
    color:#647d8c;
    background:#edf3f5;
}

.station-v3-current-copy{
    min-width:0;
}

.station-v3-current-label{
    display:block;
    margin-bottom:2px;

    color:#81949e;

    font-size:8px;
    line-height:1.05;
    font-weight:900;
    text-transform:uppercase;
}

.station-v3-current strong{
    display:block;

    color:#173f56;

    font-size:13px;
    line-height:1.1;
    font-weight:900;

    text-transform:none;
}


/* ESTREMI */

.station-v3-extremes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.station-v3-extreme{
    display:flex;
    align-items:center;
    gap:8px;

    min-width:0;
    min-height:58px;

    padding:8px 9px;

    border:1px solid #dce7eb;
    border-radius:12px;

    background:#fff;
}

.station-v3-extreme-copy{
    min-width:0;
}

.station-v3-extreme-label{
    display:block;
    margin-bottom:2px;

    color:#81949e;

    font-size:8px;
    line-height:1.05;
    font-weight:900;
    text-transform:uppercase;
}

.station-v3-extreme strong{
    display:block;

    font-size:14px;
    line-height:1.05;
    font-weight:900;

    text-transform:none;
}

.station-v3-extreme small{
    display:block;

    margin-top:3px;

    color:#8799a2;

    font-size:8px;
    font-weight:800;
}


/* FOOTER */

.station-v3-updated{
    margin-top:14px;
    padding-top:10px;

    border-top:1px solid #dce7eb;

    color:#899ba3;

    font-size:9px;
    text-align:center;
}

.station-v3-open{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:12px;
    padding:12px 14px;

    border-radius:13px;

    background:#1489b1;
    color:#fff;

    text-decoration:none;

    font-size:12px;
    font-weight:900;
}

.station-v3-open span{
    font-size:18px;
}


/* MOBILE */

@media(max-width:700px){

    .rete-station-panel-content{
        padding:
            calc(15px + env(safe-area-inset-top))
            13px
            calc(20px + env(safe-area-inset-bottom));
    }

    .station-v3-head h3{
        font-size:25px;
    }

    .station-v3-nav{
        margin:11px 0;
    }

    .station-v3-main{
        margin-bottom:13px;
        padding:11px 12px;
    }

    .station-v3-main strong{
        font-size:27px;
    }

    .station-v3-current-grid,
    .station-v3-extremes{
        gap:6px;
    }

    .station-v3-current{
        min-height:51px;
        padding:7px 8px;
    }

    .station-v3-extreme{
        min-height:54px;
        padding:7px 8px;
    }
}