/* ============================================================
   OROSEIMETEO · TERREMOTI IN ITALIA
   Stile coordinato con Radar & Mappe, Report e nuovo portale.
   ============================================================ */

.quake-page{
    --quake-accent:#168bb4;
    --quake-title:#17465f;
    --quake-text:#607c8d;
    --quake-muted:#8196a2;
    --quake-line:rgba(84,120,136,.14);
    --quake-soft:#fbfdfe;
    color:var(--quake-title);
    background:#fff;
}

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

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

.quake-hero{
    padding:42px 0 34px;
    border-bottom:1px solid #edf3f6;
    background:#fff;
}

.quake-kicker{
    display:block;
    color:var(--quake-accent);
    font-size:14px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.075em;
    text-transform:uppercase;
}

.quake-hero h1{
    margin:7px 0 12px;
    color:var(--quake-title);
    font-size:clamp(44px,5vw,64px);
    line-height:1.02;
    font-weight:800;
    letter-spacing:-1.7px;
}

.quake-hero p{
    max-width:850px;
    margin:0;
    color:var(--quake-text);
    font-size:17px;
    line-height:1.68;
}

/* ============================================================
   FILTRI
   ============================================================ */

.quake-toolbar-section{
    padding:15px 0;
    border-bottom:1px solid #edf3f6;
    background:#fff;
}

.quake-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
}

.quake-filter-block{
    min-width:0;
}

.quake-filter-label{
    display:block;
    margin-bottom:7px;
    color:#788f9c;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.quake-period-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.quake-period-buttons button,
.quake-refresh,
.quake-map-topbar button,
.quake-event-map-button,
.quake-highlight-map,
.quake-more{
    font:inherit;
    cursor:pointer;
}

.quake-period-buttons button{
    min-height:42px;
    padding:0 15px;
    border:1px solid #d2e1e8;
    border-radius:11px;
    background:#fff;
    color:#527183;
    font-size:13px;
    line-height:1;
    font-weight:800;
}

.quake-period-buttons button.is-active{
    border-color:var(--quake-accent);
    background:var(--quake-accent);
    color:#fff;
}

.quake-filter-mag select{
    min-height:42px;
    min-width:180px;
    padding:0 38px 0 12px;
    border:1px solid #d2e1e8;
    border-radius:11px;
    background:#fff;
    color:var(--quake-title);
    font:inherit;
    font-size:13px;
    font-weight:700;
}

.quake-refresh{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:0 15px;
    border:1px solid #d2e1e8;
    border-radius:11px;
    background:#fff;
    color:#315e76;
    font-size:13px;
    line-height:1;
    font-weight:800;
}

.quake-refresh span{
    font-size:18px;
}

.quake-refresh.is-loading span{
    animation:quakeSpin .75s linear infinite;
}

.quake-refresh:disabled{
    cursor:wait;
    opacity:.68;
}

@keyframes quakeSpin{
    to{transform:rotate(360deg)}
}

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

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

.quake-overview-section,
.quake-highlight-section,
.quake-info-section{
    background:var(--quake-soft);
}

.quake-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:18px;
}

.quake-section-head h2{
    margin:5px 0 0;
    color:var(--quake-title);
    font-size:32px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.7px;
}

.quake-section-head > p{
    max-width:590px;
    margin:0;
    color:#708998;
    font-size:14px;
    line-height:1.6;
}

/* ============================================================
   STATO + RIEPILOGO
   ============================================================ */

.quake-status-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:14px;
}

.quake-live-state{
    display:flex;
    align-items:center;
    gap:11px;
}

.quake-live-dot{
    width:10px;
    height:10px;
    flex:0 0 10px;
    border-radius:50%;
    background:#9badb7;
    box-shadow:0 0 0 5px rgba(155,173,183,.12);
}

.quake-live-state[data-status="online"] .quake-live-dot{
    background:#38a86a;
    box-shadow:0 0 0 5px rgba(56,168,106,.12);
}

.quake-live-state[data-status="stale"] .quake-live-dot{
    background:#d3a13b;
    box-shadow:0 0 0 5px rgba(211,161,59,.12);
}

.quake-live-state[data-status="error"] .quake-live-dot{
    background:#c85a5a;
    box-shadow:0 0 0 5px rgba(200,90,90,.12);
}

.quake-live-state small{
    display:block;
    color:#7f95a1;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.quake-live-state strong{
    display:block;
    margin-top:3px;
    color:#315e76;
    font-size:14px;
    line-height:1.3;
    font-weight:800;
}

.quake-updated{
    color:#8095a2;
    font-size:12px;
    line-height:1.4;
    font-weight:700;
}

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

.quake-summary-card{
    min-width:0;
    padding:18px 17px;
    border:1px solid var(--quake-line);
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.045);
}

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

.quake-summary-card strong{
    display:block;
    margin-top:7px;
    color:var(--quake-title);
    font-size:30px;
    line-height:1.05;
    font-weight:800;
    letter-spacing:-.6px;
}

.quake-summary-card small{
    display:block;
    margin-top:8px;
    overflow:hidden;
    color:#8498a5;
    font-size:12px;
    line-height:1.45;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ============================================================
   MAPPA
   ============================================================ */

.quake-map-card{
    overflow:hidden;
    border:1px solid var(--quake-line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 22px rgba(24,77,105,.055);
}

.quake-map-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 16px;
    border-bottom:1px solid #edf3f6;
}

.quake-map-topbar strong{
    display:block;
    color:var(--quake-title);
    font-size:16px;
    line-height:1.3;
    font-weight:800;
}

.quake-map-topbar span{
    display:block;
    margin-top:3px;
    color:#8498a5;
    font-size:12px;
    line-height:1.4;
}

.quake-map-topbar button{
    flex:0 0 auto;
    min-height:38px;
    padding:0 12px;
    border:1px solid #d2e1e8;
    border-radius:10px;
    background:#fff;
    color:#315e76;
    font-size:12px;
    line-height:1;
    font-weight:800;
}

.quake-map{
    width:100%;
    height:590px;
    background:#edf3f6;
}

.quake-map-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:13px 16px;
    border-top:1px solid #edf3f6;
}

.quake-map-legend{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.quake-map-legend span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#607c8d;
    font-size:11px;
    line-height:1.3;
    font-weight:700;
}

.quake-map-legend i{
    width:10px;
    height:10px;
    border-radius:50%;
}

.quake-map-legend .m1{background:#69a9c4}
.quake-map-legend .m2{background:#338db4}
.quake-map-legend .m3{background:#d1a137}
.quake-map-legend .m4{background:#d97635}
.quake-map-legend .m5{background:#c65050}

.quake-map-footer small{
    color:#8498a5;
    font-size:11px;
    line-height:1.4;
}

.quake-popup{
    min-width:190px;
    color:#49687a;
    font-family:Manrope,Arial,sans-serif;
}

.quake-popup > *{
    display:block;
}

.quake-popup-mag{
    width:max-content;
    margin-bottom:8px;
    padding:5px 8px;
    border-radius:8px;
    color:#fff;
    font-size:12px;
    font-weight:800;
}

.quake-popup-mag.m1{background:#69a9c4}
.quake-popup-mag.m2{background:#338db4}
.quake-popup-mag.m3{background:#d1a137}
.quake-popup-mag.m4{background:#d97635}
.quake-popup-mag.m5{background:#c65050}

.quake-popup strong{
    margin-bottom:6px;
    color:#17465f;
    font-size:13px;
    line-height:1.35;
}

.quake-popup span,
.quake-popup small{
    margin-top:3px;
    font-size:11px;
    line-height:1.4;
}

/* ============================================================
   EVENTO PIÙ FORTE
   ============================================================ */

.quake-highlight-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:20px;
    padding:20px;
    border:1px solid var(--quake-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.045);
}

.quake-highlight-mag{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:94px;
    height:74px;
    padding:0 13px;
    border-radius:14px;
    background:#eef4f7;
    color:#315e76;
    font-size:25px;
    line-height:1;
    font-weight:800;
}

.quake-highlight-mag.m1{background:#eef7fa;color:#3f7f99}
.quake-highlight-mag.m2{background:#edf6fa;color:#24789c}
.quake-highlight-mag.m3{background:#fcf7e9;color:#9b7622}
.quake-highlight-mag.m4{background:#fcf0e8;color:#af642f}
.quake-highlight-mag.m5{background:#faecec;color:#a74747}

.quake-highlight-copy h2{
    margin:6px 0 0;
    color:var(--quake-title);
    font-size:24px;
    line-height:1.2;
    font-weight:800;
}

.quake-highlight-facts{
    display:flex;
    flex-wrap:wrap;
    gap:8px 15px;
    margin-top:9px;
    color:#748c9a;
    font-size:12px;
    line-height:1.45;
    font-weight:700;
}

.quake-highlight-map{
    min-height:42px;
    padding:0 14px;
    border:1px solid #d2e1e8;
    border-radius:11px;
    background:#fff;
    color:#315e76;
    font-size:12px;
    line-height:1;
    font-weight:800;
}

.quake-highlight-map:disabled{
    cursor:default;
    opacity:.5;
}

/* ============================================================
   LISTA EVENTI
   ============================================================ */

.quake-events-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

.quake-event-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    min-width:0;
    padding:15px;
    border:1px solid var(--quake-line);
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 14px rgba(24,77,105,.04);
}

.quake-event-mag{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border-radius:12px;
    background:#eef4f7;
    color:#315e76;
}

.quake-event-mag small{
    font-size:8px;
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
}

.quake-event-mag strong{
    margin-top:3px;
    font-size:22px;
    line-height:1;
    font-weight:800;
}

.quake-event-mag.m1{background:#eef7fa;color:#3f7f99}
.quake-event-mag.m2{background:#edf6fa;color:#24789c}
.quake-event-mag.m3{background:#fcf7e9;color:#9b7622}
.quake-event-mag.m4{background:#fcf0e8;color:#af642f}
.quake-event-mag.m5{background:#faecec;color:#a74747}

.quake-event-copy{
    min-width:0;
}

.quake-event-copy h3{
    margin:0;
    overflow:hidden;
    color:var(--quake-title);
    font-size:15px;
    line-height:1.35;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.quake-event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:4px 12px;
    margin-top:6px;
    color:#758d9b;
    font-size:11px;
    line-height:1.45;
}

.quake-event-coordinates{
    margin-top:4px;
    color:#93a4ad;
    font-size:10px;
    line-height:1.4;
}

.quake-event-map-button{
    min-height:36px;
    padding:0 10px;
    border:1px solid #d7e4ea;
    border-radius:9px;
    background:#fff;
    color:#315e76;
    font-size:11px;
    line-height:1;
    font-weight:800;
}

.quake-loading-card,
.quake-empty-card,
.quake-error-card{
    grid-column:1/-1;
    padding:24px;
    border:1px solid var(--quake-line);
    border-radius:15px;
    background:#fff;
    color:#607c8d;
    text-align:center;
}

.quake-empty-card strong,
.quake-error-card strong{
    display:block;
    color:var(--quake-title);
    font-size:16px;
}

.quake-empty-card span,
.quake-error-card span{
    display:block;
    margin-top:6px;
    font-size:13px;
    line-height:1.5;
}

.quake-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:16px;
}

.quake-more{
    min-height:42px;
    padding:0 16px;
    border:1px solid #d2e1e8;
    border-radius:11px;
    background:#fff;
    color:#315e76;
    font-size:12px;
    font-weight:800;
}

/* ============================================================
   SPIEGAZIONI
   ============================================================ */

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

.quake-info-grid article{
    padding:19px;
    border:1px solid var(--quake-line);
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 17px rgba(24,77,105,.045);
}

.quake-info-index{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 8px;
    border:1px solid #d7e7ed;
    border-radius:10px;
    background:#f5fafc;
    color:var(--quake-accent);
    font-size:11px;
    line-height:1;
    font-weight:800;
}

.quake-info-grid h3{
    margin:13px 0 0;
    color:var(--quake-title);
    font-size:19px;
    line-height:1.25;
    font-weight:800;
}

.quake-info-grid p{
    margin:9px 0 0;
    color:#587486;
    font-size:14px;
    line-height:1.7;
}

.quake-source-note{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
    margin-top:14px;
    padding:15px 17px;
    border:1px solid var(--quake-line);
    border-radius:14px;
    background:#fff;
}

.quake-source-note strong{
    color:var(--quake-title);
    font-size:13px;
    line-height:1.4;
}

.quake-source-note span{
    color:#718997;
    font-size:12px;
    line-height:1.5;
}

.quake-source-note a{
    color:var(--quake-accent);
    font-size:12px;
    line-height:1.4;
    font-weight:800;
    text-decoration:none;
}

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

@media(max-width:900px){

    .quake-toolbar{
        align-items:stretch;
        flex-wrap:wrap;
    }

    .quake-filter-block{
        flex:1 1 auto;
    }

    .quake-refresh{
        align-self:flex-end;
    }

    .quake-events-grid{
        grid-template-columns:1fr;
    }

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

    .quake-source-note{
        grid-template-columns:1fr;
        gap:6px;
    }
}

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

@media(max-width:700px){

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

    .quake-hero{
        padding:30px 0 27px;
    }

    .quake-kicker{
        font-size:13px;
    }

    .quake-hero h1{
        margin-top:7px;
        font-size:42px;
        line-height:1.04;
        letter-spacing:-1.1px;
    }

    .quake-hero p{
        font-size:16px;
        line-height:1.65;
    }

    .quake-toolbar-section{
        padding:13px 0;
    }

    .quake-toolbar{
        display:grid;
        grid-template-columns:1fr;
        gap:13px;
    }

    .quake-period-buttons{
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .quake-period-buttons button{
        min-width:0;
        padding:0 8px;
        font-size:12px;
    }

    .quake-filter-mag select,
    .quake-refresh{
        width:100%;
    }

    .quake-filter-mag select{
        min-width:0;
    }

    .quake-section{
        padding:29px 0;
    }

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

    .quake-section-head h2{
        font-size:28px;
        line-height:1.12;
    }

    .quake-section-head > p{
        font-size:14px;
        line-height:1.6;
    }

    .quake-status-row{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .quake-summary-grid{
        grid-template-columns:1fr;
        gap:9px;
    }

    .quake-summary-card{
        padding:16px 15px;
        border-radius:14px;
    }

    .quake-summary-card strong{
        font-size:27px;
    }

    .quake-summary-card small{
        white-space:normal;
    }

    .quake-map-card{
        border-radius:15px;
    }

    .quake-map-topbar{
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
        padding:14px;
    }

    .quake-map-topbar button{
        width:100%;
    }

    .quake-map{
        height:520px;
    }

    .quake-map-footer{
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
        padding:13px 14px;
    }

    .quake-map-legend{
        gap:8px 11px;
    }

    .quake-highlight-card{
        grid-template-columns:auto minmax(0,1fr);
        gap:13px;
        padding:16px;
    }

    .quake-highlight-mag{
        min-width:76px;
        height:66px;
        font-size:21px;
    }

    .quake-highlight-copy h2{
        font-size:20px;
    }

    .quake-highlight-map{
        grid-column:1/-1;
        width:100%;
    }

    .quake-event-card{
        grid-template-columns:auto minmax(0,1fr);
        gap:12px;
        padding:14px;
    }

    .quake-event-mag{
        width:56px;
        height:56px;
    }

    .quake-event-map-button{
        grid-column:1/-1;
        width:100%;
    }

    .quake-event-copy h3{
        font-size:15px;
        white-space:normal;
    }

    .quake-info-grid p{
        font-size:15px;
        line-height:1.68;
    }

    .quake-source-note strong{
        font-size:14px;
    }

    .quake-source-note span,
    .quake-source-note a{
        font-size:12px;
    }
}

@media(max-width:430px){

    .quake-map{
        height:470px;
    }

    .quake-period-buttons button{
        font-size:11px;
    }
}