/* ==========================================================================
   Clazing & Mol — page-level composition

   The screens from the design system's website kit, rebuilt as plain CSS:
   hero, service cards, werkwijze, quote band, closing CTA, content pages,
   the contact form and the photo gallery with its lightbox.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero. Text left, photo right — not a full-bleed photo with type over it,
   so the copy never depends on how bright a particular job photo turned out.
   -------------------------------------------------------------------------- */
.hero {
	background: var(--surface-page);
	border-bottom: 1px solid var(--border-subtle);
}
.hero_grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: var(--space-8);
	align-items: center;
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}
.hero_title {
	font: var(--text-display-l);
	letter-spacing: var(--tracking-display);
	margin: var(--space-4) 0;
}
.hero_intro {
	font: var(--text-body-l);
	color: var(--text-muted);
	max-width: 46ch;
	margin: 0;
}
.hero_actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}
.hero_plate { height: 470px; }

/* --------------------------------------------------------------------------
   Service cards — the main-menu pages, with an excerpt of each page's own
   body as the card text.
   -------------------------------------------------------------------------- */
.service_grid {
	display: grid;
	grid-template-columns: repeat(var(--service-cols, 4), minmax(0, 1fr));
	gap: var(--space-4);
}
.service_grid .card { display: flex; flex-direction: column; }
.service_plate { flex: 0 0 auto; height: 150px; }

/* The body fills what is left of the card so the "Bekijk" line sits on the
   same baseline across a row, however long the excerpt runs. */
.service_card_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-4);
}
.service_card_body .icon { color: var(--accent); }
.service_card_body h3 {
	font-size: var(--size-h4);
	margin: var(--space-2) 0;
}
.service_card_body p {
	font: var(--text-body-s);
	color: var(--text-muted);
	margin: 0;
}
.service_card_link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: var(--space-4);
	color: var(--text-accent);
	font: var(--weight-bold) var(--size-caption)/1 var(--font-display);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Werkwijze — the numbered steps written as an ordered list in the CMS.
   Each step sits under a 3px green top rule.
   -------------------------------------------------------------------------- */
.step_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
}
.step {
	border-top: var(--rule-accent) solid var(--accent);
	padding-top: var(--space-4);
}
.step_number {
	font: var(--weight-bold) var(--size-h1)/1 var(--font-display);
	color: var(--cm-neutral-300);
}
.step h3 { margin: var(--space-3) 0 var(--space-2); }
.step p {
	font: var(--text-body-m);
	color: var(--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   Quote band. The first blockquote in the homepage body, full-bleed over a
   job photo with a flat ink scrim — no protection gradient, no blur.
   -------------------------------------------------------------------------- */
.quote_band {
	position: relative;
	overflow: hidden;
	padding: var(--section-y) 0;
	background: var(--surface-dark);
	color: var(--text-inverse);
	text-align: center;
}
.quote_band_photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.quote_band_scrim {
	position: absolute;
	inset: 0;
	background: var(--scrim-photo);
}
.quote_band .container { position: relative; }
.quote_mark {
	display: block;
	width: auto;
	height: 56px;
	margin: 0 auto var(--space-5);
}
.quote_text {
	font: var(--weight-medium) var(--size-h1)/1.35 var(--font-display);
	color: var(--text-inverse);
	margin: 0;
}
.quote_source {
	display: block;
	margin-top: var(--space-4);
	font: var(--text-body-s);
	color: var(--cm-neutral-400);
}

/* --------------------------------------------------------------------------
   Closing CTA — the one green-filled band on the page
   -------------------------------------------------------------------------- */
.cta_band { padding: var(--space-8) 0; }
.cta_band .container {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.cta_band_copy { flex: 1; }
.cta_band h2 {
	font: var(--text-h1);
	color: var(--text-inverse);
}
.cta_band p {
	font: var(--text-body-l);
	color: rgba(255, 255, 255, .9);
	margin: var(--space-2) 0 0;
}

/* --------------------------------------------------------------------------
   Content pages
   -------------------------------------------------------------------------- */
.page_head {
	padding-top: var(--section-y-tight);
	padding-bottom: var(--space-6);
}
.page_head .display {
	font: var(--text-display-m);
	letter-spacing: var(--tracking-display);
	margin: var(--space-3) 0 0;
}
.page_head .tag_list { margin-top: var(--space-5); }

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font: var(--weight-bold) var(--size-overline)/1.2 var(--font-display);
	letter-spacing: var(--tracking-overline);
	text-transform: uppercase;
}
.breadcrumb a {
	border: none;
	color: var(--text-accent);
}
.breadcrumb a:hover { color: var(--accent); border: none; }
.breadcrumb_separator {
	display: inline-flex;
	line-height: 0;
	color: var(--cm-neutral-400);
}
.breadcrumb_current { color: var(--text-faint); }

.page_layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-7);
	align-items: start;
	padding-bottom: var(--section-y);
}
.page_layout_wide { grid-template-columns: minmax(0, 1fr); }
.page_aside { position: static; }

.gallery_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin: var(--space-8) 0 var(--space-5);
}
.gallery_head h2 { font: var(--text-h2); }

.contact_lines {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-4) 0;
}
.contact_lines > a,
.contact_lines > span {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font: var(--text-body-s);
	border-bottom-color: transparent;
}
.contact_lines .icon { color: var(--accent); margin-top: 2px; }
.contact_lines > a:hover { border-bottom-color: var(--accent); }
.card_dark .contact_lines > a,
.card_dark .contact_lines > span { color: var(--cm-neutral-300); }
.card_dark .contact_lines > a:hover { color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   Diensten — one tab per service (design system: navigation/Tabs, underline
   variant). Each panel is the opening of that service's own page: intro,
   checklist, the two actions and its first photo.
   -------------------------------------------------------------------------- */
.page_head .page_lead {
	font: var(--text-body-l);
	color: var(--text-muted);
	max-width: var(--measure-body);
	margin: var(--space-4) 0 0;
}

/* The grey rule is an inset shadow rather than a border, so the tab row can
   scroll sideways on a phone and the green underline still sits on top of it. */
.tabs {
	display: flex;
	gap: var(--space-6);
	overflow-x: auto;
	box-shadow: inset 0 -1px 0 var(--border-subtle);
	scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
	flex: 0 0 auto;
	padding: 0 0 12px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	color: var(--text-muted);
	font: var(--weight-bold) var(--size-body-s)/1 var(--font-display);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--transition-control);
}
.tab:hover { color: var(--text-heading); }
.tab[aria-selected="true"] {
	color: var(--text-heading);
	border-bottom-color: var(--accent);
}

.service_panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-7);
	align-items: start;
	margin-top: var(--space-6);
}
/* Without JS the panels stand one under the other; with JS only the chosen one shows. */
html:not(.js) .service_panel + .service_panel { margin-top: var(--space-8); }
.js .service_panel:not(.is_active) { display: none; }
.js .service_panel.is_active { animation: fade_in var(--dur-slow) var(--ease-out) both; }
.service_panel h2 { font: var(--text-h2); }
.service_panel_lead {
	font: var(--text-body-l);
	color: var(--text-muted);
	margin: var(--space-3) 0 0;
}
.check_list {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-5) 0 0;
	padding: 0;
	list-style: none;
}
.check_list li {
	display: flex;
	gap: var(--space-3);
	font: var(--text-body-m);
}
.check_list .icon { flex: 0 0 auto; margin-top: 2px; color: var(--accent); }
.service_panel_actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}
.service_panel_more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--space-5);
	font: var(--weight-bold) var(--size-caption)/1 var(--font-display);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
}
.service_panel_plate { height: 420px; }
.service_rest { margin-top: var(--space-8); }

@media (max-width: 960px) {
	.service_panel {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}
	.service_panel_plate { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
	.js .service_panel.is_active { animation: none; }
}

/* --------------------------------------------------------------------------
   Projects — Velifact web_projects. The cards reuse the service card body;
   the plate is taller, because on a project the photo is the point.
   -------------------------------------------------------------------------- */
.project_plate { flex: 0 0 auto; height: 220px; }
.prose + .project_grid { margin-top: var(--space-7); }

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.contact_layout {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: var(--space-7);
	align-items: start;
	padding-bottom: var(--section-y);
}
.contact_form {
	display: grid;
	gap: var(--space-5);
}
.contact_form_row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}
.contact_form_actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}
.contact_aside {
	display: grid;
	gap: var(--space-4);
	align-content: start;
}
.contact_aside_plate { height: 180px; }

/* --------------------------------------------------------------------------
   Photo gallery and lightbox
   -------------------------------------------------------------------------- */
.photo_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
}
.photo_tile {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0;
	overflow: hidden;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-align: left;
	transition:
		box-shadow var(--dur-base) var(--ease-standard),
		transform var(--dur-base) var(--ease-standard);
}
.photo_tile:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.photo_tile img {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: 200px;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-standard);
}
.photo_tile:hover img { transform: scale(1.03); }
.photo_caption {
	display: block;
	padding: var(--space-3) var(--space-4);
	font: var(--text-body-s);
	color: var(--text-muted);
}

.lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 80;
	background: var(--scrim-lightbox);
	padding: var(--space-5);
}
.lightbox.is_open {
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox_stage {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	max-width: 100%;
	max-height: 100%;
}
.lightbox figure {
	margin: 0;
	max-width: 100%;
	text-align: center;
}
.lightbox figure img {
	display: block;
	max-width: 100%;
	max-height: 74vh;
	margin: 0 auto;
	object-fit: contain;
}
.lightbox figcaption {
	margin-top: var(--space-4);
	font: var(--text-body-s);
	color: var(--cm-neutral-300);
}
.lightbox_close {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
}
.lightbox_counter {
	position: absolute;
	left: 50%;
	bottom: var(--space-5);
	transform: translateX(-50%);
	font: var(--weight-bold) var(--size-overline)/1 var(--font-display);
	letter-spacing: var(--tracking-overline);
	color: var(--cm-neutral-400);
}
.lightbox_mobile_nav { display: none; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.error_page {
	display: flex;
	align-items: center;
	min-height: 70vh;
	padding: var(--section-y) 0;
}
.error_code {
	font: var(--text-display-xl);
	letter-spacing: var(--tracking-display);
	color: var(--cm-neutral-300);
}
.error_page h1 {
	font: var(--text-display-m);
	letter-spacing: var(--tracking-display);
	margin: var(--space-3) 0 var(--space-4);
}
.error_page p {
	font: var(--text-body-l);
	color: var(--text-muted);
	max-width: var(--measure-narrow);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.service_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	.hero_grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}
	.hero_plate { height: 320px; }
	.page_layout,
	.contact_layout { grid-template-columns: minmax(0, 1fr); }
	.step_grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
	.cta_band .container {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-5);
	}
}

@media (max-width: 700px) {
	.service_grid { grid-template-columns: minmax(0, 1fr); }
	.step_grid { grid-template-columns: minmax(0, 1fr); }
	.contact_form_row { grid-template-columns: minmax(0, 1fr); }
	.photo_grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
	.photo_tile img { height: 150px; }
	.hero_plate { height: 260px; }
	.quote_text { font-size: var(--size-h3); }
	.gallery_head { margin-top: var(--space-7); }
}

@media (max-width: 620px) {
	.lightbox_desktop_nav { display: none; }
	.lightbox_mobile_nav {
		display: flex;
		gap: var(--space-3);
		position: absolute;
		left: 50%;
		bottom: var(--space-8);
		transform: translateX(-50%);
	}
	.lightbox_counter { bottom: var(--space-4); }
	.lightbox figure img { max-height: 60vh; }
}