/* ============================================================
   OUR WOOD LIBRARY — STANDALONE native rebuild (Divi removal).
   Eight woods, each a bar of its own grain that opens to the wood.
   The bar colours are set per wood in the template: they are the
   wood's own, not the palette's.
   ============================================================ */

.wwg-library {
	color: var(--wwg-color-text-primary);
}
.wwg-library-inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 var(--wwg-space-4);
}

/* ── Hero ── */
.wwg-library-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 360px;
	padding: var(--wwg-space-11) var(--wwg-space-4);
	background-color: var(--wwg-ivory);
	background-size: cover;
	background-position: center;
	color: var(--wwg-bone-xlight);
}
.wwg-library-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wwg-ivory) 45%, transparent);
}
.wwg-library-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin: 0 auto;
	width: 100%;
}
.wwg-library-hero h1 {
	margin: 0 0 var(--wwg-space-3);
	color: var(--wwg-bone-xlight);
}
.wwg-library-hero p {
	max-width: 620px;
	margin: 0;
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}

/* ── The woods ── */
.wwg-library-list {
	max-width: 1160px;
	margin: 0 auto;
	padding: var(--wwg-space-9) var(--wwg-space-4);
}
.wwg-library-wood + .wwg-library-wood {
	margin-top: var(--wwg-space-5);
}
.wwg-library-wood-title {
	margin: 0;
}

/* The bar carries the wood's own grain and colour, so its label is set in the light ink that
   reads on all eight; the shadow keeps it legible over the busier grains. */
.wwg-library-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wwg-space-4);
	box-sizing: border-box;
	width: 100%;
	min-height: 112px;
	padding: var(--wwg-space-5) var(--wwg-space-6);
	border: 0;
	border-radius: var(--wwg-radius-lg);
	background-size: cover;
	background-position: center;
	color: var(--wwg-bone-xlight);
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.wwg-library-bar:focus-visible {
	outline: 2px solid var(--wwg-color-accent-focus);
	outline-offset: 2px;
}
.wwg-library-bar-name {
	font-family: var(--wwg-font-display);
	font-size: var(--wwg-type-section-size);
	line-height: var(--wwg-type-section-line);
	letter-spacing: var(--wwg-type-section-tracking);
	text-shadow: 0 1px 6px color-mix(in srgb, var(--wwg-ivory) 60%, transparent);
}
.wwg-library-bar-chevron {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	fill: currentColor;
	transition: transform .2s ease;
	filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--wwg-ivory) 60%, transparent));
}
.wwg-library-bar[aria-expanded='true'] .wwg-library-bar-chevron {
	transform: rotate(180deg);
}

/* ── An open wood ── */
.wwg-library-panel {
	padding: var(--wwg-space-7) var(--wwg-space-6) var(--wwg-space-5);
}
.wwg-library-panel-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: var(--wwg-space-7);
	align-items: start;
}
.wwg-library-panel-copy h3 {
	margin: 0 0 var(--wwg-space-3);
}
.wwg-library-panel-copy p {
	margin: 0 0 var(--wwg-space-3);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}
.wwg-library-panel-copy a {
	color: var(--wwg-color-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}
.wwg-library-panel-copy a:hover {
	color: var(--wwg-color-link-hover);
}
.wwg-library-hails {
	margin-bottom: 0 !important;
}
.wwg-library-map {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Sourcing, and the hardness chart ── */
.wwg-library-sustain {
	padding: var(--wwg-space-10) 0;
	background: var(--wwg-gypsum);
}
.wwg-library-sustain h2,
.wwg-library-janka h2 {
	margin: 0 0 var(--wwg-space-4);
}
.wwg-library-sustain p {
	max-width: 640px;
	margin: 0 0 var(--wwg-space-3);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}
.wwg-library-sustain a {
	color: var(--wwg-color-link);
	font-weight: var(--wwg-btn-weight);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}
.wwg-library-sustain a:hover {
	color: var(--wwg-color-link-hover);
}
.wwg-library-janka {
	padding: var(--wwg-space-10) 0 var(--wwg-space-12);
	background: var(--wwg-gypsum);
}
.wwg-library-janka-link {
	display: block;
}
.wwg-library-janka-link img {
	display: block;
	width: 100%;
	height: auto;
}
.wwg-library-janka-link:focus-visible {
	outline: 2px solid var(--wwg-color-accent-focus);
	outline-offset: 4px;
}

@media (max-width: 900px) {
	.wwg-library-hero {
		min-height: 280px;
		padding: var(--wwg-space-9) var(--wwg-space-4);
	}
	.wwg-library-bar {
		min-height: 88px;
		padding: var(--wwg-space-4) var(--wwg-space-5);
	}
	.wwg-library-panel {
		padding: var(--wwg-space-5) 0 var(--wwg-space-4);
	}
	.wwg-library-panel-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wwg-space-5);
	}
	.wwg-library-sustain,
	.wwg-library-janka {
		padding-top: var(--wwg-space-9);
		padding-bottom: var(--wwg-space-9);
	}
}