/*
 * Projectdetail (Figma frame 97:2289, 1920×4106). Geladen vanuit
 * single-spk_project.php (samen met page.css als hero-basis). Maten uit de
 * design-data: blokcontainer 1106, foto's 403 hoog, rijen van 2/3 met 22px
 * tussenruimte en 23px rij-afstand, Terug/Volgende 47px, share-iconen 31px.
 */

/* ---------- Gedeelde animatie-basis (JS zet .is-inview; zie theme.js) ---------- */
[data-anim] {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-anim='up'] { transform: translateY(40px); }
[data-anim='pop'] { transform: translateY(14px) scale(0.95); }
[data-anim].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	[data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Hero-maatwerk (Figma: titel onderin de hero, y=473) ---------- */
.spk-project-hero .spk-page-hero__inner { padding-top: 473px; }

/* ---------- Contentzone (blok 1106 + 2×24 padding) ---------- */
.spk-project {
	max-width: 1154px;
	margin-inline: auto;
	padding: 0 24px 49px;
}
.spk-project__content {
	padding-top: 56px;
	max-width: 940px;
}

/* ---------- Galerijsecties Before / After ---------- */
.spk-project__section--before { padding-top: 96px; }
.spk-project__section--after { padding-top: 52px; }
.spk-project__label {
	margin: 0 0 23px;
	font-size: 25px;
	font-weight: 400;
	line-height: normal;
}
.spk-project__row {
	display: grid;
	gap: 22px;
	margin-bottom: 23px;
}
.spk-project__row:last-child { margin-bottom: 0; }
.spk-project__row--2 { grid-template-columns: repeat(2, 1fr); }
.spk-project__row--3 { grid-template-columns: repeat(3, 1fr); }
.spk-project__row img {
	display: block;
	width: 100%;
	height: 403px;
	object-fit: cover;
}

/* ---------- Terug / Volgende (outline 2px, 47px hoog) ---------- */
.spk-project-nav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 51px;
}
.spk-project-nav__btn { border-width: 2px; }
.spk-project-nav__btn--prev { min-width: 120px; }
.spk-project-nav__btn--next { min-width: 144px; }
.spk-project-nav__arrow--left { transform: rotate(-90deg); } /* pijl naar links */

/* ---------- Delen ---------- */
.spk-project-share {
	text-align: center;
	margin-top: 23px;
}
.spk-project-share__title {
	margin: 0 0 18px;
	font-size: 25px;
	font-weight: 700;
	text-transform: uppercase;
}
.spk-project-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
}
.spk-project-share__list img {
	display: block;
	width: 31px;
	height: 31px;
}
.spk-project-share__list a {
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}
.spk-project-share__list a:hover { opacity: 0.75; }

/* ---------- Responsive ---------- */
@media (max-width: 1500px) {
	.spk-project-hero .spk-page-hero__inner { padding-top: 390px; }
}
@media (max-width: 1100px) {
	.spk-project-hero .spk-page-hero__inner { padding-top: 290px; }
	/* Afsluitmarge onder de deelknoppen mee laten krimpen: samen met de
	   56px pre-footer-padding was dat op elke breedte 105px (= de 1920-maat),
	   waardoor er onder de kleine share-iconen een leeg zwart gat bleef. */
	.spk-project { padding-bottom: 32px; }
	.spk-project__section--before { padding-top: 64px; }
	.spk-project__row img { height: 300px; }
}
@media (max-width: 640px) {
	.spk-project-hero .spk-page-hero__inner { padding-top: 240px; }
	.spk-project { padding-bottom: 24px; }
	.spk-project__section--before { padding-top: 48px; }
	.spk-project__section--after { padding-top: 40px; }
	.spk-project__row--2,
	.spk-project__row--3 { grid-template-columns: 1fr; }
	.spk-project__row img { height: 260px; }
	.spk-project-nav { margin-top: 36px; }
	.spk-project-nav__btn--prev,
	.spk-project-nav__btn--next { min-width: 0; flex: 1 1 auto; }
}