/**
 * Météo Centre - Frontend Responsive CSS
 * @version 4.0.0 - Refactor with fluid units and unified cards
 *
 * Contents: Media queries only
 * Loaded: ALWAYS (required by all blocks)
 *
 * CHANGES v4.0:
 * ✅ Drastic simplification of breakpoints
 * ✅ Fluid cards without size overrides
 * ✅ Proportional adjustment with em/%
 */

/* ========================================================================
 * TABLETTE (max-width: 1024px)
 * ======================================================================== */

@media (max-width: 1024px) {
    /* Slightly reduce the base size */
    .rsmc-city-wrapper,
    .rsmc-map-wrapper,
    .rsmc-modal {
        font-size: 15px; /* 16px → 15px = proportional reduction */
    }
}

/* ========================================================================
 * MOBILE (max-width: 768px)
 * ======================================================================== */

@media (max-width: 768px) {
    /* === BASE === */
    .rsmc-city-wrapper,
    .rsmc-map-wrapper,
    .rsmc-modal {
        font-size: 14px; /* Reduced to 14px base */
    }

    /* === CARTE === */
    .rsmc-floating-controls {
        display: none;
        bottom: 70px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none;
    }

    .rsmc-floating-controls.is-visible {
        display: block;
    }

    .rsmc-controls-toggle {
        display: flex;
        bottom: 10px !important;
        left: 10px !important;
    }

    .rsmc-map-container {
        padding-bottom: 0;
    }

    /* === HEADER VILLE === */
    .rsmc-city-header,
    .rsmc-header {
        padding: 1.25em 1em; /* 1.875em 1.25em → 1.25em 1em */
    }

    .rsmc-header-top {
        flex-direction: column;
        gap: 1em; /* 1.25em → 1em */
        margin-bottom: 1em; /* Reduce bottom margin */
    }

    /* ✅ CRITICAL: 100% layout on mobile */
    .rsmc-city-info {
        text-align: center;
        width: 100%;
        max-width: none !important;
    }

    .rsmc-city-info h1 {
        font-size: clamp(1.75em, 8vw, 2.25em);
    }

    /* ✅ CRITICAL: Current weather 100% width on mobile */
    .rsmc-current-weather-main {
        width: 100%;
        max-width: none !important;
        padding: 0.75em 1em; /* 0.9375em 1.25em → 0.75em 1em */
        flex-direction: row;
        gap: 1em; /* 1.25em → 1em */
        justify-content: center;
    }

    .rsmc-weather-picto-group {
        flex-shrink: 0;
    }

    /* Weather picto: 4.5em = 63px at 14px base */
    .rsmc-weather-main-picto {
        width: 4.5em;
        height: 4.5em;
    }

    .rsmc-weather-desc-main {
        font-size: 1em;
    }

    .rsmc-temp-group {
        flex-shrink: 0;
    }

    /* Temperature badge: 4.5em = 63px */
    .rsmc-temp-main-badge svg {
        width: 4.5em !important;
        max-width: 4.5em !important;
        height: auto !important;
    }

    .rsmc-temp-feels-text {
        font-size: 0.9286em; /* ~13px */
    }

    /* === TABS === */
    .rsmc-forecast-tabs {
        overflow-x: auto;
        gap: 0.625em;
    }

    .rsmc-tab-btn {
        padding: 0.625em 1em;
        flex-shrink: 0;
        font-size: 0.9286em;
    }

    /* === CARDS === */
    /* Smaller cards on mobile */
    .rsmc-hour-card {
        min-width: 11em; /* 154px at 14px */
        padding: 0.75em 0.5em; /* 0.875em 0.625em → 0.75em 0.5em */
    }

    /* Weather cards header: more compact */
    .rsmc-weather-card {
        padding: 0.75em; /* 1em → 0.75em */
        min-height: 6em; /* 7em → 6em */
    }

    /* Header current-conditions: 2×2 on mobile (was 4 thin columns). */
    .rsmc-current-weather-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75em;
    }

    .rsmc-feels-like-card {
        padding: 0.75em; /* 1em → 0.75em */
        min-height: 7em; /* 8em → 7em */
    }

    /* Hourly card details stay 2×2 on mobile (denser, no orphan). */
    .rsmc-hour-details {
        grid-template-columns: repeat(2, 1fr);
    }

    /* The feels-like block stays full-width */
    .rsmc-detail-feels-block {
        grid-column: 1;
    }

    .rsmc-detail-item {
        font-size: 0.7857em; /* ~11px */
        padding: 0.3125em 0.375em;
    }

    /* === GRAPHIQUE === */
    .rsmc-chart-container {
        height: 18.75em; /* 300px relative */
    }

    .rsmc-chart-metrics {
        gap: 0.5em;
    }

    .rsmc-metric-checkbox {
        padding: 0.375em 0.625em;
        font-size: 0.8571em;
    }

    /* === TABLEAU === */
    .rsmc-forecast-table {
        font-size: 0.8571em; /* 12px */
    }

    .rsmc-forecast-table thead th,
    .rsmc-forecast-table tbody td {
        padding: 0.5em 0.25em;
    }

    /* === MODALE === */
    .rsmc-modal {
        max-height: 90vh;
        max-width: 95%;
    }

    .rsmc-modal-header {
        padding: 0.9375em 1.25em;
    }

    .rsmc-modal-header h2 {
        font-size: 1.2857em; /* 18px */
    }

    .rsmc-modal-body {
        padding: 1.25em 0.9375em;
    }

}

/* ========================================================================
 * PETIT MOBILE (max-width: 480px)
 * ======================================================================== */

@media (max-width: 480px) {
    /* Further base size reduction */
    .rsmc-city-wrapper,
    .rsmc-map-wrapper,
    .rsmc-modal {
        font-size: 13px;
    }

    /* Current weather: even more compact */
    .rsmc-current-weather-main {
        padding: 0.625em 0.75em; /* 0.75em 0.9375em → 0.625em 0.75em */
        gap: 0.75em; /* 0.9375em → 0.75em */
    }

    .rsmc-weather-card {
        padding: 0.625em; /* Encore plus compact */
        min-height: 5.5em;
    }

    .rsmc-feels-like-card {
        padding: 0.625em;
        min-height: 6.5em;
    }

    .rsmc-city-header,
    .rsmc-header {
        padding: 1em 0.75em; /* Reduce padding */
    }

    /* Pictos: 4em = 52px at 13px base */
    .rsmc-weather-main-picto {
        width: 4em;
        height: 4em;
    }

    .rsmc-temp-main-badge svg {
        width: 4em !important;
        max-width: 4em !important;
    }

    .rsmc-weather-desc-main,
    .rsmc-temp-feels-text {
        font-size: 0.9231em; /* ~12px */
    }

    /* Even smaller cards */
    .rsmc-hour-card {
        min-width: 10em; /* 130px at 13px */
    }

    /* Details: reduced size */
    .rsmc-detail-item {
        font-size: 0.7692em; /* ~10px */
        padding: 0.25em;
    }

    /* Feels-like: keep readable */
    .rsmc-detail-feels-value {
        font-size: 0.9231em; /* 12px */
    }
}