/* ============================================================
   INDEX.RESPONSIVE.CSS — Estilos responsivos del index principal
   Wiki Metálicas

   Aplica a: index.html únicamente.
   Componentes cubiertos: grid de cards, header del index.

   Sistema de breakpoints (ver core/breakpoints.css):
     LG → max-width: 1100px
     MD → max-width:  900px
     SM → max-width:  700px
     XS → max-width:  480px
   ============================================================ */


/* ============================================================
   GRID DE CARDS
   ============================================================ */

@media (max-width: 1100px) {              /* LG: 4 → 3 columnas */
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {               /* SM: 3 → 2 columnas */
  .grid         { grid-template-columns: repeat(2, 1fr); }
  .card         { padding: 1.2rem; }
  .card-title   { font-size: 1rem; }
  .card-image i { font-size: 3.5rem; }
}

@media (max-width: 480px) {               /* XS: ajuste de padding y tipografía */
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  .card {
    aspect-ratio: 1 / 1.15;
    padding:      0.85rem 0.6rem;
    min-width:    0;
    min-height:   0;
  }
  .card-title   { font-size: 0.75rem; min-height: 2.2rem; margin-bottom: 0.5rem; }
  .card-image i { font-size: 2.2rem; }
  .card-badge   { font-size: 0.6rem; padding: 0.2rem 0.45rem; }
}