/*
 * Ajustes de móvil para la portada y el contenido de noticias y páginas.
 *
 * Va aparte de style.css (que se versiona a mano) y se carga el último, para
 * que estas reglas ganen sin tocar las de siempre. Casi todo el contenido de
 * las noticias trae estilos en línea del editor, así que algunas reglas
 * necesitan !important.
 */

/* ─── Contenido: imágenes y tablas ───
   Las imágenes con ancho fijo (p. ej. width="556") no se salen de la columna:
   se ajustan al ancho disponible en cualquier pantalla. */
.post-content img {
    max-width: 100%;
    height: auto;
}

/* Las tablas anchas se deslizan de lado dentro de su hueco (el envoltorio lo
   pone js/mobile-content.js solo a las que no caben). */
.ht-table-scroll {
    max-width: 100%;
    margin-bottom: 1em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ht-table-scroll > table {
    margin-bottom: 0;
}

/* ─── Lista de noticias: resumen ───
   La caja del resumen (35px con 5px de relleno) no coincidía con su interlínea
   y asomaba el principio de la línea siguiente cortada. Ahora mide justo sus
   dos líneas (5px + 2 × 14px), sin relleno abajo. */
.posts .post .post-excerpt {
    height: 33px;
    padding-bottom: 0;
    line-height: 14px;
}

@media (max-width: 600px) {

    /* ─── Contenido: texto ───
       Justificado en una columna estrecha deja huecos enormes entre palabras.
       Solo se cambia el justificado; lo centrado sigue centrado. */
    .post-content [style*="text-align: justify"],
    .post-content [style*="text-align:justify"],
    .post-content p {
        text-align: left !important;
    }

    .post-content p[style*="text-align: center"],
    .post-content p[style*="text-align:center"],
    .post-content p.has-text-align-center {
        text-align: center !important;
    }

    /* Bloques de dos columnas de las guías (imagen a un lado, texto al otro):
       en móvil, la imagen arriba y el texto debajo a todo el ancho. */
    .post-content div[style*="display: flex"],
    .post-content div[style*="display:flex"] {
        flex-wrap: wrap;
    }

    .post-content div[style*="display: flex"] > div[style*="flex: 0 0"],
    .post-content div[style*="display:flex"] > div[style*="flex:0 0"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    /* ─── Portada: cabecera ───
       El bloque del logo mide 190px; en móvil se recorta el aire de debajo
       para que las noticias aparezcan antes. El logo (270x125, con margen
       transparente abajo) sigue a su tamaño y entero. */
    .header > .section-inner[style*="height: 190px"] {
        height: 170px !important;
    }

    /* ─── Portada: lista de noticias ───
       La tarjeta mide 104px fijos (imagen 100px): título de 30px, resumen de
       dos líneas y fecha. Los títulos que no caben en una línea (marcados con
       .is-long por js/mobile-content.js) pasan a dos líneas y su resumen a
       una, para que todo siga cabiendo. Los cortos no cambian. */
    .posts .post .post-header .post-title.is-long {
        display: -webkit-box;
        height: auto;
        max-height: 46px;
        white-space: normal;
        line-height: 19px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .posts .post .post-header .post-title.is-long + .post-excerpt {
        height: 19px;
        -webkit-line-clamp: 1;
    }

    /* El buscador de la barra lateral repite la lupa de la cabecera. */
    .widget-content.widget_search {
        display: none;
    }

    /* ─── Portada: noticias destacadas ───
       Cada tarjeta ocupa casi todo el ancho y de la siguiente asoma solo la
       miniatura, para que se entienda que se desliza sin cortar su texto.
       Sin barra de scroll y con aire arriba y abajo para el contorno negro. */
    .ht-pinned-list:not([style*="--ht-pinned-cols: 1"]) {
        grid-auto-columns: calc(100% - 52px);
        gap: 8px;
        padding: 4px 6px;
        scroll-padding: 0 6px;
        scrollbar-width: none;
    }

    .ht-pinned-list:not([style*="--ht-pinned-cols: 1"])::-webkit-scrollbar {
        display: none;
    }
}

/* ─── Menú lateral de móvil (#my-menu con MmenuLight) ───
   Franja azul de widget como cabecera, Coleccionables y Tiempo atmosférico en
   dos fichas, y el resto en filas blancas con su icono (inc/mobile-menu.php).
   El menú lateral se usa hasta 1150px, como en style.css. */

@media (max-width: 1150px) {
    .mm-ocd {
        --mm-ocd-width: 86%;
        --mm-ocd-max-width: 360px;
    }

    .mm-ocd--open {
        background: rgba(0, 12, 20, 0.55);
    }

    #my-menu.mm-spn {
        --mm-spn-item-height: 48px;
        background: #dcecf2;
        color: #1d3b47;
        font-family: 'Ubuntu', sans-serif;
    }

    /* Cabecera: el título del panel en una franja como las de los widgets. */
    #my-menu.mm-spn.mm-spn--navbar:after,
    #my-menu.mm-spn.mm-spn--navbar.mm-spn--main:after {
        z-index: 2;
        padding: 0 44px;
        border-bottom: 2px solid #000;
        /* style.css fija fondo, tamaño y grosor con !important. */
        background: linear-gradient(180deg, rgb(0, 104, 145) 50%, rgb(0, 88, 123) 50%) !important;
        box-shadow: inset 0 -2px 0 rgb(0 2 2 / 32%);
        color: #fff;
        font-size: 0.85rem !important;
        font-weight: bold !important;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-shadow: 1px 1px rgb(0 0 0 / 48%);
        opacity: 1;
    }

    /* Flecha para volver desde un submenú, en blanco sobre la franja. */
    #my-menu.mm-spn.mm-spn--navbar:before {
        z-index: 3;
        color: #fff;
        opacity: 1;
    }

    #my-menu.mm-spn ul {
        padding-top: 10px;
        border-top: 0;
        background: #dcecf2;
    }

    #my-menu.mm-spn.mm-spn--navbar ul {
        top: calc(var(--mm-spn-item-height) + 2px);
    }

    #my-menu.mm-spn.mm-spn--navbar ul:before {
        display: none;
    }

    /* Filas: blancas, con aire entre ellas y el borde de la web. */
    #my-menu.mm-spn li {
        margin: 0 10px 6px;
        overflow: hidden;
        border: 2px solid #fff;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 0 0 1px #9dbac5;
    }

    #my-menu.mm-spn li:after {
        display: none;
    }

    #my-menu.mm-spn a,
    #my-menu.mm-spn span {
        padding-top: 11px;
        padding-bottom: 11px;
        padding-left: 12px;
        font-size: 0.95rem;
        font-weight: bold;
        color: #1d3b47;
    }

    #my-menu.mm-spn a:not(:last-child):after {
        opacity: 0.2;
    }

    /* Flecha de los elementos con submenú. */
    #my-menu.mm-spn li:before {
        right: 20px;
        color: #0080a8;
        opacity: 0.8;
    }

    .ht-mm-icon {
        width: 22px;
        margin-right: 10px;
        text-align: center;
        color: #0080a8;
    }

    /* Página en la que estás. */
    #my-menu.mm-spn li.current-menu-item > a,
    #my-menu.mm-spn li.current_page_item > a {
        background: #fff3d6;
        color: #8a5b00;
    }

    #my-menu.mm-spn li.current-menu-item > a .ht-mm-icon {
        color: #d59a0b;
    }

    /* Tiempo atmosférico: una ficha a todo el ancho con la franja azul de la
       web (Coleccionables ya es un elemento más del menú). */
    #my-menu.mm-spn .user-mobile-action {
        display: block !important;
        margin: 0 10px 10px;
        vertical-align: top;
        border-radius: 8px;
        box-shadow: 0 0 0 2px #000;
    }

    #my-menu.mm-spn .user-mobile-action:before {
        display: none;
    }

    #my-menu.mm-spn .user-mobile-action > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 48px;
        padding: 8px 6px;
        font-size: 0.8rem;
        line-height: 1.2;
        text-align: center;
        color: #fff;
        text-shadow: 1px 1px rgb(0 0 0 / 48%);
    }

    #my-menu.mm-spn .user-mobile-weather-item > a {
        background: linear-gradient(180deg, rgb(0, 104, 145) 50%, rgb(0, 88, 123) 50%);
    }

    #my-menu.mm-spn .user-mobile-action i {
        margin: 0;
        font-size: 1.3rem;
    }

    #my-menu.mm-spn .user-mobile-weather-item img {
        margin: 0;
    }
}