/* Portada de 2027.
 *
 * Lo unico que hay aqui es lo que la portada usa y el listado no: la noticia
 * principal en grande, la biografia, los juegos y el titular de la franja azul.
 * La rejilla, la tarjeta de noticia, los huecos de anuncio y el titulo de
 * modulo estan en cards-2027.css, que las dos paginas cargan, para no llevar
 * dos copias de lo mismo.
 *
 * Las noticias se ordenan con lo ultimo arriba y las secciones repartidas
 * hacia abajo (el reparto lo hace index.php).
 *
 * Nota importante sobre los anuncios: el CSS viejo traia una regla
 * .section-small .adsbygoogle{display:none!important} que dejaba el banner
 * de dentro de la celda invisible sin previo aviso. Aqui no existe nada
 * asi: los anuncios de la rejilla se ven, y ademas reservan su alto con
 * min-height, para que al entrar la creatividad la pagina no salte y mueva
 * lo que el lector ya esta leyendo. */

/* ---------- Noticia principal ---------- */

.card-hero {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
}

.card-hero .card-foto {
    flex: 0 0 58%;
}

.card-hero .card-foto img {
    height: 100%;
    object-fit: cover;
}

.card-hero .card-cuerpo {
    flex: 1;
    justify-content: center;
    padding: 22px 24px;
}

.card-hero .card-titulo { font-size: 26px; line-height: 1.22; }
.card-hero .card-bajada { font-size: 15px; }

/* ---------- Modulos: biografia y juegos ----------
 *
 * El modulo de biografia (la rejilla .bio-*, el fondo y el titular ampliado)
 * vive ahora en cards-2027.css, que tambien cargan las paginas de biografia.
 * Aqui se queda lo del modulo de juegos, que solo usa la portada. */

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

.modulo-juegos .modulo-titulo::before {
    content: "";
    position: absolute;
    left: 0;
    top: .08em;
    width: 5px;
    height: 1.15em;
    background: #EEB811;
    border-radius: 2px;
}

/* Fondo de los dos modulos, para que se separen del blanco de las noticias.
   Es un azul clarito, no el azul de marca a pleno: a plena saturacion
   taparia las imagenes de la biografia y las tarjetas blancas de los juegos.
   El mismo valor en los dos modulos, para que la franja se lea como una
   sola cosa y no como dos bloques distintos. */
.modulo-bio,
.modulo-juegos {
    background: #E4EEF9;
    border-color: #B9D2EE;
}

.juegos-rejilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 14px;
}

/* Cada juego es una tarjeta como las de noticia: imagen arriba y el nombre
   del juego debajo, sobre una franja amarilla. El nombre es el texto ancla
   del enlace, asi que va en mayusculas y con mas cuerpo. */
.juego-tile {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e2e2e2;
}

.juego-foto {
    display: block;
    width: 100%;
    height: auto;
    line-height: 0;
    background: #f2f2f2;
}

.juego-titulo {
    padding: 14px 14px 15px;
    /* Anton, la misma que rotula las imagenes de la biografia. Es una
       condensada de un solo peso: no se le pone bold porque el navegador lo
       falsearia en negrita y la letra se emborrona. */
    font-family: 'Anton', 'Open Sans Condensed', sans-serif;
    /* Mismo criterio que la franja de la biografia: crece en pantallas
       grandes y se encoge en el movil, donde a 26px el nombre del juego
       saltaba a dos lineas. */
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.15;
    font-weight: 400;
    text-transform: uppercase;
    color: #103F7A;
    background: #F3B229;
}

.juego-tile:hover .juego-titulo { background: #dd9d0d; }

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

@media (max-width: 900px) {
    .card-hero { flex-direction: column; }
    .card-hero .card-foto { flex: 0 0 auto; }
    .card-hero .card-foto img { height: auto; }
    .card-hero .card-titulo { font-size: 22px; }
}

@media (max-width: 600px) {
    /* 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. */
    .juegos-rejilla { grid-template-columns: 1fr; }
    .card-hero .card-cuerpo { padding: 16px 16px 18px; }
    .card-hero .card-titulo { font-size: 20px; }
}

  /* ---------- El titular de la portada ----------
   *
   * La frase ("La mayor comunidad de fans de Juan Roman Riquelme") tiene que
   * caer exactamente donde cae en article.php, y hasta ahora caia mas abajo.
   *
   * La causa no era la letra, era la caja. #front-image es un grid de una sola
   * celda (header.css:56-62) y header.css:63-69 le da a #div-h1 una altura
   *FIJA de 20px dentro de una franja de 40px. Con altura definida el grid no
   * estira la celda: la ancla ARRIBA. Por eso en el article la frase vive en
   * la mitad de arriba de la franja azul.
   *
   * La home anulaba eso con height:auto y padding:8px 15px (reglas de abajo),
   * con lo que la celda medía 24px de texto + 16px de padding = 40px, llenaba
   * la franja entera y dejaba la frase centrada. Mismo header, dos alturas.
   *
    * Ahora la home usa la misma caja de 20px pegada arriba, que es exactamente
    * lo que hace header.css en el article. line-height se fija a normal, que
    * es el mismo valor que se hereda cuando no se fija: el article de
    * escritorio no pone ninguno y los dos siguen coincidiendo. Lo que no
    * debe heredar es el 25px del bloque movil, eso se ve en la regla de abajo.
    *
    * La franja sigue con min-height:40px porque ahora la celda mide 20px y sin
    * ese suelo el height:auto se encolaria hasta 20px y la banda azul
    * encogeria a la mitad.
    *
    * Hay que tocar los dos niveles de la cadena. Al aplicarlo solo a
    * #front-image la celda seguia a 20px pero el titular se salia de la caja
    * los 8px del padding que header.css no pone.
    *
    * Ojo con lo que dice mas abajo: header.css NO se comparte con 2026. Cada
    * año tiene su propio header.css y su propio css_path (2026 y 2027
    * apuntan a sus carpetas), y los dos archivos ya llevan 41 lineas de
    * diferencia. Se toca el de 2027 sin arrastrar nada del año anterior.
   *
   * El id va repetido a proposito: home.css se carga antes que header.css
   * (index.php:184 y 185), asi que con un solo id gana header.css por orden,
   * no por especificidad. Dos ids ganan siempre.
   *
   * Y la letra se mantiene en 20px a mano porque el titular de la home va
   * dentro de un h1, y la regla global h1 { font-size: 15px; } de
   * header.css:70 se lo come. En el article el texto va suelto en el div, sin
   * h1, asi que ahi los 20px de #div-h1 se aplican solos. */
  #front-image#front-image { height: auto; min-height: 40px; }
  /* line-height explicito: header.css metio la regla movil del eslogan
   * (font-size:14px, line-height:25px) en su bloque de 800px, que es donde
   * esta #div-h1 y desde donde conviene gobernarlo. line-height se hereda,
   * asi que entre 601 y 800px se colaba en este h1 y lo bajaria 2-3px.
   * El id repetido le da prioridad sobre header.css pase lo que pase en el
   * orden de carga. <=600px no se toca: ahi el h1 lleva su propio 1.2. */
  #div-h1#div-h1 { height: 20px; padding: 0 15px; line-height: normal; }
  /* El id va repetido tambien en el h1, y no solo en el div de arriba. La
   * regla #div-h1 h1 de header.css tiene exactamente la misma especificidad
   * que esta (un id y un elemento), asi que sin repetir el id no gana por
   * especificidad: gana header.css por orden de carga, que va despues. Pasaba
   * con los dos font-size, el de 20px de esta linea y el clamp() de movil,
   * y por eso en un Galaxy S23 el titular salia a 20px en una caja pensada
   * para 12, se salia del ancho de la pantalla y arrastraba el scroll
   * horizontal de la pagina entera. */
  #div-h1#div-h1 h1 { font-size: 20px; }

  @media (max-width: 600px) {
      /* El titular entero ("La mayor comunidad de fans de Juan Román Riquelme")
         tiene que caber en una sola linea, y para eso la letra escala con el
         ancho: 3.5vw deja el titular holgado dentro de la franja sea cual sea
         el movil, y el minimo de 12px evita que en pantallas de 320px quede
         ilegible.

         Lo que NO puede hacer esta regla es nowrap. Estaba puesto para
         garantizar el salto de linea, pero el tiro de un nowrap depende de la
         metrica de la fuente: si el ancho no sale exacto, el titular no se
         parte, se sale del ancho de la pantalla. Eso es justo lo que pasaba en
         un Galaxy S23 (360px): el texto se cortaba y, al no poder partirse,
         empujaba el ancho de la pagina y aparecia el scroll horizontal.

         Ahora se quita nowrap y, para que un segundo renglon no quede cortado,
         la caja crece en vez de medir 20px fijos. El min-height mantiene el
         alto de la franja azul igual que antes cuando el titular cabe en una
         sola linea, que es lo habitual.

         El centrado va con flex en los dos ejes. El vertical con
         align-items, para que el texto quede en medio tanto si cabe en una
         linea como si se parte en dos. El horizontal con justify-content, y
         hace falta: al volver la caja un contenedor flex, el h1 pasa a ser un
         elemento flexible y se ajusta a lo ancho del texto en vez de ocupar
         el de la franja. El text-align:center que hereda de #front-image no
         tiene efecto sobre una caja ya ceñida al texto, y el titular aparecia
         pegado a la izquierda. */
      #div-h1#div-h1 {
          padding: 0 8px;
          height: auto;
          min-height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      #div-h1#div-h1 h1 {
          font-size: clamp(12px, 3.5vw, 16px);
          line-height: 1.2;
          letter-spacing: -0.2px;
          text-align: center;
      }
  }