/*
 * c-card — la tarjeta (D8: una sola para todo objeto: pieza, elemento
 * arquitectónico, representación). El árbol del template: imagen entera en su
 * marco gris › título › filete › fecha › inventario; el crédito si es un depósito.
 * La imagen nunca se recorta (contain) ni lleva texto encima (D4); opaca, sin
 * sombras ni filtros (D7). El título, en Unna cursiva (como castillo), hasta
 * 3 líneas; el completo está en el atributo title (D9).
 */
@layer components {
	.c-card { position: relative; display: flex; flex-direction: column; block-size: 100%; background: var(--color-surface); }
	.c-card__media {
		display: grid;
		place-items: center;
		aspect-ratio: var(--card-ratio, 4 / 5);
		padding: var(--space-xs);
		background: var(--card-media-bg, var(--color-soft));
	}
	/* imagen de las tarjetas (y de los resultados de entidades, markup del core) */
	:is(.c-card__media, .bResultItemImg) img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
		object-position: center;
		background: transparent;
	}
	.c-card__media--empty { color: var(--color-muted); font-size: var(--step--1); text-decoration: none; }
	.c-card__noimg { padding: var(--space-xs); text-align: center; }
	.c-card__body {
		display: grid;
		align-content: start;
		gap: 0.2rem;
		padding: var(--space-s) var(--space-2xs) var(--space-m);
		color: var(--color-strong);
	}
	.c-card__body :is(p, h2, h3, div) { margin: 0; }
	.c-card__title {
		font-family: var(--font-heading);
		font-size: var(--step-1);
		font-weight: 400;
		font-style: italic;
		line-height: 1.25;
	}
	/* hasta 3 líneas (D9): el recorte va en el enlace, así su caja no excede lo visible */
	.c-card__title a {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
	}
	.c-card__title a::after { content: ""; position: absolute; inset: 0; }   /* toda la tarjeta es el enlace */
	.c-card:hover .c-card__title a { text-decoration: underline; text-decoration-color: var(--color-accent); }
	.c-card:has(:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
	.c-card__title a:focus-visible { outline: none; }
	.c-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-xs);
		margin-block-start: var(--space-2xs) !important;
		padding-block-start: var(--space-2xs);
		font-size: var(--step--1);
		color: var(--color-muted);
		background: linear-gradient(var(--color-rule), var(--color-rule)) top left / 3.5rem 1px no-repeat;   /* el filete */
	}
	.c-card__date { color: var(--color-fg); }
	.c-card__idno { font-size: var(--step--2); letter-spacing: 0.02em; }
	.c-card__credit { font-size: var(--step--2); color: var(--color-accent-text); font-weight: 600; }

	/* grilla de tarjetas (sala, El Alcázar en imágenes, portada, relacionados) */
	.c-cardgrid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
		gap: var(--space-m) var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.c-cardgrid__item { min-inline-size: 0; }
	/* en una franja: una fila que se desplaza (sin barra de página) */
	.c-cardgrid--rail {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(12rem, 15rem);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		padding-block-end: var(--space-xs);
	}
	.c-cardgrid--rail > .c-cardgrid__item { scroll-snap-align: start; }
}