/*
 * c-rail — lo mínimo para que funcione: una fila que se desplaza con snap.
 * Cuántas tarjetas se ven lo define --rail-items (se puede cambiar por
 * container query). Botones sobre los bordes. JS: js/c-rail.js
 */
@layer components {
	.c-rail { container: rail / inline-size; }
	.c-rail__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-s); }
	.c-rail__viewport { position: relative; }
	.c-rail__track {
		--rail-items: 1.2;
		--rail-gap: var(--space-m, 1.5rem);
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--rail-items) - 1) * var(--rail-gap)) / var(--rail-items));
		gap: var(--rail-gap);
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.c-rail__track::-webkit-scrollbar { display: none; }
	.c-rail__item { scroll-snap-align: start; min-inline-size: 0; }
	@container rail (width >= 36rem) { .c-rail__track { --rail-items: 2.2; } }
	@container rail (width >= 60rem) { .c-rail__track { --rail-items: 3; } }

	.c-rail__button {
		position: absolute;
		inset-block-start: 35%;
		translate: 0 -50%;
		inline-size: 3rem;
		block-size: 3rem;
		border: 0;
		background: var(--color-surface, Canvas);
		color: var(--color-fg, CanvasText);
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;
	}
	.c-rail__button--prev { inset-inline-start: 0; }
	.c-rail__button--next { inset-inline-end: 0; }
	.c-rail__button:disabled { opacity: 0; pointer-events: none; }
	@media (hover: none) { .c-rail__button { display: none; } }
}