/* ===========================
   Responsive para páginas de noticia (article.tpl)
   =========================== */

/* Ajustes generales para pantallas más estrechas */
@media (max-width: 960px) {

    /* Quitar marco y sangrías laterales del cuerpo en noticias */
    #site_body {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box;
    }

    /* Contenedor principal de la noticia */
    #wrap {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 10px auto 0;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* Columna derecha (ficha + anuncio + relacionadas) */
    #right_col {
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* Columnas izquierda/derecha: apiladas y a ancho completo */
    #left_col,
    #right_col,
    #full_col {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        box-sizing: border-box;
    }

    /* Cabecera “Noticias” */
    #txtdivhead {
        float: none;
        width: auto;
        min-height: 25px;
        padding: 6px 12px;
        box-sizing: border-box;
    }

    /* Textos de cabecera del artículo */
    #left_col h4 {
        font-size: 13px;
        margin: 8px 0;
        line-height: 1.4;
    }

    #left_col h1 {
        font-size: 22px;
        line-height: 1.2;
        margin: 6px 0 10px 0;
    }

    #left_col h2 {
        font-size: 16px;
        line-height: 1.4;
        margin: 0 0 12px 0;
    }

    #left_col {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Bloque de “Relacionadas” */
    .column-sub {
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 10px;
    }

    #column-top a {
        display: block;
        line-height: 1.4;
        word-wrap: break-word;
    }

    /* Bloque de anuncio 300x250 */
    #ad300r {
        margin: 0 0 16px 0;
    }

    /* Iframes y comentarios de Facebook: 100% de ancho */
    /*
    .fb-comments,
    .fb-comments span,
    .fb-comments iframe {
        width: 100% !important;
        max-width: 100% !important;
    }
    */

    #right_col iframe {
        max-width: 100% !important;
    }

    /* --- VIDEO YOUTUBE RESPONSIVE EN EL CUERPO --- */
    #left_col iframe {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9;
        height: auto !important;
        display: block;
    }

    /* ===========================
       Ajuste específico ficha juego en noticias
       =========================== */

    /* La tarjeta mantiene el layout imagen + texto,
       pero dentro usamos lista sencilla sin grid ni botones. */
    .review-sidebar-info {
        grid-template-columns: 90px 1fr !important;
    }

    .review-sidebar__links {
        display: block !important;
        text-align: left !important;
    }

    /* Volvemos a mostrar el título del juego y los saltos de línea */
    .review-sidebar__links h3,
    .review-sidebar__links br {
        display: block !important;
    }

    .review-sidebar__links h3 {
        margin: 0 0 6px 0 !important;
        font-size: 1em !important;
        font-weight: 600 !important;
    }

    /* Enlaces como lista normal, sin cajas grises */
    .review-sidebar__links a {
        display: block !important;
        margin: 0 0 3px 0 !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-size: 0.95em !important;
        font-weight: normal !important;
        text-decoration: underline !important;
    }
}

/* Ajuste fino para móviles pequeños */
@media (max-width: 480px) {

    #wrap {
        padding: 0 10px;
    }

    #left_col h1 {
        font-size: 20px;
    }

    #left_col h2 {
        font-size: 15px;
    }

    #left_col {
        font-size: 14px;
    }
}