/**
 * Responsive Design Breakpoints
 * H. Ayuntamiento de Escárcega
 *
 * Soportado en: 320px, 375px, 430px, 768px, 1024px, 1280px, 1440px, 1920px
 */

/* ==================================================
   Pantallas Grandes (Desktop XL / 1440px - 1920px)
   ================================================== */
@media (min-width: 1440px) {
    :root {
        --container-width: 1320px;
    }

    .hero-section {
        min-height: 680px;
    }
}

/* ==================================================
   Desktop Intermedio y Laptops (<= 1200px)
   ================================================== */
@media (max-width: 1200px) {
    .nav-list {
        gap: 0.25rem;
    }

    .nav-link {
        padding: 0.5rem 0.65rem;
        font-size: 0.85rem;
    }

    .quick-access-grid {
        gap: 1rem;
    }

    .footer-grid {
        grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
        gap: 2rem;
    }
}

/* ==================================================
   Tablets (<= 1024px)
   ================================================== */
@media (max-width: 1024px) {
    /* Header: ocultar menú desktop y mostrar botón móvil */
    .header-nav-desktop {
        display: none;
    }

    .header-mobile-toggle {
        display: flex;
        align-items: center;
    }

    .topbar-tagline {
        display: none;
    }

    .topbar-container {
        justify-content: flex-end;
    }

    /* Hero: apilado en tablet */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-panel-wrapper {
        justify-content: flex-start;
    }

    .hero-direct-panel {
        max-width: 100%;
    }

    /* Accesos rápidos: 3 columnas */
    .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Noticias: 2 columnas en tablet */
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    /* Conoce nuestro municipio: apilado */
    .municipality-split-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .municipality-media-col {
        height: 320px;
    }

    /* Footer: 2 columnas */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

/* ==================================================
   Móviles Grandes y Tablets Pequeñas (<= 768px)
   ================================================== */
@media (max-width: 768px) {
    .header-container {
        height: 72px;
    }

    .brand-symbol {
        width: 44px;
    }

    .brand-title {
        font-size: 1.05rem;
    }

    .brand-prefix {
        font-size: 0.62rem;
    }

    .brand-location {
        font-size: 0.68rem;
    }

    /* Barra auxiliar superior: simplificada */
    .auxiliary-list {
        gap: 0.85rem;
    }

    .auxiliary-link {
        font-size: 0.75rem;
    }

    /* Hero */
    .hero-section {
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    .hero-title {
        font-size: 2.15rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-direct-panel {
        padding: 1.5rem 1.25rem;
    }

    .direct-access-card {
        padding: 0.75rem 0.85rem;
    }

    /* Accesos rápidos: 2 columnas en mobile */
    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .quick-access-circle {
        width: 64px;
        height: 64px;
    }

    .quick-access-icon svg {
        width: 24px;
        height: 24px;
    }

    /* Noticias: 1 columna en mobile */
    .news-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Conoce nuestro municipio */
    .municipality-content-col {
        padding: 2rem 1.5rem;
    }

    .municipality-media-col {
        height: 250px;
    }

    /* Footer: 1 columna apilada */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .footer-escudo {
        width: 75px;
    }

    .footer-bottom-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .footer-legal-list {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* ==================================================
   Móviles Estándar y Pequeños (<= 430px - 320px)
   ================================================== */
@media (max-width: 430px) {
    .header-container {
        height: 66px;
    }

    .brand-symbol {
        width: 38px;
    }

    .brand-title {
        font-size: 0.95rem;
    }

    .brand-prefix {
        font-size: 0.58rem;
    }

    .brand-location {
        display: none;
    }

    .header-topbar .auxiliary-item:first-child {
        display: none; /* Simplificar en 320px */
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .hero-badge {
        font-size: 0.65rem;
        padding: 0.3rem 0.75rem;
    }

    .direct-card-title {
        font-size: 0.88rem;
    }

    .direct-card-subtitle {
        display: none;
    }

    .quick-access-item {
        padding: 0.75rem 0.25rem;
    }

    .quick-access-label {
        font-size: 0.8rem;
    }

    .quick-access-desc {
        display: none;
    }

    .municipality-title {
        font-size: 1.6rem;
    }
}

/* Protección general contra desbordamiento horizontal */
body, html {
    overflow-x: hidden;
    width: 100%;
}