/*
 * 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; } }
}

/* castillo: cabecera con el título en serif y "ver todos" como píldora;
   flechas en círculos. En la ficha, los relacionados van sobre una banda. */
@layer components {
	.c-rail__head { margin-block-end: var(--space-m); }
	.c-rail__title { font-size: var(--step-3); }
	.c-rail__more {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		padding: 0.45em 1.3em;
		border: 1px solid var(--color-rule);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		font-family: var(--font-institutional);
		font-size: var(--nav-size);
		font-weight: var(--nav-weight);
		letter-spacing: 0.02em;
		text-decoration: none;
	}
	.c-rail__more::after { content: "›"; font-size: 1.2em; line-height: 1; }
	.c-rail__more:hover { border-color: var(--color-accent); }
	.c-rail__track { --rail-gap: var(--space-m); padding-block-end: var(--space-2xs); }
	@container rail (width >= 60rem) { .c-rail__track { --rail-items: 4; } }
	.c-rail:not(.c-rail--slides) .c-rail__button {
		inset-block-start: 40%;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border: 1px solid var(--color-rule);
		border-radius: 50%;
		font-size: 1.4rem;
		box-shadow: 0 0.25rem 1rem -0.5rem rgb(0 0 0 / 0.3);
	}
	.c-rail:not(.c-rail--slides) .c-rail__button--prev { inset-inline-start: calc(-1 * var(--space-s)); }
	.c-rail:not(.c-rail--slides) .c-rail__button--next { inset-inline-end: calc(-1 * var(--space-s)); }
}
@layer components {
	@container rail (width < 36rem) {
		.c-rail:not(.c-rail--slides) .c-rail__button--prev { inset-inline-start: 0; }
		.c-rail:not(.c-rail--slides) .c-rail__button--next { inset-inline-end: 0; }
	}
}