/**
 * upcomer/article-intro-header
 *
 * Single-instance article intro: H1, lede, up to two byline cards in a
 * 2-col → 1-col grid, and an optional updated-date footer. Light canvas
 * intended for the top of an article page.
 *
 * No-new-colors compliance (CLAUDE.md → Design conventions):
 *  - Canvas defaults to white. Text uses `inherit` so the block adopts
 *    whatever the page provides. The byline-card border + muted text
 *    derive from `currentColor` via `color-mix`. No fixed colors.
 *  - All theme-overridable via the `--article-intro-*` tokens below.
 */

.upcomer-block--article-intro-header {
	/* Surfaces */
	--article-intro-canvas-bg: transparent;
	--article-intro-card-bg: color-mix(in srgb, currentColor 4%, transparent);
	--article-intro-card-border: color-mix(in srgb, currentColor 12%, transparent);
	--article-intro-rule: color-mix(in srgb, currentColor 10%, transparent);

	/* Foreground */
	--article-intro-fg: inherit;
	--article-intro-fg-muted: color-mix(in srgb, currentColor 60%, transparent);
	--article-intro-fg-subtle: color-mix(in srgb, currentColor 80%, transparent);

	/* Geometry */
	--article-intro-card-padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(1rem, 1.75vw, 1.25rem);
	--article-intro-card-gap: clamp(0.75rem, 1.5vw, 1.25rem);
	--article-intro-block-rhythm: clamp(1.5rem, 3.5vw, 2.75rem);

	/* Shared content column with the rest of the site (matches gamurs footer). */
	--page-hero-content-max: calc(1px * var(--wp--custom--bottom-nav--container--desktop--max-width, 1200));

	background: var(--article-intro-canvas-bg);
	color: var(--article-intro-fg);
	/* Outer vertical rhythm comes from --upcomer-block-rhythm in
	   assets/css/blocks-canvas.css. */
	box-sizing: border-box;
}

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

/* ---- Content column --------------------------------------------------- */

.upcomer-block--article-intro-header .upcomer-block__inner {
	/* Match the site-wide content column used by gamurs header-nav / page-hero-intro. */
	max-width: var(--page-hero-content-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--article-intro-block-rhythm);
}

@media (min-width: 992px) and (max-width: 1248px) {
	.upcomer-block--article-intro-header .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--latpop--max-width, 1200));
	}
}

@media (max-width: 991px) {
	.upcomer-block--article-intro-header .upcomer-block__inner {
		max-width: calc(1px * var(--wp--custom--bottom-nav--container--mobile--max-width, 720));
		/* Match the gamurs site-wide mobile gutter (theme.css uses 15px). */
		padding-inline: 15px;
	}
}

/* ---- Headline --------------------------------------------------------- */

/* Sentence-case typography. Heavy global selectors elsewhere on the site
   force uppercase H1 — `text-transform: none !important` re-asserts the
   block's contract that this H1 is editorial sentence-case. */
.upcomer-block--article-intro-header .article-intro__headline {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: clamp(1.75rem, 4.25vw, 3.25rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--article-intro-fg);
	text-transform: none !important;
	text-wrap: balance;
	max-width: 28ch;
}

/* ---- Lede ------------------------------------------------------------- */

.upcomer-block--article-intro-header .article-intro__lede {
	margin: 0;
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: clamp(1.0625rem, 0.875rem + 0.5vw, 1.25rem);
	font-weight: 400;
	line-height: 1.55;
	color: var(--article-intro-fg-subtle);
	max-width: 64ch;
	text-wrap: pretty;
}

.upcomer-block--article-intro-header .article-intro__lede em { font-style: italic; }
.upcomer-block--article-intro-header .article-intro__lede strong { font-weight: 700; color: currentColor; }
.upcomer-block--article-intro-header .article-intro__lede a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* ---- Byline cards (2 → 1 col) ---------------------------------------- */

.upcomer-block--article-intro-header .article-intro__bylines {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--article-intro-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 38rem;
}

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

.upcomer-block--article-intro-header .byline {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.875rem;
	row-gap: 0.125rem;
	align-items: center;
	margin: 0;
	padding: var(--article-intro-card-padding);
	background: var(--article-intro-card-bg);
	border: 1px solid var(--article-intro-card-border);
	border-radius: 2px;
}

.upcomer-block--article-intro-header .byline__icon {
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--article-intro-fg-subtle);
}

.upcomer-block--article-intro-header .byline__icon svg {
	width: 32px;
	height: 32px;
}

/* WP-user byline photo (custom avatar → gravatar). Fills the icon slot as a
   round avatar; falls back to the inline SVG icon when no user is picked. */
.upcomer-block--article-intro-header .byline__photo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	background: var(--article-intro-card-border);
}

.upcomer-block--article-intro-header .byline__role {
	margin: 0;
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--article-intro-fg-muted);
}

.upcomer-block--article-intro-header .byline__name {
	margin: 0;
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--article-intro-fg);
}

/* ---- Updated-date footer line --------------------------------------- */

.upcomer-block--article-intro-header .article-intro__updated {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding-block-start: clamp(0.5rem, 1vw, 0.875rem);
	border-block-start: 1px solid var(--article-intro-rule);
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	color: var(--article-intro-fg-muted);
	text-transform: uppercase;
}

.upcomer-block--article-intro-header .article-intro__updated .byline__icon {
	width: 16px;
	height: 16px;
	color: currentColor;
}

.upcomer-block--article-intro-header .article-intro__updated-prefix {
	color: currentColor;
}

.upcomer-block--article-intro-header .article-intro__updated-date {
	color: var(--article-intro-fg-subtle);
}