/**
 * upcomer/hub-pages-grid — navigation-helper cards linking to pages.
 *
 * A visual variation of upcomer/offer-teaser-grid: same white card surface,
 * same container widths, same yellow accent (--hero-accent). The difference
 * is the card content (page title + lede + optional featured image + a "go
 * here" arrow) and a light/dark canvas toggle so the block can sit inline on
 * a normal page OR join the dark hero family.
 *
 * Colours — every value maps to one already used elsewhere on the site:
 *   - Dark canvas #0a0a0a        — --hero-bg / --page-hero-bg (hero family)
 *   - White card #FEFEFE         — theme.json general-color-bg.minimal
 *   - Card text #171717 / #5D5D5D — theme.json general-color h1 / caption
 *   - Yellow accent #ffd84d      — --hero-accent / --page-hero-accent
 *   - Neutral hairlines are low-alpha tints of the strong text colour, the
 *     same technique guide-card-grid uses for --gcg-rule. No new tokens.
 *
 * Column count flows from the columns_desktop field via the inline
 * `--hpg-columns` custom property on the <section>.
 */

.upcomer-block--hub-pages-grid {
	/* Light theme (default) — sits inline on the normal page canvas. */
	--hpg-canvas-bg: var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
	--hpg-canvas-fg: var(--wp--custom--light--general-color--h-1, #171717);
	--hpg-canvas-fg-muted: var(--wp--custom--light--general-color--caption, #5D5D5D);
	--hpg-canvas-rule: rgba(15, 15, 15, 0.22);

	/* Card surface — white tile with a hairline + soft lift so it reads
	   against the light canvas. */
	--hpg-card-bg: #FEFEFE;
	--hpg-card-fg: var(--wp--custom--light--general-color--h-1, #171717);
	--hpg-card-fg-muted: var(--wp--custom--light--general-color--caption, #5D5D5D);
	--hpg-card-border: rgba(15, 15, 15, 0.10);
	--hpg-card-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	--hpg-card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
	--hpg-media-bg: rgba(15, 15, 15, 0.05);

	/* Accent — yellow, matches the hero family. Used on the CTA focus outline. */
	--hpg-accent: #ffd84d;

	/* CTA pill — same values as offer-teaser-grid's button (theme.json
	   "minimal" variant). Dark pill + white text reads on the white card in
	   both themes. */
	--hpg-cta-bg: #171717;
	--hpg-cta-bg-hover: #2E2E2E;
	--hpg-cta-fg: #FEFEFE;

	--hpg-card-radius: 14px;
	--hpg-columns: 3;
	--hpg-gap: clamp(0.875rem, 1.8vw, 1.375rem);

	background: var(--hpg-canvas-bg);
	color: var(--hpg-canvas-fg);
	padding-inline: clamp(1rem, 3vw, 1.5rem);
	box-sizing: border-box;
}

/* Dark theme — opt-in. Canvas drops to the hero-family dark; cards stay
   white (like offer-teaser-grid) and only lose their hairline. */
.upcomer-block--hub-pages-grid[data-theme="dark"] {
	--hpg-canvas-bg: #0a0a0a;
	--hpg-canvas-fg: #ffffff;
	--hpg-canvas-fg-muted: rgba(255, 255, 255, 0.78);
	--hpg-canvas-rule: rgba(255, 255, 255, 0.18);

	--hpg-card-border: transparent;
	--hpg-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	--hpg-card-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.36);
}

.upcomer-block--hub-pages-grid *,
.upcomer-block--hub-pages-grid *::before,
.upcomer-block--hub-pages-grid *::after {
	box-sizing: border-box;
}

.upcomer-block--hub-pages-grid .upcomer-block__inner {
	max-width: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--max-width, 1200));
	margin-inline: auto;
}

@media (max-width: 1247px) {
	.upcomer-block--hub-pages-grid .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--laptop--max-width, 1200));
	}
}

@media (max-width: 943px) {
	.upcomer-block--hub-pages-grid .upcomer-block__inner {
		max-width: unset;
	}
}

/* ---- Header / section eyebrow ---------------------------------------- */

.upcomer-block--hub-pages-grid .hub-grid__header {
	margin: 0 0 clamp(1.25rem, 2.6vw, 2rem);
	padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
	border-bottom: 1px solid var(--hpg-canvas-rule);
}

.upcomer-block--hub-pages-grid .section-eyebrow {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hpg-canvas-fg);
}

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

.upcomer-block--hub-pages-grid .hub-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hpg-gap);
	grid-template-columns: repeat(var(--hpg-columns), minmax(0, 1fr));
}

/* Mid (640–900px): 2 columns regardless of the editor choice. */
@media (min-width: 640px) and (max-width: 900px) {
	.upcomer-block--hub-pages-grid .hub-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile (≤640px): single column. */
@media (max-width: 639px) {
	.upcomer-block--hub-pages-grid .hub-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.upcomer-block--hub-pages-grid .hub-card {
	display: flex;
	min-width: 0;
}

/* The whole card is the link. */
.upcomer-block--hub-pages-grid .hub-card__link,
.upcomer-block--hub-pages-grid .hub-card__link:link,
.upcomer-block--hub-pages-grid .hub-card__link:visited,
.upcomer-block--hub-pages-grid .hub-card__link:hover,
.upcomer-block--hub-pages-grid .hub-card__link:focus,
.upcomer-block--hub-pages-grid .hub-card__link:focus-visible,
.upcomer-block--hub-pages-grid .hub-card__link:active {
	color: var(--hpg-card-fg);
	text-decoration: none;
}

.upcomer-block--hub-pages-grid .hub-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--hpg-card-bg);
	border: 1px solid var(--hpg-card-border);
	border-radius: var(--hpg-card-radius);
	box-shadow: var(--hpg-card-shadow);
	overflow: hidden;
	isolation: isolate;
	transition: transform 180ms cubic-bezier(0.2, 0.6, 0.2, 1),
		box-shadow 180ms ease;
}

.upcomer-block--hub-pages-grid .hub-card__link:hover,
.upcomer-block--hub-pages-grid .hub-card__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--hpg-card-shadow-hover);
}

.upcomer-block--hub-pages-grid .hub-card__link:focus-visible {
	outline: 2px solid var(--hpg-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.upcomer-block--hub-pages-grid .hub-card__link,
	.upcomer-block--hub-pages-grid .hub-card__link:hover,
	.upcomer-block--hub-pages-grid .hub-card__link:focus-visible {
		transition: none;
		transform: none;
	}
}

/* ---- Media (optional featured image) --------------------------------- */

.upcomer-block--hub-pages-grid .hub-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--hpg-media-bg);
	overflow: hidden;
}

.upcomer-block--hub-pages-grid .hub-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder for pages with no featured image — keeps card shapes uniform. */
.upcomer-block--hub-pages-grid .hub-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--hpg-card-fg-muted);
	opacity: 0.5;
}

.upcomer-block--hub-pages-grid .hub-card__placeholder svg {
	width: 2.5rem;
	height: 2.5rem;
}

/* ---- Body (title + lede + arrow) ------------------------------------- */

.upcomer-block--hub-pages-grid .hub-card__body {
	display: flex;
	flex-direction: column;
	gap: clamp(0.625rem, 1.4vw, 0.875rem);
	padding: clamp(1rem, 2.2vw, 1.375rem);
	flex: 1 1 auto;
}

.upcomer-block--hub-pages-grid .hub-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 700;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--hpg-card-fg);
}

.upcomer-block--hub-pages-grid .hub-card__lede {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: "Barlow", sans-serif;
	font-weight: 500;
	font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
	line-height: 1.4;
	color: var(--hpg-card-fg-muted);
}

/* CTA pill — the card's action affordance, matching offer-teaser-grid's
   button. The whole card is the link; this pill is the visible CTA and
   darkens when the card is hovered/focused. `margin-top: auto` pins it to the
   bottom so pills line up across cards with different lede lengths. A trailing
   `›` is added via ::after. */
.upcomer-block--hub-pages-grid .hub-card__cta {
	margin-top: auto;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	background: var(--hpg-cta-bg);
	color: var(--hpg-cta-fg);
	border-radius: 999px;
	font-family: "Barlow", sans-serif;
	font-weight: 700;
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1;
	transition: background-color 180ms ease;
}

.upcomer-block--hub-pages-grid .hub-card__cta::after {
	content: "›";
	font-size: 1.125em;
	line-height: 1;
	transform: translateY(-1px);
}

.upcomer-block--hub-pages-grid .hub-card__link:hover .hub-card__cta,
.upcomer-block--hub-pages-grid .hub-card__link:focus-visible .hub-card__cta {
	background: var(--hpg-cta-bg-hover);
}