/* ============================================================
   OROSEIMETEO · VENTI E ROSA DEI VENTI
   ============================================================ */

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

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

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

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

.wind-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;
}

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

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

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

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

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

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

/* ============================================================
   ROSA INTERATTIVA
   ============================================================ */

.wind-interactive-grid{
    display:grid;
    grid-template-columns:minmax(420px,1fr) minmax(320px,.75fr);
    gap:16px;
    align-items:stretch;
}

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

.wind-rose-card{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:560px;
    padding:24px;
}

.wind-rose{
    position:relative;
    width:min(470px,90vw);
    aspect-ratio:1;
    border:1px solid #dce8ed;
    border-radius:50%;
    background:#fbfdfe;
}

.wind-ring{
    position:absolute;
    left:50%;
    top:50%;
    border:1px solid #dce8ed;
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.wind-ring-outer{width:82%;height:82%;}
.wind-ring-mid{width:60%;height:60%;}
.wind-ring-inner{width:36%;height:36%;}

.wind-cross{
    position:absolute;
    left:50%;
    top:50%;
    width:78%;
    height:1px;
    background:#e0eaee;
    transform-origin:center;
}

.wind-cross-ns{transform:translate(-50%,-50%) rotate(90deg);}
.wind-cross-ew{transform:translate(-50%,-50%);}
.wind-cross-diag-a{transform:translate(-50%,-50%) rotate(45deg);}
.wind-cross-diag-b{transform:translate(-50%,-50%) rotate(-45deg);}

.wind-dir{
    position:absolute;
    z-index:4;
    color:#647f90;
    font-size:11px;
    line-height:1;
    font-weight:800;
}

.wind-dir.n{left:50%;top:4%;transform:translateX(-50%);}
.wind-dir.nne{left:69%;top:8%;}
.wind-dir.ne{right:11%;top:18%;}
.wind-dir.ene{right:4%;top:33%;}
.wind-dir.e{right:3%;top:50%;transform:translateY(-50%);}
.wind-dir.ese{right:5%;bottom:31%;}
.wind-dir.se{right:12%;bottom:18%;}
.wind-dir.sse{right:28%;bottom:8%;}
.wind-dir.s{left:50%;bottom:4%;transform:translateX(-50%);}
.wind-dir.sso{left:28%;bottom:8%;}
.wind-dir.so{left:12%;bottom:18%;}
.wind-dir.oso{left:5%;bottom:31%;}
.wind-dir.o{left:3%;top:50%;transform:translateY(-50%);}
.wind-dir.ono{left:4%;top:33%;}
.wind-dir.no{left:11%;top:18%;}
.wind-dir.nno{left:28%;top:8%;}

.wind-needle{
    position:absolute;
    inset:0;
    z-index:5;
    transform:rotate(315deg);
    transition:transform .35s ease;
}

.wind-needle svg{
    display:block;
    width:100%;
    height:100%;
}

.wind-needle path{
    fill:#168bb4;
}

.wind-needle circle{
    fill:#17465f;
}

.wind-center{
    position:absolute;
    left:50%;
    top:50%;
    z-index:6;
    width:130px;
    height:130px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid #dce8ed;
    border-radius:50%;
    background:#fff;
    transform:translate(-50%,-50%);
    box-shadow:0 7px 20px rgba(24,77,105,.06);
}

.wind-center span{
    color:#8196a2;
    font-size:10px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.wind-center strong{
    margin-top:4px;
    color:#17465f;
    font-size:27px;
    line-height:1;
    font-weight:800;
}

.wind-center small{
    margin-top:5px;
    color:#168bb4;
    font-size:12px;
    font-weight:800;
}

/* ============================================================
   CONTROLLI
   ============================================================ */

.wind-control-card{
    padding:22px;
}

.wind-control-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

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

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

.wind-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;
}

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

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

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

.wind-result-panel{
    display:grid;
    gap:9px;
    margin-top:16px;
}

.wind-result-panel > div{
    padding:14px 15px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:13px;
    background:#fbfdfe;
}

.wind-result-panel span{
    display:block;
    color:#7c919e;
    font-size:10px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.wind-result-panel strong{
    display:block;
    margin-top:5px;
    color:#17465f;
    font-size:20px;
    line-height:1.2;
    font-weight:800;
}

.wind-quick-buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin-top:16px;
}

.wind-quick-buttons button{
    min-height:39px;
    border:1px solid #d4e4eb;
    border-radius:10px;
    background:#fff;
    color:#315e76;
    font:inherit;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.wind-quick-buttons button:hover{
    background:#f4fafc;
}

/* ============================================================
   OTTO VENTI PRINCIPALI
   ============================================================ */

.wind-main-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

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

.wind-name-dir{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    height:34px;
    padding:0 9px;
    border:1px solid #d6e7ed;
    border-radius:10px;
    background:#f4fafc;
    color:#168bb4;
    font-size:12px;
    font-weight:800;
}

.wind-name-card h3{
    margin:13px 0 0;
    color:#17465f;
    font-size:21px;
    line-height:1.2;
    font-weight:800;
}

.wind-name-card p{
    margin:8px 0 0;
    color:#607c8d;
    font-size:14px;
    line-height:1.6;
}

/* ============================================================
   TABELLA 16 DIREZIONI
   ============================================================ */

.wind-direction-table{
    overflow:hidden;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.045);
}

.wind-direction-row{
    display:grid;
    grid-template-columns:130px 160px minmax(0,1fr);
    align-items:center;
    min-height:50px;
    border-bottom:1px solid #edf3f6;
}

.wind-direction-row:last-child{
    border-bottom:0;
}

.wind-direction-row > *{
    padding:12px 16px;
}

.wind-direction-row strong{
    color:#17465f;
    font-size:15px;
    font-weight:800;
}

.wind-direction-row span{
    color:#607c8d;
    font-size:14px;
    line-height:1.45;
}

.wind-direction-row.is-head{
    min-height:44px;
    background:#f7fafc;
}

.wind-direction-row.is-head span{
    color:#708896;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

/* ============================================================
   BEAUFORT
   ============================================================ */

.wind-beaufort-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.wind-beaufort-grid article{
    min-width:0;
    padding:16px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:14px;
    background:#fff;
}

.wind-beaufort-grid span{
    display:block;
    color:#168bb4;
    font-size:12px;
    font-weight:800;
}

.wind-beaufort-grid strong{
    display:block;
    margin-top:6px;
    color:#17465f;
    font-size:17px;
    line-height:1.25;
    font-weight:800;
}

.wind-beaufort-grid small{
    display:block;
    margin-top:5px;
    color:#7f95a1;
    font-size:12px;
}

/* ============================================================
   OROSEI
   ============================================================ */

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

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

.wind-local-card h3{
    margin:0;
    color:#17465f;
    font-size:21px;
    line-height:1.2;
    font-weight:800;
}

.wind-local-card p{
    margin:10px 0 0;
    color:#587486;
    font-size:15px;
    line-height:1.7;
}

.wind-note-section{
    padding-top:26px;
    padding-bottom:52px;
}

.wind-note-card{
    padding:24px;
    border:1px solid rgba(84,120,136,.14);
    border-radius:16px;
    background:#fbfdfe;
}

.wind-note-card p{
    margin:13px 0 0;
    color:#587486;
    font-size:16px;
    line-height:1.72;
}

.wind-note-card strong{
    color:#315e76;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:980px){

    .wind-interactive-grid{
        grid-template-columns:1fr;
    }

    .wind-main-grid,
    .wind-beaufort-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .wind-local-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){

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

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

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

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

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

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

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

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

    .wind-rose-card{
        min-height:auto;
        padding:14px;
    }

    .wind-rose{
        width:min(100%,470px);
    }

    .wind-center{
        width:112px;
        height:112px;
    }

    .wind-center strong{
        font-size:24px;
    }

    .wind-control-card{
        padding:18px;
    }

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

    .wind-name-card{
        padding:16px;
    }

    .wind-name-card h3{
        font-size:19px;
    }

    .wind-name-card p{
        font-size:13px;
    }

    .wind-direction-table{
        overflow-x:auto;
    }

    .wind-direction-row{
        min-width:600px;
        grid-template-columns:110px 140px minmax(250px,1fr);
    }

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

    .wind-local-card{
        padding:18px 16px;
    }

    .wind-local-card h3{
        font-size:20px;
    }

    .wind-local-card p,
    .wind-note-card p{
        font-size:15px;
        line-height:1.7;
    }

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

@media(max-width:430px){

    .wind-control-fields{
        grid-template-columns:1fr;
    }

    .wind-quick-buttons{
        grid-template-columns:repeat(4,1fr);
    }

    .wind-main-grid,
    .wind-beaufort-grid{
        grid-template-columns:1fr 1fr;
    }

    .wind-dir{
        font-size:9px;
    }

    .wind-center{
        width:102px;
        height:102px;
    }
}