/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS — STAT STRIP
   ═══════════════════════════════════════════════════════════════════════════ */

.tboard-stats {
	background-color: var(--ci-color-navy);
	padding: 3.5rem 0;
}

.tboard-stats__grid {
	display: flex;
	justify-content: center;
	gap: 5rem;
	flex-wrap: wrap;
}

.tboard-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
}

.tboard-stats__number {
	font-family: var(--ci-font-primary);
	font-size: clamp(2.4rem, 4vw, 3.5rem);
	font-weight: 700;
	color: var(--ci-color-engage);
	line-height: 1;
}

.tboard-stats__label {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	color: rgba(255, 255, 255, 0.72);
	text-align: center;
}

@media (max-width: 640px) {
	.tboard-stats__grid {
		gap: 2.5rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTICEBOARD — FILTERS (inside corkboard, below scallop)
   ═══════════════════════════════════════════════════════════════════════════ */

.tboard__filters {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	z-index: 4;
	margin-bottom: 2.5rem;
}

.tboard__filter-btn {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 400;
	padding: 0.45rem 1.2rem;
	border-radius: 9999px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	line-height: 1.4;
}

.tboard__filter-btn:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.7);
	color: #ffffff;
}

.tboard__filter-btn.is-active {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--ci-color-navy);
}

/* Count sits with the label but reads as secondary — inherits the button's
   colour (including the active state's navy) at reduced opacity, so it stays
   legible against both the transparent and active-white backgrounds. */
.tboard__filter-count {
	opacity: 0.6;
	font-size: 0.82em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTICEBOARD — CORK BOARD
   ═══════════════════════════════════════════════════════════════════════════ */

/* The horizontal padding is derived from the scallop width, never typed as its
   own number.

   They were independent before, and they drifted: the 860px block below cut the
   padding to 1.5rem while the scallops stayed 48px, so between 641 and 860 the
   cards started 24px from the edge inside a 48px border. Every one of the 56
   cards overlapped it, the worst by 34px — which is what this looked like on an
   iPad in portrait.

   The extra 1.25rem is clearance for the rotation. Cards are tilted up to 2.4deg,
   which pushes a corner past the element's own box, so padding equal to the
   scallop width is not enough on its own: at 861px, where the padding did match
   at 48px, 37 cards still clipped the border by up to 16px. 1rem left one card
   short by 2px at that same width, which is why it is 1.25. */
.tboard__corkboard {
	--tboard-scallop-w: 48px;
	background-color: #1e2d3d;
	position: relative;
	padding: 5rem calc(var(--tboard-scallop-w) + 1.25rem) 5rem;
}

/* Scalloped border — top (orange → purple, L to R) */
.tboard__corkboard::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 48px;
	background: linear-gradient(to right, #f99d31, #af4d76);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L60,0 L60,20 Q30,48 0,20 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	-webkit-mask-size: 60px 48px;
	-webkit-mask-repeat: repeat-x;
	mask-image: url("data:image/svg+xml,%3Csvg width='60' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L60,0 L60,20 Q30,48 0,20 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	mask-size: 60px 48px;
	mask-repeat: repeat-x;
	z-index: 3;
}

/* Scalloped border — bottom (green → teal, L to R) */
.tboard__corkboard::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 48px;
	background: linear-gradient(to right, #cfd666, #538da9);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,48 L60,48 L60,28 Q30,0 0,28 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	-webkit-mask-size: 60px 48px;
	-webkit-mask-repeat: repeat-x;
	mask-image: url("data:image/svg+xml,%3Csvg width='60' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,48 L60,48 L60,28 Q30,0 0,28 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	mask-size: 60px 48px;
	mask-repeat: repeat-x;
	z-index: 3;
}

/* Scalloped borders — left and right */
.tboard__scallop {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--tboard-scallop-w);
	z-index: 2;
}

/* Left (orange → green, T to B) */
.tboard__scallop--left {
	left: 0;
	background: linear-gradient(to bottom, #f99d31, #cfd666);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L0,60 L20,60 Q48,30 20,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	-webkit-mask-size: 48px 60px;
	-webkit-mask-repeat: repeat-y;
	mask-image: url("data:image/svg+xml,%3Csvg width='48' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L0,60 L20,60 Q48,30 20,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	mask-size: 48px 60px;
	mask-repeat: repeat-y;
}

/* Right (purple → teal, T to B) */
.tboard__scallop--right {
	right: 0;
	background: linear-gradient(to bottom, #af4d76, #538da9);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='48' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48,0 L48,60 L28,60 Q0,30 28,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	-webkit-mask-size: 48px 60px;
	-webkit-mask-repeat: repeat-y;
	mask-image: url("data:image/svg+xml,%3Csvg width='48' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M48,0 L48,60 L28,60 Q0,30 28,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
	mask-size: 48px 60px;
	mask-repeat: repeat-y;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTICEBOARD — GRID (CSS columns masonry)
   ═══════════════════════════════════════════════════════════════════════════ */

.tboard__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	align-items: start;
	max-width: 1440px;
	margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTICEBOARD — CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.tboard__card {
	position: relative;
	background: #fffef0;
	padding: 1.25rem 1.2rem 1.1rem;
	border-radius: 2px;
	box-shadow:
		1px 2px 0 rgba(0, 0, 0, 0.06),
		3px 5px 10px rgba(0, 0, 0, 0.18),
		0 10px 28px rgba(0, 0, 0, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: default;
}

/* Pin */
.tboard__card::before {
	content: '';
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	width: 15px;
	height: 15px;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.35);
	z-index: 3;
}

/* Pin colours per category */
.tboard__card--primary::before  { background: radial-gradient(circle at 38% 38%, #e84f4f, #9b1a1a); }
.tboard__card--eyfs::before     { background: radial-gradient(circle at 38% 38%, #4fa87a, #1e5c3a); }
.tboard__card--send::before     { background: radial-gradient(circle at 38% 38%, #b86abf, #6b1e7a); }
.tboard__card--wales::before    { background: radial-gradient(circle at 38% 38%, #e05050, #8b1a28); }


/* Yellow sticky variant */
.tboard__card--sticky {
	background: #fff8b8;
}

/* Rotation variety */
.tboard__card:nth-child(5n)   { transform: rotate(-2.4deg); }
.tboard__card:nth-child(5n+1) { transform: rotate(1.8deg); }
.tboard__card:nth-child(5n+2) { transform: rotate(-1.1deg); }
.tboard__card:nth-child(5n+3) { transform: rotate(2.2deg); }
.tboard__card:nth-child(5n+4) { transform: rotate(-0.7deg); }

/* Hover: lift + straighten */
@media (hover: hover) and (pointer: fine) {
	.tboard__card:hover {
		transform: rotate(0deg) scale(1.04) translateY(-5px);
		box-shadow:
			0 18px 50px rgba(0, 0, 0, 0.3),
			0 4px 14px rgba(0, 0, 0, 0.15);
		z-index: 10;
	}
}

/* Hidden state (filtered out) */
.tboard__card.is-hidden {
	display: none;
}

/* ── Card content ── */

.tboard__quote {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-body);
	line-height: 1.7;
	color: #2c3a4a;
	font-style: italic;
	margin: 0 0 0.85rem;
}

.tboard__meta {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tboard__meta > * {
	margin: 0;
}

.tboard__attribution-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.tboard__name {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ci-color-navy);
	margin: 0;
}

.tboard__attribution {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	line-height: 1.2;
	color: #6b7a8a;
	margin: 0;
}

/* Category badge */
.tboard__badge {
	flex-shrink: 0;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-utility);
	font-weight: 600;
	padding: 0.18rem 0.55rem;
	border-radius: 9999px;
	color: #ffffff;
}

.tboard__badge--primary { background-color: var(--ci-color-navy); }
.tboard__badge--eyfs    { background-color: #2d5a4e; }
.tboard__badge--send    { background-color: #af4d76; }
.tboard__badge--wales   { background-color: #692D46; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
	.tboard__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {
	.tboard__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	/* Vertical only — the horizontal padding stays tied to the scallop width. */
	.tboard__corkboard {
		padding-top: 3rem;
		padding-bottom: 4rem;
	}
}

/* The scalloped border teeth are a fixed pixel size (48px), so on a much
   narrower mobile viewport they read as disproportionately thick relative
   to the shrunk corkboard. Scale the whole pattern down rather than
   leaving it at desktop size. */
@media (max-width: 640px) {
	.tboard__corkboard::before,
	.tboard__corkboard::after {
		height: 20px;
	}

	.tboard__corkboard::before {
		-webkit-mask-size: 25px 20px;
		mask-size: 25px 20px;
	}

	.tboard__corkboard::after {
		-webkit-mask-size: 25px 20px;
		mask-size: 25px 20px;
	}

	/* Setting the variable shrinks the scallop and its clearance together. */
	.tboard__corkboard {
		--tboard-scallop-w: 20px;
	}

	.tboard__scallop--left,
	.tboard__scallop--right {
		-webkit-mask-size: 20px 25px;
		mask-size: 20px 25px;
	}
}

@media (max-width: 560px) {
	.tboard__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}

	/* Reduce rotations on mobile so single-column reads cleanly */
	.tboard__card:nth-child(n) {
		transform: rotate(0deg);
	}
}