/**
 * upcomer/text-section
 *
 * Long-form text unit: a heading paired with body copy at a constrained
 * editorial measure. Designed to stack — drop multiple instances in sequence
 * to build a long-form information page (about, policies, etc).
 *
 * Why this block, given core has Heading + Paragraph: this block consolidates
 * heading-level, alignment, and measure decisions into one editor-visible
 * unit whose CSS enforces the project's typography rhythm. Mixing core blocks
 * to achieve the same scatters those decisions and lets each editor's
 * discretion drift the visual rhythm.
 *
 * No-new-colors compliance (CLAUDE.md → Design conventions):
 *  - Heading + body use `inherit` so the block adopts whatever color the
 *    page surface provides. Body emphasis derives from `currentColor` via
 *    `color-mix`. No fixed colors introduced.
 */

.upcomer-block--text-section {
	/* 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));

	/* Rhythm: gap between *distinct* topic sections (heading change). Used as
	   the block's outer margin so a Text Section sits comfortably alongside
	   any other block. */
	--text-section-section-rhythm: clamp(2.5rem, 5vw, 4rem);

	/* Tighter rhythm: gap between consecutive Text Sections (same article).
	   Set via adjacent-sibling selector below. */
	--text-section-stack-rhythm: clamp(2rem, 4vw, 3rem);

	/* Heading → body gap within a section. */
	--text-section-heading-body-gap: clamp(0.875rem, 1.75vw, 1.5rem);

	margin-block: var(--text-section-section-rhythm);
	color: inherit;
	box-sizing: border-box;
}

.upcomer-block--text-section *,
.upcomer-block--text-section *::before,
.upcomer-block--text-section *::after {
	box-sizing: border-box;
}

/* Consecutive Text Sections: collapse the bottom margin of the first with
   the top margin of the second into a single, tighter stack rhythm. */
.upcomer-block--text-section + .upcomer-block--text-section {
	margin-block-start: var(--text-section-stack-rhythm);
}

/* The previous block's margin-block-end provides the air above the next
   sibling; collapse it so we don't double-space the gap. */
.upcomer-block--text-section:has(+ .upcomer-block--text-section) {
	margin-block-end: 0;
}

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

.upcomer-block--text-section .upcomer-block__inner {
	/* Standard reading-column width — see blocks-canvas.css. */
	max-width: var(--upcomer-reading-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--text-section-heading-body-gap);
}

@media (max-width: 991px) {
	.upcomer-block--text-section .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;
	}
}

/* ---- Measure variants ------------------------------------------------- */

/* "Prose" — constrain body lines to ~65ch for comfortable reading. The
   heading isn't constrained, so it can run longer than the body when needed. */
.upcomer-block--text-section.width-prose .upcomer-block__body {
	max-width: 65ch;
}

.upcomer-block--text-section.width-prose.align-center .upcomer-block__body {
	margin-inline: auto;
}

/* "Full" — body fills the page column. */
.upcomer-block--text-section.width-full .upcomer-block__body {
	max-width: none;
}

/* ---- Alignment variants ---------------------------------------------- */

.upcomer-block--text-section.align-left {
	text-align: left;
}

.upcomer-block--text-section.align-center {
	text-align: center;
}

/* ---- Heading --------------------------------------------------------- */

.upcomer-block--text-section .upcomer-block__heading {
	margin: 0;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.005em;
	color: inherit;
	text-wrap: balance;
}

/* Each heading level gets its own type scale — keeps rhythm predictable when
   editors switch between h2 / h3 / h4. */
.upcomer-block--text-section .upcomer-block__heading {
	font-size: clamp(1.625rem, 3vw, 2.25rem);
}

.upcomer-block--text-section h3.upcomer-block__heading {
	font-size: clamp(1.375rem, 2.25vw, 1.75rem);
	font-weight: 700;
	line-height: 1.12;
}

.upcomer-block--text-section h4.upcomer-block__heading {
	font-size: clamp(1.125rem, 1.75vw, 1.375rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

/* ---- Body ------------------------------------------------------------ */

.upcomer-block--text-section .upcomer-block__body {
	font-family: "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-size: clamp(1rem, 0.875rem + 0.4vw, 1.125rem);
	line-height: 1.6;
	color: color-mix(in srgb, currentColor 80%, transparent);
	text-wrap: pretty;
}

.upcomer-block--text-section .upcomer-block__body > * {
	margin: 0;
}

/* Vertical rhythm between consecutive body elements (p + ul + ol etc.) */
.upcomer-block--text-section .upcomer-block__body > * + * {
	margin-block-start: 1em;
}

.upcomer-block--text-section .upcomer-block__body em {
	font-style: italic;
}

.upcomer-block--text-section .upcomer-block__body strong {
	font-weight: 700;
	color: currentColor;
}

.upcomer-block--text-section .upcomer-block__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 160ms ease;
}

.upcomer-block--text-section .upcomer-block__body a:hover,
.upcomer-block--text-section .upcomer-block__body a:focus-visible {
	text-decoration-thickness: 2px;
}

/* ---- Lists ----------------------------------------------------------- */

.upcomer-block--text-section .upcomer-block__body ul,
.upcomer-block--text-section .upcomer-block__body ol {
	padding-inline-start: 1.25rem;
}

.upcomer-block--text-section .upcomer-block__body li + li {
	margin-block-start: 0.375rem;
}

/* Center-aligned variant — lists stay left-aligned because center-aligned
   bullets are unreadable. The list block itself is centered as a unit. */
.upcomer-block--text-section.align-center .upcomer-block__body ul,
.upcomer-block--text-section.align-center .upcomer-block__body ol {
	display: inline-block;
	text-align: left;
}

/* ---- Background variants -------------------------------------------- */
/*
 * `default` (no styling) keeps the block transparent — existing instances
 * are unchanged. `brand` paints the project's dark canvas (the same
 * #171717 that `general-color-bg.strong` exposes; matches the hero family).
 * `muted` paints the existing `general-color-bg.subtle` light gray panel.
 *
 * The spec called out an "Upcomer purple" canvas; the project's actual
 * palette is gold/khaki (`brand.color.50` = #887343) and has no purple,
 * so brand-bg uses the dark surface that featured-news-hero + article-card-
 * carousel + page-hero-intro already use. Documented in README → Visual
 * decisions.
 */

.upcomer-block--text-section.text-section--bg-brand,
.upcomer-block--text-section.text-section--bg-muted {
	/* Surfaces get an inset so the heading/body don't kiss the panel edge. */
	padding-block: clamp(2rem, 4.5vw, 3.5rem);
	padding-inline: clamp(1.25rem, 3vw, 2rem);
	/* No border-radius: the panel spans the full viewport width, and rounded
	   corners on a full-bleed surface read as a rendering artifact. */
}

/* Any instance with a panel background OR a CTA aligns with the nav (and
   with every other upcomer/* block) instead of the reading-column max.
   The narrower reading width only makes sense for plain-prose default
   sections — once there's a surface or a CTA the editor expects the layout
   to align with the rest of the page rhythm. */
.upcomer-block--text-section.text-section--bg-brand .upcomer-block__inner,
.upcomer-block--text-section.text-section--bg-muted .upcomer-block__inner,
.upcomer-block--text-section.has-cta .upcomer-block__inner {
	max-width: calc(1px * var(--wp--custom--top-nav--primary-container-spacing--desktop--max-width, 1200));
}

@media (max-width: 1247px) {
	.upcomer-block--text-section.text-section--bg-brand .upcomer-block__inner,
	.upcomer-block--text-section.text-section--bg-muted .upcomer-block__inner,
	.upcomer-block--text-section.has-cta .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--text-section.text-section--bg-brand .upcomer-block__inner,
	.upcomer-block--text-section.text-section--bg-muted .upcomer-block__inner,
	.upcomer-block--text-section.has-cta .upcomer-block__inner {
		max-width: unset;
	}
}

/* Likewise, the body's 65ch prose cap is dropped whenever the layout is
   a panel OR a CTA row — the body needs to fill its column so the CTA
   has room to flex right. */
.upcomer-block--text-section.text-section--bg-brand.width-prose .upcomer-block__body,
.upcomer-block--text-section.text-section--bg-muted.width-prose .upcomer-block__body,
.upcomer-block--text-section.has-cta.width-prose .upcomer-block__body {
	max-width: none;
}

.upcomer-block--text-section.text-section--bg-brand {
	background: var(--wp--custom--light--general-color-bg--strong, #171717);
	color: var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
}

.upcomer-block--text-section.text-section--bg-muted {
	background: var(--wp--custom--light--general-color-bg--subtle, #F8F8F8);
	color: var(--wp--custom--light--general-color--h-1, #171717);
}

/* ---- CTA layout ----------------------------------------------------- */
/*
 * Only emitted when both cta.label and cta.url are filled in. The layout
 * wrapper holds body + button so they can sit side-by-side on desktop
 * while staying stacked on mobile. Inner `.upcomer-block__body` styling
 * applies unchanged (descendant selector).
 */

.upcomer-block--text-section .text-section__layout {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.upcomer-block--text-section .text-section__layout .upcomer-block__body {
	min-width: 0;
	flex: 1;
}

@media (min-width: 768px) {
	.upcomer-block--text-section.has-cta .text-section__layout {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: clamp(1.5rem, 3vw, 2.5rem);
	}

	/* Width-prose constrains the body, but on side-by-side rows we want the
	   button to claim the right edge instead of sitting next to a narrow
	   body. The body keeps its ~65ch max via the existing width-prose rule;
	   the row distributes any leftover space to the gap. */
	.upcomer-block--text-section.has-cta .text-section__layout .button--cta {
		flex: 0 0 auto;
		align-self: center;
	}
}

/* ---- Button affordance --------------------------------------------- */
/*
 * Scoped to .upcomer-block--text-section so the `button` and `button--cta`
 * class names don't leak into other contexts. The block already uses
 * currentColor and inherit for everything else; the button follows suit so
 * the contrast adapts to whichever background variant is active.
 *
 * Default (filled):
 *   bg = currentColor, text = panel bg-color via --button-fg fallback
 * Outlined (used on bg=brand per render.php):
 *   bg = transparent, text = currentColor, border = currentColor
 *   hover = inverts: bg = currentColor, text = canvas color
 */

.upcomer-block--text-section .button.button--cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	font-family: "Barlow Condensed", "Barlow", "Helvetica Neue", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(0.875rem, 1.2vw, 1rem);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 4px;
	border: 1px solid currentColor;
	background: currentColor;
	color: var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.upcomer-block--text-section.text-section--bg-muted .button.button--cta {
	color: var(--wp--custom--light--general-color-bg--minimal, #FEFEFE);
}

.upcomer-block--text-section .button.button--cta:hover,
.upcomer-block--text-section .button.button--cta:focus-visible {
	background: transparent;
	color: inherit;
}

.upcomer-block--text-section .button.button--cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Outlined variant — used by render.php whenever the section paints a panel
   (background = brand or muted), where the filled affordance would dominate
   the surface. Each panel sets `--button-invert-color` to its own canvas
   color so the hover state inverts cleanly: fill becomes `currentColor`,
   text takes the panel's own background color. */
.upcomer-block--text-section .button.button--cta.button--outlined {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
}

.upcomer-block--text-section .button.button--cta.button--outlined:hover,
.upcomer-block--text-section .button.button--cta.button--outlined:focus-visible {
	background: currentColor;
	/* Hover fills with currentColor (the text/border color); the label needs
	   to flip to a readable contrast. Default and muted variants both sit on
	   light surfaces with dark text, so the hover fill is dark and the label
	   must turn white. Brand has white text on dark canvas, so its hover
	   fill is white and the label must turn dark — it overrides the token. */
	color: var(--button-invert-color, var(--wp--custom--light--general-color-bg--minimal, #FEFEFE));
}

.upcomer-block--text-section.text-section--bg-brand {
	--button-invert-color: var(--wp--custom--light--general-color-bg--strong, #171717);
}

@media (prefers-reduced-motion: reduce) {
	.upcomer-block--text-section .button.button--cta {
		transition: none;
	}
}

/* ---- Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.upcomer-block--text-section .upcomer-block__body a {
		transition: none;
	}
}