/*
 * c-collection — contenido de una unidad de archivo (template_archivo:
 * children.php, objects.php).
 *   c-collection-list    un grupo de subunidades del mismo nivel: título con la
 *                        cantidad y la lista de tarjetas
 *   c-collection-card    imagen | título y texto | datos (dl: código, nivel,
 *                        fechas, volumen, contenido). Con poco ancho (container
 *                        query sobre la lista) los datos pasan debajo.
 *   c-collection-objects documentos propios de la unidad: grilla de c-card y
 *                        "Ver todos"
 * Lo mínimo para que se lea; lo visual lo pone cada theme.
 */
@layer components {
	.c-collection-contents { display: grid; gap: var(--space-xl, 3rem); }
	.c-collection-list__items, .c-collection-objects__grid { margin: 0; padding: 0; list-style: none; }
	.c-collection-list__items {
		container: collection-list / inline-size;   /* las tarjetas se acomodan al ancho de la lista */
		display: grid;
		gap: var(--space-m, 1.5rem);
	}

	.c-collection-card {
		display: grid;
		grid-template-columns: 7rem minmax(0, 1fr) minmax(10rem, 14rem);
		grid-template-areas: "media body meta";
		gap: var(--space-s, 1rem) var(--space-m, 1.5rem);
		align-items: start;
	}
	@container collection-list (width < 40rem) {
		.c-collection-card { grid-template-columns: 5rem minmax(0, 1fr); grid-template-areas: "media body" "meta meta"; }
	}
	.c-collection-card__media { grid-area: media; display: block; }
	.c-collection-card__media img, .c-collection-card__placeholder {
		display: grid;
		place-items: center;
		inline-size: 100%;
		aspect-ratio: 1;
		object-fit: cover;
	}
	.c-collection-card__body { grid-area: body; min-inline-size: 0; }
	.c-collection-card__body > * { margin: 0; }
	.c-collection-card__meta { grid-area: meta; margin: 0; }
	.c-collection-card__fact dd { margin: 0; }

	.c-collection-objects__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
		gap: var(--space-m, 1.5rem);
	}
}