/*
	Front page specials — hero, AGM lattice, planes hook.
	Issue cards / vignettes / transition art / publication CTA live in shared tools.
*/

/*
	Front page only — hero, article grid, issue transitions, related home sections.
	Enqueued on is_front_page(); also loaded in the Site Editor canvas.
	Tokens / align: assets/css/layout.css.
*/

/* =========================================================
	05 HOME PAGE SECTIONS
========================================================= */

/* ==========================================
	Hero Styles
========================================== */

/*
----------------------------------------
Page Hero
----------------------------------------
*/

/* main / align scaffold → assets/css/layout.css */

.page-hero {
	overflow: clip;
	position: relative;
	z-index: 1;
}

/* Catch leftover breakouts (negative margins, wide art) on small screens. */
@media (max-width: 781px) {
	body.home {
		overflow-x: clip;
	}

	/* Desktop-only Issue 02 image nudge — leave vignette-stack full-bleed alone. */
	#vignette-2 .is-style-editorial-feature-image-right > .wp-block-image {
		margin-inline: 0;
	}
}

/* Issue 02 art — ~80% of the editorial image column (desktop only). */
@media (min-width: 782px) {
	#vignette-2 .is-style-editorial-feature-image-right > .wp-block-image {
		box-sizing: border-box;
		justify-self: end;
		margin-inline: -60px;
		max-width: 80%;
		width: 80%;
	}
}

/*
	Bottom fade into the page (was on the old Hero Inside group).
	Lives on the Cover so we don't need an extra wrapper.
*/
.page-hero::after {
	background: linear-gradient(
		0deg,
		rgb(236, 233, 223) 0%,
		rgba(224, 81, 81, 0) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.page-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Hero columns: Align wide — width/air from layout.css (.alignwide). */
.page-hero__layout {
	align-items: center;
	column-gap: clamp(1.5rem, 2.5vw, 2rem);
}

.page-hero__content {
	position: relative;
	z-index: 2;
}

.page-hero__copy {
	align-items: flex-start;
}

.page-hero__eyebrow {
	box-sizing: border-box;
	max-width: 100%;
}

.page-hero__title-wrap {
	position: relative;
	width: 100%;
	container-type: inline-size;
}

.page-hero__title {
	display: inline;
	margin: 0;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.page-hero__summary {
	max-width: 38rem;
}

.page-hero__visual {
	position: relative;
	z-index: 1;
	min-width: 0;
	max-width: 100%;
	/* visible: status callout hangs left with left: -1rem into the column gap */
	overflow: visible;
}

.page-hero__visual .icon-container,
.page-hero__visual .globe-motion {
	max-width: 100%;
}

/* Let stroke paint past the viewBox edge (half of stroke-width). */
.page-hero__visual .globe-motion,
.page-hero__visual .globe-motion svg,
.page-hero__visual .globe-motion-stage,
.page-hero__visual .icon-container {
	overflow: visible;
}

.page-hero__artwork {
	position: relative;
	z-index: 1;
	width: min(100%, 35.375rem);
	margin: 0 auto;
}

.page-hero__artwork img {
	display: block;
	width: 100%;
	height: auto;
}

.page-hero__callout {
	position: absolute;
	z-index: 2;
	width: max-content;
	max-width: 10rem;
	color: var(--wp--preset--color--main);
	pointer-events: none;
}

.page-hero__callout--status {
	top: 14%;
	left: -1rem;
	text-align: right;
}

.page-hero__callout--coordinates {
	right: 0;
	bottom: 4%;
}

.page-hero__callout-text {
	margin: 0;
}

@media (max-width: 1024px) {
	.page-hero__callout {
		display: none;
	}
}

/*
* WordPress emits the Huge preset with !important. Scale against the title's
* actual column instead of the viewport so each word stays intact as the
* two-column layout narrows, then regains its full impact when it stacks.
*/
.page-hero__title.has-huge-font-size {
	font-size: clamp(3.25rem, 21cqi, 6rem) !important;
}

@media (max-width: 960px) {
	.page-hero__layout {
		flex-direction: column;
		row-gap: clamp(2rem, 7vw, 4rem);
	}

	.page-hero__content,
	.page-hero__visual {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.page-hero__eyebrow {
		font-size: var(--wp--preset--font-size--xx-small);
	}
}

/* ==========================================
	ARTICLE GRID BACKDROP
========================================== */

.article-grid-backdrop.wp-block-cover {
	/*
	* Full band (Align full). Card column air comes from inner Align wide
	* via layout.css (--nb-edge) — not from shrinking this cover.
	* Core Cover defaults to padding: 1em; that inset cards vs. the
	* pull-quote (sibling outside the cover). Kill it like .page-hero.
	*
	* Lattice / chase motion lives in article-grid-motion.js (.agm-*).
	* Pre-AGM cover-image parallax CSS → graveyard.css § E.
	*/
	position: relative;
	left: auto;
	z-index: 0;
	width: 100%;
	max-width: none;
	padding: 0 !important;

	background-color: var(--wp--preset--color--page-white);
	overflow: visible;
}

/*
	Cards own the flow box. Lattice hangs out (into planes / quotes).
	Keep those later sections above it; hero already sits higher.
*/
.article-grid-backdrop ~ .planes-start,
.article-grid-backdrop ~ .pull-quote-band,
.article-grid-backdrop ~ .wp-block-spacer,
.article-grid-backdrop ~ .vignette-stack {
	position: relative;
	z-index: 1;
}

/*
* Keep the Cover overlay above the lattice (AGM injects .agm-grid-space).
*/
.article-grid-backdrop
	> .wp-block-cover__background {
	position: absolute;
	z-index: 1;
}

/*
* Keep the preview cards above the background.
*/
.article-grid-backdrop
	> .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
}