/* ====== layout-cards.css — SOLO reglas de layout (GRID) ====== */

/* Contenedor del tablero: el <main> que contiene el título y los 12 <article> */
/* Especificidad 0-0-1 */
main {
  display: grid;                                  
  grid-template-columns: repeat(4, minmax(8rem, 1fr));                                       
  grid-auto-rows: 20em;                           
  gap: 1rem;                                   
  align-content: start;                           
  justify-items: stretch;                        
}

/* El primer hijo del main (el título del juego) ocupa la fila completa */
/* Especificidad 0-1-1 */
main > :first-child {
  grid-column: 1 / -1;                            
  text-align: center;
  grid-row: 1; /* REDEFINICIÓN DE GRID-COLUMN QUE INVLUYE GRID-ROW-START Y GRID-ROW-END */
}

/* Cada carta debe rellenar su celda del grid (anula el 20vw/20em previos) */
/* Especificidad 0-0-2 */
main > article {
  width: 100%;                                    
  height: 100%;                                  
  box-sizing: border-box;
}

/* Evita desbordes horizontales por imágenes dentro de las cartas */
/* Especificidad 0-0-3 */
main > article img {
  max-width: 100%;                               
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Especificidad 0-1-2 */
main > p:first-of-type {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 8em;
  grid-row: 1; /* REDEFINICIÓN DE GRID-COLUMN QUE INVLUYE GRID-ROW-START Y GRID-ROW-END */
}


/* ====== Adaptabilidad (móvil): 2 columnas x 6 filas ====== */
@media (max-width: 768px) {
  /* Especificidad 0-0-1 */
  main {
    /* REDEFINICIÓN DE GRID-TEMPLATE-COLUMNS */
    grid-template-columns: repeat(2, minmax(8rem, 1fr));  
    /* REDEFINICIÓN DE GRID-AUTO-ROWS */                                              
    grid-auto-rows: 18em;                                                      
  }

  /* Especificidad 0-1-2 */
  main > p:first-of-type {
    /* REDEFINICIÓN DE FONT-SIZE */
    font-size: 5em;
}
}