/**
 * Homepage hero — replaces the old text+slider hero entirely (client
 * asked for a full redesign matching a supplied React reference: one
 * large featured tile beside a 2x2 grid of four more). Ported as
 * closely as a server-rendered block theme reasonably can: same
 * layout proportions, same hover/scale/overlay language, same tinted
 * primary-color overlay. assets/js/hero-media.js handles the
 * in-view-only video playback and reduced-motion behaviour the
 * reference's useEffect hooks did.
 */
.hero-media-grid {
	position: relative;
	height: 80vh;
	min-height: 500px;
	width: 100%;
	background: var(--wp--preset--color--base);
}
/* A modest, deliberate 24px gutter — enough to read as an intentional
   margin, not so much that the hero looks boxed-in (that was the
   32px-and-up responsive-tiered version, paired with the old 1400px
   cap, that felt like too much on a normal laptop). .support-overlap
   right below matches this exact value so the two stay aligned — see
   the note there for how the math still lines up. */
.hero-media-grid__inner {
	position: relative;
	/* A safety ceiling for genuinely ultra-wide monitors only — well
	   above typical laptop/desktop widths, so this never kicks in and
	   creates its own extra margin on top of the 24px gutter below. */
	max-width: 1800px;
	height: 100%;
	margin: 0 auto;
	padding: 0 24px;
}

/* Plain flex child of .hero-media-grid__inner — column (featured on
   top, grid below) below 960px, row (featured left, grid right) from
   960px up. A grid tile is already sharing a quarter of the width at
   that point; switching any earlier (the reference's own 768px) left
   a dead zone from roughly 768-960px where tiles were just narrow
   enough for a longer label ("Peacebuilding") to wrap mid-word
   instead of fitting on one line — the same class of squeeze the
   site's other breakpoints have needed widening for.

   This used to be position:absolute; inset:0, which fills the
   *padding edge* of its positioned ancestor — meaning it ignored
   .hero-media-grid__inner's own left/right padding entirely and the
   tiles rendered flush with the section's true outer edge, not
   inset by the 16/24/32px the padding declared. A plain flex child
   has no such quirk: it fills its parent's actual content box, so
   the padding is finally real, and .support-overlap below can mirror
   these exact same numbers and land on the same edges. */
.hero-media-grid__layout {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
@media (min-width: 960px) {
	.hero-media-grid__layout {
		flex-direction: row;
	}
}
.hero-media-grid__featured {
	height: 50%;
	width: 100%;
	padding: 8px;
}
.hero-media-grid__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 12px;
	height: 50%;
	width: 100%;
	padding: 8px;
}
@media (min-width: 960px) {
	.hero-media-grid__featured,
	.hero-media-grid__grid {
		height: 100%;
		width: 50%;
		padding: 12px;
	}
	.hero-media-grid__grid {
		gap: 16px;
	}
}

/* One tile — a soft amber glow behind every tile (the site's second
   brand colour; the blue overlay tint below already covers the
   first), tiered by vertical position so the whole hero reads
   brightest at the top and dims going down: the top grid row glows
   strongest, the featured tile (spanning the full height, so neither
   fully "top" nor "bottom") sits in the middle, and the bottom grid
   row is dimmest. .hero-media-grid itself has no overflow:hidden, so
   the glow is free to soften into the plain white page around it
   rather than getting clipped at the section edge. */
.hero-tile {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	border-radius: 20px;
	border: 1px solid rgba(40, 40, 40, 0.07);
	/* One shallow amber shadow, same on every card — no per-row
	   tiering, just enough warmth to register as a colour choice
	   rather than a lighting effect. */
	box-shadow:
		0 14px 22px -3px rgba(0, 0, 0, 0.16),
		0 6px 10px -4px rgba(0, 0, 0, 0.14),
		0 6px 16px 0 rgba(253, 169, 3, 0.18);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-tile:hover {
	transform: scale(1.02);
	box-shadow:
		0 20px 25px -5px rgba(0, 0, 0, 0.12),
		0 8px 10px -6px rgba(0, 0, 0, 0.1),
		0 8px 20px 0 rgba(253, 169, 3, 0.24);
}
.hero-tile__link {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
}
.hero-tile__media {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	filter: saturate(1) brightness(1);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease;
}
.hero-tile:hover .hero-tile__media {
	transform: scale(1.06);
	filter: saturate(1.12) brightness(1.03);
}
.hero-tile__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(155deg, rgba(49, 161, 255, 0.32), rgba(49, 161, 255, 0.1) 65%);
	transition: background 0.5s ease;
}
.hero-tile:hover .hero-tile__overlay {
	background: linear-gradient(155deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.05) 65%);
}
.hero-tile__label-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.hero-tile__label {
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--display);
	max-width: 100%;
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-align: center;
	/* White text, dark drop-shadow — both the blue and near-black
	   attempts before this were less legible against real photos than
	   the reference design's own white-on-photo treatment. */
	text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
	overflow-wrap: break-word;
	transition: transform 0.5s ease;
}
.hero-tile:hover .hero-tile__label {
	transform: scale(1.05);
}
@media (min-width: 480px) {
	.hero-tile__label {
		font-size: 1.3rem;
	}
}
/* The featured tile is roughly 2x the width/area of a grid tile, so it
   gets the full scale the reference specifies (text-2xl→3xl→4xl);
   grid tiles step up more modestly — at the same size, a word like
   "Peacebuilding" has nowhere to break inside a ~180px-wide tile and
   runs past its edge. */
.hero-tile--featured .hero-tile__label {
	font-size: 1.5rem;
}
@media (min-width: 480px) {
	.hero-tile--featured .hero-tile__label {
		font-size: 1.875rem;
	}
}
@media (min-width: 768px) {
	.hero-tile--featured .hero-tile__label {
		font-size: 2.25rem;
	}
}

/* Video-specific: play-button overlay, shown until the video is
   actually playing (assets/js/hero-media.js toggles .is-playing), and
   fading out on hover the same way the reference's opacity classes
   did (revealed again as soon as the pointer leaves, via the
   :hover rule below losing priority to .is-playing). */
.hero-tile__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.3s ease;
}
.hero-tile[data-type="video"].is-playing .hero-tile__play {
	opacity: 0;
}
.hero-tile[data-type="video"].is-playing:hover .hero-tile__play {
	opacity: 1;
}
.hero-tile__play svg {
	display: block;
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--base);
}
.hero-tile__play::before {
	content: "";
	position: absolute;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
	.hero-tile,
	.hero-tile__media,
	.hero-tile__overlay,
	.hero-tile__label,
	.hero-tile__play {
		transition: none;
	}
}