/* ============================================================
   OROSEIMETEO · PANORAMICA MAPPE
   Riferimento tipografico: V-MODEL / MAPPE PREVISIONALI

   - Manrope ereditato dal portale
   - Tipografia più grande e leggibile
   - Immagini in proporzione naturale
   - Click diretto per ingrandire
   ============================================================ */


.maps-page{
    --maps-accent:#1f9ec6;
    --maps-accent-dark:#0f6f93;
    --maps-title:#173f56;
    --maps-text:#5f7b8d;
    --maps-line:#d8e5ec;
    --maps-soft:#eef6fa;
    --maps-bg:#f7fafc;

    background:var(--maps-bg);
    color:var(--maps-title);
}


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


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

.maps-hero{
    padding:46px 0 38px;
    border-bottom:1px solid #e2ebf0;
    background:#fff;
}

.maps-kicker{
    display:block;
    margin-bottom:9px;
    color:var(--maps-accent);
    font-size:13px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.maps-hero h1{
    margin:0 0 14px;
    color:var(--maps-title);
    font-size:48px;
    line-height:1.04;
    font-weight:800;
    letter-spacing:-1.4px;
}

.maps-hero p{
    max-width:820px;
    margin:0;
    color:var(--maps-text);
    font-size:18px;
    line-height:1.7;
}


/* ============================================================
   TOOLBAR
   ============================================================ */

.maps-toolbar-section{
    padding:16px 0;
    border-bottom:1px solid #e4edf2;
    background:#fff;
}

.maps-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.maps-filter-group{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.maps-filter-btn,
.maps-refresh-btn{
    font-family:inherit;
    cursor:pointer;
}


/* Filtri */

.maps-filter-btn{
    min-height:42px;
    padding:0 17px;
    border:1px solid #ccdce5;
    border-radius:999px;
    background:#fff;
    color:#49687a;
    font-size:15px;
    line-height:1;
    font-weight:750;
}

.maps-filter-btn:hover{
    border-color:#9ec9d9;
    color:var(--maps-accent-dark);
}

.maps-filter-btn.is-active{
    border-color:var(--maps-accent);
    background:var(--maps-accent);
    color:#fff;
}


/* Aggiorna */

.maps-refresh-btn{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 15px;
    border:1px solid #ccdce5;
    border-radius:10px;
    background:#fff;
    color:#19445b;
    font-size:14px;
    line-height:1;
    font-weight:800;
}

.maps-refresh-btn:hover{
    background:#f5fafc;
}

.maps-refresh-icon{
    font-size:18px;
    line-height:1;
}

.maps-refresh-btn.is-loading .maps-refresh-icon{
    animation:mapsSpin .65s linear infinite;
}

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


/* ============================================================
   CONTENUTO
   ============================================================ */

.maps-content{
    padding:30px 0 46px;
}

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


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

.map-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--maps-line);
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 20px rgba(28,66,87,.05);
}

.map-card[hidden]{
    display:none !important;
}


.map-card-head{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:20px 20px 17px;
}


/* Badge */

.map-card-badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    margin-bottom:9px;
    padding:0 9px;
    border-radius:7px;
    background:#e8f5fa;
    color:#147da2;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.06em;
}


/* Titolo card */

.map-card h2{
    margin:0 0 6px;
    color:var(--maps-title);
    font-size:21px;
    line-height:1.25;
    font-weight:800;
}


/* Descrizione */

.map-card-head p{
    margin:0;
    color:#728b9b;
    font-size:15px;
    line-height:1.5;
}


/* Fonte */

.map-card-source{
    align-self:flex-start;
    max-width:165px;
    color:#8399a6;
    text-align:right;
    font-size:13px;
    line-height:1.4;
    font-weight:700;
}


/* ============================================================
   IMMAGINE MAPPA
   Mantiene la proporzione naturale.
   ============================================================ */

.map-card-media{
    display:block;
    width:100%;
    padding:0;
    border:0;
    overflow:hidden;
    background:#eef3f6;
    cursor:zoom-in;
    line-height:0;
}

.map-card-media img{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    margin:0;
    background:#eef3f6;
}

.map-card-media:focus-visible{
    outline:3px solid var(--maps-accent);
    outline-offset:-3px;
}


/* ============================================================
   FOOTER CARD
   ============================================================ */

.map-card-foot{
    display:block;
    padding:12px 20px 13px;
    border-top:1px solid #e7eef2;
}

.map-card-foot > span{
    color:#7b929f;
    font-size:13px;
    line-height:1.45;
}


/* ============================================================
   INFO CARD
   ============================================================ */

.maps-info-card{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    gap:17px;
    margin-top:20px;
    padding:21px 22px;
    border:1px solid #d5e5ed;
    border-radius:14px;
    background:#fff;
}

.maps-info-card[hidden]{
    display:none !important;
}

.maps-info-icon{
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#e9f6fa;
    color:#1480a7;
    font-size:30px;
}

.maps-info-kicker{
    display:block;
    margin-bottom:5px;
    color:#1683a8;
    font-size:12px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.maps-info-card h2{
    margin:0 0 7px;
    color:var(--maps-title);
    font-size:21px;
    line-height:1.25;
    font-weight:800;
}

.maps-info-card p{
    margin:0;
    color:#607c8d;
    font-size:15px;
    line-height:1.65;
}


/* ============================================================
   DISCLAIMER
   ============================================================ */

.maps-disclaimer{
    margin:19px 2px 0;
    color:#8298a5;
    font-size:13px;
    line-height:1.6;
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.maps-lightbox[hidden]{
    display:none !important;
}

.maps-lightbox{
    position:fixed;
    inset:0;
    z-index:99999;
    display:grid;
    place-items:center;
    padding:18px;
}

.maps-lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(7,22,31,.84);
}

.maps-lightbox-dialog{
    position:relative;
    z-index:1;
    width:min(1100px,100%);
    max-height:92vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:14px;
    background:#fff;
    box-shadow:0 22px 60px rgba(0,0,0,.35);
}

.maps-lightbox-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:58px;
    padding:10px 14px 10px 19px;
    border-bottom:1px solid #dce7ed;
}

.maps-lightbox-head h2{
    margin:0;
    color:var(--maps-title);
    font-size:18px;
    line-height:1.25;
    font-weight:800;
}

.maps-lightbox-close{
    width:38px;
    height:38px;
    padding:0;
    border:0;
    border-radius:9px;
    background:#eef4f7;
    color:#244b60;
    font-family:inherit;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.maps-lightbox-stage{
    min-height:0;
    overflow:auto;
    padding:12px;
    background:#eef2f4;
    text-align:center;
}

.maps-lightbox-stage img{
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto;
    vertical-align:middle;
}

.maps-lightbox-open{
    overflow:hidden;
}


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

@media(max-width:900px){

    .maps-grid{
        grid-template-columns:1fr;
    }

}


/* ============================================================
   MOBILE
   Stessa scala visiva di V-MODEL.
   ============================================================ */

@media(max-width:700px){

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


    /* Hero */

    .maps-hero{
        padding:34px 0 29px;
    }

    .maps-kicker{
        margin-bottom:9px;
        font-size:12px;
        letter-spacing:.08em;
    }

    .maps-hero h1{
        margin-bottom:15px;
        font-size:40px;
        line-height:1.04;
        letter-spacing:-1.1px;
    }

    .maps-hero p{
        max-width:none;
        font-size:17px;
        line-height:1.68;
    }


    /* Toolbar */

    .maps-toolbar-section{
        padding:15px 0;
    }

    .maps-toolbar{
        display:block;
    }

    .maps-filter-group{
        flex-wrap:nowrap;
        gap:8px;
        overflow-x:auto;
        padding-bottom:8px;
        scrollbar-width:none;
    }

    .maps-filter-group::-webkit-scrollbar{
        display:none;
    }

    .maps-filter-btn{
        flex:0 0 auto;
        min-height:42px;
        padding:0 15px;
        font-size:15px;
    }

    .maps-refresh-btn{
        width:100%;
        min-height:44px;
        margin-top:3px;
        font-size:15px;
    }


    /* Contenuto */

    .maps-content{
        padding-top:20px;
        padding-bottom:40px;
    }

    .maps-grid{
        gap:16px;
    }


    /* Card */

    .map-card{
        border-radius:14px;
    }

    .map-card-head{
        display:block;
        padding:18px 17px 16px;
    }

    .map-card-badge{
        min-height:28px;
        margin-bottom:9px;
        padding:0 9px;
        font-size:12px;
    }

    .map-card h2{
        margin-bottom:6px;
        font-size:22px;
        line-height:1.22;
    }

    .map-card-head p{
        font-size:16px;
        line-height:1.55;
    }

    .map-card-source{
        display:block;
        max-width:none;
        margin-top:10px;
        text-align:left;
        font-size:13px;
        line-height:1.45;
    }


    /* Immagini */

    .map-card-media,
    .map-card-media img{
        width:100%;
    }

    .map-card-media img{
        height:auto;
    }


    /* Fondo card */

    .map-card-foot{
        padding:12px 17px 13px;
    }

    .map-card-foot > span{
        font-size:13px;
    }


    /* Info */

    .maps-info-card{
        grid-template-columns:1fr;
        gap:12px;
        padding:19px 17px;
    }

    .maps-info-icon{
        width:48px;
        height:48px;
        font-size:27px;
    }

    .maps-info-kicker{
        font-size:12px;
    }

    .maps-info-card h2{
        font-size:21px;
    }

    .maps-info-card p{
        font-size:16px;
        line-height:1.65;
    }

    .maps-disclaimer{
        font-size:13px;
        line-height:1.6;
    }


    /* Lightbox */

    .maps-lightbox{
        padding:7px;
    }

    .maps-lightbox-head h2{
        font-size:17px;
    }

}