/* =============================================================================
 * csc-category-grid
 *
 * Geometry: docs/homepage-redesign/visual-design-production-specs.md §5,
 * measured from prototype 26f20fb8 v10. Column count, gap, band width and photo
 * height are Elementor controls writing custom properties — the values below are
 * fallbacks for when no control has been saved.
 * ========================================================================== */

/* The gutter lives OUT here, so the band's max-width is the content width —
 * 1400px is what the artboard measures between the tiles' outer edges, with the
 * 20px gutter outside it in a 1440px frame. With the padding on the band itself
 * the gutter ate into the width and tiles came out 181px against the 186px the
 * spec line needs.
 *
 * Doing it in the markup rather than with calc() on the band is deliberate:
 * Elementor compiles the band's max-width into cached per-post CSS, so a
 * calc() that wraps the control's value would have needed a CSS regeneration on
 * every page already carrying the widget. This way the cached declaration is
 * already correct. */
.csc-category-grid__pad {
	padding-block: var(--csc-space-12) var(--csc-section-y);
	padding-inline: var(--csc-gutter);
}

.csc-category-grid__band {
	max-width: var(--csc-band-grid);
	margin-inline: auto;
}

/* --- Heading -------------------------------------------------------------- */

.csc-category-grid__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--csc-space-12);
	margin-bottom: var(--csc-space-8);
}

.csc-category-grid__heading {
	margin: var(--csc-space-3) 0 0;
	font-size: var(--csc-fs-h1);
	font-weight: var(--csc-w-display);
	line-height: var(--csc-lh-display);
	letter-spacing: var(--csc-ls-display);
	color: var(--csc-ink);
}

/* One slab phrase per section, in ink, never in green. */
.csc-category-grid__accent {
	font-family: var(--csc-font-slab);
	font-weight: var(--csc-w-display);
}

.csc-category-grid__intro {
	margin: var(--csc-space-3) 0 0;
	max-width: 72ch;
	font-size: var(--csc-fs-body);
	line-height: var(--csc-lh-body);
	color: var(--csc-ink-2);
	text-wrap: pretty;
}

.csc-category-grid__all {
	flex: 0 0 auto;
	font-size: var(--csc-fs-ui);
	font-weight: 700;
	color: var(--csc-link);
	text-decoration: none;
	white-space: nowrap;
}

.csc-category-grid__all:hover {
	color: var(--csc-blue-deep);
	text-decoration: underline;
}

/* --- Grid ----------------------------------------------------------------- */

.csc-category-grid__grid {
	--csc-cg-cols: 7;
	--csc-cg-gap: var(--csc-space-4);

	display: grid;
	/* minmax(0, 1fr), not 1fr: 1fr is minmax(auto, 1fr) and a long unbroken
	 * spec string would push its track past an equal share. */
	grid-template-columns: repeat(var(--csc-cg-cols), minmax(0, 1fr));
	gap: var(--csc-cg-gap);
}

/* --- Card ----------------------------------------------------------------- */

.csc-category-grid__card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: var(--csc-hairline);
	border-radius: var(--csc-radius);
	overflow: hidden;
	text-decoration: none;
	transition: border-color 120ms ease;
}

.csc-category-grid__card:hover {
	border-color: var(--csc-blue);
}

/* The photo ground is --csc-bg-2, #E6EEF6: Kristin's Option 1 (22 Oct), one
 * step darker than the kit's pale ground (#F4F7FB), which read too light on
 * some monitors, and already in the palette. The photo is multiplied onto it:
 * a white studio background takes the blue, anything darker keeps its own
 * colour, and no photo has to be edited (Kristin, 20 Oct). isolation keeps the
 * blend inside this box. The green rule under it is her "pop of colour". */
.csc-category-grid__photo {
	--csc-cg-photo-rule: 2px solid var(--csc-green-btn);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 133px;
	background: var(--csc-bg-2);
	border-bottom: var(--csc-cg-photo-rule);
	overflow: hidden;
	isolation: isolate;
}

.csc-category-grid__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	mix-blend-mode: multiply;
}

/* The per-card "Trim built-in frame" switch: 15% larger inside the box crops
 * the older photos' 6-7px frame and rounded corners (photo starts ~14px in on
 * a 250px square). */
.csc-category-grid__card.is-trimmed .csc-category-grid__img {
	transform: scale(1.15);
}

.csc-category-grid__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--csc-space-2);
	padding: var(--csc-space-4);
}

.csc-category-grid__name {
	font-size: var(--csc-fs-card);
	font-weight: 500;
	line-height: 1.25;
	color: var(--csc-ink);
}

.csc-category-grid__spec {
	font-size: var(--csc-fs-spec);
	line-height: var(--csc-lh-spec);
	color: var(--csc-ink-2);
	text-wrap: pretty;
}

.csc-category-grid__cta {
	margin-top: auto;
	padding-top: var(--csc-space-2);
	font-size: var(--csc-fs-copy);
	font-weight: 500;
	color: var(--csc-link);
}

/* --- The orphan tile ------------------------------------------------------
 * Thirteen is prime: it divides evenly at no breakpoint, and at 3-up and 2-up
 * the last card would sit alone, which reads as a bug rather than a design.
 *
 * PHP decides WHETHER a breakpoint has an orphan — `total % cols === 1`,
 * derived, never an :nth-child(13) — and puts has-orphan-tablet /
 * has-orphan-mobile on the grid. CSS decides what an orphan LOOKS like.
 * CLAUDE.md §2.8.
 *
 * Spanning alone is not enough. The photo box spans with the card — 768 × 141
 * at tablet, a 5.4:1 slot that crops a product shot to a slice — so a spanning
 * card turns horizontal and its photograph keeps an ordinary tile's width.
 * HP-042. The width is computed from the grid's own column count and gap, so it
 * tracks the controls rather than repeating their values.
 *
 * ⚠ Each rule lives ONLY inside its own media query.
 *
 * The first version of this block set the treatment unconditionally and then
 * cancelled it outside each breakpoint. That works for one class and fails for
 * two: a thirteen-card grid carries has-orphan-tablet AND has-orphan-mobile, so
 * the rule cancelling mobile above 767px also matched the tablet element and
 * undid it — and vice versa below 768px. Both breakpoints silently cancelled
 * each other and the orphan rendered as an ordinary tile on the live page.
 * Measuring caught it; neither review nor a screenshot did. */

@media (min-width: 1025px) {
	.csc-category-grid__grid.has-orphan-desktop > .csc-category-grid__card.is-last {
		grid-column: 1 / -1;
		flex-direction: row;
	}
	.csc-category-grid__grid.has-orphan-desktop > .csc-category-grid__card.is-last .csc-category-grid__photo {
		flex: 0 0 calc( (100% - (var(--csc-cg-cols) - 1) * var(--csc-cg-gap)) / var(--csc-cg-cols) );
		border-bottom: 0;
		border-right: var(--csc-cg-photo-rule);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.csc-category-grid__grid.has-orphan-tablet > .csc-category-grid__card.is-last {
		grid-column: 1 / -1;
		flex-direction: row;
	}
	.csc-category-grid__grid.has-orphan-tablet > .csc-category-grid__card.is-last .csc-category-grid__photo {
		flex: 0 0 calc( (100% - (var(--csc-cg-cols) - 1) * var(--csc-cg-gap)) / var(--csc-cg-cols) );
		border-bottom: 0;
		border-right: var(--csc-cg-photo-rule);
	}
}

@media (max-width: 767px) {
	.csc-category-grid__grid.has-orphan-mobile > .csc-category-grid__card.is-last {
		grid-column: 1 / -1;
		flex-direction: row;
	}
	.csc-category-grid__grid.has-orphan-mobile > .csc-category-grid__card.is-last .csc-category-grid__photo {
		flex: 0 0 calc( (100% - (var(--csc-cg-cols) - 1) * var(--csc-cg-gap)) / var(--csc-cg-cols) );
		border-bottom: 0;
		border-right: var(--csc-cg-photo-rule);
	}
}

/* --- Square photos (the default, 20 Oct) ----------------------------------
 * The box takes the card's width as its height at every breakpoint. Two classes
 * deep, so it outranks the pixel heights above and in the breakpoints below;
 * the Photo height control prints nothing while the shape is Square. */

.csc-category-grid__grid.is-square .csc-category-grid__photo {
	height: auto;
	aspect-ratio: 1 / 1;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
	.csc-category-grid__grid { --csc-cg-cols: 3; }
	.csc-category-grid__photo { height: 141px; }
	.csc-category-grid__head { flex-direction: column; align-items: flex-start; gap: var(--csc-space-4); }
	.csc-category-grid__pad { padding-block: var(--csc-space-8); }
}

@media (max-width: 767px) {
	.csc-category-grid__grid { --csc-cg-cols: 2; --csc-cg-gap: var(--csc-space-3); }
	.csc-category-grid__photo { height: 105px; }
	.csc-category-grid__body { padding: var(--csc-space-3); }
}