/* ============================================================
   ELEMENTOS-PLACA.RESPONSIVE.CSS
   Wiki Metálicas

   ESTRATEGIA: CSS Container Queries + Media Queries combinados.

   PROBLEMA CON SOLO MEDIA QUERIES:
     La grilla es 2 columnas hasta 700px de viewport. Entre
     700–866px, cada card tiene < 390px — demasiado estrecho
     para side-by-side. Un media query en el viewport no puede
     detectar el ancho real de la card dentro de la grilla.

   SOLUCIÓN — Container Queries (@container placa):
     .placa-card declara container-type: inline-size.
     El flip imagen↑/datos↓ responde al ancho de la CARD,
     no al viewport. Umbral: 450px de ancho de card.

   ¿Cuándo ocurre el flip?
     Grilla 2 columnas → card < 450px cuando viewport < ~988px
       → side-by-side colapsa → imagen sube
     Grilla 1 columna  → card < 450px cuando viewport < ~538px
       → side-by-side colapsa → imagen sube (XS extremo)
     Grilla 1 columna  → card > 450px (viewport 538–700px)
       → side-by-side se RECUPERA aunque el viewport sea chico

   Media queries solo ajustan grilla y tamaños de fuente/imagen;
   el flip del layout interno es 100% responsabilidad del container.

   Sistema de breakpoints del proyecto:
     MD → max-width: 900px
     SM → max-width: 700px
     XS → max-width: 480px
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   CONTAINER QUERY — flip imagen ↑ datos ↓
   Se activa cuando la card tiene menos de 380px de ancho.
   ════════════════════════════════════════════════════════════ */
@container placa (max-width: 450px) {

  /* Cuerpo: imagen arriba, datos abajo */
  .placa-card-cuerpo {
    flex-direction: column;
    padding:        0.75rem 0.75rem 1rem;
    gap:            var(--space-md);
  }

  /* Bloque imagen: centrado horizontalmente como unidad */
  .placa-imagen-col {
    flex:           0 0 auto;
    width:          100%;
    flex-direction: column;
    align-items:    center;
  }

  /* Imagen cuadrada, tamaño razonable para paneles estrechos */
  .placa-imagen {
    width:  130px;
    height: 130px;
  }

  /* Labels con más ancho disponible ahora que no compite con imagen */
  .prop-label { flex: 0 0 105px; }
}


/* ════════════════════════════════════════════════════════════
   MEDIA QUERIES — grilla, imagen y labels en side-by-side
   Solo ajustan el layout cuando el container sigue en fila.
   ════════════════════════════════════════════════════════════ */

/* MD: 2 columnas pero cards más estrechas → imagen y labels reducidos */
@media (max-width: 900px) {
  .placa-imagen-col { flex: 0 0 110px; }
  .prop-label       { flex: 0 0 90px; }
}

/* SM: pasa a 1 columna → cards más anchas → imagen puede crecer */
@media (max-width: 700px) {
  .placas-grid {
    grid-template-columns: 1fr;
  }
  .placa-imagen-col { flex: 0 0 130px; }
  .prop-label       { flex: 0 0 100px; }
}

/* XS: padding lateral reducido */
@media (max-width: 480px) {
  .main-container { padding: 0.5rem 0.75rem; }
}