/*
 * ntw_colour_board — port of `.a-colours__grid` / `.a-swatch-view` / `.a-planks`.
 *
 * Each plank group's width is its colour COUNT (`--ntw-n`, written by the widget),
 * not a hardcoded 4 / 7: the prototype's `flex: 4` / `flex: 7` would misproportion
 * the board the day a colour is added or retired.
 */

.ntw-colours__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: stretch; }

.ntw-swatch-view {
	position: relative; border-radius: var(--r); overflow: hidden; min-height: 460px;
	display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; isolation: isolate;
}
.ntw-swatch-view__bg {
	position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
	transform: scale(1.02); transition: opacity .5s;
}
.ntw-swatch-view::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13, 17, 14, .9), rgba(13, 17, 14, 0) 60%); }
.ntw-swatch-view h3 { margin: 6px 0 4px; font: 500 2rem/1.2 var(--f-display); }
.ntw-swatch-view p { margin: 0 0 18px; font-size: 14px; }

.ntw-chip {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 5px 11px;
	border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .04em;
	background: rgba(13, 17, 14, .7); border: 1px solid var(--line-2); color: var(--mist);
}
.ntw-chip--std::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ntw-w-accent, var(--green)); }

.ntw-planks { display: flex; gap: 8px; align-items: flex-end; }
.ntw-planks__group { display: flex; flex-direction: column; gap: 14px; flex: var(--ntw-n, 1) 1 0; min-width: 0; }
.ntw-planks__label { margin: 12px 0; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ntw-planks__row { display: flex; gap: 8px; }
.ntw-plank {
	position: relative; flex: 1; min-width: 0; height: 400px; border-radius: 6px; overflow: hidden;
	background-size: cover; background-position: center;
	transform: translateY(0); transition: transform .5s var(--ease), box-shadow .4s;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ntw-plank span {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
	font-size: 12px; font-weight: 500; letter-spacing: .08em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
	white-space: nowrap; opacity: .85;
}
.ntw-plank:hover { transform: translateY(-14px); }
.ntw-plank[aria-pressed="true"] {
	transform: translateY(-22px);
	box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--ntw-w-accent, var(--green)), 0 24px 40px rgba(0, 0, 0, .5);
}

@media (max-width: 960px) {
	.ntw-colours__grid { grid-template-columns: minmax(0, 1fr); }
	.ntw-swatch-view { min-height: 320px; }
}
@media (max-width: 720px) {
	.ntw-planks { flex-direction: column; align-items: stretch; }
	.ntw-planks__group { flex: none; }
	.ntw-planks__row { overflow-x: auto; padding: 26px 2px 6px; scroll-snap-type: x proximity; }
	.ntw-plank { flex: 0 0 58px; height: 200px; scroll-snap-align: start; }
}