/*
 * c-slide + c-rail--slides — slider de la home sobre c-rail (js/c-rail.js):
 * una obra por vista, desplazamiento con snap, flechas sobre la imagen y la
 * leyenda debajo ("Artista, Título" en serif, como las tarjetas).
 */
@layer components {
	.c-rail--slides .c-rail__viewport { position: relative; }
	.c-rail--slides .c-rail__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		gap: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.c-rail--slides .c-rail__track::-webkit-scrollbar { display: none; }
	.c-rail--slides .c-rail__item { scroll-snap-align: start; min-inline-size: 0; }

	.c-slide { display: grid; gap: var(--space-xs); margin: 0; }
	.c-slide__media {
		display: block;
		aspect-ratio: 5 / 4;
		background: var(--color-soft);
	}
	.c-slide__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
		padding: var(--space-s);
	}
	.c-slide__caption {
		font-family: var(--font-heading);
		font-size: var(--step-1);
		line-height: 1.3;
		color: var(--color-strong);
	}
	.c-slide__caption a { text-decoration: none; }
	.c-slide__caption a:hover .c-slide__title { text-decoration: underline; text-decoration-color: var(--color-accent); }
	.c-slide__meta { display: block; margin-block-start: 0.2em; font-family: var(--font-body); font-size: var(--step--2); color: var(--color-muted); }

	/* flechas: dos círculos a la derecha, a la altura de la leyenda */
	/* la leyenda por lo menos tan alta como las flechas: si es de una línea, no suben sobre la imagen (D4) */
	.c-rail--slides .c-slide__caption { padding-inline-end: 7rem; min-block-size: 2.5rem; }
	.c-rail--slides .c-rail__button {
		position: absolute;
		inset: auto auto 0 auto;
		translate: none;
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		aspect-ratio: 1;
		padding: 0;
		border: 1px solid var(--color-rule);
		border-radius: 50%;
		background: var(--color-surface);
		color: var(--color-strong);
		cursor: pointer;
	}
	.c-rail--slides .c-rail__button--prev { inset-inline-end: 3rem; }
	.c-rail--slides .c-rail__button--next { inset-inline-end: 0; }
	.c-rail--slides .c-rail__button:disabled { opacity: 0.35; cursor: default; }
	.c-rail--slides .c-rail__button:not(:disabled):hover { border-color: var(--color-accent); }
}