/* ============================================================
   OROSEIMETEO · INDICI BIOMETEOROLOGICI
   ============================================================ */

.bio-page{
    background:#fff;
    color:#17465f;
}

.bio-shell{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
}

.bio-hero{
    padding:42px 0 36px;
    border-bottom:1px solid #edf3f6;
    background:#fbfdfe;
}

.bio-kicker{
    display:block;
    color:#168bb4;
    font-size:14px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.bio-hero h1{
    margin:7px 0 14px;
    color:#17465f;
    font-size:clamp(44px,5.2vw,62px);
    line-height:1.02;
    font-weight:800;
    letter-spacing:-1.8px;
}

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

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

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

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

.bio-section-head h2,
.bio-note-card h2{
    margin:5px 0 0;
    color:#17465f;
    font-size:34px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.7px;
}

.bio-section-head > p{
    max-width:560px;
    margin:0;
    color:#708998;
    font-size:15px;
    line-height:1.65;
}

/* CALCOLATORE */

.bio-calculator{
    display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
    gap:16px;
    align-items:start;
}

.bio-input-panel{
    padding:22px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.055);
}

.bio-field{
    display:block;
}

.bio-field + .bio-field{
    margin-top:14px;
}

.bio-field > span{
    display:block;
    margin-bottom:7px;
    color:#617e8f;
    font-size:13px;
    line-height:1.35;
    font-weight:800;
}

.bio-input-wrap{
    display:flex;
    align-items:center;
    min-height:50px;
    overflow:hidden;
    border:1px solid #d6e5ec;
    border-radius:12px;
    background:#fff;
}

.bio-input-wrap input{
    min-width:0;
    flex:1 1 auto;
    height:48px;
    padding:0 13px;
    border:0;
    outline:0;
    background:transparent;
    color:#17465f;
    font:inherit;
    font-size:17px;
    font-weight:750;
}

.bio-input-wrap b{
    flex:0 0 auto;
    padding:0 13px;
    color:#79919e;
    font-size:13px;
}

.bio-calc-button{
    width:100%;
    min-height:48px;
    margin-top:18px;
    border:0;
    border-radius:12px;
    background:#168bb4;
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

.bio-calc-button:hover{
    background:#117da3;
}

.bio-input-note{
    margin:11px 0 0;
    color:#899ca7;
    font-size:12px;
    line-height:1.5;
}

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

.bio-result-card{
    min-width:0;
    padding:20px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.045);
}

.bio-result-card:last-child{
    grid-column:1 / -1;
}

.bio-result-card > span{
    display:block;
    color:#788f9c;
    font-size:12px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.bio-result-card strong{
    display:block;
    margin-top:9px;
    color:#17465f;
    font-size:34px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.7px;
}

.bio-result-card small{
    display:block;
    margin-top:9px;
    color:#7b929f;
    font-size:13px;
    line-height:1.45;
}

.bio-result-card[data-level="low"]{
    border-left:5px solid #4aa171;
}

.bio-result-card[data-level="medium"]{
    border-left:5px solid #d4a33e;
}

.bio-result-card[data-level="high"]{
    border-left:5px solid #d47740;
}

.bio-result-card[data-level="very-high"]{
    border-left:5px solid #ca5a58;
}

/* SPIEGAZIONI */

.bio-explain-grid,
.bio-thom-layout{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:16px;
    align-items:start;
}

.bio-explain-card,
.bio-scale-card,
.bio-thom-table,
.bio-feature-card,
.bio-note-card{
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.045);
}

.bio-explain-card{
    padding:22px;
}

.bio-explain-card h3,
.bio-feature-card h3{
    margin:0;
    color:#17465f;
    font-size:22px;
    line-height:1.2;
    font-weight:800;
}

.bio-explain-card p,
.bio-feature-card p,
.bio-note-card p{
    margin:11px 0 0;
    color:#587486;
    font-size:16px;
    line-height:1.72;
}

.bio-formula{
    padding:11px 13px;
    border-radius:10px;
    background:#f5fafc;
    color:#315e76 !important;
    font-size:14px !important;
    font-weight:800;
}

.bio-scale-card,
.bio-thom-table{
    overflow:hidden;
}

.bio-scale-card > div,
.bio-thom-table > div{
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    align-items:center;
    gap:14px;
    min-height:62px;
    padding:12px 16px;
    border-bottom:1px solid #edf3f6;
}

.bio-scale-card > div:last-child,
.bio-thom-table > div:last-child{
    border-bottom:0;
}

.bio-scale-card strong,
.bio-thom-table strong{
    color:#17465f;
    font-size:18px;
    font-weight:800;
}

.bio-scale-card span,
.bio-thom-table span{
    color:#607c8d;
    font-size:14px;
    line-height:1.45;
}

/* FEATURE */

.bio-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.bio-feature-card{
    min-width:0;
    padding:20px;
}

.bio-feature-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 8px;
    margin-bottom:14px;
    border:1px solid #d7e7ed;
    border-radius:10px;
    background:#f5fafc;
    color:#168bb4;
    font-size:11px;
    font-weight:800;
}

.bio-note-card{
    padding:24px;
    background:#fbfdfe;
}

@media(max-width:900px){

    .bio-calculator,
    .bio-explain-grid,
    .bio-thom-layout{
        grid-template-columns:1fr;
    }

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

@media(max-width:700px){

    .bio-shell{
        width:min(100% - 22px,1180px);
    }

    .bio-hero{
        padding:30px 0 28px;
    }

    .bio-hero h1{
        font-size:42px;
        line-height:1.04;
        letter-spacing:-1.1px;
    }

    .bio-hero p{
        font-size:16px;
        line-height:1.68;
    }

    .bio-section{
        padding:32px 0;
    }

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

    .bio-section-head h2,
    .bio-note-card h2{
        font-size:30px;
    }

    .bio-section-head > p{
        font-size:15px;
    }

    .bio-input-panel{
        padding:18px;
        border-radius:15px;
    }

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

    .bio-result-card{
        padding:17px 15px;
        border-radius:14px;
    }

    .bio-result-card > span{
        font-size:11px;
    }

    .bio-result-card strong{
        font-size:28px;
    }

    .bio-result-card small{
        font-size:12px;
    }

    .bio-explain-card{
        padding:19px 17px;
    }

    .bio-explain-card h3,
    .bio-feature-card h3{
        font-size:21px;
    }

    .bio-explain-card p,
    .bio-feature-card p,
    .bio-note-card p{
        font-size:15px;
        line-height:1.7;
    }

    .bio-scale-card > div,
    .bio-thom-table > div{
        grid-template-columns:92px minmax(0,1fr);
        min-height:58px;
        padding:11px 13px;
    }

    .bio-scale-card strong,
    .bio-thom-table strong{
        font-size:16px;
    }

    .bio-scale-card span,
    .bio-thom-table span{
        font-size:13px;
    }

    .bio-feature-card{
        padding:18px 16px;
    }

    .bio-note-card{
        padding:20px 18px;
    }
}

@media(max-width:430px){

    .bio-results{
        grid-template-columns:1fr;
    }

    .bio-result-card:last-child{
        grid-column:auto;
    }

    .bio-result-card strong{
        font-size:30px;
    }
}