/**
 * upcomer/article-card-grid
 *
 * Section header + responsive editorial grid of article cards. Light canvas,
 * dark text — same palette as upcomer/tabbed-article-feed. No new tokens:
 * every color maps to a value already present in theme.json or the
 * tabbed-article-feed block.
 *
 *   - Background: #FEFEFE (general-color-bg.minimal)
 *   - Title / "SE MER": #171717 (general-color.h1)
 *   - Eyebrow: #171717 (kept dark for editorial weight)
 *   - Meta: #5D5D5D (general-color.caption)
 *   - Hairlines: rgba(15,15,15,0.12) — same as tabbed-article-feed
 *   - Strong hairline (header rule): rgba(15,15,15,0.22)
 *
 * Column count comes from the inline `--columns` custom property on the
 * `<ul class="card-grid">` and is set by the editor's `columns_desktop` field.
 */

.upcomer-block--article-card-grid {
	--cg-bg: #FEFEFE;
	--cg-fg: #171717;
	--cg-fg-body: #494949;
	--cg-fg-muted: #5D5D5D;
	--cg-rule: rgba(15, 15, 15, 0.12);
	--cg-rule-strong: rgba(15, 15, 15, 0.22);
	--cg-gap: clamp(1rem, 2vw, 1.75rem);

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

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

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

/* ---- Side-by-side magazine row ------------------------------------- */
/*
 * Used by the showcase snippet (and any editor who wants the same
 * "main grid + featured rail" pattern) when two upcomer/article-card-grid
 * blocks are placed inside a wp:columns wrapper.
 *
 * The wrapper gets `upcomer-block upcomer-block--card-grid-row`. Without
 * this rule the wp:columns block would span the full canvas width — adding
 * the constraint keeps it aligned with the rest of the upcomer blocks (and
 * with the gamurs nav).
 */
/* The wrapper itself stays full-width — instead of `max-width + margin-auto`
   we use a fluid `padding-inline` that swells to absorb the slack at wide
   viewports, exactly mirroring how the standalone .upcomer-block + inner
   .upcomer-block__inner combo positions its content. At narrow viewports
   the padding floors at the standard `clamp(1rem, 3vw, 1.5rem)` inset, so
   the row sits at the same left/right edges as every other upcomer block. */
.upcomer-block--card-grid-row.wp-block-columns {
	box-sizing: border-box;
	padding-inline: max(
		clamp(1rem, 3vw, 1.5rem),
		calc((100% - calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--max-width, 1200))) / 2)
	);
}

/* When article-card-grid is a column child, the wrapper already provides
   the canvas inset and width cap — drop the block's own padding-inline and
   inner max-width so the cards size to the column, not to 1200px. */
.upcomer-block--card-grid-row .upcomer-block--article-card-grid {
	padding-inline: 0;
}

.upcomer-block--card-grid-row .upcomer-block--article-card-grid .upcomer-block__inner {
	max-width: none;
}

/* ---- Header (section label + "SE MER") ----------------------------- */

.upcomer-block--article-card-grid .card-grid-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: clamp(1rem, 2.5vw, 1.75rem);
	align-items: 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(--cg-rule-strong);
}

.upcomer-block--article-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(--cg-fg);
}

.upcomer-block--article-card-grid .card-grid-see-more,
.upcomer-block--article-card-grid .card-grid-see-more:link,
.upcomer-block--article-card-grid .card-grid-see-more:visited,
.upcomer-block--article-card-grid .card-grid-see-more:hover,
.upcomer-block--article-card-grid .card-grid-see-more:focus,
.upcomer-block--article-card-grid .card-grid-see-more:focus-visible,
.upcomer-block--article-card-grid .card-grid-see-more:active {
	color: var(--cg-fg);
	text-decoration: none;
}

.upcomer-block--article-card-grid .card-grid-see-more {
	font-family: "Barlow Condensed", "Barlow", sans-serif;
	font-weight: 800;
	font-size: clamp(0.8125rem, 1.2vw, 0.9375rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 150ms ease;
}

.upcomer-block--article-card-grid .card-grid-see-more:hover {
	opacity: 0.7;
}

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

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

.upcomer-block--article-card-grid .card-grid__item {
	display: flex;
	min-width: 0;
}

/* ---- Article-card overrides for the grid-card variant -------------- */

.upcomer-block--article-card-grid .article-card--grid-card {
	width: 100%;
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__link,
.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:link,
.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:visited,
.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:hover,
.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:focus,
.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:focus-visible,
.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:active {
	color: inherit;
	text-decoration: none;
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: clamp(0.625rem, 1.1vw, 0.875rem);
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: rgba(15, 15, 15, 0.06);
	overflow: hidden;
	position: relative;
	border-radius: 6px;
}

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

.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:hover .article-card__image {
	transform: scale(1.025);
}

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

/* Inline-SVG placeholder when the post has no featured image. Uses
   currentColor so it inherits the muted body token automatically. */
.upcomer-block--article-card-grid .article-card--grid-card .article-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--cg-fg-muted);
	opacity: 0.5;
	pointer-events: none;
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__placeholder svg {
	width: clamp(2.25rem, 5vw, 3rem);
	height: clamp(2.25rem, 5vw, 3rem);
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__body {
	display: flex;
	flex-direction: column;
	gap: clamp(0.375rem, 0.7vw, 0.5rem);
	min-width: 0;
}

.upcomer-block--article-card-grid .article-card--grid-card .article-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(1rem, 1.5vw, 1.25rem);
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--cg-fg);
	transition: color 150ms ease;
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__link:hover .article-card__title {
	color: var(--cg-fg-body);
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__meta {
	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(--cg-fg-muted);
}

.upcomer-block--article-card-grid .article-card--grid-card .article-card__meta-sep {
	color: var(--cg-rule-strong);
	font-weight: 400;
}

/* ---- Responsive: 640–900px reduces 3/4-column layouts to 2 -------- */

@media (max-width: 900px) and (min-width: 641px) {
	.upcomer-block--article-card-grid[data-columns="3"] .card-grid,
	.upcomer-block--article-card-grid[data-columns="4"] .card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---- Responsive: 5 columns are denser — hold 5 only ≥1100px --------- */
/* Below 1100px (down to the ≤640 single-column floor) a 5-col grid drops to
   3 so the cards don't squish. Same [data-columns] idiom as the 3/4 rule. */

@media (min-width: 641px) and (max-width: 1099px) {
	.upcomer-block--article-card-grid[data-columns="5"] .card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- Mobile ≤640px: always 1 column -------------------------------- */

@media (max-width: 640px) {
	.upcomer-block--article-card-grid .card-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.upcomer-block--article-card-grid .article-card--grid-card .article-card__media {
		aspect-ratio: 16 / 9;
	}

	.upcomer-block--article-card-grid .card-grid-header {
		column-gap: 0.75rem;
	}
}

/* ---- Large card size: taller image + larger title ------------------ */
/* Additive modifier (small = current rendering, no rule needed). Placed after
   the responsive rules so the taller aspect and bigger title win at every
   breakpoint (equal specificity to the base/mobile media rules → later wins).
   All values are the block's own scale — no new colors, no new tokens. */

.upcomer-block--article-card-grid--size-large .article-card--grid-card .article-card__media {
	/* ~33% taller than the small card's 16/9 (≈200px vs ≈150px at the same width). */
	aspect-ratio: 4 / 3;
}

.upcomer-block--article-card-grid--size-large .article-card--grid-card .article-card__title {
	/* ~18–22px vs the small card's ~16–20px. */
	font-size: clamp(1.125rem, 1.7vw, 1.375rem);
}