/*
 * c-metadata — datos de la ficha.
 *   --summary      datos principales: filas etiqueta / valor con filetes
 *   --main         texto (descripción) con "Leer más"
 *   -group         grupo con título ("Información del objeto") y secciones
 *   --collapsible  sección con título-botón (c-collapse): acordeón en angosto
 * Etiquetas en serif, valores en sans; en ancho, pares en dos columnas.
 */
@layer components {
	.c-metadata { container: metadata / inline-size; }
	.c-metadata__list { display: grid; margin: 0; }
	.c-metadata__item { display: grid; align-content: start; gap: 0.15rem; }
	.c-metadata__item dt { font-family: var(--font-heading); font-size: var(--step-1); color: var(--color-strong); line-height: 1.3; }
	.c-metadata__item dd { margin: 0; }

	/* datos principales: filas etiqueta | valor */
	.c-metadata--summary .c-metadata__list:empty { display: none; }
	.c-metadata--summary:has(.c-metadata__list:empty) { display: none; }
	.c-metadata--summary .c-metadata__item {
		grid-template-columns: minmax(8rem, 1fr) 2fr;
		gap: var(--space-s);
		padding-block: var(--space-xs);
		border-block-end: 1px solid var(--color-rule);
	}
	.c-metadata--summary .c-metadata__item dt { font-size: var(--step-0); }
	@container metadata (width < 26rem) {
		.c-metadata--summary .c-metadata__item { grid-template-columns: 1fr; gap: 0; }
	}

	/* texto */
	.c-metadata--main { display: grid; justify-items: start; gap: var(--space-2xs); }
	.c-metadata__text { max-inline-size: var(--measure); }
	.c-more[data-state="closed"] { mask-image: linear-gradient(black 60%, transparent); }
	.c-metadata__more, .c-more__toggle {
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-strong);
		font-size: var(--step--1);
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: var(--color-rule);
		text-underline-offset: 0.3em;
		cursor: pointer;
	}

	/* grupo y secciones */
	.c-metadata-group__title { font-size: var(--step-3); }
	.c-metadata--collapsible { padding-block: var(--space-m); border-block-start: 1px solid var(--color-rule); }
	.c-metadata__title { font-size: var(--step-2); }
	.c-metadata__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		inline-size: 100%;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		font: inherit;
		text-align: start;
		cursor: pointer;
	}
	.c-metadata__toggle::after {
		content: "";
		flex: none;
		inline-size: 0.5em;
		aspect-ratio: 1;
		border-inline-end: 1.5px solid var(--color-accent);
		border-block-end: 1.5px solid var(--color-accent);
		rotate: 45deg;
		translate: 0 -0.15em;
		transition: rotate var(--duration) var(--easing);
	}
	.c-metadata__toggle[aria-expanded="true"]::after { rotate: -135deg; translate: 0 0.1em; }
	.c-metadata__panel { padding-block-start: var(--space-s); }
	.c-metadata__panel .c-metadata__list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
		gap: var(--space-m) var(--space-l);
	}
	.c-metadata__panel .c-metadata__item dt { font-size: var(--step-0); }
	.c-metadata__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
	.c-metadata__links a {   /* chips, como la indexación de la referencia */
		display: inline-block;
		padding: 0.25em 0.75em;
		background: var(--color-soft);
		font-size: var(--step--1);
		text-decoration: none;
	}
	.c-metadata__links a:hover { background: var(--color-band); }
}

/* bloque genérico (template_default.tmpl/metadata.php, sin clases propias):
   título de sección y, debajo, pares etiqueta / valor */
@layer components {
	.c-metadata__heading { font-size: var(--step-2); margin-block-end: var(--space-xs); padding-block-start: var(--space-m); border-block-start: 1px solid var(--color-rule); }
	.c-metadata__heading + div:has(> div > p) {
		display: grid;
		grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
	}
	.c-metadata__heading + div:has(> div > p) > div { padding-block: var(--space-2xs); border-block-end: 1px solid var(--color-border); }
	.c-metadata__heading + div:has(> div > p) > div:nth-child(odd) p { font-family: var(--font-heading); color: var(--color-strong); }
	.c-metadata__heading + div > div > div { max-inline-size: var(--measure); }
}