/* Piezas de 2027 que comparten la portada y el listado de noticias.
 *
 * La tarjeta de noticia estaba metida dentro de home.css, asi que el listado
 * por categoria (articles.php) no tenia forma de usarla sin copiar los estilos
 * a mano. Copiados se desincronizarian en el primer retoque. Aqui viven una
 * sola vez y las dos paginas los cargan.
 *
 * Solo esta lo que de verdad usan las dos: la rejilla, la tarjeta, los huecos
 * de anuncio y el titulo de modulo. Lo que es propio de la portada (la
 * noticia principal, la biografia, los juegos y el titular) se queda en
 * home.css.
 *
 * Se carga antes que la hoja de cada pagina, para que home.css y
 * articles-2027.css puedan sobrescribir lo que necesiten. */

* { box-sizing: border-box; }

/* ---------- Rejilla ----------
 *
 * Tres columnas que se estrecha sola: dos en tablet, una en movil. Es el mismo
 * criterio que la portada, para que el listado no parezca otra pagina. */

.rejilla {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px 20px;
    align-items: start;
}

/* ---------- Tarjeta de noticia ---------- */

.card {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-foto {
    display: block;
    line-height: 0;
    background: #f2f2f2;
}

.card-foto img {
    width: 100%;
    height: auto;
    display: block;
}

.card-cuerpo {
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-categoria {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .4px;
    margin-bottom: 6px;
}

.card-categoria a {
    color: #1a4b8c;
    text-decoration: none;
}

.card-categoria a:hover { text-decoration: underline; }

.card-titulo {
    font-size: 17px;
    line-height: 1.3;
    margin: 0 0 8px;
    font-weight: bold;
}

.card-titulo a {
    color: #222;
    text-decoration: none;
}

.card-titulo a:hover { color: #1a4b8c; }

.card-bajada {
    font-size: 14px;
    line-height: 1.45;
    color: #555;
    margin: 0;
}

.card-fuente {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
}

/* ---------- Anuncios ----------
 *
 * El alto reservado es la parte importante. Sin min-height el hueco nace
 * de cero pixels, la publicidad tarda un instante en entrar y todo lo que
 * hay debajo baja de golpe: eso es CLS, y el Core Web Vitals lo nota. Con
 * el hueco ya reservado la pagina no se mueve. */

.card-ad,
.anuncio-ancho {
    background: #fafafa;
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    /* AdSense puede inyectar un max-width inline (298px, el ancho de una
       creatividad 300x600) sobre el bloque: como el inline gana a cualquier
       regla normal, hace falta !important para no perder ancho. */
    width: 100% !important;
    max-width: 100% !important;
    /* Alto reservado para la creatividad. Se ajusta segun el ancho real
       del hueco con las media queries de abajo. */
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anuncio-ancho {
    grid-column: 1 / -1;
    min-height: 120px;
}

.ad-etiqueta {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 8px;
}

.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    max-width: 100% !important;
    overflow: hidden;
}

/* El <ins> vacio es un item flex de .ad-slot: como va en el eje horizontal y
 * no tiene contenido, se queda a cero pixels aunque el hueco mida lo suyo.
 * AdSense mide el propio <ins>, no el padre, asi que no encuentra ancho y
 * tira el TagError "No slot size for availableWidth=0" sin pintar nada: los
 * anuncios de la rejilla salian siempre vacios. Con ancho propio se llena.
 * El max-width !important va por lo mismo que en .card-ad: si AdSense inyecta
 * su max-width inline de 298px, el hueco se estrecha a una creatividad. */
.ad-slot .adsbygoogle {
    width: 100%;
    max-width: 100% !important;
}

/* ---------- Titulo de modulo ---------- */

.modulo {
    grid-column: 1 / -1;
    display: block;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    padding: 18px 18px 20px;
}

/* article.css impone a todo <section> "display:flex; width:85%;
 * margin:0 auto" con section:not(#front-image), y ese selector gana a
 * .modulo: el id dentro del :not() cuenta como un id (1,0,1) frente a la
 * clase (0,1,0), aunque .modulo se cargue despues. La portada no carga
 * article.css, asi que no lo sufre; las paginas de biografia si, y sin
 * esto el modulo salia encogido al 85% con el titular en fila con las
 * tarjetas. Este selector iguala la especificidad y lo deja como la home. */
section:not(#front-image).modulo {
    display: block;
    width: auto;
    margin: 0;
}

.modulo-titulo {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a4b8c;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 3px solid #1a4b8c;
    font-weight: bold;
}

/* ---------- Modulo de biografia ----------
 *
 * La portada lo lleva al final y las paginas de biografia se lo han pedido
 * tambien, para enlazar la carrera del jugador desde el propio texto. Estas
 * reglas vivian dentro de home.css, que solo carga la portada: copiadas a
 * biography-2027.css se habrian desincronizado en el primer retoque. Aqui
 * estan una sola vez y las dos hojas las comparten.
 *
 * Lo que es propio de la portada (el fondo de los dos modulos y el titular
 * ampliado de los juegos) sigue en home.css. */

.modulo-bio .modulo-titulo {
    font-size: 22px;
    position: relative;
    padding-left: 14px;
}

/* El palito amarillo a la izquierda del titular, el mismo que llevan las
   secciones del final del articulo (.jrr-seccion-titulo). Se anade solo el
   rectangulo: la caja, el borde inferior, el azul y el fondo del modulo se
   quedan como estaban.

   La altura va en em y no en pixeles para que siga sola al tamano de la letra
   si el titular cambia, y el padding-left es lo que deja sitio para el
   rectangulo sin que el texto se desplace respecto de como estaba. */
.modulo-bio .modulo-titulo::before {
    content: "";
    position: absolute;
    left: 0;
    top: .08em;
    width: 5px;
    height: 1.15em;
    background: #EEB811;
    border-radius: 2px;
}

/* Fondo del modulo, para que se separe del blanco de las noticias y del
   blanco del cuerpo de la pagina. Es un azul clarito, no el azul de marca a
   pleno: a plena saturacion taparia las imagenes de la biografia. */
.modulo-bio {
    background: #E4EEF9;
    border-color: #B9D2EE;
}

.bio-rejilla {
    display: grid;
    /* Seis etapas, dos filas de tres: con seis en una linea las imagenes
       quedaban minusculas y la etiqueta ilegible. Ahora cada hueco mide
       parecido a la imagen (333x220), en vez de un sexto de la pagina. */
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 14px;
}

.bio-tile {
    position: relative;
    display: block;
    line-height: 0;
    border-radius: 3px;
    overflow: hidden;
    background: #123a6b;
}

.bio-tile img {
    width: 100%;
    height: auto;
    display: block;
}

/* Franja con el nombre, encima de la foto. Las imagenes de la biografia
 * traen el texto YA COCIDO en el JPG (fondo amarillo, letras azules) y aqui
 * se tapa con una capa que lo repite con la tipografia correcta. La franja
 * ocupa el 22,1% inferior de la foto, que es justo donde empieza el texto
 * original, asi que queda completamente cubierta. */
.bio-franja {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #F3B229;              /* mismo amarillo que la franja de juegos */
    color: #103F7A;                   /* mismo azul */
    font-family: 'Anton', 'Open Sans Condensed', sans-serif;  /* misma fuente */
    font-weight: 400;
    text-transform: uppercase;
    /* Escala con el ancho de la foto: se agranda en pantallas grandes y se
       mantiene legible en el movil, sin que el texto se salga de la franja. */
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1;
    padding: 0 8px;
}

/* Al pasar por encima, la franja se oscurece un poco (igual que el titulo de
   los juegos), para confirmar que el bloque es pulsable. */
.bio-tile:hover .bio-franja { background: #dd9d0d; }

/* ---------- Adaptable ---------- */

@media (max-width: 900px) {
    .rejilla { grid-template-columns: repeat(2, 1fr); }
    .card-ad { min-height: 260px; }
    .bio-rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .rejilla {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .card-ad { min-height: 250px; }
    /* En movil las seis etapas de la biografia van una detras de otra: a tres
       en fila la foto y la franja quedan tan estrechas que no se leen. */
    .bio-rejilla { grid-template-columns: 1fr; }
}