/**
 * ARTIS — Single "Artist" (/artists/{slug}/)
 * Cargado sólo en is_singular('ar_artist').
 * Depende de tokens de artists.css (fuentes, paleta) que se encolan también en single.
 */

/* ---------- Override wrapper Bricks .brxe-section ----------
 * Bricks aplica flex column + align-items: center al .brxe-section.
 * Forzamos width:100% en hijos para que hero/content ocupen todo el ancho.
 */
.ar-artist-single-wrap { padding: 0 !important; max-width: none !important; }
.ar-artist-single-wrap > .ar-artist-single { width: 100%; display: block; }
.ar-artist-single > * { width: 100%; }

/* ---------- Root local ---------- */
.ar-artist-single {
	--as-ink: #201b18;
	--as-muted: #a1957d;
	--as-body: #625d5c;
	--as-cream: #faf8f1;
	--as-placeholder: #e8e3da;
	--as-accent: #db321b;
	--as-accent-hover: #c02916;
	--as-border: rgba(32, 27, 24, 0.1);
	--as-border-soft: rgba(32, 27, 24, 0.08);
	color: var(--as-ink);
	font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.ar-artist-single .as-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ============================================================
   1. HERO
   ============================================================ */
.ar-artist-hero {
	position: relative;
	width: 100%;
	min-height: 100vh; height: auto;
	overflow: hidden;
	background: #1a1614;
}
.ar-artist-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ar-artist-hero::before,
.ar-artist-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.ar-artist-hero::before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 40%);
}
.ar-artist-hero::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 45%);
}
.ar-artist-hero__inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding-bottom: 64px;
}
.ar-artist-hero__content {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 0 24px 64px;
}
.ar-artist-hero__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}
@media (min-width: 1024px) {
	.ar-artist-hero__content {
		padding: 0 56px 80px;
	}
	.ar-artist-hero__container {
		padding: 0 24px;
	}
}
.ar-artist-hero__image {
	will-change: transform;
	transform: scale(1.05);
}
.ar-artist-hero__title {
	font-family: var(--ar-font-head);
	font-size: clamp(3.5rem, 9vw, 8rem);
	font-weight: 100;
	line-height: 0.88;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	max-width: 100%;
	word-break: break-word;
}
.ar-artist-hero__eyebrow {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 20px;
}

@media (max-width: 767px) {
	.ar-artist-hero {
		height: 520px;
	}
	.ar-artist-hero__inner {
		padding-bottom: 40px;
	}
}

/* ============================================================
   2. NAV sticky con tabs
   ============================================================ */
.ar-artist-tabs {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--as-border);
}
.ar-artist-tabs__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 57px;
	overflow-x: auto;
	scrollbar-width: none;
}
.ar-artist-tabs__inner::-webkit-scrollbar { display: none; }

.ar-artist-tabs__btn {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--as-ink);
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 18px 0;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.ar-artist-tabs__btn:hover,
.ar-artist-tabs__btn:focus-visible {
	color: var(--as-accent);
}
.ar-artist-tabs__btn.is-active {
	border-bottom-color: var(--as-accent);
	color: var(--as-ink);
}

/* ============================================================
   3. CONTENT
   ============================================================ */
.ar-artist-content {
	padding: 80px 0;
	background: #fff;
}
.ar-artist-panel {
	display: none;
}
.ar-artist-panel.is-active {
	display: block;
}

/* --- Panel Works (editorial alternado) --- */
.ar-works-editorial {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 56px 16px;
}
.ar-work-card {
	display: block;
	text-decoration: none;
	color: inherit;
	grid-column: 1 / -1; /* default full */
}
.ar-work-card__media {
	position: relative;
	aspect-ratio: 16 / 8;
	background: var(--as-placeholder);
	overflow: hidden;
}

/* Patrón editorial: repetición cada 5 obras */
.ar-work-card:nth-child(5n+2) { grid-column: 1 / span 6; }
.ar-work-card:nth-child(5n+2) .ar-work-card__media { aspect-ratio: 4 / 5; }
.ar-work-card:nth-child(5n+3) { grid-column: 7 / span 6; }
.ar-work-card:nth-child(5n+3) .ar-work-card__media { aspect-ratio: 4 / 5; }
.ar-work-card:nth-child(5n+4) { grid-column: 1 / span 8; }
.ar-work-card:nth-child(5n+4) .ar-work-card__media { aspect-ratio: 4 / 3; }
.ar-work-card:nth-child(5n)   { grid-column: 1 / -1; }
.ar-work-card:nth-child(5n)   .ar-work-card__media { aspect-ratio: 3 / 4; }

@media (max-width: 768px) {
	.ar-works-editorial { grid-template-columns: 1fr; gap: 40px; }
	.ar-work-card,
	.ar-work-card:nth-child(5n+2),
	.ar-work-card:nth-child(5n+3),
	.ar-work-card:nth-child(5n+4),
	.ar-work-card:nth-child(5n) { grid-column: 1 / -1; }
	.ar-work-card__media { aspect-ratio: 4 / 5 !important; }
}
.ar-work-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 700ms ease-out;
}
.ar-work-card:hover .ar-work-card__media img,
.ar-work-card:focus-visible .ar-work-card__media img {
	transform: scale(1.02);
}
.ar-work-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	padding-top: 16px;
}
.ar-work-card__title {
	font-family: var(--ar-font-head);
	font-size: 16px;
	font-weight: 500;
	color: var(--as-ink);
	margin: 0 0 4px;
	line-height: 1.3;
	transition: color 0.2s ease;
}
.ar-work-card:hover .ar-work-card__title,
.ar-work-card:focus-visible .ar-work-card__title {
	color: var(--as-accent);
}
.ar-work-card__sub {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 400;
	color: var(--as-muted);
	margin: 0;
}
.ar-work-card__year {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	color: var(--as-muted);
	flex-shrink: 0;
}

/* --- Panel Biography --- */
.ar-artist-bio__lead {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: var(--as-ink);
	max-width: 720px;
	margin: 0 0 32px;
}
.ar-artist-bio__body p {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--as-body);
	max-width: 720px;
	margin: 0 0 24px;
}
.ar-artist-bio__eyebrow {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--as-muted);
	margin: 48px 0 16px;
	display: block;
}
.ar-artist-bio__statement {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 20px;
	font-style: italic;
	line-height: 32px;
	color: var(--as-ink);
	max-width: 720px;
	margin: 0;
}

/* --- Panel Exhibitions --- */
.ar-exhibitions {
	display: flex;
	flex-direction: column;
}
.ar-exhibition {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 24px 0;
	border-bottom: 1px solid var(--as-border-soft);
}
.ar-exhibition:last-child { border-bottom: 0; }
.ar-exhibition__year {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--as-muted);
	width: 60px;
	flex-shrink: 0;
	padding-top: 2px;
}
.ar-exhibition__body { flex: 1; }
.ar-exhibition__title {
	font-family: var(--ar-font-head);
	font-size: 16px;
	font-weight: 500;
	color: var(--as-ink);
	margin: 0 0 4px;
	line-height: 1.3;
}
.ar-exhibition__venue {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	color: var(--as-body);
	margin: 0;
}

/* ============================================================
   4. CTA dark band
   ============================================================ */
.ar-artist-cta {
	background: #201b18;
	color: #fff;
	padding: 96px 24px;
	text-align: center;
}
.ar-artist-cta__eyebrow {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 32px;
	display: block;
}
.ar-artist-cta__quote {
	font-family: var(--ar-font-head);
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	margin: 0 auto;
	max-width: 900px;
}

/* ============================================================
   5. Footer link
   ============================================================ */
.ar-artist-footer {
	border-top: 1px solid var(--as-border);
	padding: 64px 24px;
	text-align: center;
}
.ar-artist-footer__link {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--as-ink);
	text-decoration: none;
	transition: color 0.2s ease;
}
.ar-artist-footer__link:hover,
.ar-artist-footer__link:focus-visible {
	color: var(--as-accent);
}

/* ============================================================
   Animaciones
   ============================================================ */
@keyframes artisFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}
.ar-artist-hero__title,
.ar-artist-hero__eyebrow {
	opacity: 0;
	animation: artisFadeUp 0.6s ease-out forwards;
}
.ar-artist-hero__eyebrow { animation-delay: 40ms; }
.ar-artist-hero__title   { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
	.ar-artist-hero__title,
	.ar-artist-hero__eyebrow {
		opacity: 1;
		animation: none;
	}
	.ar-work-card__media img { transition: none; }
}

/* ============================================================
   6. Biography grid (2 columnas: main + sidebar Collections)
   ============================================================ */
.ar-bio {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 64px;
}
.ar-bio__main { grid-column: 2 / span 6; }
.ar-bio__sidebar { grid-column: 9 / span 3; }
@media (max-width: 1024px) {
	.ar-bio { grid-template-columns: 1fr; gap: 48px; }
	.ar-bio__main,
	.ar-bio__sidebar { grid-column: 1 / -1; }
}
.ar-bio__lead {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: var(--as-ink);
	margin: 0 0 32px;
}
.ar-bio__body p {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--as-body);
	margin: 0 0 24px;
}
.ar-bio__eyebrow {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--as-muted);
	margin: 48px 0 16px;
}
.ar-bio__sidebar .ar-bio__eyebrow { margin-top: 0; }
.ar-bio__statement {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 20px;
	font-style: italic;
	line-height: 32px;
	color: var(--as-ink);
	margin: 0;
	padding: 0;
	border: 0;
}
.ar-bio__collections {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ar-bio__collections li {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	font-size: 14px;
	line-height: 24px;
	color: var(--as-ink);
	padding: 8px 0;
	border-bottom: 1px solid rgba(32, 27, 24, 0.08);
}
.ar-bio__collections li:last-child { border-bottom: 0; }

/* ============================================================
   7. Reveal genérico (consume el observer de scripts.js)
   ============================================================ */
.ar-artist-single .ar-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 700ms ease-out, transform 700ms ease-out;
	transition-delay: var(--ar-reveal-delay, 0ms);
}
.ar-artist-single .ar-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.ar-artist-single .ar-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ar-artist-hero__image {
		transform: none;
	}
}