/* ═══════════════════════════════════════════════════════════
   HOME 3 — binnenkomst van het museum: de serie Terrassen
   Gedeelde zaalstijl staat in museum.css.
   ═══════════════════════════════════════════════════════════ */

.h3-hero{
	display: grid; grid-template-columns: minmax(240px, 1fr) 2.4fr;
	gap: clamp(32px, 5vw, 96px); align-items: end;
	min-height: calc(100vh - var(--lp-bottom, 0px)); min-height: calc(100svh - var(--lp-bottom, 0px));
	padding: calc(var(--nav) + clamp(32px, 6vh, 72px)) var(--gutter) clamp(40px, 8vh, 96px);
}
.h3-hero__cta{ margin-top: 2.4rem; }
.h3-hero__work{ margin: 0; justify-self: end; }
.h3-hero__work img{ max-height: calc(100svh - var(--nav) - var(--lp-bottom, 0px) - 180px); }
.h3-hero__work figcaption{ margin-top: .7rem; color: var(--muted); }

.h3-series{ grid-template-columns: repeat(3, 1fr); }
/* bovenaan staat de spelerbalk onder de hero; de volgende sectie begint daaronder */
html.lp-has-bar .h3-hero + .m-section{ padding-top: max(clamp(64px, 10vh, 120px), calc(var(--lp-bottom) + 32px)); }

.h3-artist{
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px);
	align-items: start; padding-bottom: clamp(96px, 14vh, 160px);
}
.h3-artist__photo{ margin: 0; }
.h3-artist__photo img{ width: 100%; height: auto; display: block; }
.h3-artist__photo figcaption{ color: var(--muted); margin-top: .7rem; }
.h3-artist__body h2{ margin-bottom: 2rem !important; }
.h3-artist__body blockquote{ margin: 0 0 1.6rem; }
.h3-artist__body p{ color: var(--muted); max-width: 58ch; margin-bottom: 2rem; }
.h3-artist__links{ display: flex; gap: 2rem; }
.h3-artist__links a{ color: var(--ink); }

@media (max-width: 900px){
	.h3-hero{ grid-template-columns: 1fr; min-height: 0; align-items: start; }
	.h3-hero__work{ justify-self: stretch; order: -1; margin: 0 0 32px; }
	.h3-hero__work img{ max-height: none; width: 100%; }
	.h3-series{ grid-template-columns: 1fr; }
	.h3-artist{ grid-template-columns: 1fr; }
}

/* ═══════════ MUZIEK ═══════════ */
.h3-music{
	display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: clamp(32px, 6vw, 120px);
	align-items: center;
}
.h3-music__cover{ margin: 0; }
.h3-music__cover img{ display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.h3-music__body h2{ margin-bottom: 1.4rem !important; max-width: 16ch; }
.h3-music__body p{ color: var(--muted); max-width: 52ch; }
.h3-music__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-top: 2.2rem !important; }

@media (max-width: 900px){
	.h3-music{ grid-template-columns: 1fr; }
	.h3-music__cover{ max-width: 320px; }
}

/* ═══════════ EXPOSITIE ═══════════ */
.h3-expo{
	display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; flex-wrap: wrap;
	margin: clamp(24px, 4vh, 48px) var(--gutter) 0;
	padding: clamp(40px, 6vh, 64px) clamp(24px, 4vw, 56px);
	background: var(--wall-2);
}
/* bovenaan staat de spelerbalk onder de hero; het blok begint daaronder */
html.lp-has-bar .h3-hero + .h3-expo{ margin-top: calc(var(--lp-bottom) + 24px); padding-top: clamp(40px, 6vh, 64px); }
.h3-expo__body{ max-width: 46rem; }
.h3-expo__when{ font-size: var(--fs-s); font-weight: 500; margin-bottom: .8rem !important; }
.h3-expo h2{ margin-bottom: 1rem !important; }
.h3-expo__body p:last-child{ color: var(--muted); max-width: 52ch; }

/* tijdelijk: de pianovideo als openingsbeeld (config/site.php → home_video) */
.h3-hero__video{ width: 100%; }
.h3-hero__video video{
	display: block; width: 100%; height: auto; max-height: calc(100svh - var(--nav) - var(--lp-bottom, 0px) - 120px);
	aspect-ratio: 2 / 1; object-fit: cover; background: #1a1714;
}