/* ============================================================
   OROSEIMETEO · RECORD ASSOLUTI
   Stile coordinato al portale
   ============================================================ */


/* ============================================================
   BASE
   ============================================================ */

.records-section{
    padding:40px 0;
}

.records-eyebrow{
    display:block;
    color:#168bb4;
    font-size:13px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.065em;
    text-transform:uppercase;
}


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

.records-hero{
    padding:48px 0;
    border-bottom:1px solid #edf3f6;
    background:#fbfdfe;
}

.records-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);
    gap:42px;
    align-items:center;
}

.records-hero-copy{
    min-width:0;
}

.records-hero-copy h1{
    margin:8px 0 18px;
    color:#17465f;
    font-size:54px;
    line-height:1.03;
    font-weight:800;
    letter-spacing:-1.6px;
}

.records-hero-copy p{
    max-width:780px;
    margin:0;
    color:#567486;
    font-size:19px;
    line-height:1.7;
}

.records-hero-copy strong{
    color:#315e76;
}

.records-hero-meta{
    padding:26px 27px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.records-hero-meta span{
    display:block;
    color:#168bb4;
    font-size:12px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.records-hero-meta strong{
    display:block;
    margin-top:8px;
    color:#17465f;
    font-size:24px;
    line-height:1.2;
    font-weight:800;
}

.records-hero-meta small{
    display:block;
    margin-top:9px;
    color:#78909e;
    font-size:14px;
    line-height:1.55;
}


/* ============================================================
   INTRODUZIONE
   ============================================================ */

.records-intro{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:34px;
}

.records-intro > div{
    min-width:0;
}

.records-intro h2{
    margin:7px 0 0;
    color:#17465f;
    font-size:36px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.8px;
}

.records-intro > p{
    max-width:560px;
    margin:0;
    color:#6c8797;
    font-size:17px;
    line-height:1.65;
}


/* ============================================================
   AREA RECORD
   ============================================================ */

.records-section-data{
    padding-top:4px;
    padding-bottom:56px;
    background:#fbfdfe;
    border-top:1px solid #edf3f6;
}

.records-groups{
    display:grid;
    gap:18px;
}


/* ============================================================
   CATEGORIA
   ============================================================ */

.record-group{
    overflow:hidden;

    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;

    background:#fff;

    box-shadow:
        0 7px 22px rgba(24,77,105,.045);
}


/* ============================================================
   TESTATA CATEGORIA
   ============================================================ */

.record-group-head{
    margin:0;
    padding:19px 24px 18px;

    border-bottom:1px solid #e8f0f4;

    background:#fbfdfe;

    text-align:center;
}

.record-group-head .records-eyebrow{
    text-align:center;
}

.record-group-head h2{
    margin:5px 0 0;

    color:#17465f;

    font-size:28px;
    line-height:1.12;

    font-weight:800;
    letter-spacing:-.5px;
}


/* ============================================================
   GRIGLIE
   ============================================================ */

.record-grid{
    display:grid;
    gap:12px;

    padding:18px;
}

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

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


/* ============================================================
   SINGOLO RECORD
   ============================================================ */

.record-item{
    min-width:0;
    min-height:160px;

    display:flex;
    flex-direction:column;

    padding:19px 20px;

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

    background:#fff;

    box-shadow:
        0 3px 12px rgba(24,77,105,.025);
}

.record-item-head{
    display:flex;
    align-items:center;
    gap:9px;

    min-height:30px;
}

.record-type{
    flex:0 0 auto;

    min-width:43px;

    padding:6px 7px;

    border-radius:8px;

    font-size:10px;
    line-height:1;

    font-weight:800;
    letter-spacing:.04em;

    text-align:center;
}

.is-max .record-type{
    border:1px solid #efcec7;
    background:#fff7f5;
    color:#b84637;
}

.is-min .record-type{
    border:1px solid #cce2ef;
    background:#f4faff;
    color:#2c7eae;
}

.record-label{
    min-width:0;

    color:#647d8c;

    font-size:14px;
    line-height:1.35;

    font-weight:700;
}

.record-value{
    margin-top:17px;

    font-size:32px;
    line-height:1.06;

    font-weight:800;
    letter-spacing:-.6px;
}

.is-max .record-value{
    color:#b94738;
}

.is-min .record-value{
    color:#287faf;
}

.record-date{
    margin-top:10px;

    color:#4f6d7e;

    font-size:14px;
    line-height:1.4;
}

.record-note{
    margin-top:auto;
    padding-top:8px;

    color:#8b9faa;

    font-size:12px;
    line-height:1.4;
}


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

.records-archive-note{
    padding:23px 25px;

    border:1px solid rgba(84,120,136,.14);
    border-radius:15px;

    background:#fff;

    box-shadow:
        0 5px 17px rgba(24,77,105,.035);
}

.records-archive-note strong{
    display:block;

    color:#17465f;

    font-size:18px;
    line-height:1.35;
}

.records-archive-note p{
    max-width:1100px;

    margin:9px 0 0;

    color:#647f8f;

    font-size:15px;
    line-height:1.65;
}


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

@media(max-width:1050px){

    .records-hero-inner{
        grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);
        gap:30px;
    }

    .records-hero-copy h1{
        font-size:48px;
    }

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

    .record-grid-three .record-item:last-child:nth-child(odd){
        grid-column:1 / -1;
    }
}


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

@media(max-width:820px){

    .records-hero-inner{
        grid-template-columns:1fr;
    }

    .records-intro{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .records-intro > p{
        max-width:100%;
    }
}


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

@media(max-width:600px){

    /* Hero */

    .records-hero{
        padding:34px 0 36px;
    }

    .records-hero-inner{
        gap:22px;
    }

    .records-eyebrow{
        font-size:12px;
    }

    .records-hero-copy h1{
        margin:7px 0 15px;

        font-size:42px;
        line-height:1.04;

        letter-spacing:-1.1px;
    }

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

    .records-hero-meta{
        padding:21px 20px;

        border-radius:15px;
    }

    .records-hero-meta strong{
        font-size:22px;
    }

    .records-hero-meta small{
        font-size:13px;
    }


    /* Introduzione */

    .records-section{
        padding:34px 0;
    }

    .records-intro h2{
        font-size:31px;
        line-height:1.12;
    }

    .records-intro > p{
        font-size:16px;
        line-height:1.65;
    }


    /* Area */

    .records-section-data{
        padding-top:20px;
        padding-bottom:42px;
    }

    .records-groups{
        gap:13px;
    }


    /* Categoria */

    .record-group{
        border-radius:15px;
    }

    .record-group-head{
        padding:15px 16px 14px;
    }

    .record-group-head h2{
        margin-top:4px;

        font-size:25px;
        line-height:1.12;
    }


    /* Due colonne reali */

    .record-grid-two,
    .record-grid-three{
        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:8px;

        padding:10px;
    }


    /* ========================================================
       TERZO ELEMENTO DEI GRUPPI DA 3
       ======================================================== */

    .record-grid-three .record-item:last-child:nth-child(odd){
        grid-column:1 / -1;

        min-height:108px;

        display:grid;

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

        grid-template-areas:
            "head value"
            "note date";

        column-gap:16px;
        row-gap:7px;

        align-items:center;
    }

    .record-grid-three .record-item:last-child:nth-child(odd) .record-item-head{
        grid-area:head;
    }

    .record-grid-three .record-item:last-child:nth-child(odd) .record-value{
        grid-area:value;

        margin:0;

        text-align:right;
    }

    .record-grid-three .record-item:last-child:nth-child(odd) .record-date{
        grid-area:date;

        margin:0;

        text-align:right;
    }

    .record-grid-three .record-item:last-child:nth-child(odd) .record-note{
        grid-area:note;

        margin:0;
        padding:0;
    }


    /* Card */

    .record-item{
        min-height:151px;

        padding:14px 12px 13px;

        border-radius:12px;
    }

    .record-item-head{
        align-items:flex-start;

        gap:7px;

        min-height:40px;
    }

    .record-type{
        min-width:38px;

        padding:5px 6px;

        border-radius:7px;

        font-size:10px;
    }

    .record-label{
        font-size:12px;
        line-height:1.3;
    }

    .record-value{
        margin-top:11px;

        font-size:clamp(23px,6.1vw,27px);
        line-height:1.05;

        letter-spacing:-.4px;

        white-space:nowrap;
    }

    .record-date{
        margin-top:8px;

        font-size:11px;
        line-height:1.4;
    }

    .record-note{
        padding-top:6px;

        font-size:9px;
        line-height:1.4;
    }


    /* Nota */

    .records-archive-note{
        padding:20px 18px;

        border-radius:14px;
    }

    .records-archive-note strong{
        font-size:18px;
    }

    .records-archive-note p{
        font-size:14px;
        line-height:1.6;
    }
}


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

@media(max-width:390px){

    .records-hero-copy h1{
        font-size:40px;
    }

    .record-grid-two,
    .record-grid-three{
        gap:7px;
        padding:8px;
    }

    .record-item{
        padding:13px 10px 12px;
    }

    .record-label{
        font-size:11px;
    }

    .record-value{
        font-size:23px;
    }

    .record-date{
        font-size:10px;
    }

    .record-note{
        font-size:9px;
    }

    .record-grid-three .record-item:last-child:nth-child(odd){
        column-gap:10px;
    }
}