/* ═══════════════════════════════════════════════════════
   RESPONSIVE DEL MENÚ PÚBLICO
   Capa compartida por los 8 templates. Se carga DESPUÉS del
   template y del carrito, por eso sus reglas (mismo !important,
   orden posterior) ganan sin tener que editar cada diseño.
   Solo toca layout/tamaños: nunca colores ni tipografías de marca.

   Grid de cards (definido en menu.js -> buildCard):
     col-6        -> 2 por fila en celular
     col-md-4     -> 3 por fila en tablet (>=768px)
     col-lg-3     -> 4 por fila en desktop (>=992px)
═══════════════════════════════════════════════════════ */

/* ── Tablet y menos: cards más compactas ─────────────── */
@media (max-width: 767.98px) {
  .menu-card-img,
  .menu-card img,
  .card img { height: 150px !important; }

  .menu-card .card-body,
  .card .card-body { padding: 1rem 1.1rem !important; }

  .card-title { font-size: 1.05rem !important; }
  .card-text { font-size: .8rem !important; margin-bottom: .7rem !important; }
  .price { font-size: 1.15rem !important; }
  .menu-cat-title { font-size: 1.5rem !important; }
}

/* ── Celular: 2 cards por fila bien ajustadas ────────── */
@media (max-width: 575.98px) {
  /* Menos aire lateral para aprovechar el ancho */
  .container.py-5 { padding-top: 2rem !important; padding-bottom: 3rem !important; }
  #menuContainer.p-3 { padding: .25rem !important; }
  #menuContainer.row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }

  .menu-card-img,
  .menu-card img,
  .card img { height: 130px !important; }

  .menu-card .card-body,
  .card .card-body { padding: .8rem .85rem !important; }

  .card-title { font-size: .95rem !important; line-height: 1.2 !important; }

  /* Descripciones largas: se recortan a 2 líneas para emparejar alturas */
  .card-text {
    font-size: .75rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .price { font-size: 1.05rem !important; }

  .btn-agregar-carrito { font-size: 13px; padding: 7px 10px; }

  /* Pills de categoría y títulos, un poco más chicos */
  .categoria-pill { font-size: .7rem !important; padding: .45rem 1rem !important; }
  .menu-cat-title { font-size: 1.3rem !important; }
  .py-5 h2 { font-size: 1.6rem !important; }
}