/**
 * upcomer/guide-card-grid
 *
 * Grid of branded "guide" cards on the project's existing colour system.
 *
 * No new colours per CLAUDE.md → Design conventions. The spec called out a
 * purple canvas + dark-purple card; the project palette has no purple, so
 * this block uses the canonical project surfaces instead:
 *
 *  - Light theme (default): white-ish canvas (general-color-bg.minimal),
 *    dark "brand chip" card (general-color-bg.strong) — the same surface
 *    featured-news-hero / page-hero-intro / article-card-carousel use for
 *    statement treatments. White label on dark card reads as a brand chip
 *    rather than a generic tile.
 *  - Dark theme (opt-in via the Background field): canvas drops to
 *    general-color-bg.strong; cards step up to general-color-bg.bold
 *    (#2E2E2E) so they stay legible against the canvas.
 *
 * When the linked post has a featured image, that image fills the card behind
 * the label — a scrim + label text-shadow derived from the card surface token
 * keep it legible — and the SN watermark is dropped. Without an image, the SN
 * watermark sits behind the label using a low-opacity white-on-card tone — no
 * extra colour token needed either way.
 *
 * Layout tokens reuse the gamurs top-nav container widths to align with
 * every other upcomer/* block at every breakpoint.
 */

.upcomer-block--guide-card-grid {
	/* Light theme (default) -------------------------------------------- */
	--gcg-bg:          var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
	--gcg-fg:          var(--wp--custom--light--general-color--h-1, #171717);
	--gcg-fg-muted:    var(--wp--custom--light--general-color--caption, #5D5D5D);
	--gcg-rule:        rgba(15, 15, 15, 0.22);

	/* Card surface — dark "brand chip" pattern. */
	--gcg-card-bg:        var(--wp--custom--light--general-color-bg--strong, #171717);
	--gcg-card-fg:        var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
	--gcg-card-watermark: rgba(255, 255, 255, 0.08);
	/* Match article-card-grid's media radius (.article-card__media) so guide
	   cards read as part of the same family. */
	--gcg-card-radius:    6px;

	--gcg-gap: clamp(1rem, 2.2vw, 1.75rem);

	background: var(--gcg-bg);
	color: var(--gcg-fg);
	/* Gutter. The section is full-width in the canvas; .upcomer-block__inner
	   only centres it above 943px, so without this the grid ran edge-to-edge
	   on mobile. Same value article-card-grid / hub-pages-grid use, so the
	   three line up at every breakpoint. */
	padding-inline: clamp(1rem, 3vw, 1.5rem);
	box-sizing: border-box;
}

/* Dark theme — opt-in via the Background select. Canvas + card swap so the
   card still reads against the canvas. */
.upcomer-block--guide-card-grid[data-theme="dark"] {
	--gcg-bg:          var(--wp--custom--light--general-color-bg--strong, #171717);
	--gcg-fg:          var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
	--gcg-fg-muted:    rgba(255, 255, 255, 0.72);
	--gcg-rule:        rgba(255, 255, 255, 0.18);

	--gcg-card-bg:        var(--wp--custom--light--general-color-bg--bold, #2E2E2E);
	--gcg-card-fg:        var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
	--gcg-card-watermark: rgba(255, 255, 255, 0.10);
}

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

.upcomer-block--guide-card-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--guide-card-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--guide-card-grid .upcomer-block__inner {
		max-width: unset;
	}
}

/* ---- Section header (label + horizontal rule) ----------------------- */

.upcomer-block--guide-card-grid .guide-grid-header {
	display: flex;
	align-items: flex-end;
	min-height: 2.5rem;
	padding-bottom: clamp(0.5rem, 1vw, 0.75rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	border-bottom: 1px solid var(--gcg-rule);
}

.upcomer-block--guide-card-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(--gcg-fg);
}

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

.upcomer-block--guide-card-grid .guide-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
	gap: var(--gcg-gap);
}

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

.upcomer-block--guide-card-grid .guide-card {
	display: flex;
	flex-direction: column;
	gap: clamp(0.625rem, 1.2vw, 0.875rem);
	min-width: 0;
}

/* The "chip" — link wrapping the watermark + label. */
.upcomer-block--guide-card-grid .guide-card__link,
.upcomer-block--guide-card-grid .guide-card__link:link,
.upcomer-block--guide-card-grid .guide-card__link:visited,
.upcomer-block--guide-card-grid .guide-card__link:hover,
.upcomer-block--guide-card-grid .guide-card__link:focus,
.upcomer-block--guide-card-grid .guide-card__link:focus-visible,
.upcomer-block--guide-card-grid .guide-card__link:active {
	color: var(--gcg-card-fg);
	text-decoration: none;
}

.upcomer-block--guide-card-grid .guide-card__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	width: 100%;
	padding: clamp(1.25rem, 2.4vw, 2rem);
	background: var(--gcg-card-bg);
	border-radius: var(--gcg-card-radius);
	overflow: hidden;
	isolation: isolate;
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.upcomer-block--guide-card-grid .guide-card__link:hover,
.upcomer-block--guide-card-grid .guide-card__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.35);
}

.upcomer-block--guide-card-grid .guide-card__link:focus-visible {
	outline: 2px solid var(--gcg-fg);
	outline-offset: 3px;
}

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

/* ---- Featured image (behind the label) ------------------------------ */
/* Fills the chip when the linked post has a thumbnail. The scrim and the
   label text-shadow are mixed from --gcg-card-bg (the card surface token),
   so nothing new enters the palette and both flip with the theme. */
.upcomer-block--guide-card-grid .guide-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.upcomer-block--guide-card-grid .guide-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 360ms ease;
}

.upcomer-block--guide-card-grid .guide-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--gcg-card-bg) 48%, transparent) 0%,
		color-mix(in srgb, var(--gcg-card-bg) 72%, transparent) 100%
	);
}

.upcomer-block--guide-card-grid .guide-card__link--has-image:hover .guide-card__image,
.upcomer-block--guide-card-grid .guide-card__link--has-image:focus-visible .guide-card__image {
	transform: scale(1.03);
}

.upcomer-block--guide-card-grid .guide-card__link--has-image .guide-card__label {
	text-shadow: 0 1px 4px color-mix(in srgb, var(--gcg-card-bg) 85%, transparent);
}

/* SN watermark — sits behind the label, low-opacity, fills the card. */
.upcomer-block--guide-card-grid .guide-card__watermark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 0;
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 900;
	font-size: clamp(5rem, 11vw, 9rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--gcg-card-watermark);
	pointer-events: none;
	user-select: none;
}

.upcomer-block--guide-card-grid .guide-card__label {
	position: relative;
	z-index: 1;
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	font-size: clamp(0.875rem, 1.3vw, 1rem);
	line-height: 1.15;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gcg-card-fg);
}

/* ---- Meta (title + date | byline below the chip) -------------------- */

.upcomer-block--guide-card-grid .guide-card__meta {
	display: flex;
	flex-direction: column;
	gap: clamp(0.25rem, 0.5vw, 0.375rem);
	color: var(--gcg-fg-muted);
}

.upcomer-block--guide-card-grid .guide-card__title-link,
.upcomer-block--guide-card-grid .guide-card__title-link:link,
.upcomer-block--guide-card-grid .guide-card__title-link:visited,
.upcomer-block--guide-card-grid .guide-card__title-link:hover,
.upcomer-block--guide-card-grid .guide-card__title-link:focus,
.upcomer-block--guide-card-grid .guide-card__title-link:focus-visible,
.upcomer-block--guide-card-grid .guide-card__title-link:active {
	color: var(--gcg-fg);
	text-decoration: none;
}

.upcomer-block--guide-card-grid .guide-card__title-link:hover .guide-card__title,
.upcomer-block--guide-card-grid .guide-card__title-link:focus-visible .guide-card__title {
	color: var(--gcg-fg-muted);
}

.upcomer-block--guide-card-grid .guide-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 700;
	font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--gcg-fg);
	transition: color 150ms ease;
}

.upcomer-block--guide-card-grid .guide-card__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.5rem;
	margin: 0;
	font-family: "Barlow", sans-serif;
	font-weight: 600;
	font-size: clamp(0.625rem, 0.85vw, 0.6875rem);
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gcg-fg-muted);
}

.upcomer-block--guide-card-grid .guide-card__byline-sep {
	color: var(--gcg-rule);
	font-weight: 400;
}

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

/* Mid (640–960px): drop to 2 columns regardless of editor choice. */
@media (max-width: 960px) and (min-width: 641px) {
	.upcomer-block--guide-card-grid .guide-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.upcomer-block--guide-card-grid .guide-card__link {
		aspect-ratio: 16 / 9;
	}
}