/* ----------------------------------------- */
/* WIDEPORCH — misure e drenaggio */
/* qui comanda la tabella, lo schema del fondo sta sotto */
/* ----------------------------------------- */

.misure-testa { border-bottom: 1px solid #12253d; padding: 112px 0 30px }
.misure-testa .container { display: grid; gap: 16px }
.misure-testa .sottotitolo { color: var(--oro); margin-bottom: 10px }
.misure-testa h1 { font-size: 3.0rem; line-height: 1.12 }
.misure-testa .guida { font-size: 1.5rem; line-height: 1.8; opacity: .84; max-width: 58ch }

.misure-tavola { padding: 30px 0 10px; overflow-x: auto }
.tabella-misure { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 1.45rem }
.tabella-misure th {
    text-align: left;
    white-space: nowrap;
    padding: 0 14px 10px 0;
    border-bottom: 1px solid var(--bordo-grigio);
    font-size: 1.15rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oro);
}
.tabella-misure td { padding: 15px 14px 15px 0; border-bottom: 1px solid #12253d; white-space: nowrap }
.tabella-misure td.nome { font-weight: 600; white-space: normal }
.tabella-misure td.grosso { color: var(--arancio); font-weight: 600 }
.tabella-misure tr:hover td { background: #081422 }
.nota-tavola { margin-top: 18px; font-size: 1.35rem; line-height: 1.8; opacity: .62; max-width: 78ch }

.misure-fondo { background: var(--fondo-alt); margin-top: 34px; padding: 40px 0 44px }
.misure-fondo__griglia { display: grid; gap: 30px }
.fondo-schema svg { width: 100%; height: auto; max-width: 340px; margin: 0 auto; display: block }
.fondo-schema .vaso { fill: none; stroke: #ed6502; stroke-width: 2.5; stroke-linejoin: round }
.fondo-schema .strato.terra { fill: #2a2118 }
.fondo-schema .strato.argilla { fill: #3a3228 }
.fondo-schema .telo { stroke: #c9c4be; stroke-width: 2; stroke-dasharray: 5 4 }
.fondo-schema .coccio { fill: #ed6502 }
.fondo-schema .foro { stroke: #587086; stroke-width: 3; stroke-linecap: round }
.fondo-schema .eti { fill: #c9c4be; font-family: Jost, sans-serif; font-size: 10px; letter-spacing: .06em; text-transform: uppercase }
.fondo-schema .eti.piccola { fill: #8d877f; font-size: 9px }

.fondo-testo h2 { margin-bottom: 16px }
.fondo-passi { counter-reset: strato; display: grid; gap: 14px }
.fondo-passi li {
    counter-increment: strato;
    position: relative;
    padding-left: 34px;
    font-size: 1.5rem;
    line-height: 1.75;
    opacity: .88;
}
.fondo-passi li:before {
    content: counter(strato);
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--arancio);
    border-radius: 200px;
    color: var(--arancio);
    font-size: 1.2rem;
    line-height: 20px;
    text-align: center;
}
.fondo-coda { margin-top: 18px; border-left: 2px solid var(--arancio); padding-left: 14px; font-size: 1.4rem; line-height: 1.75; opacity: .78 }

.misure-coppia { display: grid; gap: 26px; padding: 44px 0 10px }
.coppia-testo h2 { margin-bottom: 14px }
.coppia-testo p { font-size: 1.55rem; line-height: 1.85; margin-bottom: 14px; opacity: .86 }
.coppia-testo a { text-decoration: underline }
.coppia-testo a:hover { color: var(--arancio) }
.coppia-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover }

@media only screen and (min-width: 768px) {
    .misure-testa { padding: 156px 0 40px }
    .misure-testa .container { grid-template-columns: 1fr 1fr; gap: 48px; align-items: end }
    .misure-testa h1 { font-size: 4.2rem }
    .misure-tavola { padding: 44px 0 10px }
    .tabella-misure { font-size: 1.6rem }
    .misure-fondo { margin-top: 52px; padding: 64px 0 68px }
    .misure-fondo__griglia { grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center }
    .misure-coppia { grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; padding: 64px 0 10px }
}