/* ── Anglophone War Dashboard ── */

.dashboard-heading {
    font-size: 2.5rem;
    margin-bottom: 16px;
    color: #1a2d4d;
    text-align: center;
    letter-spacing: 0.05em;
    margin-top: 30px;
}

/* Shared container */
.map-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    border: 2px solid #1a2d4d;
    background: #080a0d;
}

/* Desktop iframe */
.conflict-map {
    width: 100%;
    height: 620px;
    border: none;
    display: block;
}

/* Mobile embed iframe — just the map, no panels */
.conflict-map-mobile {
    width: 100%;
    height: 380px;
    border: none;
    display: block;
}

/* Show desktop, hide mobile by default */
.map-desktop { display: block; }
.map-mobile  { display: none;  }

/* Open full map button */
.map-open-btn {
    display: block;
    width: fit-content;
    margin: 0 auto 40px;
    padding: 12px 28px;
    background-color: #1a2d4d;
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-family: 'Staatliches', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
}

.map-open-btn:hover {
    background-color: #6b8e23;
}

/* On mobile: hide desktop iframe, show embed version */
@media screen and (max-width: 768px) {
    .map-desktop { display: none;  }
    .map-mobile  { display: block; }

    .dashboard-heading {
        font-size: 1.8rem;
    }

    .conflict-map-mobile {
        height: 380px;
    }
}

@media screen and (max-width: 480px) {
    .dashboard-heading {
        font-size: 1.5rem;
    }

    .conflict-map-mobile {
        height: 320px;
    }
}

@media screen and (max-width: 360px) {
    .conflict-map-mobile {
        height: 280px;
    }
}