/* ============================================================
   OROSEIMETEO · INFO / L'OSSERVATORIO
   ============================================================ */


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

.info-section{
    padding:42px 0;
}

.info-section-soft{
    border-top:1px solid #edf3f6;
    border-bottom:1px solid #edf3f6;
    background:#fbfdfe;
}

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

.info-nowrap{
    white-space:nowrap;
}


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

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

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

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

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

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

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

.info-hero-photo{
    overflow:hidden;
    aspect-ratio:4 / 3;
    border:1px solid rgba(84,120,136,.14);
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.055);
}

.info-hero-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}


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

.info-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:34px;
    margin-bottom:25px;
}

.info-section-heading h2,
.info-intro-main h2,
.info-air-content h2,
.info-archive-copy h2,
.info-story-content h2{
    margin:7px 0 0;
    color:#17465f;
    font-size:36px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.8px;
}

.info-section-heading > p{
    max-width:550px;
    margin:0;
    color:#6c8797;
    font-size:17px;
    line-height:1.65;
}


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

.info-intro-main{
    max-width:100%;
    padding:31px 32px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-intro-main p{
    max-width:1100px;
    margin:18px 0 0;
    color:#536f80;
    font-size:18px;
    line-height:1.75;
}

.info-intro-main strong{
    color:#234f69;
}


/* ============================================================
   TERRITORIO E CLIMA
   ============================================================ */

.info-climate-section{
    border-top:1px solid #edf3f6;
    border-bottom:1px solid #edf3f6;
    background:#fbfdfe;
}

.info-climate-overview{
    display:block;
}

.info-climate-story{
    min-width:0;
    padding:31px 32px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-climate-story p{
    margin:0;
    color:#506f81;
    font-size:18px;
    line-height:1.78;
}

.info-climate-story p + p{
    margin-top:20px;
}

.info-climate-story strong{
    color:#17465f;
    font-weight:800;
}


/* ============================================================
   NUMERI CLIMA
   ============================================================ */

.info-climate-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.info-climate-stat{
    min-width:0;
    padding:20px 19px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:14px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.04);
}

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

.info-climate-stat strong{
    display:block;
    margin-top:8px;
    color:#17465f;
    font-size:27px;
    line-height:1.08;
    font-weight:800;
    white-space:nowrap;
}

.info-climate-stat small{
    display:block;
    margin-top:9px;
    color:#8297a3;
    font-size:14px;
    line-height:1.5;
}


/* ============================================================
   CARATTERISTICHE CLIMATICHE
   ============================================================ */

.info-climate-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:20px;
}

.info-climate-point{
    min-width:0;
    padding:24px 23px 25px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.04);
}

.info-climate-index{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:36px;
    padding:0 9px;
    border:1px solid #d7e7ed;
    border-radius:10px;
    background:#f6fafc;
    color:#168bb4;
    font-size:12px;
    line-height:1;
    font-weight:800;
}

.info-climate-point h3{
    margin:15px 0 0;
    color:#17465f;
    font-size:23px;
    line-height:1.22;
    font-weight:800;
}

.info-climate-point p{
    margin:12px 0 0;
    color:#587486;
    font-size:17px;
    line-height:1.72;
}

.info-climate-point strong{
    color:#315e76;
}


/* ============================================================
   GRAFICI CLIMATICI STORICI
   ============================================================ */

.info-climate-archive{
    margin-top:34px;
    padding-top:31px;
    border-top:1px solid #dfeaf0;
}

.info-climate-archive-head{
    max-width:850px;
    margin-bottom:21px;
}

.info-climate-archive-head h3{
    margin:7px 0 0;
    color:#17465f;
    font-size:32px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-.6px;
}

.info-climate-archive-head p{
    margin:12px 0 0;
    color:#6c8797;
    font-size:17px;
    line-height:1.65;
}

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

.info-climate-chart-card{
    min-width:0;
    margin:0;
    overflow:hidden;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-climate-chart-card.is-wide{
    grid-column:1 / -1;
}

.info-climate-chart-media{
    overflow:hidden;
    border-bottom:1px solid #edf3f6;
    background:#fff;
}

.info-climate-chart-media picture{
    display:block;
    width:100%;
}

.info-climate-chart-media img{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
}

.info-climate-chart-card figcaption{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:18px 20px 20px;
}

.info-climate-chart-card figcaption strong{
    color:#17465f;
    font-size:18px;
    line-height:1.4;
}

.info-climate-chart-card figcaption span{
    max-width:70%;
    color:#748d9c;
    font-size:15px;
    line-height:1.55;
    text-align:right;
}

.info-climate-note{
    margin:20px 0 0;
    color:#7b919e;
    font-size:14px;
    line-height:1.6;
}


/* ============================================================
   STAZIONI
   ============================================================ */

.info-station-list{
    display:grid;
    gap:18px;
}

.info-station-card{
    display:grid;
    grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);
    overflow:hidden;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-station-card.is-reverse{
    grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);
}

.info-station-card.is-reverse .info-station-media{
    order:2;
}

.info-station-card.is-reverse .info-station-content{
    order:1;
}

.info-station-media{
    min-height:320px;
    background:#fff;
}

.info-station-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.info-station-media-product{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:#fff;
}

.info-station-media-product img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:285px;
    object-fit:contain;
}

.info-station-content{
    position:relative;
    padding:34px;
}

.info-card-number{
    position:absolute;
    top:26px;
    right:28px;
    color:#d6e9f1;
    font-size:42px;
    line-height:1;
    font-weight:800;
}

.info-station-content h3,
.info-feature-content h3,
.info-service-card h3{
    margin:7px 0 15px;
    color:#17465f;
    font-size:26px;
    line-height:1.16;
    font-weight:800;
}

.info-station-content p,
.info-feature-content p{
    margin:11px 0 0;
    color:#557183;
    font-size:17px;
    line-height:1.72;
}

.info-station-content strong,
.info-feature-content strong{
    color:#31586d;
}


/* ============================================================
   WEBCAM
   ============================================================ */

.info-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.info-feature-card{
    overflow:hidden;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-feature-media{
    height:290px;
    background:#fff;
}

.info-feature-media-camera{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
}

.info-feature-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.info-feature-media-camera img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:235px;
    object-fit:contain;
}

.info-feature-content{
    padding:26px 27px 29px;
}


/* ============================================================
   QUALITÀ ARIA
   ============================================================ */

.info-air-card{
    display:grid;
    grid-template-columns:minmax(330px,.75fr) minmax(0,1.25fr);
    align-items:center;
    overflow:hidden;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-air-media{
    min-height:330px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:38px;
    background:#fff;
}

.info-air-media img{
    width:auto;
    height:auto;
    max-width:330px;
    max-height:245px;
    object-fit:contain;
}

.info-air-content{
    padding:36px 40px;
}

.info-air-content p{
    margin:17px 0 0;
    color:#557183;
    font-size:18px;
    line-height:1.72;
}

.info-air-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:22px;
}

.info-air-tags span{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 12px;
    border:1px solid #cee5ee;
    border-radius:9px;
    background:#f4fbfe;
    color:#1b698d;
    font-size:12px;
    font-weight:800;
}


/* ============================================================
   SERVIZI
   ============================================================ */

.info-service-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}

.info-service-card{
    min-width:0;
    padding:23px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.04);
}

.info-service-index{
    width:39px;
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    border:1px solid #d6e8ef;
    border-radius:10px;
    background:#f4fafc;
    color:#168bb4;
    font-size:12px;
    font-weight:800;
}

.info-service-card h3{
    font-size:21px;
}

.info-service-card p{
    margin:0;
    color:#607c8c;
    font-size:16px;
    line-height:1.7;
}


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

.info-archive-section{
    padding-top:32px;
    padding-bottom:56px;
}

.info-archive-card{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);
    gap:30px;
    padding:33px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fbfdfe;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-archive-copy p{
    margin:16px 0 0;
    color:#557183;
    font-size:18px;
    line-height:1.72;
}

.info-archive-points{
    display:grid;
    gap:10px;
}

.info-archive-points > div{
    padding:17px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:13px;
    background:#fff;
}

.info-archive-points strong{
    display:block;
    color:#17465f;
    font-size:17px;
    line-height:1.35;
}

.info-archive-points span{
    display:block;
    margin-top:5px;
    color:#8095a2;
    font-size:14px;
    line-height:1.5;
}


/* ============================================================
   LA MIA STORIA
   ============================================================ */

.info-story-card{
    display:flow-root;
    padding:34px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.05);
}

.info-story-side{
    float:left;
    width:36%;
    min-width:330px;
    margin:0 40px 26px 0;
    padding:24px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:15px;
    background:#fbfdfe;
}

.info-story-photo{
    overflow:hidden;
    margin:0;
    aspect-ratio:4 / 3;
    border:1px solid rgba(84,120,136,.14);
    border-radius:14px;
    background:#fff;
}

.info-story-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.info-story-timeline{
    display:grid;
    gap:0;
    margin-top:22px;
    border-top:1px solid #e5eef2;
}

.info-story-milestone{
    display:grid;
    grid-template-columns:64px minmax(0,1fr);
    gap:12px;
    padding:15px 0;
    border-bottom:1px solid #e5eef2;
}

.info-story-milestone strong{
    color:#168bb4;
    font-size:16px;
    line-height:1.5;
    font-weight:800;
}

.info-story-milestone span{
    color:#647f8f;
    font-size:15px;
    line-height:1.55;
}

.info-story-content{
    min-width:0;
}

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

.info-story-text{
    margin-top:22px;
}

.info-story-text p{
    margin:0 0 20px;
    color:#557183;
    font-size:17px;
    line-height:1.72;
}

.info-story-text strong{
    color:#31586d;
}

.info-story-signature{
    margin-bottom:0 !important;
    padding-top:4px;
    color:#17465f !important;
}


/* ============================================================
   TABLET / DESKTOP COMPATTO
   ============================================================ */

@media(max-width:1050px){

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

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

    .info-climate-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

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

    .info-climate-chart-card.is-wide{
        grid-column:auto;
    }

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

    .info-story-side{
        width:40%;
        min-width:300px;
        margin-right:32px;
    }
}


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

@media(max-width:820px){

    .info-hero-inner,
    .info-air-card,
    .info-archive-card{
        grid-template-columns:1fr;
    }

    .info-section-heading{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .info-station-card,
    .info-station-card.is-reverse{
        grid-template-columns:1fr;
    }

    .info-station-card.is-reverse .info-station-media,
    .info-station-card.is-reverse .info-station-content{
        order:initial;
    }

    .info-feature-grid{
        grid-template-columns:1fr;
    }

    .info-station-media{
        min-height:280px;
    }

    .info-story-side{
        float:none;
        width:auto;
        min-width:0;
        margin:0 0 26px;
    }

    .info-story-timeline{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0 22px;
    }
}


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

@media(max-width:600px){

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

    .info-hero-inner{
        gap:24px;
    }

    .info-eyebrow,
    .info-card-kicker{
        font-size:12px;
    }

    .info-hero-copy h1{
        margin:7px 0 16px;
        font-size:44px;
        line-height:1.04;
        letter-spacing:-1.2px;
    }

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

    .info-hero-photo{
        border-radius:15px;
    }


    /* Sezioni */

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

    .info-section-heading{
        margin-bottom:19px;
    }

    .info-section-heading h2,
    .info-intro-main h2,
    .info-air-content h2,
    .info-archive-copy h2,
    .info-story-content h2{
        font-size:31px;
        line-height:1.12;
    }

    .info-section-heading > p{
        font-size:16px;
        line-height:1.65;
    }


    /* Introduzione */

    .info-intro-main{
        padding:23px 20px;
        border-radius:15px;
    }

    .info-intro-main p{
        font-size:17px;
        line-height:1.72;
    }


    /* Clima */

    .info-climate-story{
        padding:23px 20px;
        border-radius:15px;
    }

    .info-climate-story p{
        font-size:17px;
        line-height:1.72;
    }

    .info-climate-story p + p{
        margin-top:18px;
    }

    .info-climate-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
        margin-top:14px;
    }

    .info-climate-stat{
        padding:16px 14px;
        border-radius:13px;
    }

    .info-climate-stat span{
        font-size:11px;
    }

    .info-climate-stat strong{
        font-size:24px;
    }

    .info-climate-stat small{
        font-size:13px;
        line-height:1.5;
    }

    .info-climate-points{
        grid-template-columns:1fr;
        gap:11px;
        margin-top:16px;
    }

    .info-climate-point{
        padding:21px 18px;
        border-radius:14px;
    }

    .info-climate-point h3{
        font-size:23px;
    }

    .info-climate-point p{
        font-size:17px;
        line-height:1.7;
    }


    /* Grafici clima */

    .info-climate-archive{
        margin-top:28px;
        padding-top:26px;
    }

    .info-climate-archive-head{
        margin-bottom:17px;
    }

    .info-climate-archive-head h3{
        font-size:28px;
    }

    .info-climate-archive-head p{
        font-size:16px;
        line-height:1.65;
    }

    .info-climate-chart-grid{
        gap:14px;
    }

    .info-climate-chart-card{
        border-radius:14px;
    }

    .info-climate-chart-media{
        overflow:hidden;
    }

    .info-climate-chart-media picture{
        display:block;
        width:100%;
    }

    .info-climate-chart-media img{
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
    }

    .info-climate-chart-card figcaption{
        display:block;
        padding:16px 17px 18px;
    }

    .info-climate-chart-card figcaption strong{
        display:block;
        font-size:17px;
    }

    .info-climate-chart-card figcaption span{
        display:block;
        max-width:none;
        margin-top:4px;
        font-size:14px;
        line-height:1.5;
        text-align:left;
    }

    .info-climate-note{
        margin-top:16px;
        font-size:13px;
        line-height:1.6;
    }


    /* Stazioni */

    .info-station-content{
        padding:25px 21px 27px;
    }

    .info-card-number{
        top:19px;
        right:19px;
        font-size:34px;
    }

    .info-station-content h3,
    .info-feature-content h3{
        font-size:24px;
    }

    .info-station-content p,
    .info-feature-content p{
        font-size:17px;
        line-height:1.7;
    }

    .info-station-media{
        min-height:245px;
        height:245px;
    }

    .info-station-media-product{
        padding:24px;
    }

    .info-station-media-product img{
        max-height:200px;
    }


    /* Webcam */

    .info-feature-media{
        height:245px;
    }

    .info-feature-media-camera{
        padding:22px;
    }

    .info-feature-media-camera img{
        max-height:200px;
    }

    .info-feature-content{
        padding:23px 21px 26px;
    }


    /* AirQ */

    .info-air-media{
        min-height:260px;
        padding:30px;
    }

    .info-air-media img{
        max-width:100%;
        max-height:210px;
    }

    .info-air-content{
        padding:26px 22px 28px;
    }

    .info-air-content p{
        font-size:17px;
        line-height:1.7;
    }

    .info-air-tags span{
        font-size:12px;
    }


    /* Servizi */

    .info-service-grid{
        grid-template-columns:1fr;
    }

    .info-service-card{
        padding:21px 18px;
    }

    .info-service-card h3{
        font-size:22px;
    }

    .info-service-card p{
        font-size:16px;
        line-height:1.68;
    }


    /* Archivio */

    .info-archive-section{
        padding-bottom:42px;
    }

    .info-archive-card{
        padding:25px 21px;
        gap:24px;
    }

    .info-archive-copy p{
        font-size:17px;
        line-height:1.7;
    }

    .info-archive-points strong{
        font-size:16px;
    }

    .info-archive-points span{
        font-size:13px;
    }


    /* La mia storia */

    .info-story-card{
        padding:20px;
        border-radius:15px;
    }

    .info-story-side{
        float:none;
        width:auto;
        min-width:0;
        margin:0 0 24px;
        padding:0;
        border:0;
        background:transparent;
    }

    .info-story-photo{
        border-radius:13px;
    }

    .info-story-timeline{
        grid-template-columns:1fr;
        margin-top:18px;
    }

    .info-story-milestone{
        grid-template-columns:58px minmax(0,1fr);
        gap:10px;
        padding:13px 0;
    }

    .info-story-milestone strong{
        font-size:15px;
    }

    .info-story-milestone span{
        font-size:15px;
        line-height:1.5;
    }

    .info-story-content{
        min-width:0;
    }

    .info-story-content h2{
        font-size:31px;
        line-height:1.12;
    }

    .info-story-text{
        margin-top:19px;
    }

    .info-story-text p{
        margin-bottom:18px;
        font-size:17px;
        line-height:1.7;
    }
}


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

@media(max-width:390px){

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

    .info-climate-stats{
        grid-template-columns:1fr;
    }

    .info-climate-stat strong{
        font-size:25px;
    }
}