/**
 * P6 Hub article cards (Figma Home 107:889; Content Hub 184:4268 ... 190:4354;
 * Article "Keep going" 224:6829 / 6842 / 6855).
 *
 * Skin for the parent's kds/card-grid-query Query Loop, opt-in by `.lts-hub-cards`
 * on the core/query block (modifiers `--cols-3` / `--cols-4`, `--related`). The card
 * is `.lts-hub-card` (never `.kd-card`, so none of the parent's !important card rules
 * apply): a Clear card, 22px radius (square top-left), card shadow, a full-width colour
 * tab on top (the pillar), the question (Medium 24/25) and the answer (18/24, no image).
 *
 * Tab colour = the pillar term meta (`lts_colour`), named in markup as
 * `.is-pillar-<hearth|tide|horizon|dusk>` by inc/hub-cards.php and painted here only.
 * Text on every tab is >= 4.5:1: Hearth + Deep 4.67, Horizon + Deep 12.9, Dusk + Clear
 * 11.7, and Tide uses Tide Dark (#007386) + Clear 5.41 (brand Tide + either text is
 * 3.7-3.8, D18), so the Tide tab is a shade darker than the drawn one.
 *
 * Load order: partials sort by BASENAME across parent + child, so the parent's
 * card-grid.css (and card-grid-query.css) load BEFORE this file but state the grid
 * with !important (columns, gap, width, max-width, margins; (0,2,0)). Every grid rule
 * here is `.lts-hub-cards.kd-card-grid-query .wp-block-post-template` (0,3,0) AND
 * !important, so specificity decides, not order. The parent's news-page.css owns the
 * Load More button ((0,1,0)); its restyle below is `.lts-hub-more .kd-load-more-btn`.
 *
 * 1440 geometry (Figma): Hub card 289 x 369, gap 20 (x) / 32 (y), tab 64, text 32 in
 * (45 right), title top 81, answer top 174. Home card 276 x 369, gap 28, text column
 * 332 to the left. Related card 366 x 175, gap 57, pill tab 318 x 45, title 32, link.
 *
 * Responsive (derived, no frames): Hub 4 columns from 1280, 2 below, 1 at <= 781.
 * Home row: intro left + 3 cards from 1280; below, the intro stacks above 2 columns
 * (an odd last card spans both) and 1 column at <= 781. Related: 3 columns from 1024,
 * 2 (+ spanning last) to 782, 1 below.
 */

/* -- Tokens ------------------------------------------------------------------ */

.lts-hub-cards {
	--lts-hc-pad: clamp(1.25rem, 2.2222vw, 2rem); /* 32 at 1440 */
	--lts-hc-pad-end: var(--lts-hc-pad);
	--lts-hc-gap-x: 1.25rem;
	--lts-hc-gap-y: 2rem;
	--lts-hc-min-h: 23.0625rem; /* 369 */
	--lts-hc-tab-h: 4rem; /* 64 */
}

.lts-hub-cards--cols-4 {
	--lts-hc-pad-end: clamp(
		1.25rem,
		3.125vw,
		2.8125rem
	); /* 45: the drawn 212px text column */
}

.lts-hub-home .lts-hub-cards {
	--lts-hc-gap-x: 1.75rem; /* 28 */
}

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

.lts-hub-cards.kd-card-grid-query .wp-block-post-template {
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	column-gap: var(--lts-hc-gap-x) !important;
	row-gap: var(--lts-hc-gap-y) !important;
	justify-content: stretch !important;
	max-width: none !important;
}

.lts-hub-cards--cols-3.kd-card-grid-query .wp-block-post-template {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.lts-hub-cards.kd-card-grid-query .wp-block-post-template > li {
	display: block;
	min-width: 0;
}

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

.lts-hub-card {
	/* A Clear face: small text stays Tide Dark even inside a dark band. */
	--lts-accent-text: var(--wp--custom--color--small-text);
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100%;
	min-height: var(--lts-hc-min-h);
	margin: 0;
	padding: 0 0 2rem;
	border-radius: 0 var(--wp--custom--radius--card)
		var(--wp--custom--radius--card) var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: clip;
	transition:
		box-shadow var(--kd-transition-base),
		transform var(--kd-transition-base);
}

/* Hover = deeper shadow + 2px lift (D20, proposed). */
.lts-hub-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-2px);
}

/* One focus ring per card: the title link is the only tab stop, its ring is drawn on
   the card (the link's own box is a text line). --lts-focus-ring is Tide Dark on the
   Clear page and Horizon on the Deep band (inherited), both visible outside the card. */
.lts-hub-card:has(.lts-hub-card__title a:focus-visible) {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 2px;
}

/* Only where :has() works; otherwise the link keeps its own ring. */
@supports selector(:has(*)) {
	.lts-hub-card .lts-hub-card__title a:focus-visible {
		outline: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lts-hub-card,
	.lts-hub-card:hover {
		transform: none;
	}
}

/* Tab: the pillar, full width. */
.lts-hub-card .lts-hub-card__tab {
	--lts-pillar-bg: var(--wp--preset--color--secondary);
	--lts-pillar-fg: var(--wp--preset--color--base);
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: var(--lts-hc-tab-h);
	margin: 0;
	padding: 0.5rem var(--lts-hc-pad);
	background: var(--lts-pillar-bg);
	color: var(--lts-pillar-fg);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.2143; /* 17 / 14 */
	letter-spacing: 0.0714em; /* 1px at 14px */
	text-transform: uppercase;
	text-wrap: balance;
}

.lts-hub-card .lts-hub-card__tab.is-pillar-hearth {
	--lts-pillar-bg: var(--wp--preset--color--accent);
	--lts-pillar-fg: var(--wp--preset--color--contrast);
}

.lts-hub-card .lts-hub-card__tab.is-pillar-tide {
	--lts-pillar-bg: var(--wp--preset--color--accent-2);
	--lts-pillar-fg: var(--wp--preset--color--base);
}

.lts-hub-card .lts-hub-card__tab.is-pillar-horizon {
	--lts-pillar-bg: var(--wp--preset--color--tint);
	--lts-pillar-fg: var(--wp--preset--color--contrast);
}

.lts-hub-card .lts-hub-card__tab.is-pillar-dusk {
	--lts-pillar-bg: var(--wp--preset--color--secondary);
	--lts-pillar-fg: var(--wp--preset--color--base);
}

/* The question: Medium 24/25 (x-large preset) on a three-line slot (81 = answer top 174). */
.lts-hub-card .lts-hub-card__title {
	min-height: 5.0625rem; /* 81 */
	margin: 1.0625rem var(--lts-hc-pad-end) 0 var(--lts-hc-pad); /* 17 */
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.0417; /* 25 / 24 */
	letter-spacing: 0;
}

/* The tab-less card (an article outside any pillar) starts at the same top. */
.lts-hub-card > .lts-hub-card__title:first-child {
	margin-top: calc(var(--lts-hc-tab-h) + 1.0625rem);
}

/* One link per card: the title link, stretched over the whole card. The colour rule
   is (0,4,1): the parent's `.entry-content a:not(.wp-element-button):not([class*="kd-btn"])`
   link colour is (0,3,1) and flips to Horizon on a dark band. */
.lts-hub-card.kd-hub-card .lts-hub-card__title.wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.lts-hub-card .lts-hub-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Editor: the overlay would cover the card and swallow block selection. */
.editor-styles-wrapper .lts-hub-card .lts-hub-card__title a::after {
	content: none;
}

.lts-hub-card:hover .lts-hub-card__title a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* The answer: Regular 18/24, Body ink (no image). */
.lts-hub-card .lts-hub-card__excerpt {
	margin: 0.75rem var(--lts-hc-pad-end) 0 var(--lts-hc-pad); /* 12 */
	color: var(--wp--preset--color--body-ink);
	font-weight: var(--wp--custom--typography--weight-regular, 400);
	line-height: 1.3043; /* 24 / 18.4 */
}

.lts-hub-card .lts-hub-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* -- Related variant (Keep going): pill tab, question, Learn more ------------------ */

.lts-hub-cards--related {
	--lts-hc-gap-x: clamp(1.25rem, 3.9583vw, 3.5625rem); /* 57 at 1440 */
	--lts-hc-min-h: 10.9375rem; /* 175 */
	--lts-hc-pad: clamp(1.25rem, 2.2222vw, 2rem);
	--lts-hc-pad-end: var(--lts-hc-pad);
}

.lts-hub-cards--related .lts-hub-card {
	padding-bottom: 1.875rem; /* 30 */
}

.lts-hub-cards--related .lts-hub-card .lts-hub-card__tab {
	--lts-hc-tab-h: 2.8125rem; /* 45 */
	width: calc(100% - 3rem); /* 318 of 366 */
	min-height: var(--lts-hc-tab-h);
	padding-block: 0;
	border-radius: 0 3.125rem 3.125rem 0;
	line-height: 1.4286; /* 20 / 14 */
}

.lts-hub-cards--related .lts-hub-card .lts-hub-card__title {
	--lts-h3-size: clamp(1.625rem, 2.2222vw, 2rem); /* 32 at 1440 */
	min-height: 0;
	margin-top: 1.5625rem; /* 25 */
	font-size: var(--lts-h3-size);
	line-height: 1.1;
}

.lts-hub-cards--related .lts-hub-card > .lts-hub-card__title:first-child {
	margin-top: calc(2.8125rem + 1.5625rem);
}

/* "Get the answer" (Review 255:8416): Medium 14/18 uppercase, Tide Dark (Tide is 3.8:1), arrow 14px,
   gap 6, 32 in from the card edge. Visual only (aria-hidden): the stretched title link is the card's
   one link and name. On the hub / Home cards it sits at the card bottom (Figma: link top 312 of 369,
   39 above the edge); the Related card keeps its drawn flow position (19 below the title). */
.lts-hub-card .lts-hub-card__more {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 1.1875rem var(--lts-hc-pad-end) 0 var(--lts-hc-pad); /* 19 */
	color: var(--lts-accent-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--typography--weight-medium);
	line-height: 1.2857; /* 18 / 14 */
	letter-spacing: 0.0714em;
	text-transform: uppercase;
}

.lts-hub-card .lts-hub-card__more::after {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background-color: currentcolor;
	-webkit-mask: var(--lts-arrow-icon) center / contain no-repeat;
	mask: var(--lts-arrow-icon) center / contain no-repeat;
	transition: transform var(--kd-transition-fast);
}

.lts-hub-card:hover .lts-hub-card__more::after {
	transform: translateX(4px);
}

.lts-hub-cards:not(.lts-hub-cards--related) .lts-hub-card {
	padding-bottom: 2.4375rem; /* 39 */
}

.lts-hub-cards:not(.lts-hub-cards--related) .lts-hub-card .lts-hub-card__more {
	margin-top: auto;
	padding-top: 1.1875rem; /* 19 clear of a long answer */
}

@media (prefers-reduced-motion: reduce) {
	.lts-hub-card:hover .lts-hub-card__more::after {
		transform: none;
	}
}

/* The Keep going band: Horizon, 58 above the heading, 39 to the cards, 84 below. */
.lts-hub-related-band {
	padding-block: 3.625rem 5.25rem;
}

.lts-hub-related-band .lts-hub-related-band__title {
	margin: 0 0 2.4375rem;
	line-height: 1.0417; /* 50 / 48 */
	text-align: center;
}

/* -- Home row: intro on the left, three cards on Deep ------------------------------- */

.lts-hub-home {
	padding-block: 5.625rem 6.875rem; /* 90 / 110 */

	/* Decorative arcs (Review 145:2062 Rectangle 4461 + 145:2063 Ellipse 142, same
	   shapes as the baseline 107:880 / 107:878): Deep-on-Deep shapes whose only
	   visible part is the drop shadow (dy 4, blur 21.9, black 52%). Fill #042E38 =
	   --wp--preset--color--contrast (Deep). At 1440: vector box x510 (art box
	   705.6 x 656.6 at x466.2 / y-39.8), ellipse box x1152 (art 656.6 square at
	   x1108.2 / y-39.8). Ellipse layer first = on top, as drawn. The band's own
	   background, so the cards and text always sit above. The ellipse is pinned to the band's right edge at every width
	   (H1b: centre on the edge = exactly half the circle); the vector is
	   anchored to the same right edge at every width (R-BATCH2: the pair moves together, the
	   vector's art left stays 645.5 left of the circle's art left = Figma's 642 plus the
	   3.5 the H1b half-circle pin moved the circle, so 1440 is unchanged). */
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 656.6 656.6'%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dy='4' stdDeviation='21.9' flood-color='%23000' flood-opacity='.52'/%3E%3C/filter%3E%3Ccircle cx='328.3' cy='324.3' r='284.5' filter='url(%23s)' fill='%23042E38'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 705.6 656.6'%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dy='4' stdDeviation='21.9' flood-color='%23000' flood-opacity='.52'/%3E%3C/filter%3E%3Cpath filter='url(%23s)' fill='%23042E38' d='M142.2 39.8H661.8C512.7 159.3 505.5 472.8 661.8 608.8H142.2C12.2 516.3 9.8 137.8 142.2 39.8Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size:
		656.6px 656.6px,
		705.6px 656.6px;
	background-position:
		right -328.3px top -39.8px,
		right 268.2px top -39.8px;
}

.lts-hub-home .lts-hub-home__inner {
	display: grid;
	grid-template-columns: 20.75rem minmax(0, 1fr); /* 332: x112 -> the cards at x444 */
	align-items: start;
}

.lts-hub-home .lts-hub-home__intro {
	padding-top: 2.3125rem; /* 37: heading top y127 vs cards y90 */
}

.lts-hub-home .lts-hub-home__title {
	max-width: 16rem; /* 256 = the drawn box: "From the / Content Hub" (F2b; 320 was set for the old DM Sans stand-in, and broke it "From the Content / Hub") */
	margin: 0;
	line-height: 1.0417; /* 50 / 48 */
}

.lts-hub-home .lts-hub-home__lead {
	max-width: 12.9375rem; /* 207 */
	margin: 1.125rem 0 0; /* 18 */
	line-height: 1.3043; /* 24 / 18.4 */
}

/* "See all articles" (107:969) under the lead. Figma has 8 px (lead ends y347, button y355);
   24 px gives the button room to breathe (Alain 10-13). */
.lts-hub-home .lts-hub-home__more {
	margin-block-start: 1.5rem;
}

/* -- Load more: the Figma "SEE MORE" (Review 202:4654; Tide fill, 54px pill) ------------------------ */

/* (0,2,0): the parent's news-page.css sorts AFTER this file and sets the same margin at (0,1,0). */
.kd-load-more-wrap.lts-hub-more {
	margin-block-start: 4.8125rem; /* 77: last row y1568 -> button y1645 */
}

.lts-hub-more .kd-load-more-btn {
	/* The box (54px pill, type) is the foundation .kd-btn; only the fill role changes.
	   White on brand Tide is 3.8:1, so Tide Dark (D18). */
	--kd-btn-bg: var(--wp--preset--color--accent-2);
	--kd-btn-fg: var(--wp--preset--color--surface);
	--kd-btn-bg-hover: var(--wp--preset--color--contrast);
	background: var(--kd-btn-bg);
	color: var(--kd-btn-fg);
	border-color: transparent;
}

.lts-hub-more .kd-load-more-btn:hover,
.lts-hub-more .kd-load-more-btn:focus-visible {
	border-color: transparent;
	background: var(--wp--preset--color--contrast);
}

.lts-hub-more .kd-load-more-btn:focus-visible {
	outline: 3px solid var(--lts-focus-ring);
	outline-offset: 3px;
}

/* -- Below 1280 (derived): Hub 2 columns, Home row stacks ------------------------------ */

@media (max-width: 1279.98px) {
	/* Stacked row (no Figma frame): the arcs are fixed-size art 570 tall, so on the
	   taller stacked band they end in a hard edge mid-band. Hidden here; the
	   3-column row (>= 1280) keeps them. */
	.lts-hub-home {
		background-image: none;
	}

	.lts-hub-cards {
		--lts-hc-pad: 2rem;
		--lts-hc-pad-end: 2rem;
		--lts-hc-gap-x: 1.5rem;
		--lts-hc-gap-y: 1.5rem;
	}

	.lts-hub-cards.kd-card-grid-query .wp-block-post-template,
	.lts-hub-cards--cols-3.kd-card-grid-query .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	/* An odd last card in a 3-up row spans both columns. */
	.lts-hub-cards--cols-3.kd-card-grid-query
		.wp-block-post-template
		> li:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.lts-hub-home .lts-hub-home__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.lts-hub-home .lts-hub-home__intro {
		padding-top: 0;
		margin-bottom: 2.5rem;
	}

	.lts-hub-home .lts-hub-home__title {
		max-width: none;
	}

	.lts-hub-home .lts-hub-home__lead {
		max-width: 32rem;
	}
}

/* Related: 3 columns hold down to 1024 (its cards are short). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.lts-hub-cards--related {
		--lts-hc-pad: 1.5rem;
		--lts-hc-pad-end: 1.5rem;
		--lts-hc-gap-x: 1.5rem;
	}

	.lts-hub-cards--related.kd-card-grid-query .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.lts-hub-cards--related.kd-card-grid-query
		.wp-block-post-template
		> li:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* -- Mobile (<= 781): one column, a tighter card -------------------------------------- */

@media (max-width: 781.98px) {
	.lts-hub-cards {
		--lts-hc-pad: 1.5rem;
		--lts-hc-pad-end: 1.5rem;
		--lts-hc-min-h: 0;
	}

	.lts-hub-cards.kd-card-grid-query .wp-block-post-template,
	.lts-hub-cards--cols-3.kd-card-grid-query .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.lts-hub-card .lts-hub-card__title {
		min-height: 0;
	}

	.lts-hub-cards--related .lts-hub-card .lts-hub-card__title {
		--lts-h3-size: var(--wp--preset--font-size--xx-large);
	}

	.lts-hub-home {
		padding-block: 3.5rem 4rem;
	}

	.lts-hub-related-band {
		padding-block: 3rem 3.5rem;
	}

	.kd-load-more-wrap.lts-hub-more {
		margin-block-start: 2.5rem;
	}
}

/* -- Empty state: no published article (inc/hub-cards.php, patterns/hub-cards-grid.php) ------ */

/* Listing: the query-no-results line, centred in the grid's place. */
.lts-hub-cards .lts-hub-empty__text {
	max-width: 36rem;
	margin: 0 auto;
	padding-block: 2rem 3rem;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	line-height: 1.25;
}

/* Home row: the cards are gone, so the intro (heading, lead, button) takes the band alone and centres. */
.lts-hub-home .lts-hub-home__inner.is-empty {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.lts-hub-home .is-empty .lts-hub-home__intro {
	padding-top: 0;
	margin-bottom: 0;
}

.lts-hub-home .is-empty .lts-hub-home__title,
.lts-hub-home .is-empty .lts-hub-home__lead {
	max-width: 32rem;
	margin-inline: auto;
}

.lts-hub-home .is-empty .lts-hub-home__more {
	justify-content: center;
}