/* ============================================================
   OROSEIMETEO
   RETE METEO — ESTREMI DELLA RETE
   ============================================================ */


/* ------------------------------------------------------------
   SEZIONE
   ------------------------------------------------------------ */

.rete-extremes {
    margin: 0 0 24px;
    padding: 18px;

    border: 1px solid rgba(28, 70, 94, .10);
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafc 100%
        );

    box-shadow:
        0 8px 24px rgba(25, 59, 78, .045);
}


/* ------------------------------------------------------------
   TESTATA
   ------------------------------------------------------------ */

.rete-extremes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 15px;
}


.rete-extremes-title {
    min-width: 0;
}


.rete-extremes-title h2 {
    margin: 0;

    color: #173b51;

    font-size: 1.16rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.015em;
}


.rete-extremes-title p {
    max-width: 620px;

    margin: 5px 0 0;

    color: #70818b;

    font-size: .80rem;
    line-height: 1.4;
    font-weight: 500;
}


.rete-extremes-date {
    flex: 0 0 auto;

    padding: 5px 9px;

    border-radius: 999px;

    background: #edf4f7;

    color: #607681;

    font-size: .70rem;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
}


/* ------------------------------------------------------------
   GRIGLIA DESKTOP
   ------------------------------------------------------------ */

.rete-extremes-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 10px;
}


/* ------------------------------------------------------------
   CARD BASE
   ------------------------------------------------------------ */

.rete-extreme-card {
    --extreme-accent: #79909d;
    --extreme-bg: #ffffff;

    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

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

    padding:
        15px
        14px
        13px
        17px;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid rgba(31, 72, 94, .10);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            var(--extreme-bg) 0%,
            #ffffff 72%
        );

    color: #173b51;

    font: inherit;
    text-align: left;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 3px 9px rgba(22, 56, 75, .035);

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


/*
 * Barra cromatica laterale:
 * più pulita della vecchia riga superiore.
 */
.rete-extreme-card::before {
    content: "";

    position: absolute;

    top: 13px;
    bottom: 13px;
    left: 0;

    width: 4px;

    border-radius:
        0 5px 5px 0;

    background:
        var(--extreme-accent);
}


@media (hover: hover) and (pointer: fine) {

    .rete-extreme-card:hover {
        transform:
            translateY(-2px);

        border-color:
            rgba(31, 72, 94, .18);

        box-shadow:
            0 8px 18px
            rgba(22, 56, 75, .075);
    }

}


.rete-extreme-card:focus-visible {
    outline:
        3px solid
        rgba(26, 132, 178, .20);

    outline-offset: 2px;
}


/* ------------------------------------------------------------
   COLORI
   ------------------------------------------------------------ */

.rete-extreme-card.is-min {
    --extreme-accent: #4c8dc8;
    --extreme-bg: #f4f9fd;
}


.rete-extreme-card.is-max {
    --extreme-accent: #d86547;
    --extreme-bg: #fff7f4;
}


.rete-extreme-card.is-heat {
    --extreme-accent: #df973d;
    --extreme-bg: #fff9ef;
}


.rete-extreme-card.is-dew {
    --extreme-accent: #42a78d;
    --extreme-bg: #f2faf7;
}


.rete-extreme-card.is-gust {
    --extreme-accent: #507e98;
    --extreme-bg: #f4f8fa;
}


.rete-extreme-card.is-rain {
    --extreme-accent: #4086b5;
    --extreme-bg: #f3f9fd;
}


/* ------------------------------------------------------------
   CONTENUTO CARD
   ------------------------------------------------------------ */

.rete-extreme-label {
    display: block;

    width: 100%;

    margin-bottom: 8px;

    color: #72848e;

    font-size: .67rem;
    line-height: 1.2;
    font-weight: 800;

    letter-spacing: .035em;
    text-transform: uppercase;
}


.rete-extreme-value {
    display: block;

    width: 100%;

    margin-bottom: 8px;

    color: #173b51;

    font-size: 1.45rem;
    line-height: 1.05;
    font-weight: 850;

    letter-spacing: -.035em;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.rete-extreme-station {
    display: block;

    width: 100%;

    margin-top: auto;

    color: #344f5e;

    font-size: .78rem;
    line-height: 1.2;
    font-weight: 750;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.rete-extreme-meta {
    display: block;

    width: 100%;

    margin-top: 3px;

    color: #84939b;

    font-size: .67rem;
    line-height: 1.2;
    font-weight: 550;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ------------------------------------------------------------
   CARD SENZA DATO
   ------------------------------------------------------------ */

.rete-extreme-card.is-empty {
    cursor: default;

    opacity: .78;
}


.rete-extreme-card.is-empty::before {
    opacity: .55;
}


.rete-extreme-card.is-empty:hover {
    transform: none;
    box-shadow:
        0 3px 9px
        rgba(22, 56, 75, .035);
}


.rete-extreme-card.is-empty
.rete-extreme-value {
    margin-top: 3px;

    color: #536a77;

    font-size: .96rem;
    line-height: 1.25;
    font-weight: 750;

    letter-spacing: 0;

    white-space: normal;
}


.rete-extreme-card.is-empty
.rete-extreme-station,

.rete-extreme-card.is-empty
.rete-extreme-meta {
    display: none;
}


/* ------------------------------------------------------------
   CARICAMENTO
   ------------------------------------------------------------ */

.rete-extreme-card.is-loading {
    pointer-events: none;
}


.rete-extreme-card.is-loading
.rete-extreme-value,

.rete-extreme-card.is-loading
.rete-extreme-station,

.rete-extreme-card.is-loading
.rete-extreme-meta {
    color: transparent;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #e9eff2 25%,
            #f5f8f9 50%,
            #e9eff2 75%
        );

    background-size:
        200% 100%;

    animation:
        reteExtremeLoading
        1.2s linear infinite;
}


.rete-extreme-card.is-loading
.rete-extreme-value {
    width: 58%;
}


.rete-extreme-card.is-loading
.rete-extreme-station {
    width: 82%;
}


.rete-extreme-card.is-loading
.rete-extreme-meta {
    width: 45%;
}


@keyframes reteExtremeLoading {

    from {
        background-position:
            200% 0;
    }

    to {
        background-position:
            -200% 0;
    }

}


/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .rete-extremes-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* ============================================================
   MOBILE
   NIENTE SCORRIMENTO ORIZZONTALE
   ============================================================ */

@media (max-width: 620px) {

    .rete-extremes {
        margin-bottom: 18px;

        padding: 13px;

        border-radius: 17px;

        box-shadow:
            0 5px 16px
            rgba(25, 59, 78, .035);
    }


    /* --------------------------------------------------------
       Testata più compatta
       -------------------------------------------------------- */

    .rete-extremes-head {
        align-items: flex-start;

        gap: 8px;

        margin-bottom: 11px;
    }


    .rete-extremes-title h2 {
        font-size: 1.02rem;
        line-height: 1.15;
    }


    .rete-extremes-title p {
        margin-top: 4px;

        font-size: .70rem;
        line-height: 1.32;
    }


    .rete-extremes-date {
        padding: 4px 7px;

        font-size: .61rem;
    }


    /* --------------------------------------------------------
       2 colonne.
       Quinta card a larghezza piena.
       -------------------------------------------------------- */

    .rete-extremes-grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin: 0;
        padding: 0;

        overflow: visible;

        scroll-snap-type: none;
    }


    .rete-extreme-card {
        min-height: 96px;

        padding:
            11px
            10px
            10px
            14px;

        border-radius: 13px;
    }


    /*
     * Quinta card:
     * Pioggia a tutta larghezza.
     */
    


    .rete-extreme-card::before {
        top: 10px;
        bottom: 10px;

        width: 3px;
    }


    .rete-extreme-label {
        margin-bottom: 6px;

        font-size: .59rem;
        line-height: 1.18;

        white-space: normal;
    }


    .rete-extreme-value {
        margin-bottom: 6px;

        font-size: 1.20rem;
        line-height: 1.05;
    }


    .rete-extreme-station {
        font-size: .70rem;
        line-height: 1.15;
    }


    .rete-extreme-meta {
        margin-top: 2px;

        font-size: .60rem;
    }


    /*
     * Sulla card larga della pioggia sfruttiamo
     * meglio lo spazio disponibile.
     */
    


    .rete-extreme-card.is-empty
    .rete-extreme-value {
        font-size: .84rem;
        line-height: 1.2;
    }

}


/* ------------------------------------------------------------
   TELEFONI STRETTI
   ------------------------------------------------------------ */

@media (max-width: 380px) {

    .rete-extremes {
        padding: 11px;
    }


    .rete-extremes-grid {
        gap: 7px;
    }


    .rete-extreme-card {
        min-height: 94px;

        padding:
            10px
            9px
            9px
            13px;
    }


    .rete-extreme-value {
        font-size: 1.10rem;
    }


    .rete-extreme-station {
        font-size: .66rem;
    }

}


/* ------------------------------------------------------------
   ACCESSIBILITÀ
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .rete-extreme-card {
        transition: none;
    }


    .rete-extreme-card.is-loading
    .rete-extreme-value,

    .rete-extreme-card.is-loading
    .rete-extreme-station,

    .rete-extreme-card.is-loading
    .rete-extreme-meta {
        animation: none;
    }

}