/* begin JIRA MNTC-5 */

@media screen and (max-width: 767px) {
    .news-box .form-control {
        font-size: 16px;
    }
    
    .pagination ul {
        flex-wrap: wrap;
        gap: 10px 0;
    }
    
    /* Desactivat: feia que "Anterior"/"Siguiente" saltessin a línia pròpia en
       mòbil. Es deixa comentat per si cal recuperar-ho.
    .pagination ul > li:has(.prev),
    .pagination ul > li:has(.next) {
        flex-basis: 100%;
        display: inline-flex;
        justify-content: center;
    }
    */

    .ficha-cont h2,
    .ficha-rgt h2 {
        padding-bottom: 20px;
    }
}

/* end JIRA MNTC-5 */

/* content-separador */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .separador {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}
@media screen and (max-width: 767px) {
    .separador {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* La maqueta deja width:1360px fijo; en móvil el nav se salía por la derecha
       (x:0, w:470 en un viewport de 375) y cortaba la flecha "siguiente". */
    .home-slider-nav {
        bottom: 95px;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Accesibilidad — responsive de los títulos de concejo convertidos a <span>.
   Solo concejos (carrusel home + card). Réplica EXACTA de los breakpoints de
   la maqueta (resources/v1/css/media.css) sobre .ac-heading.
   ========================================================================== */

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .conoce-main .conoce-txt .ac-heading { font-size: 24px; }
    .concejos-main .concejos-txt .ac-heading { font-size: 24px; }
    .cerca-content h2 { font-size: 55px; margin-bottom: 20px; }
    .como-list ul li .como-cont .ac-heading { font-size: 32px; }
    .home-slider-nav{bottom: 115px; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .conoce-main .conoce-txt .ac-heading { font-size: 22px; }
    .concejos-main .concejos-txt .ac-heading { font-size: 22px; }
    .cerca-content h2 { font-size: 45px; margin-bottom: 15px; }
    .como-list ul li .como-cont .ac-heading { font-size: 26px; }
    .explora-list ul li .explora-cont .ac-heading { font-size: 20px; }
    .desktop-search .ac-heading { font-size: 40px; line-height: 50px; }

    .home-slider-nav{bottom: 115px; }
}

@media screen and (max-width: 767px) {
    .conoce-main .conoce-txt .ac-heading { font-size: 20px; }
    .concejos-main .concejos-txt .ac-heading { font-size: 20px; }
    .cerca-content h2 { font-size: 40px; margin-bottom: 15px; letter-spacing: normal; }
    .como-list ul li .como-cont .ac-heading { font-size: 22px; }
    .explora-list ul li .explora-cont .ac-heading { font-size: 20px; }
    .desktop-search .ac-heading { font-size: 30px; line-height: 40px; margin-bottom: 20px; }
}

@media screen and (max-width: 639px) {
    .cerca-content h2 { font-size: 32px; }
}

/* ==========================================================================
   Accesibilidad — Blog: responsive del título destacado (h2) y de las fechas
   (span.ac-sub). Réplica de media.css (rel-post-cnt h3/h4, agenda-txt h5).
   ========================================================================== */

@media screen and (min-width: 1280px) and (max-width: 1366px) {
    .rel-post-main .rel-post-cnt h2 { font-size: 30px; letter-spacing: normal; }
    .rel-post-main .rel-post-cnt .ac-sub { font-size: 17px; }
    .agenda-main .agenda-txt .ac-sub { font-size: 16px; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .rel-post-main .rel-post-cnt h2 { font-size: 28px; line-height: 36px; letter-spacing: normal; }
    .rel-post-main .rel-post-cnt .ac-sub { font-size: 17px; }
    .agenda-main .agenda-txt .ac-sub { font-size: 15px; }
}

@media screen and (max-width: 767px) {
    .rel-post-main .rel-post-cnt h2 { font-size: 24px; line-height: 32px; letter-spacing: normal; }
    .rel-post-main .rel-post-cnt .ac-sub { font-size: 17px; }
    .agenda-main .agenda-txt .ac-sub { font-size: 15px; line-height: 28px; letter-spacing: normal; }
}

@media screen and (max-width: 479px) {
    .rel-post-main .rel-post-cnt h2 { font-size: 20px; line-height: 28px; }
    .rel-post-main .rel-post-cnt .ac-sub { font-size: 15px; line-height: 25px; letter-spacing: normal; }
}

/* content-mapa_indicaciones — "Cómo llegar": en mòbil el formulari torna a apilar-se */
@media screen and (max-width: 767px) {
    .arribar-sec .contact-btm > ul {
        flex-wrap: wrap;
    }

    .arribar-sec .contact-btm > ul > li {
        min-width: 0;
    }

    .arribar-sec .contact-btm > ul > li > * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* content-video — responsive del título (espejo de .cultura-sec h2) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .video-sec h2 { font-size: 40px; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .video-sec h2 { font-size: 36px; }
}
@media screen and (max-width: 767px) {
    .video-sec h2 { font-size: 32px; margin-bottom: 20px; }
    .video-sec .video-text p { letter-spacing: normal; }
}
/* Accesibilidad (WAH): en móvil la pestaña lateral se colapsa a solo-icono,
   ocultando el texto vertical "ACCESIBILIDAD" (definido en override.css como
   ::after). Selector idéntico + !important para ganar al CSS del plugin. */
@media screen and (max-width: 767px) {
    html body #wp_access_helper_container.accessability_container button.wahout.aicon_link {
        height: auto !important;
        max-height: none !important;
        padding: 8px !important;
        writing-mode: horizontal-tb !important;
        column-gap: 0 !important;
    }
    html body #wp_access_helper_container.accessability_container button.wahout.aicon_link::after {
        content: none !important;
    }
}

/* Mapa concejos (.mapa-svg): en móvil media.css fuerza overflow-x:scroll, pero el
   SVG ya se escala a width:100% y cabe, así que solo aparecía una barra de scroll
   horizontal vacía. Con auto la barra solo saldría si hiciera falta (no sale). */
@media screen and (max-width: 767px) {
    .cultura-img .mapa-svg {
        overflow-x: auto;
    }
}

/* ==========================================================================
   content-texto_y_mapa (.cultura-sec.concej): el separador vertical se hizo
   con `margin` en vez del `padding` de la maqueta, así que se quedó fuera de
   los breakpoints de media.css (.cultura-sec padding 80/60/50/40). Aquí se
   replican esos mismos valores sobre margin, y sobre padding en la variante
   .has-fondo-verde (que sí usa padding porque pinta el fondo).
   ========================================================================== */

@media screen and (min-width: 1280px) and (max-width: 1366px) {
    .cultura-sec.concej { margin: 80px 0; }
    .cultura-sec.concej.has-fondo-verde { padding: 80px 0; }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .cultura-sec.concej { margin: 60px 0; }
    .cultura-sec.concej.has-fondo-verde { padding: 60px 0; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .cultura-sec.concej { margin: 50px 0; }
    .cultura-sec.concej.has-fondo-verde { padding: 50px 0; }
}

@media screen and (max-width: 767px) {
    .cultura-sec.concej { margin: 40px 0; }
    .cultura-sec.concej.has-fondo-verde { padding: 40px 0; }
}

/* ==========================================================================
   page-templates/razones.php — arreglos solo móvil/tablet.
   Escritorio (crossfade skrollr, ≥1024) queda intacto.
   ========================================================================== */

@media screen and (max-width: 1023px) {
    /* media.css baja el breadcrumb a top:80px, pero la cabecera de esta página
       lleva el logo grande (.head-top ocupa ~125px), así que el breadcrumb se
       le montaba encima. Lo colocamos justo debajo de la cabecera. */
    .razones-section .breadcrumb-sec {
        top: 130px;
    }

    /* Las flechas del slider (right:10px; bottom:25px) quedaban tapadas por la
       burbuja fija del chat (.mwai-trigger, esquina inferior derecha).
       En móvil las pasamos a la esquina inferior izquierda, que está libre. */
    .razones-section .razone-slider .swiper-button {
        right: auto;
        left: 15px;
    }
}

/* ==========================================================================
   page-templates/agenda.php — réplica de los breakpoints de .cargar-btn
   (media.css:107, 295, 563, 939) para la versión escopada de la agenda.
   ========================================================================== */

@media screen and (max-width: 1400px) {
    .agenda-eventos-sec .cargar-btn { margin-top: 50px; }
}

@media screen and (max-width: 767px) {
    .agenda-eventos-sec .cargar-btn { margin-top: 40px; }
}

/* ==========================================================================
   404.php — Página no encontrada.
   ========================================================================== */

@media screen and (max-width: 767px) {
    .error404-sec { padding: 40px 0 50px; }
    .error404-card { padding: 32px 20px 40px; border-radius: 12px; }
    .error404-card .error404-ico { width: 120px; margin-bottom: 22px; }
    .error404-card h1 { font-size: 24px; }
    .error404-card p { font-size: 15px; }
    .error404-card a.more-btn { min-width: 0; width: 100%; padding: 0 20px; }
}