/* Carta pública: modos de cada sección (Secciones, fotos y modos, parte C; boceto aprobado por
   Adolfo el 28 oct 2026). Lista es la fila de siempre (carta_platos.css). Sin foto, el plato se ve
   en Lista (carta_modos.js). Solo con las variables de carta_base.css (regla de ARCHITECTURE.md);
   va después de carta_platos.css. */

.plato-foto {
    display: block;
    object-fit: cover;
    background: var(--acento-suave);
}

/* Compacto: foto cuadrada pequeña a la izquierda; nombre, precio y descripción (3 líneas) a la derecha */
.plato-compacto {
    display: grid;
    grid-template-columns: var(--foto-lado) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    padding: .75rem 0;
}

.plato-compacto .plato-foto {
    width: var(--foto-lado);
    height: var(--foto-lado);
    border-radius: 10px;
}

.plato-compacto .plato-fila-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Destacado: foto grande (4:3) a todo lo ancho, encima del nombre, en una tarjeta */
.plato-destacado {
    padding: 0;
    margin: .875rem 0;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: 14px;
    overflow: hidden;
}

.plato-destacado .plato-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.plato-destacado .plato-texto {
    padding: .75rem .875rem .875rem;
}

/* Grid: dos por fila; foto cuadrada, nombre y precio debajo, sin descripción */
.plato-rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: .75rem 0 .25rem;
}

.plato-celda {
    min-width: 0;
    padding: 0 0 .5rem;
    border-bottom: 0;
}

.plato-celda .plato-foto {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
}

.plato-celda .plato-fila-cab {
    display: block;
    margin-top: .375rem;
}

.plato-celda .plato-fila-name {
    display: block;
    line-height: 1.25;
}

.plato-celda .plato-price {
    display: block;
    max-width: none;
    margin-top: .125rem;
    text-align: left;
}

/* Minimalista: solo nombre y precio, en una línea */
.plato-mini {
    padding: .7rem 0;
}

.plato-mini .plato-fila-name {
    font-weight: 400;
}