/*
 * v-detail-entities — ficha de artista o persona.
 *   arriba: tarjeta (tipo, nombre, fechas) y la obra de portada al costado;
 *   cuerpo: datos en filas etiqueta | valor con filetes y la biografía, con las
 *           herramientas a la derecha;
 *   abajo:  sus obras en una banda, con "ver todos" como píldora.
 */
@layer views {
	.v-detail-entities { container: entity / inline-size; display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: var(--space-s); }
	.v-detail-entities > * { grid-column: 1 / -1; }
	.v-detail-entities > .c-detail-nav__back { grid-column: 1; }
	.v-detail-entities > .detailNavBgLeft { grid-column: 2; }
	.v-detail-entities > .detailNavBgRight { grid-column: 3; }

	/* tarjeta y portada */
	.c-detail-hero {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas: "card media";
		align-items: end;
		gap: var(--space-xl);
		margin-block: var(--space-m) var(--space-xl);
	}
	.c-detail-hero__card { grid-area: card; display: grid; gap: var(--space-2xs); padding-block-end: var(--space-s); border-block-end: 1px solid var(--color-strong); }
	.c-detail-hero__eyebrow { color: var(--color-accent-text); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
	.c-detail-hero__title { font-size: var(--step-5); }
	.c-detail-hero__dates { font-family: var(--font-heading); font-size: var(--step-2); color: var(--color-muted); }
	.c-detail-hero__media { grid-area: media; display: grid; gap: var(--space-2xs); margin: 0; }
	.c-detail-hero__media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--space-s); background: var(--color-soft); }
	.c-detail-hero__caption { font-size: var(--step--2); color: var(--color-muted); }
	.c-detail-hero__caption a { font-family: var(--font-heading); font-size: var(--step-0); font-style: italic; color: var(--color-strong); text-decoration: none; }
	.c-detail-hero:not(:has(.c-detail-hero__media)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card"; }

	/* cuerpo */
	.v-detail-entities .c-detail__body {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		column-gap: var(--space-2xl);
		row-gap: var(--space-l);
		align-items: start;
	}
	.v-detail-entities .c-detail__body > * { grid-column: 1; }
	.v-detail-entities #tools-bar-container { grid-column: 2; grid-row: 1; justify-self: end; }
	.v-detail-entities .c-detail__body > .c-metadata:not(.c-metadata--text) .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);
	}
	.v-detail-entities .c-detail__body > .c-metadata:not(.c-metadata--text) .c-metadata__item dt { font-size: var(--step-0); }
	.v-detail-entities .c-metadata--text { display: grid; justify-items: start; gap: var(--space-2xs); }

	/* obras: banda a todo el ancho */
	.v-detail-entities .related-block {
		grid-column: 1 / -1;
		display: grid;
		margin-block-start: var(--space-xl);
		padding-block: var(--space-xl);
		background: var(--color-band);
		box-shadow: 0 0 0 100vmax var(--color-band);
		clip-path: inset(0 -100vmax);
	}
	.v-detail-entities .related-block > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-m); }
	.v-detail-entities .related-block > div > * { grid-column: 1 / -1; }
	.v-detail-entities .related-title { grid-row: 1; grid-column: 1 !important; font-size: var(--step-3); }
	.v-detail-entities .related-title::after { content: ""; display: inline-block; inline-size: 0.28em; aspect-ratio: 1; margin-inline-start: 0.22em; border-radius: 50%; background: var(--color-accent); vertical-align: 0.6em; }
	.v-detail-entities .related-block .c-results-nav { grid-row: 1; grid-column: 2 !important; }
	.v-detail-entities .c-results__legend { color: var(--color-muted); font-size: var(--step--1); margin-block: var(--space-2xs) var(--space-m); }
	.v-detail-entities .c-results__legend a { color: var(--color-strong); }
	.v-detail-entities .c-results__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: var(--space-m); }
	.v-detail-entities .u-hide-on-entity-detail { display: none; }
	#pageArea.v-detail-entities:has(.related-block) { padding-block-end: 0; }
	.v-detail-entities .related-block .c-results__more .c-button { background: var(--color-surface); }

	@container entity (width < 50rem) {
		.c-detail-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "card"; gap: var(--space-m); }
		.v-detail-entities .c-detail__body { grid-template-columns: minmax(0, 1fr); }
		.v-detail-entities #tools-bar-container { grid-column: 1; grid-row: auto; justify-self: start; }
		.v-detail-entities .c-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
	}
}