/**
 * Wandhaus — per-material editorial reference page (§30).
 *
 * Scoped to the `single-wh_material.php` template via `.wh-material-page`.
 * Stylesheet handle: scc-wandhaus-material (conditionally enqueued).
 */

.wh-material-page {
	--material-page-max: var(--editorial-max); /* aligns the editorial column with all other overview pages; the photographic hero keeps its own treatment */
	--material-prose-max: 60ch;
	color: var(--ink);
	font-family: var(--font-body);
}

/* ── 30.1 Hero ───────────────────────────────────────────────────── */

.wh-material__hero {
	position: relative;
	min-height: clamp(280px, 42vw, 480px);
	background: var(--ink);
	background-image: var(--hero-img, linear-gradient(135deg, var(--bg-alt) 0%, var(--border-strong) 100%));
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	color: var(--bg);
	padding: clamp(var(--s-6), 5vw, var(--s-56)) 0 clamp(var(--s-6), 5vw, var(--s-7));
	overflow: hidden;
}

.wh-material__hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 100%);
	pointer-events: none;
}

.wh-material__hero-inner {
	position: relative;
	max-width: var(--material-page-max);
	margin-inline: auto;
	padding: 0 var(--page-pad);
	width: 100%;
}

.wh-material__hero .wh-breadcrumbs,
.wh-material__hero .wh-page__breadcrumbs {
	color: rgba(255, 255, 255, .85);
	margin-bottom: var(--s-4);
}

/* Component base styles (wandhaus-mobile.css) set explicit colors on
 * the link / current / separator children via tokens (--ink-muted +
 * --ink), which beat the parent's inherited white via specificity.
 * Force them to inherit so the whole trail reads in the same
 * hero-white on dark surfaces. Hover lifts to pure white. */
.wh-material__hero .wh-breadcrumbs__link,
.wh-material__hero .wh-breadcrumbs__current,
.wh-material__hero .wh-breadcrumbs__sep,
.wh-material__hero .wh-page__breadcrumbs a {
	color: inherit;
}
.wh-material__hero .wh-breadcrumbs__link:hover {
	color: var(--bg);
}

.wh-material__hero-title {
	font-family: var(--font-display);
	font-size: clamp(40px, 7vw, 72px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 0;
	color: var(--bg);
	text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

/* ── Layout (main + aside) ───────────────────────────────────────── */

.wh-material__layout {
	max-width: var(--material-page-max);
	margin: clamp(var(--s-7), 6vw, 80px) auto 0;
	padding: 0 var(--page-pad);
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(var(--s-6), 5vw, var(--s-8));
	align-items: start;
}

@media (max-width: 1023px) {
	.wh-material__layout { grid-template-columns: 1fr; gap: var(--s-40); }
}

.wh-material__main { min-width: 0; }

.wh-material__aside { min-width: 0; }

@media (min-width: 1024px) {
	.wh-material__aside {
		position: sticky;
		top: calc(var(--wh-topnav-h, 76px) + 24px);
	}
}

/* ── 30.2 Blurb ──────────────────────────────────────────────────── */

.wh-material__blurb {
	font-family: var(--font-body);
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0 0 var(--s-5);
	max-width: var(--material-prose-max);
}

/* ── 30.4 Story (the_content) ────────────────────────────────────── */

.wh-material__story p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-2);
	margin: 0 0 1em;
	max-width: var(--material-prose-max);
}

.wh-material__story p:last-child { margin-bottom: 0; }

.wh-material__story a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--border-strong);
	text-underline-offset: 3px;
	transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.wh-material__story a:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}

/* ── Section titles (presets, FAQ) ───────────────────────────────── */

.wh-material__section-title {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 500;
	color: var(--ink);
	margin: var(--s-56) 0 var(--s-20);
}

/* ── 30.3 Specs sidebar ──────────────────────────────────────────── */

.wh-material__specs {
	background: var(--surface);
	border: 1px solid var(--border);
	padding: 22px 22px 18px;
}

.wh-material__specs-title {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0 0 14px;
}

.wh-material__specs-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wh-material__specs-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--s-4);
	padding: 10px 0;
	border-top: 1px solid var(--border);
	font-size: 14px;
}
.wh-material__specs-row:first-child {
	border-top: 0;
	padding-top: 0;
}

.wh-material__specs-key {
	color: var(--ink-muted);
	flex: 0 0 auto;
}
.wh-material__specs-val {
	color: var(--ink);
	font-weight: 500;
	letter-spacing: .01em;
	text-align: right;
	min-width: 0;
}

/* Boolean spec pills — only positive ("Ja") values surface as pills.
 * Sits above the labelled spec list as a scannable summary of attested
 * qualities (PVC-vrij · FSC · PEFC · …). Hidden entirely when no
 * boolean specs are filled. */
.wh-material__specs-pills {
	list-style: none;
	margin: 0 0 var(--s-4);
	padding: 0 0 var(--s-4);
	border-bottom: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.wh-material__specs-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--ink);
	background: var(--accent-soft);
	border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
	padding: var(--s-1) 10px;
	border-radius: var(--radius-pill);
	font-weight: 500;
}
.wh-material__specs-pill-icon {
	color: var(--accent);
	flex-shrink: 0;
}

/* ── 30.4b Downloads ─────────────────────────────────────────────── */

/* Cert / montage / datasheet downloads block. Hidden entirely when zero
 * entries (see partial guard). Rows are flat — no panel chrome — so the
 * block reads as part of the editorial story it sits below. */
.wh-material__downloads {
	margin: var(--s-7) 0 0;
}
.wh-material__download-list {
	list-style: none;
	margin: var(--s-4) 0 0;
	padding: 0;
}
.wh-material__download {
	border-top: 1px solid var(--border);
}
.wh-material__download:last-child {
	border-bottom: 1px solid var(--border);
}
.wh-material__download-link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-4) 0;
	color: var(--ink);
	text-decoration: none;
	transition: color .18s var(--ease);
}
.wh-material__download-link:hover { color: var(--accent); }
.wh-material__download-icon {
	color: var(--ink-muted);
	flex-shrink: 0;
	transition: color .18s var(--ease);
}
.wh-material__download-link:hover .wh-material__download-icon { color: var(--accent); }
.wh-material__download-label {
	font-size: var(--type-sm);
	font-weight: 500;
	min-width: 0;
}
.wh-material__download-meta {
	font-size: 10px;
	color: var(--ink-muted);
	white-space: nowrap;
}

/* ── 30.5 Preset strip ───────────────────────────────────────────── */

.wh-material__preset-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-4);
}

@media (max-width: 1023px) {
	.wh-material__preset-grid { grid-template-columns: repeat(2, 1fr); }
}

.wh-material__preset { min-width: 0; }

.wh-material__preset-link {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	color: var(--ink);
	text-decoration: none;
	transition: color .2s var(--ease);
}

.wh-material__preset-thumb {
	display: block;
	aspect-ratio: 4 / 5;
	background: var(--bg-alt);
	overflow: hidden;
}

.wh-material__preset-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--ease);
}

.wh-material__preset-link:hover .wh-material__preset-thumb img { transform: scale(1.04); }

.wh-material__preset-thumb-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--bg-alt) 0%, var(--border) 100%);
}

.wh-material__preset-name {
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.wh-material__preset-link:hover .wh-material__preset-name { color: var(--accent); }

/* ── 30.6 FAQ ────────────────────────────────────────────────────── */

.wh-material__faq-list {
	display: flex;
	flex-direction: column;
	max-width: var(--material-prose-max);
	/* Accordion = top + bottom rule only, no left/right (design system §"Accordion · FAQ"). */
	border-top: 1px solid var(--border);
}

.wh-material__faq-item {
	border: 0;
	border-bottom: 1px solid var(--border);
	padding: 14px 0;
}

.wh-material__faq-question {
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	list-style: none;
}
.wh-material__faq-question::-webkit-details-marker { display: none; }
.wh-material__faq-question::after {
	content: '+';
	float: right;
	color: var(--ink-muted);
	font-weight: 400;
	transition: transform .2s var(--ease);
}
.wh-material__faq-item[open] .wh-material__faq-question::after {
	content: '−';
}

.wh-material__faq-answer {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
	margin-top: 10px;
}
.wh-material__faq-answer p { margin: 0 0 .8em; }
.wh-material__faq-answer p:last-child { margin-bottom: 0; }

/* ── 30.6b Material gallery ───────────────────────────────────────────
 * CSS multi-column masonry — `column-count` + `break-inside: avoid`.
 * No JS, no library. Tradeoff: tiles flow column-major, not row-major.
 * Fine for ungrouped detail photography.
 *
 * Caption pill is an absolute-positioned `figcaption`, bottom-left of
 * each tile. White-with-backdrop-blur background reads on any image
 * tone; falls back gracefully where `backdrop-filter` is unsupported.
 */
.wh-material__gallery {
	max-width: var(--material-page-max);
	margin: clamp(var(--s-7), 6vw, var(--s-9)) auto 0;
	padding: 0 var(--page-pad);
}
.wh-material__gallery-heading {
	font-size: clamp(28px, 3.6vw, 40px);
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-6);
	color: var(--ink);
	font-weight: 500;
	text-align: center;
}
.wh-material__gallery-grid {
	column-count: 3;
	column-gap: var(--s-4);
}
.wh-material__gallery-item {
	break-inside: avoid;
	margin: 0 0 var(--s-4);
	display: block;
	position: relative;
	background: var(--bg-alt);
	overflow: hidden;
}
.wh-material__gallery-img {
	display: block;
	width: 100%;
	height: auto;
}
.wh-material__gallery-caption {
	position: absolute;
	bottom: var(--s-3);
	left:   var(--s-3);
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ink);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: var(--radius-pill);
	box-shadow: 0 1px 4px rgba(14, 14, 12, .12);
	max-width: calc(100% - var(--s-5) * 2);
	margin: 0;
}
@media (max-width: 1023px) {
	.wh-material__gallery-grid { column-count: 2; }
}
@media (max-width: 639px) {
	.wh-material__gallery-grid { column-count: 1; }
}

/* ── 30.4c Spotlight card (horizontal, in-flow) ───────────────────────
 * Single product card linking to the one panel PDP per material
 * (rule: exactly 1 product per material page — see
 * `Vault/02 Plugin (wc-collage-builder)/Material Page Spotlight Card Scope.md`).
 *
 * Sits inside the left main column, directly under the Downloads
 * block. On desktop the card is horizontal — 4:5 image on the left,
 * overline · title · price · CTA stacked on the right. Below the
 * layout-collapse breakpoint (1023px) the card stacks vertically
 * inside the now-single column.
 *
 * Whole tile is the link target; the inner CTA is a `<span>` styled
 * as a button (avoids nested anchors).
 */

.wh-spotlight-card {
	display: block;
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	border: 1px solid var(--border);
	overflow: hidden;
	margin-top: var(--s-7);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.wh-spotlight-card:hover {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-2);
	transform: translateY(-2px);
}
.wh-spotlight-card__media {
	overflow: hidden;
	background: var(--bg-alt);
}
.wh-spotlight-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s var(--ease);
}
.wh-spotlight-card:hover .wh-spotlight-card__media img { transform: scale(1.02); }
.wh-spotlight-card__media-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--bg-alt) 0%, var(--border-strong) 100%);
}
.wh-spotlight-card__body {
	padding: var(--s-6);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.wh-spotlight-card__overline {
	font-size: 11px;
	color: var(--ink-muted);
	margin: 0 0 var(--s-3);
}
.wh-spotlight-card__title {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 var(--s-2);
	font-size: clamp(22px, 2.4vw, 28px);
}
.wh-spotlight-card__price {
	font-size: var(--type-base);
	color: var(--ink-2);
	margin: 0 0 var(--s-5);
}
.wh-spotlight-card__price .woocommerce-Price-amount { font-weight: 500; }
.wh-spotlight-card__cta {
	align-self: flex-start;
}
.wh-spotlight-card__cta svg { transition: transform .25s var(--ease); }
.wh-spotlight-card:hover .wh-spotlight-card__cta svg { transform: translateX(3px); }

/* Horizontal variant — 2-col grid on desktop. Below 1023 the main
 * column collapses to single-column already, so the card stacks too. */
@media (min-width: 1024px) {
	.wh-spotlight-card--horizontal {
		display: grid;
		grid-template-columns: 240px 1fr;
		align-items: stretch;
	}
	.wh-spotlight-card--horizontal .wh-spotlight-card__media {
		aspect-ratio: 4 / 5;
		height: 100%;
	}
}

/* Mobile + tablet — vertical stack. */
@media (max-width: 1023px) {
	.wh-spotlight-card__media { aspect-ratio: 4 / 5; }
}

/* §30.7b compose-pill rules removed with the partial markup (2026-05-12).
   Spotlight card above covers the buying CTA. */