/*
 * choice-grid.css — la rejilla de una elección entre pocas opciones.
 *
 * Aquí vive sólo el MECANISMO: cuántas columnas caben y cómo se reparten. Ni un
 * color, ni un borde, ni un tamaño de letra — eso es del tema
 * (`reglas/contrato-base.md` §14). El tema decide cómo es una tarjeta; el core
 * decide cuántas caben, que es comportamiento por ancho y por tanto suyo.
 *
 * ── Por qué NO hay un solo `@media` en este fichero ─────────────────────────
 * El tema del vertical tenía `1fr 1fr` con un `@media (max-width: 599px)` que la
 * colapsaba a una columna. Eso responde «¿es un móvil?», que es la pregunta
 * equivocada por tres motivos:
 *
 *   1. El ancho del VIEWPORT no es el ancho DISPONIBLE. La misma rejilla dentro
 *      de una tarjeta con padding, en una columna lateral o en un modal tiene
 *      tres anchos distintos con un solo viewport.
 *   2. Un umbral escrito a mano acierta en el dispositivo con el que se probó y
 *      falla en el siguiente: un plegable abierto, una tablet en vertical, una
 *      ventana a media pantalla en escritorio.
 *   3. Cada tamaño nuevo pide otro `@media`, y la lista crece para siempre.
 *
 * `repeat(auto-fit, minmax(<mínimo>, 1fr))` responde la pregunta correcta:
 * «¿cuántas columnas de un ancho legible caben AQUÍ?». El grid mide su propio
 * contenedor, así que es responsive al contenedor sin necesitar container
 * queries, y funciona igual a 320 px, en un plegable y en escritorio.
 * Canon: selection cards de Material 3, radio cards de GOV.UK, y el principio
 * de Every Layout — declarar la restricción en vez de enumerar los casos.
 *
 * ── El único número, y por qué es un token ──────────────────────────────────
 * `--choice-min` es el ancho con el que el rótulo MÁS LARGO del sitio se lee en
 * una línea. Depende del contenido y del idioma, que son del tema: un sitio de
 * cinco idiomas se dimensiona por el largo, no por el inglés — es exactamente el
 * defecto con forma de idioma del 2026-08-16 (la cabecera cabía en inglés y se
 * partía en español).
 *
 * ── El valor por defecto, y cómo se eligió (NO por gusto) ───────────────────
 * **7.75rem (124 px)**, y sale de dos restricciones que se cruzan:
 *
 *  1. **El rótulo más largo tiene que caber en una línea.** `Lieferwagen` y
 *     `Camionnette` son ~88 px a 15 px medium, más el padding de una tarjeta
 *     (~32 px) = **120 px mínimos**. Y ojo: son palabras SIN espacios, así que no
 *     pueden envolver — si no caben, desbordan. Es un límite duro, no estético.
 *  2. **Dos columnas tienen que caber en un teléfono real de 360 px**, que es el
 *     Galaxy Alpha de 2015 (720×1280 a DPR 2) y el ancho Android más extendido
 *     que existe. Dentro de la tarjeta quedan ~272 px útiles:
 *     `124×2 + 12 de gap = 260 ≤ 272` ✅ → dos columnas de 130 px.
 *
 * Y el corte de abajo lo pone la propia restricción, sin que nadie lo escriba: a
 * **320 px** (iPhone SE de 1ª generación, 2016) quedan ~252 px útiles y
 * `260 > 252`, así que **cae a una sola columna** — que es lo correcto ahí. El
 * umbral EMERGE del ancho que necesita el contenido; no lo decide un `@media`.
 *
 * ⚠️ Un valor mayor rompe justo el caso que importa: con 8.5rem (136 px) hacen
 * falta 284 px y **el teléfono de 360 caería a una columna**. Fue el primer valor
 * escrito, y lo cazó Adán al decir con qué aparato prueba. Si un tema tiene
 * rótulos más largos sube el token — pero mide primero a 360, no a 390.
 *
 * Y cuando NO caben dos columnas legibles, cae a una sola **sola**. Eso no es un
 * respaldo: es la respuesta correcta en esa pantalla, y la da el navegador en vez
 * de un umbral adivinado.
 */

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--choice-min, 7.75rem), 1fr));
    gap: var(--choice-gap, 0.75rem);
}

/*
 * Cuatro opciones, dos columnas: la última no se estira a lo ancho.
 * `auto-fit` colapsa las pistas vacías, así que con 3 elementos en 2 columnas el
 * tercero ocuparía media fila — que es lo correcto — pero con un número impar de
 * columnas disponibles el reparto queda irregular. No se fuerza nada aquí: si un
 * tema quiere que el último ocupe la fila entera, es decisión suya y se escribe
 * con `grid-column` sobre su propio selector.
 */