/* ═══════════════════════════════════════════════════════════════════════════
   HOME — WHAT ARE YOU LOOKING FOR? — LIQUID GLASS
   ═══════════════════════════════════════════════════════════════════════════ */

.home-what {
	padding: 5rem 0;
	background: #253d47;
}

.home-what .site-container {
	max-width: 1520px;
	padding: 0 2rem;
}

.home-what__heading {
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-h2);
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	margin: 0 0 2rem;
	line-height: 1.2;
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.4);
	padding: 0 1.5rem;
}

.home-what__grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(1.25rem, 4.5vw, 3.25rem);
	margin: 0;
}

/* ── Item wrapper (card + label) ── */
.home-what__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	/* Capped rather than flex:1. At 1/6th of a 1456px container each card came
	   out ~231px square around an ~84px glyph, which is what made them read as
	   oversized slabs. The glyph is sized independently (see .home-what__icon),
	   so this trims the surrounding area only. Still shrinks below ~1150px. */
	flex: 0 1 140px;
	min-width: 0;
	/* Queried by the border and glyph below so both stay exact ratios of the
	   tile at any size — the vw clamps were only ever an approximation. */
	container-type: inline-size;
}


.home-what__item-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 16%;
}

/* ── Liquid Glass Card ── */
.home-what__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0;
	/* Every value here is the 60px badge's own ratio, scaled to this tile —
	   the badge blown up rather than reinterpreted. Radius 0.6rem/3.75rem =
	   16%; border 3px/60px = 5%, which is the 8.25px below; glyph
	   2.45rem/3.75rem = 65%, set on .home-what__icon. */
	border-radius: 16%;
	background: #ffffff;
	border: clamp(4px, 0.6vw, 7px) solid transparent;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transition: background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
	cursor: pointer;
	overflow: hidden;
}

.home-what__card > * {
	position: relative;
	z-index: 1;
}

/* Hover hangs off .home-what__item, not .home-what__card. The card is covered
   by a sibling <a class="home-what__item-link"> at inset:0/z-index:2, so the
   pointer hit-tests to the link and never to the card — a .home-what__card:hover
   rule (which is what used to be here) can never match, which is why these
   didn't feel clickable. The item is the link's ancestor, so it does. */
@media (hover: hover) and (pointer: fine) {
	.home-what__item:hover .home-what__card {
		background: #ffffff;
		/* Grows outward from its centre rather than lifting: reads as coming
		   toward you, and in a row of six it draws the eye harder because the
		   tile visibly claims space while its neighbours stay put. The 28px
		   gap absorbs the ~4px it gains per side. The glyph scales with the
		   card (84px -> ~88px), which is part of the effect. */
		transform: scale(1.05);
		/* Centred and softer than the lift's shadow, which was weighted
		   downward to sell the height. */
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
	}

	/* Tint lifts toward white rather than deepening, so the whole tile reads as
	   brightening under the cursor. */
	.home-what__item:hover .home-what__icon {
		filter: brightness(1.06) saturate(1.15);
	}
}

/* Keyboard parity — the overlay link is the focusable element. */
.home-what__item:focus-within .home-what__card {
	background: #ffffff;
	transform: scale(1.05);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.home-what__item-link:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.home-what__card {
		transition: background 0.22s ease, box-shadow 0.22s ease;
	}

	.home-what__item:hover .home-what__card,
	.home-what__item:focus-within .home-what__card {
		transform: none;
	}
}

/* ── Icon badge ── */
.home-what__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	/* 65% of the tile, matching .page-split__icon-badge's 2.45rem glyph in a
	   3.75rem badge. At the 165px tile that is ~107px; the vw term tracks the
	   tile as it shrinks below ~1150px. */
	font-size: clamp(2.5rem, 7.8vw, 5.6875rem);
	/* Stated explicitly rather than left to the icon core's defaults, so the
	   duotone split is identical to the badge's. */
	--fa-secondary-opacity: 0.4;
	flex-shrink: 0;
	transition: filter 0.22s ease;
}

/* Placed after the two rules it overrides: `border:` is a shorthand and the
   glyph's `font-size:` a clamp, both later in the file, so at equal specificity
   source order decides. Container query units give the exact ratio; the clamps
   above remain the fallback. */
@supports (width: 1cqw) {
	.home-what__card { border-width: 5cqw; }
	.home-what__icon { font-size: 65cqw; }
}


/* The brand emblem is a plain inline SVG, so it never gets .svg-inline--fa's
   height:1em/width:1.25em from inc/icons.php. Matched here so it sits at the
   same optical size as the Font Awesome glyphs beside it. */
.home-what__icon--emblem svg {
	height: 1em;
	width: 1.25em;
	display: inline-block;
	overflow: visible;
	vertical-align: -.125em;
}

/* The emblem's paths carry no fill of their own, so without this they default
   to black. Same pattern as .page-split__icon-badge svg path — the .4 opacity
   on .ce-emblem-secondary inside the file then gives the duotone effect. */
.home-what__icon--emblem svg path {
	fill: currentColor;
}

/* Cycle through brand colours. Values lifted verbatim from the badge
   variants in pedagogy.css so these are the same component. */

.home-what__item:nth-child(4n+1) .home-what__icon {
	background: rgba(249, 157, 49, 0.12);
	color: #f99d31;
	--fa-primary-color: #f99d31;
	--fa-secondary-color: #f99d31;
	--fa-secondary-opacity: 0.4;
}
.home-what__item:nth-child(4n+1) .home-what__card {
	border-color: #f99d31;
}

.home-what__item:nth-child(4n+2) .home-what__icon {
	background: rgba(175, 77, 118, 0.12);
	color: #af4d76;
	--fa-primary-color: #af4d76;
	--fa-secondary-color: #af4d76;
	--fa-secondary-opacity: 0.4;
}
.home-what__item:nth-child(4n+2) .home-what__card {
	border-color: #af4d76;
}

.home-what__item:nth-child(4n+3) .home-what__icon {
	background: rgba(83, 141, 169, 0.12);
	color: #538da9;
	--fa-primary-color: #538da9;
	--fa-secondary-color: #538da9;
	--fa-secondary-opacity: 0.4;
}
.home-what__item:nth-child(4n+3) .home-what__card {
	border-color: #538da9;
}

.home-what__item:nth-child(4n+4) .home-what__icon {
	background: rgba(207, 214, 102, 0.12);
	color: #cfd666;
	--fa-primary-color: #cfd666;
	--fa-secondary-color: #cfd666;
	--fa-secondary-opacity: 0.4;
}
.home-what__item:nth-child(4n+4) .home-what__card {
	border-color: #cfd666;
}


/* ── Label ── */
.home-what__label {
	font-family: var(--ci-font-primary);
	/* Keeps its fluid sizing (these sit in a fixed-width diagram) but floored
	   at the scale's 16px minimum — measured safe: the widest label is 85px
	   inside a 147px item with overflow visible, so it can't clip. */
	font-size: clamp(var(--ci-text-utility), 1.1vw, 1.15rem);
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	line-height: 1.3;
}

/* ── Mobile: compact icon+label rows, 2-per-row ── */
/* ── Mobile: the same badge tiles, three across, rather than the pastel
      icon-beside-label rows this used to use. Everything scales from the tile
      via the container query above, so the border, glyph and radius stay on
      spec; only the column count and gap change. ── */
/* ── Mobile: the row itself becomes the badge ──────────────────────────────
   Two across, icon beside its label, with the brand border, 12% tint, white
   base and radius applied to the whole row rather than to a nested tile. The
   glyph then sits straight on the tint, so it is sized against its own box
   (82%) rather than the 65% ratio, which describes a glyph inside its own
   bordered badge — which this no longer is.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.home-what {
		margin-top: 0;
		padding: 3rem 0 3.5rem;
	}

	/* .site-container already supplies 2rem here; a second 1rem on the grid was
	   costing 32px of row width and clipping the longer labels. */
	.home-what .site-container {
		padding: 0 1rem;
	}

	.home-what__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.85rem 0.75rem;
		padding: 0;
	}

	.home-what__item {
		position: relative;
		flex: unset;
		max-width: none;
		flex-direction: row;
		align-items: center;
		gap: 2px;
		min-width: 0;
		padding: 0.5rem 0.55rem 0.5rem 6px;
		background: #ffffff;
		border: 4px solid transparent;
		border-radius: 11px;
		overflow: hidden;
	}

	/* Tint sits under the content but over the white base. The overlay link is
	   z-index 2, so it still takes every tap. */
	.home-what__item::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
	}

	.home-what__card,
	.home-what__label {
		position: relative;
		z-index: 1;
	}

	.home-what__item-link {
		border-radius: 11px;
	}

	/* No nested badge — the row is the badge, so this is just the glyph's box. */
	.home-what__card {
		width: 60px;
		height: 60px;
		aspect-ratio: unset;
		flex-shrink: 0;
		border: none;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	/* Three classes, to outweigh `.home-what__item:nth-child(4n+1) .home-what__icon`
	   above. At the single-class specificity this used to have, that rule kept
	   painting its 12% tint on the icon box — on top of the row's own tint —
	   which is the darker square that showed behind each glyph. */
	.home-what__grid .home-what__item .home-what__icon {
		background: transparent;
		font-size: 49px;
	}

	.home-what__label {
		color: #253d47;
		text-align: left;
		font-size: 0.9rem;
		line-height: 1.25;
		min-width: 0;
	}

	.home-what__item:nth-child(4n+1) {
		border-color: #f99d31;
	}
	.home-what__item:nth-child(4n+1)::before {
		background: rgba(249, 157, 49, 0.12);
	}

	.home-what__item:nth-child(4n+2) {
		border-color: #af4d76;
	}
	.home-what__item:nth-child(4n+2)::before {
		background: rgba(175, 77, 118, 0.12);
	}

	.home-what__item:nth-child(4n+3) {
		border-color: #538da9;
	}
	.home-what__item:nth-child(4n+3)::before {
		background: rgba(83, 141, 169, 0.12);
	}

	.home-what__item:nth-child(4n+4) {
		border-color: #cfd666;
	}
	.home-what__item:nth-child(4n+4)::before {
		background: rgba(207, 214, 102, 0.12);
	}

	/* Safety net in case wpautop wraps the label in a <p> */
	.home-what__item p {
		margin: 0;
	}
}

/* Below ~380px the row cannot hold a 60px icon and "International" together,
   so both step down rather than the label being cut off. */
@media (max-width: 380px) {
	.home-what__card {
		width: 52px;
		height: 52px;
	}

	.home-what__icon {
		font-size: 43px;
	}

	.home-what__label {
		font-size: 0.85rem;
	}
}