/* ============================================================
   GGI pixel layer — exact values ported from the React/Tailwind
   build (Navbar.jsx, Footer.jsx, PageHeader.jsx, TeamPage.jsx).
   Block markup supplies structure/editability; this supplies px.
   ============================================================ */

/* ---------- Navbar (Navbar.jsx) ---------- */
.ggi-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 50;
	background: linear-gradient(to right, rgba(16, 37, 58, 0.95), #527796, rgba(16, 37, 58, 0.95));
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(211, 221, 245, 0.2);
}

.ggi-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1.5rem;
}

/* WordPress's block-gap puts a 24px margin-block-start on the navigation block,
   which in this flex row adds straight onto the header's height (86px against
   live's 65px). Navbar.jsx spaces these with flex alone. Two classes deep because
   core's `:root :where(.is-layout-flow) > *` ties at (0,1,0) and lands later. */
.ggi-navbar .ggi-navbar__inner>* {
	margin-block: 0;
}

@media (min-width: 1024px) {
	.ggi-navbar__inner {
		padding: 0.75rem 2rem;
	}
}

/* Logo medallion */
.ggi-logo {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
}

.ggi-logo__ring {
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	/* Tailwind's preflight makes w-10/w-14 border-box on live. These spans sit
	   outside WordPress's border-box reset, so without this the 2px padding lands
	   outside the declared size and every medallion renders 4px too large. */
	box-sizing: border-box;
	padding: 0.125rem;
	border-radius: 9999px;
	background: linear-gradient(to bottom right, #D3DDF5, #96B9E5, #1e3a8a);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(211, 221, 245, 0.3);
	transition: all 0.5s;
}

.ggi-logo:hover .ggi-logo__ring {
	box-shadow: 0 20px 25px -5px rgba(211, 221, 245, 0.5), 0 8px 10px -6px rgba(211, 221, 245, 0.5), 0 0 0 2px rgba(211, 221, 245, 0.6);
	transform: scale(1.1);
}

.ggi-logo__disc {
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom right, #ffffff, #f9fafb);
	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.ggi-logo__disc img {
	width: 2rem;
	height: 2rem;
	object-fit: contain;
	opacity: 0.9;
	transition: opacity 0.5s;
}

.ggi-logo:hover .ggi-logo__disc img {
	opacity: 1;
}

/* Gradient wordmark */
.ggi-logo__title {
	display: none;
	position: relative;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	background: linear-gradient(to right, #D3DDF5, #ffffff, #96B9E5);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: all 0.5s;
}

@media (min-width: 640px) {
	.ggi-logo__title {
		display: block;
	}
}

@media (min-width: 1024px) {
	.ggi-logo__title {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
}

.ggi-logo:hover .ggi-logo__title {
	background-image: linear-gradient(to right, #ffffff, #D3DDF5, #ffffff);
}

.ggi-logo__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(to right, #D3DDF5, #96B9E5);
	transition: width 0.7s;
}

.ggi-logo:hover .ggi-logo__title::after {
	width: 100%;
}

/* Nav links (desktop) — doubled class outguns core's specificity */
/* text-sm is 14px/20px on live; the theme's body line-height of 1.6 would make the
   links 22.4px tall and push the header 2px taller than live. */
.ggi-nav {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 500;
	color: #D3DDF5;
}

/* Original is space-x-1 on one row; WP's 1.5rem block gap made items wrap at
   medium widths ("Get Involved" dropped to a second line) */
.ggi-nav .wp-block-navigation__container {
	gap: 0.25rem;
	flex-wrap: nowrap;
}

.ggi-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	position: relative;
	padding: 0.5rem 1rem;
	border-radius: 0.75rem;
	color: #D3DDF5;
	transition: color 0.5s;
}

.ggi-nav .wp-block-navigation-item__content:hover {
	color: #ffffff;
}

.ggi-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	bottom: 0;
	/* Navbar.jsx's indicator is `absolute bottom-0 left-0 … w-full`, i.e. the whole
	   item including its px-4 padding — not just the label. */
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, #D3DDF5, #96B9E5);
	transform: scaleX(0);
	transform-origin: left;
	opacity: 0;
	transition: transform 0.7s, opacity 0.7s;
}

/* Only top-level items carry the active indicator — `.ggi-nav` is the top-level
   <ul>, so the child selector keeps it off items inside the dropdown, which on
   live get a background tint rather than an underline. */
.ggi-nav .wp-block-navigation-item__content:hover::after,
.ggi-nav>.current-menu-item>.wp-block-navigation-item__content::after {
	transform: scaleX(1);
	opacity: 1;
}

.ggi-nav .wp-block-navigation__submenu-icon {
	color: #D3DDF5;
	transition: transform 0.5s, color 0.5s;
}

.ggi-nav .wp-block-navigation-submenu.is-open>.wp-block-navigation-item__content+.wp-block-navigation__submenu-icon,
.ggi-nav .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
	color: #96B9E5;
}

/* Dropdown panel (desktop) */
.ggi-nav .wp-block-navigation__submenu-container {
	min-width: 14rem !important;
	margin-top: 0.75rem;
	padding: 0.5rem !important;
	background: rgba(16, 37, 58, 0.95) !important;
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	border: 2px solid rgba(211, 221, 245, 0.4) !important;
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	animation: ggi-slide-down 0.2s ease-out both;
}

/* Top accent bar on the dropdown — rounded like the mobile one; core forces
   overflow:visible on the open submenu so the panel's radius can't clip it */
.ggi-nav .wp-block-navigation__submenu-container::before {
	content: "";
	display: block;
	height: 4px;
	margin: -0.5rem -0.5rem 0.5rem;
	border-radius: 0.875rem 0.875rem 0 0;
	background: linear-gradient(to right, #D3DDF5, #96B9E5, #5689D4);
}

.ggi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	color: #D3DDF5;
	transition: all 0.3s;
}

.ggi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #ffffff;
	background: linear-gradient(to right, rgba(211, 221, 245, 0.15), rgba(150, 185, 229, 0.2), rgba(86, 137, 212, 0.15));
}

.ggi-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

/* Mobile menu — dropdown card below the navbar (Navbar.jsx mobile menu).
   ponytail: positioned absolute, not fixed — .ggi-navbar's backdrop-filter makes it
   the containing block anyway, so core's full-screen modal could never fill the
   viewport; anchoring the card to the navbar is both the fix and the original design. */
.ggi-nav.is-responsive {
	position: static;
}

/* anchor the card to .ggi-navbar, not the nav box */
.ggi-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* nav is justified right on desktop; overlay must be left-aligned like the original */
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	position: absolute;
	inset: auto 1rem auto 1rem;
	top: calc(100% + 0.9375rem);
	min-height: 0;
	overflow: visible;
	padding: 0.75rem;
	background: #12273C !important;
	/* core's :not(.has-background) white wins otherwise; solid — nested backdrop-filter renders the backdrop unblurred in Chromium */
	border: 2px solid rgba(211, 221, 245, 0.4);
	border-radius: 1rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	animation: ggi-slide-down 0.2s ease-out both;
}

/* Top accent strip, same as the desktop dropdown */
.ggi-nav .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	display: block;
	height: 4px;
	margin: -0.75rem -0.75rem 0.75rem;
	border-radius: 0.875rem 0.875rem 0 0;
	background: linear-gradient(to right, #D3DDF5, #96B9E5, #5689D4);
}

.ggi-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 0 !important;
	gap: 0.25rem;
	align-items: stretch;
}

.ggi-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch;
}

/* justifyContent:right maps to flex-end in the overlay; original is left-aligned */
.ggi-nav .is-menu-open .wp-block-navigation-item {
	width: 100%;
	justify-content: flex-start;
	align-items: flex-start !important;
}

.ggi-nav .is-menu-open .wp-block-navigation-item__content {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	color: #D3DDF5;
	font-weight: 500;
}

.ggi-nav .is-menu-open .wp-block-navigation-item__content:hover {
	color: #ffffff;
}

.ggi-nav .is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

/* Submenu inside the card: collapsed until toggled (core expands it in the overlay), plain indented list */
.ggi-nav .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="false"]~.wp-block-navigation__submenu-container {
	display: none !important;
}

.ggi-nav .is-menu-open .wp-block-navigation__submenu-container {
	min-width: 0 !important;
	align-items: flex-start;
	margin: 0.25rem 0 0 1rem;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	animation: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ggi-nav .is-menu-open .wp-block-navigation__submenu-container::before {
	content: none;
}

.ggi-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	color: #96B9E5;
}

.ggi-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #D3DDF5;
}

/* Close (X) sits where the hamburger is, like the original toggle */
.ggi-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	/* ponytail: offsets place the X exactly over the hamburger; retune if navbar height changes */
	top: -60px;
	right: 0;
	padding: 0.5rem;
}

.ggi-nav .wp-block-navigation__responsive-container-open,
.ggi-nav .wp-block-navigation__responsive-container-close {
	color: #D3DDF5;
}

.ggi-nav .wp-block-navigation__responsive-container-open svg,
.ggi-nav .wp-block-navigation__responsive-container-close svg {
	width: 20px;
	height: 20px;
}

/* Original switches to the hamburger below lg (1024px); core's default is 600px */
@media (min-width: 600px) and (max-width: 1023px) {
	.ggi-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ggi-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@keyframes ggi-slide-down {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.95);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ---------- Footer (Footer.jsx) ---------- */
.ggi-footer {
	position: relative;
	background: linear-gradient(to bottom right, #10253A, #527796, #10253A);
	color: #ffffff;
}

.ggi-footer::before {
	/* decorative top border */
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(to right, #D3DDF5, #96B9E5, #5689D4);
}

.ggi-footer__inner {
	position: relative;
	z-index: 10;
	max-width: 80rem;
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

/* WordPress's block-gap adds a 24px margin-block-start here (this is the second
   child of <footer>, after .ggi-footer__deco, so the :first-child reset doesn't
   reach it) — same bug as .ggi-navbar__inner, fixed the same way: an
   ancestor-qualified selector, since a bare .ggi-footer__inner{margin-top:0}
   loses to it despite nominally higher specificity. Was 58px of gap above the
   logo row (32px intended padding + this 24px + a 2px border), down to 34px. */
.ggi-footer .ggi-footer__inner {
	margin-block-start: 0;
}

@media (min-width: 1024px) {
	.ggi-footer__inner {
		padding: 2rem 2rem;
	}
}

/* Decorative circles */
.ggi-footer__deco {
	position: absolute;
	inset: 0;
	opacity: 0.1;
	pointer-events: none;
}

.ggi-footer__deco::before {
	content: "";
	position: absolute;
	top: 2rem;
	right: 4rem;
	width: 6rem;
	height: 6rem;
	border: 1px solid rgba(211, 221, 245, 0.2);
	border-radius: 9999px;
}

.ggi-footer__deco::after {
	content: "";
	position: absolute;
	bottom: 3rem;
	left: 4rem;
	width: 4rem;
	height: 4rem;
	border: 1px solid rgba(150, 185, 229, 0.2);
	border-radius: 9999px;
}

/* Logos row */
.ggi-footer__logos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(211, 221, 245, 0.2);
}

@media (min-width: 1024px) {
	.ggi-footer__logos {
		/* GGI · UNU-CPR · BMZ — three equal-width columns */
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}

.ggi-footer__brand {
	display: flex;
	align-items: normal;
	gap: 0.75rem;
}

/* The footer medallions are Footer.jsx's, not Navbar.jsx's: w-14, shadow-lg, no
   ring-2, and on hover the *same* shadow geometry recoloured to lightblue/40 over
   300ms — no scale. The shared .ggi-logo__ring base above is the navbar's
   (shadow-xl + ring-2 + scale on hover), so it is overridden here rather than
   changed globally. Hover is on the whole brand block because live puts `group`
   on the flex wrapper, so the text triggers the halo too. */
.ggi-footer__brand .ggi-logo__ring {
	width: 3.5rem;
	height: 3.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	/* shadow-lg */
	transition: all 0.3s;
	/* duration-300 */
}

.ggi-footer__brand:hover .ggi-logo__ring {
	/* group-hover:shadow-lightblue/40 */
	box-shadow: 0 10px 15px -3px rgba(211, 221, 245, 0.4), 0 4px 6px -4px rgba(211, 221, 245, 0.4);
}

.ggi-footer__brand .ggi-logo__disc img {
	width: 2.75rem;
	height: 2.75rem;
	opacity: 1;
}

.ggi-footer__brand h3 {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: #ffffff;
}

.ggi-footer__brand .ggi-sub {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: #D3DDF5;
}

.ggi-footer__brand .ggi-desc {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(211, 221, 245, 0.8);
}

/* Link columns */
.ggi-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
	.ggi-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ggi-footer__cols {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ggi-footer .ggi-footer__cols>* {
	margin-block-start: 0;
}

/* even column tops despite blockGap */
.ggi-footer__cols h4 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: #ffffff;
}

.ggi-footer__cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ggi-footer__cols li {
	margin: 0 0 0.375rem;
}

.ggi-footer__cols li a {
	display: inline-block;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgba(211, 221, 245, 0.8);
	text-decoration: none;
	transition: color 0.3s, transform 0.3s;
}

.ggi-footer__cols li a:hover {
	color: #ffffff;
	transform: translateX(2px);
}

/* Social buttons */
.ggi-footer .wp-block-social-links .wp-social-link {
	width: 2rem;
	height: 2rem;
	background: rgba(211, 221, 245, 0.1) !important;
	border: 1px solid rgba(211, 221, 245, 0.2);
	border-radius: 9999px;
	transition: all 0.3s;
}

.ggi-footer .wp-block-social-links .wp-social-link:hover {
	background: rgba(211, 221, 245, 0.2) !important;
	border-color: rgba(211, 221, 245, 0.4);
	transform: scale(1.1);
}

.ggi-footer .wp-block-social-links .wp-social-link a,
.ggi-footer .wp-block-social-links .wp-social-link .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

.ggi-footer .wp-block-social-links .wp-social-link svg {
	fill: #D3DDF5 !important;
	color: #D3DDF5 !important;
	width: 1rem;
	height: 1rem;
}

.ggi-footer .wp-block-social-links .wp-social-link:hover svg {
	fill: #ffffff !important;
	color: #ffffff !important;
}

/* "Stay updated" newsletter link. WordPress core has no envelope-with-check
   social service, so the Mailchimp subscribe URL rides the generic `chain`
   service and its glyph is swapped for a Lucide "mail-check" here — same
   currentColor-masking trick used for the archive back-arrow above. Sizing and
   the #D3DDF5 / #fff-on-hover colours match the real social SVGs. */
.ggi-footer .wp-social-link-chain svg {
	display: none;
}

.ggi-footer .wp-social-link-chain a::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background-color: #D3DDF5;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3Cpath d='m16 19 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 13V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h8'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3Cpath d='m16 19 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ggi-footer .wp-social-link-chain:hover a::before {
	background-color: #ffffff;
}

/* Bottom bar */
.ggi-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(211, 221, 245, 0.2);
	font-size: 0.875rem;
	line-height: 1.25rem;
}

@media (min-width: 768px) {
	.ggi-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.ggi-footer__address {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(211, 221, 245, 0.8);
	margin: 0;
}

.ggi-footer__address svg {
	color: #96B9E5;
	flex-shrink: 0;
}

.ggi-footer__copy {
	color: rgba(211, 221, 245, 0.6);
	margin: 0;
}

/* Copyright + address grouped on the bottom bar's left; the credit takes the
   bar's right slot (space-between on the parent does the split). */
.ggi-footer__bottomleft {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

/* Developer credit — text matches the muted footer copy, the link matches the
   footer column links (hover included). */
.ggi-footer__credit {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgba(211, 221, 245, 0.6);
}

.ggi-footer__credit a {
	color: rgba(211, 221, 245, 0.8);
	text-decoration: none;
	transition: color 0.3s;
}

.ggi-footer__credit a:hover {
	color: #ffffff;
}

/* ---------- Logo watermark (site chrome) ----------
   Was a div in the About page's own content (ported from AboutPage.jsx);
   now emitted once from functions.php so every page reads the same (GEN-3/4/5).
   z-index 1, not 0: the div used to sit after the hero in the DOM, which is how
   the circles showed through the navy gradient. Emitted at wp_body_open it comes
   first instead, so it needs the explicit level to keep painting over the hero.
   <main> is deliberately left unpositioned — a stacking context there would trap
   .ggi-modal (fixed, z-index 50) beneath the navbar. */
.ggi-watermark {
	position: fixed;
	top: 50%;
	right: 0;
	width: 80%;
	height: 100vh;
	z-index: 1;
	opacity: 0.2;
	pointer-events: none;
	background: url('/wp-content/themes/ggi/assets/img/logo-background.png') center right / contain no-repeat;
	transform: translate(20%, -50%);
}

/* ---------- Page header hero (PageHeader.jsx) ----------
   Fixed 320px, not the original's 50vh — a deliberate move away from
   PageHeader.jsx's viewport-relative height, so this needs updating in lockstep
   with the min-height set on the Cover block itself in every template below
   (the block writes an inline min-height, which would otherwise outrank this
   rule on any viewport taller than 640px and silently keep the hero at 50vh). */
.ggi-hero {
	height: 320px;
}

.ggi-hero .wp-block-cover__background {
	background: linear-gradient(135deg, rgba(8, 20, 35, 0.98) 0%, rgba(16, 37, 58, 0.95) 30%, rgba(30, 58, 88, 0.92) 70%, rgba(16, 37, 58, 0.98) 100%) !important;
	opacity: 1 !important;
}

.ggi-hero.has-hero-image .wp-block-cover__background {
	background: linear-gradient(135deg, rgba(16, 37, 58, 0.75) 0%, rgba(16, 37, 58, 0.65) 50%, rgba(16, 37, 58, 0.85) 100%) !important;
}

.ggi-glow {
	text-shadow:
		0 4px 20px rgba(0, 0, 0, 0.5),
		0 0 40px rgba(255, 255, 255, 0.1);
}

/* PageHeader.jsx's title is `font-black tracking-tight leading-none`; the block
   editor's heading defaults left it at weight 300 with 1.2 leading. */
.ggi-hero .ggi-glow {
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.025em;
}

.ggi-glow .ggi-glow-accent {
	display: block;
	color: #96B9E5;
	text-shadow:
		0 0 10px rgba(150, 185, 229, 0.4),
		0 0 20px rgba(150, 185, 229, 0.3),
		0 0 30px rgba(150, 185, 229, 0.2),
		0 4px 15px rgba(0, 0, 0, 0.2);
}

.ggi-hero p {
	display: none;
}

/* Rules + dots flanking the title.
   PageHeader.jsx anchors these to the hero, not to the title block: each line sits
   at 25%/75% of the hero's width, is w-24/sm:w-32/lg:w-40 long, and carries a 12px
   dot centred on its *outer* end. The box is the line length plus 12px so that dot
   can straddle the endpoint; the line itself starts 6px in. */
.ggi-hero-rules {
	position: relative;
}

.ggi-hero {
	--ggi-rule: 6rem;
}

/* w-24 */
@media (min-width: 640px) {
	.ggi-hero {
		--ggi-rule: 8rem;
	}
}

/* sm:w-32 */
@media (min-width: 1024px) {
	.ggi-hero {
		--ggi-rule: 10rem;
	}
}

/* lg:w-40 */
.ggi-hero::before,
.ggi-hero::after {
	/* HIDDEN FOR NOW — delete this one declaration to bring the lines back.
	   Everything below is left intact and still matches the live site. */
	display: none;

	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	/* over the cover's background span, under its inner container */
	width: calc(var(--ggi-rule) + 12px);
	height: 12px;
	pointer-events: none;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.ggi-hero::before {
	left: calc(25% - 6px);
	background:
		radial-gradient(circle 6px at 6px 50%, #D3DDF5 98%, transparent) no-repeat,
		linear-gradient(#D3DDF5, #D3DDF5) 6px center / var(--ggi-rule) 2px no-repeat;
}

.ggi-hero::after {
	right: calc(25% - 6px);
	background:
		radial-gradient(circle 6px at calc(100% - 6px) 50%, #D3DDF5 98%, transparent) no-repeat,
		linear-gradient(#D3DDF5, #D3DDF5) 6px center / var(--ggi-rule) 2px no-repeat;
}

/* ---------- CTA "Join Our Research Community" (TeamPage.jsx) ---------- */
.ggi-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 4rem;
	border-radius: 1.5rem;
	background: linear-gradient(to bottom right, #10253A, #1e3a8a, #4682b4);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ggi-cta::before {
	/* skewed sheen */
	content: "";
	position: absolute;
	inset: 0;
	transform: skewX(-12deg);
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
	opacity: 0.1;
}

.ggi-cta::after {
	/* glow orbs */
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 8rem;
	height: 8rem;
	border-radius: 9999px;
	background: rgba(211, 221, 245, 0.2);
	filter: blur(40px);
	opacity: 0.1;
}

.ggi-cta>* {
	position: relative;
	z-index: 10;
}

.ggi-cta h2 {
	margin: 0 0 1.5rem;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #ffffff;
}

.ggi-cta p {
	max-width: 48rem;
	margin: 0 auto 2.5rem;
	font-size: 1.125rem;
	line-height: 1.75;
	font-weight: 300;
	color: #e8f0fe;
}

.ggi-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 2.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	border-radius: 9999px;
	background: linear-gradient(to right, #ffffff, #e8f0fe);
	color: #10253A;
	transition: all 0.3s;
}

.ggi-cta .wp-block-button__link:hover {
	background: linear-gradient(to right, #D3DDF5, #ffffff);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	transform: scale(1.05);
}

/* ---------- News & Events newsletter CTA (NewsEvents.jsx "Stay Updated") ----------
   Distinct from .ggi-cta above — that's the site-wide "Join Our Research Community"
   box (GEN-5, uniform by design). This one is News & Events-only, so it lives inline
   in the archive template (wp:html) rather than as a reusable pattern. */
@keyframes ggi-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

/* Outer wrapper: spacing/centring only (px-6 py-20 mx-auto max-w-7xl lg:px-8) —
   no visual styling here, so the padding creates a gutter around the card rather
   than empty space inside its rounded/shadowed edge. */
.ggi-newsletter-cta {
	max-width: 80rem;
	margin: 5rem auto;
	padding: 0 1.5rem;
}

@media (min-width: 1024px) {
	.ggi-newsletter-cta {
		padding: 0 2rem;
	}
}

/* The card: the actual visible box (rounded-3xl bg-gradient-to-br shadow-2xl
   overflow-hidden) — its own element so __decor's `inset: 0` fills the card, not
   the wrapper's padding box. */
.ggi-newsletter-cta__card {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background: linear-gradient(to bottom right, #10253A, #5689D4);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ggi-newsletter-cta__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.ggi-newsletter-cta__ring {
	position: absolute;
	border-radius: 9999px;
	border-width: 2px;
	border-style: solid;
}

.ggi-newsletter-cta__ring--1 {
	width: 8rem;
	height: 8rem;
	top: 2.5rem;
	right: 2.5rem;
	border-color: rgba(255, 255, 255, 0.1);
}

.ggi-newsletter-cta__ring--2 {
	width: 6rem;
	height: 6rem;
	bottom: 2.5rem;
	left: 2.5rem;
	border-color: rgba(211, 221, 245, 0.3);
}

.ggi-newsletter-cta__dot {
	position: absolute;
	border-radius: 9999px;
	animation: ggi-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ggi-newsletter-cta__dot--1 {
	width: 0.5rem;
	height: 0.5rem;
	top: 50%;
	left: 33.333%;
	background: #D3DDF5;
}

.ggi-newsletter-cta__dot--2 {
	width: 0.75rem;
	height: 0.75rem;
	top: 25%;
	right: 25%;
	background: #96B9E5;
	animation-delay: 1s;
}

.ggi-newsletter-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 3rem;
	padding: 3rem;
}

@media (min-width: 1024px) {
	.ggi-newsletter-cta__inner {
		grid-template-columns: 1fr 1fr;
	}
}

.ggi-newsletter-cta__inner h2 {
	margin: 0 0 1.5rem;
	font-size: 2.25rem;
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
}

@media (min-width: 1024px) {
	.ggi-newsletter-cta__inner h2 {
		font-size: 3rem;
	}
}

.ggi-newsletter-cta__inner h2 span {
	display: block;
	color: #D3DDF5;
}

.ggi-newsletter-cta__inner p {
	margin: 0 0 2rem;
	font-size: 1.25rem;
	line-height: 1.625;
	color: rgba(211, 221, 245, 0.8);
}

.ggi-newsletter-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	font-weight: 700;
	color: #10253A;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0.75rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	text-decoration: none;
	transition: all 0.3s;
}

.ggi-newsletter-cta__btn:hover {
	background: rgba(211, 221, 245, 0.1);
	color: #ffffff;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	transform: translateY(-0.25rem);
}

/* ---------- Network newsletter CTA (NetworkPage.jsx "Join Our Global Research
   Network") ---------- Its own design, distinct from .ggi-cta (GEN-5's uniform
   box) and .ggi-newsletter-cta above (News & Events): gradient-clipped heading
   text, blurred pulsing orbs, an animated SVG connection graphic, and a button
   with a hover gradient sweep. Font sizes/line-heights below are measured off
   the live computed styles, not derived from Tailwind class names — several of
   the source's utilities (a nonstandard "text-l", text-5xl's own bundled
   line-height overriding the explicit "leading-tight") don't translate literally. */
.ggi-network-cta {
	max-width: 80rem;
	margin: 0 auto;
	padding: 5rem 1.5rem;
}

@media (min-width: 1024px) {
	.ggi-network-cta {
		padding: 5rem 2rem;
	}
}

.ggi-network-cta__frame {
	position: relative;
}

/* Sits directly behind the card at the same size/radius/gradient. On live this is
   fully covered by the card painted after it, so it's invisible in practice —
   ported for fidelity rather than dropped as dead weight. */
.ggi-network-cta__glow {
	position: absolute;
	inset: 0;
	border-radius: 1.5rem;
	background: linear-gradient(to bottom right, #10253A, #5689D4);
}

.ggi-network-cta__card {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background: linear-gradient(to bottom right, #10253A, #5689D4);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ggi-network-cta__decor {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.ggi-network-cta__orb {
	position: absolute;
	border-radius: 9999px;
	filter: blur(64px);
	animation: ggi-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ggi-network-cta__orb--1 {
	top: 5rem;
	right: 5rem;
	width: 16rem;
	height: 16rem;
	background: rgba(211, 221, 245, 0.2);
}

.ggi-network-cta__orb--2 {
	bottom: 2.5rem;
	left: 2.5rem;
	width: 24rem;
	height: 24rem;
	background: rgba(255, 255, 255, 0.1);
	animation-delay: 700ms;
}

/* No viewBox/width/height on the <svg> itself — matches the source exactly: with
   none given, the SVG's coordinate system equals its rendered CSS pixel box, so
   the percentage-based line/circle coordinates land correctly. */
.ggi-network-cta__lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.2;
}

.ggi-network-cta__lines line,
.ggi-network-cta__lines circle {
	animation: ggi-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ggi-network-cta__lines .ggi-d300 {
	animation-delay: 300ms;
}

.ggi-network-cta__lines .ggi-d500 {
	animation-delay: 500ms;
}

.ggi-network-cta__lines .ggi-d700 {
	animation-delay: 700ms;
}

.ggi-network-cta__inner {
	position: relative;
	z-index: 1;
	padding: 2rem;
}

@media (min-width: 1024px) {
	.ggi-network-cta__inner {
		padding: 3rem;
	}
}

.ggi-network-cta__body {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

.ggi-network-cta__body h2 {
	margin: 0 0 0.75rem;
	font-size: 1.875rem;
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
}

@media (min-width: 1024px) {
	.ggi-network-cta__body h2 {
		font-size: 3rem;
		line-height: 1;
	}
}

.ggi-network-cta__body h2 span {
	display: block;
	margin-top: 0.5rem;
	background: linear-gradient(to right, #D3DDF5, #ffffff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ggi-network-cta__body p {
	margin: 0 auto 3rem;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 1024px) {
	.ggi-network-cta__body p {
		font-size: 1.25rem;
		line-height: 1.75rem;
	}
}

.ggi-network-cta__btnwrap {
	display: flex;
	justify-content: center;
}

.ggi-network-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	overflow: hidden;
	padding: 1.25rem 2.5rem;
	border-radius: 1rem;
	font-size: 1.125rem;
	line-height: 1.5556;
	font-weight: 700;
	color: #10253A;
	background: #ffffff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	transition: transform 0.5s;
}

.ggi-network-cta__btn:hover {
	transform: translateY(-0.5rem);
}

.ggi-network-cta__btn-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #D3DDF5, #96B9E5);
	opacity: 0;
	transition: opacity 0.5s;
}

.ggi-network-cta__btn:hover .ggi-network-cta__btn-overlay {
	opacity: 0.9;
}

.ggi-network-cta__btn-label,
.ggi-network-cta__btn svg {
	position: relative;
	z-index: 1;
	transition: color 0.5s, transform 0.5s;
}

.ggi-network-cta__btn:hover .ggi-network-cta__btn-label,
.ggi-network-cta__btn:hover svg {
	color: #ffffff;
}

.ggi-network-cta__btn:hover svg {
	transform: translateX(0.25rem);
}

/* Always present (white blur over a white button, so invisible at rest) — only
   the pulse animation is gated on hover, matching group-hover:animate-pulse. */
.ggi-network-cta__shine {
	position: absolute;
	inset: -0.5rem 0 0 0;
	transform: rotate(12deg);
	background: rgba(255, 255, 255, 0.3);
	filter: blur(24px);
	pointer-events: none;
}

.ggi-network-cta__btn:hover .ggi-network-cta__shine {
	animation: ggi-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ---------- Team "Join Our Research Community" CTA (TeamPage.jsx) ----------
   Team's OWN bespoke card, not the sitewide-uniform .ggi-cta / GEN-5 pattern
   (ggi/cta-join-research-community, now unreferenced — see the archive template
   for why). Same copy and Mailchimp link as that pattern, different visual
   treatment: a skewed sheen + two blurred circles at group opacity 0.1, and a
   pill button with a gradient/scale hover. Values measured off the live
   computed styles (letter-spacing, line-heights) rather than guessed. */
/* No max-width/margin here — the archive template already wraps this in its own
   layout:constrained group (inherited from the pattern it replaces), so adding
   another would just duplicate that centring. box-sizing: border-box matters
   here specifically because this element both carries the padding AND receives
   that wrapper's inherited max-width — on the default content-box, padding
   would add on top of the max-width instead of being included in it (1280px +
   128px padding = 1408px, wider than the page's own content column). */
.ggi-team-cta {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 4rem;
	border-radius: 1.5rem;
	text-align: left;
	/* Matches .ggi-network-cta__card's gradient by request — lighter than
	   TeamPage.jsx's own 3-stop navy/deepblue/steelblue, for visual consistency
	   with the Network card rather than 1:1 live parity. */
	background: linear-gradient(to bottom right, #10253A, #5689D4);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ggi-team-cta__decor {
	position: absolute;
	inset: 0;
	opacity: 0.1;
	pointer-events: none;
}

.ggi-team-cta__sheen {
	position: absolute;
	inset: 0;
	transform: skewX(-12deg);
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.ggi-team-cta__orb {
	position: absolute;
	border-radius: 9999px;
}

.ggi-team-cta__orb--1 {
	bottom: 0;
	right: 0;
	width: 8rem;
	height: 8rem;
	background: rgba(211, 221, 245, 0.2);
	filter: blur(40px);
}

.ggi-team-cta__orb--2 {
	top: 1rem;
	left: 1rem;
	width: 6rem;
	height: 6rem;
	background: rgba(135, 206, 235, 0.2);
	filter: blur(24px);
}

.ggi-team-cta__inner {
	position: relative;
	z-index: 1;
}

.ggi-team-cta__inner h2 {
	margin: 0 0 1.5rem;
	/* font-size: 2.25rem; */
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #ffffff;
}

.ggi-team-cta__inner p {
	max-width: 48rem;
	margin: 0 0 2.5rem;
	/* was `0 auto` — that centered the paragraph's own box
	   regardless of text-align, leaving it starting mid-card once the card went
	   left-aligned. This anchors it flush with the heading instead. */
	font-size: 1.125rem;
	line-height: 1.625;
	font-weight: 300;
	color: #e8f0fe;
}

.ggi-team-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 2.5rem;
	border-radius: 1rem;
	/* matches .ggi-network-cta__btn, not TeamPage.jsx's rounded-full pill, by request */
	font-size: 1.125rem;
	line-height: 1.5556;
	font-weight: 700;
	color: #10253A;
	background: linear-gradient(to right, #ffffff, #e8f0fe);
	text-decoration: none;
	transition: all 0.3s;
}

.ggi-team-cta__btn:hover {
	background: linear-gradient(to right, #D3DDF5, #ffffff);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	transform: scale(1.05);
}

/* ---------- Section heading rule (HomePage.jsx "Latest Updates") ---------- */
.ggi-section-kicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.ggi-section-kicker span {
	color: #5689D4;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ggi-section-kicker::before,
.ggi-section-kicker::after {
	content: "";
	width: 2rem;
	height: 2px;
}

.ggi-section-kicker::before {
	background: linear-gradient(to right, #5689D4, #D3DDF5);
}

.ggi-section-kicker::after {
	background: linear-gradient(to right, #D3DDF5, #5689D4);
}

/* ---------- Cards ---------- */
.is-style-ggi-card,
.ggi-card {
	background: #f9fafb;
	border: 1px solid #f3f4f6;
	border-radius: 0.5rem;
	padding: 1.5rem;
	transition: all 0.3s;
}

.is-style-ggi-card:hover,
.ggi-card:hover {
	background: #ffffff;
	border-color: rgba(86, 137, 212, 0.3);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Section style variations */
.is-style-ggi-navy-section {
	background: linear-gradient(to bottom right, #10253A, #1e3a8a, #4682b4);
	color: #ffffff;
}

.is-style-ggi-light-section {
	background: #e8f0fe;
}

/* ---------- Misc ---------- */
/* Fixed navbar: heroes sit underneath it, matching the React layout */
body {
	margin-top: 0;
}

/* Sections sit flush like the original — kill the root block gap that lets the
   body gradient show through between full-width sections */
.wp-site-blocks>* {
	margin-block-start: 0;
}

@media (prefers-reduced-motion: reduce) {

	.ggi-logo__ring,
	.ggi-logo__title,
	.ggi-cta .wp-block-button__link,
	.ggi-nav .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ---------- Home sections (HomePage.jsx) ---------- */
.ggi-home-section {
	position: relative;
	z-index: 10;
	background: #ffffff;
	padding: 4rem 1.5rem;
}

/* HomePage.jsx wraps every home section in `max-w-7xl px-6 lg:px-8`; the 1.5rem above
   is the px-6 half. Without the lg step the container runs 16px wide of live below
   1280px, which shows up as the logo rows shrinking slightly less than live's. */
@media (min-width: 1024px) {
	.ggi-home-section {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.ggi-updates-head {
	max-width: 80rem;
	margin: 0 auto 3rem;
}

/* Trial utility (currently on news-item card titles, added in ggi_acard()):
   remove the class from the markup — or this rule — to revert to normal case. */
.ggi-caps {
	text-transform: uppercase;
}

.ggi-two-tone {
	font-weight: 300;
	font-size: 2.25rem;
	line-height: 1.2;
	color: #10253A;
}

.ggi-two-tone strong {
	font-weight: 600;
	color: #5689D4;
}

.ggi-muted {
	color: rgba(16, 37, 58, 0.7);
	max-width: 42rem;
}

.ggi-view-all a {
	color: #5689D4;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: all 0.3s;
}

.ggi-view-all a:hover {
	color: #10253A;
	border-bottom-color: #5689D4;
}

.ggi-updates-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	max-width: 80rem;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.ggi-updates-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ggi-update-card {
	position: relative;
}

.ggi-update-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.ggi-update-card__type {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ggi-update-card__emoji {
	font-size: 1.5rem;
	line-height: 1;
}

.ggi-update-card__kicker {
	font-size: 0.75rem;
	font-weight: 600;
	color: #5689D4;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ggi-update-card__date {
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(16, 37, 58, 0.5);
}

.ggi-update-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	line-height: 1.3;
	font-weight: 600;
}

.ggi-update-card__title a {
	color: #10253A;
	text-decoration: none;
	transition: color 0.3s;
}

.ggi-update-card:hover .ggi-update-card__title a {
	color: #5689D4;
}

.ggi-update-card__desc {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(16, 37, 58, 0.7);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ggi-update-card__more {
	color: #5689D4;
	font-weight: 500;
	font-size: 0.875rem;
}

/* LAND-2: whole card clickable */
.ggi-stretched-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ggi-update-card:focus-within {
	outline: 2px solid #5689D4;
	outline-offset: 2px;
}

/* ---------- Quote section (HomePage.jsx: fixed layer revealed by scroll) ----------
   The visible quote — artwork, overlay and text — is one viewport-fixed layer at a
   negative z-index, exactly as HomePage.jsx does it. .ggi-quote itself stays in flow
   purely as a 100vh scroll spacer, and the opaque .ggi-home-section curtains
   (z-index 10) slide over the layer to reveal and re-cover it. No JS involved. */
.ggi-quote {
	position: relative;
	height: 100vh;
	/* scroll distance only; the visuals are out of flow */
}

/* Three fixed layers, ordered among themselves: artwork → overlay → text.
   All negative, so every in-flow section still paints over them. */
.ggi-quote::before {
	/* blurred artwork background */
	content: "";
	position: fixed;
	inset: -4rem;
	/* bleed so the blur has no hard edges */
	z-index: -3;
	background: url('/wp-content/themes/ggi/assets/img/quote-bg.jpg') center / cover no-repeat;
	filter: blur(64px);
}

.ggi-quote::after {
	/* readability overlay */
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background: linear-gradient(to bottom, rgba(16, 37, 58, 0.4), rgba(16, 37, 58, 0.2), rgba(16, 37, 58, 0.4));
}

/* Child-qualified so it out-specifies WordPress's constrained-layout rule, which
   otherwise caps this wrapper at --wp--style--global--content-size (1280px) and
   stretched the measure to 1232px against the live site's 864px. */
.ggi-quote>.ggi-quote__inner {
	position: fixed;
	inset: 0;
	z-index: -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 64rem;
	/* border-box, so 1024 − 2×padding lands on live's 864px measure */
	margin: 0 auto;
	/* inset:0 + max-width + auto margins = horizontally centred */
	padding: 2rem 3.5rem;
	/* HomePage.jsx: px-6 outer + p-8 inner */
}

@media (min-width: 1024px) {
	.ggi-quote>.ggi-quote__inner {
		padding: 3rem 5rem;
	}

	/* lg:px-8 + lg:p-12 */
}

.ggi-quote__mark {
	font-size: 4rem;
	line-height: 1;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	margin-bottom: 1.5rem;
}

/* Type ramp mirrors `text-2xl lg:text-3xl xl:text-4xl` on HomePage.jsx's <q>. Below
   lg, leading-relaxed (1.625) wins; at each breakpoint the font-size utility's own
   line-height does, because Tailwind emits responsive variants last. Measured live:
   24/39, 30/36, 36/40. */
.ggi-quote__text {
	font-size: 1.5rem;
	line-height: 1.625;
	color: #ffffff;
	text-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
	margin-bottom: 2rem;
}

.ggi-quote__text::before {
	content: "\201C";
}

.ggi-quote__text::after {
	content: "\201D";
}

@media (min-width: 1024px) {
	.ggi-quote__text {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

@media (min-width: 1280px) {
	.ggi-quote__text {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

.ggi-quote__cite {
	font-size: 0.875rem;
	line-height: 1.4286;
	color: rgba(255, 255, 255, 0.9);
}

.ggi-quote__cite strong {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5556;
	color: #ffffff;
}

/* ---------- Logo walls ---------- */
/* Live's Funder/Supporters block sits in a max-w-7xl container (1216px of content),
   not the theme's wide 1392px. The column width matters: it is what the logo rows
   shrink against, so it sets the rendered logo sizes. gap 3rem = HomePage.jsx lg:gap-12. */
/* Selectors are over-qualified on purpose: WordPress's own layout rules —
   `.is-layout-constrained > .alignwide { max-width: <wide-size> }` and the block-gap
   rule — are (0,2,0) and would otherwise win. */
.ggi-home-section .wp-block-columns.ggi-support-cols {
	max-width: 76rem;
	margin-left: auto;
	margin-right: auto;
	gap: 3rem;
	/* lg:gap-12, so each column lands on live's 584px */
}

/* Live is `grid-cols-1 lg:grid-cols-2`, i.e. it goes single-column below 1024px;
   WordPress stacks columns only below 782px. Without this, 782–1023px keeps two
   narrow columns and the logo rows over-shrink to roughly 40% of live's size. */
/* !important is required, not lazy: WordPress sets `flex-wrap: nowrap !important`
   on .wp-block-columns above 782px, which a normal declaration cannot outrank. */
@media (max-width: 1023px) {
	.ggi-home-section .wp-block-columns.ggi-support-cols {
		flex-wrap: wrap !important;
		gap: 2rem;
	}

	/* gap-8 */
	.ggi-home-section .wp-block-columns.ggi-support-cols>.wp-block-column {
		flex-basis: 100% !important;
	}
}

.ggi-logo-wall {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* space-y-6 */
/* Three fixed rows (4 / 3 / 2), mirroring HomePage.jsx — documented here rather
   than as a comment between the row blocks in front-page.html, which breaks
   Gutenberg's block-content validation ("Block contains unexpected or invalid
   content" in the editor) even though it renders fine on the front end. Each
   row is nowrap so crowded rows flex-shrink their logos to fit, which is what
   sets the rendered logo sizes on the live site.
   margin-block reset: WordPress's block-gap margin would stack on top of the flex
   gap above and push the rows to a 128px pitch instead of live's 104px. */
.ggi-logo-wall>.ggi-logo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	min-height: 80px;
	margin-block: 0;
}

@media (min-width: 1024px) {
	.ggi-logo-wall>.ggi-logo-row {
		gap: 2rem;
	}
}

/* gap-6 lg:gap-8 */
/* min-width:0 lets a crowded row compress its logos instead of overflowing; the
   images then letterbox inside the shrunken box via object-fit, exactly as live does. */
.ggi-logo-row>.ggi-logo-img {
	min-width: 0;
}

.ggi-logo-img {
	margin: 0;
}

.ggi-logo-img img {
	height: 80px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.ggi-logo-img--sm img {
	height: 70px;
}

/* ---------- Hero React mount ---------- */
.ggi-hero-mount {
	min-height: 85vh;
	background: linear-gradient(135deg, rgba(8, 20, 35, 0.98) 0%, rgba(16, 37, 58, 0.95) 30%, rgba(30, 58, 88, 0.92) 70%, rgba(16, 37, 58, 0.98) 100%);
}

.ggi-hero-fallback {
	min-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
}

.ggi-hero-fallback h1 {
	color: #ffffff;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 900;
	margin: 0 0 1rem;
}

.ggi-hero-fallback p {
	color: #D3DDF5;
	font-size: 1.125rem;
	margin: 0;
}

.ggi-hero-mount:has(> :not(.ggi-hero-fallback)) .ggi-hero-fallback {
	display: none;
}

.ggi-viz-page {
	min-height: 60vh;
	padding-top: 4rem;
}

/* ---------- Team page (TeamPage.jsx) ---------- */
.ggi-team {
	max-width: 80rem;
	margin: 0 auto;
	padding: 4rem 1.5rem 0;
}

.ggi-team-tabs {
	position: sticky;
	top: 5rem;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.25rem;
	margin-bottom: 2.5rem;
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(150, 185, 229, 0.2);
	border-radius: 9999px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
	.ggi-team-tabs {
		flex-direction: row;
	}
}

.ggi-team-tab {
	flex: 1;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #10253A;
	cursor: pointer;
	transition: all 0.3s;
}

.ggi-team-tab:hover {
	background: rgba(211, 221, 245, 0.2);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ggi-team-tab.is-active {
	background: linear-gradient(to right, #5689D4, #10253A);
	color: #ffffff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transform: scale(1.02);
}

.ggi-team-panel {
	display: none;
	animation: ggi-fade-in 0.3s ease-out both;
}

.ggi-team-panel.is-active {
	display: block;
}

.ggi-team-panel__title {
	text-align: center;
	font-size: 1.875rem;
	font-weight: 700;
	color: #10253A;
	margin: 0 0 2.5rem;
}

.ggi-team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	margin-bottom: 6rem;
}

@media (min-width: 1024px) {
	.ggi-team-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@keyframes ggi-fade-in {
	from {
		opacity: 0;
		transform: scale(0.98);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

.ggi-member {
	cursor: pointer;
	/* whole card toggles the bio, not just the Read more button */
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(70, 130, 180, 0.2);
	border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: all 0.5s;
}

.ggi-member:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ggi-member__bar {
	height: 0.5rem;
	background: linear-gradient(to right, #1e3a8a, #5689D4, #4682b4);
	transition: all 0.5s;
}

.ggi-member:hover .ggi-member__bar {
	background: linear-gradient(to right, #10253A, #527796, #96B9E5);
}

.ggi-member__body {
	padding: 2rem;
}

.ggi-member__head {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.ggi-member__avatar {
	position: relative;
	flex-shrink: 0;
	width: 5rem;
	height: 5rem;
}

.ggi-member__avatar img,
.ggi-member__initials {
	width: 5rem;
	height: 5rem;
	border-radius: 9999px;
	object-fit: cover;
	border: 3px solid #ffffff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ggi-member__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom right, #1e3a8a, #527796);
	color: #ffffff;
	font-weight: 700;
	font-size: 1.125rem;
}

.ggi-member__name {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: #10253A;
	transition: color 0.3s;
}

.ggi-member:hover .ggi-member__name {
	color: #1e3a8a;
}

.ggi-member__role {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: #4682b4;
}

.ggi-member__ext {
	text-decoration: none;
	color: #4682b4;
}

.ggi-member__ext:hover {
	color: #1e3a8a;
}

.ggi-member__inst {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(82, 119, 150, 0.8);
}

.ggi-member__label {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #10253A;
	border-bottom: 1px solid rgba(211, 221, 245, 0.3);
}

.ggi-member__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.ggi-chip {
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background: rgba(211, 221, 245, 0.3);
	border: 1px solid rgba(150, 185, 229, 0.3);
	font-size: 0.75rem;
	font-weight: 600;
	color: #10253A;
}

.ggi-member__bio {
	color: rgba(16, 37, 58, 0.8);
	font-size: 0.9375rem;
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ggi-member.is-expanded .ggi-member__bio {
	display: block;
	-webkit-line-clamp: unset;
}

.ggi-member__toggle {
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: #5689D4;
	cursor: pointer;
}

.ggi-member__toggle:hover {
	color: #10253A;
}

/* ---------- About page (AboutPage.jsx) ---------- */
.ggi-about-intro {
	max-width: 48rem;
	margin: 0 auto;
	padding: 4rem 1.5rem 0;
}

.ggi-about-intro p {
	font-size: 1.125rem;
	line-height: 1.7;
	color: #1e3a8a;
	text-align: justify;
	margin: 0 0 1.5rem;
}

.ggi-objectives {
	background: linear-gradient(to bottom right, rgba(150, 185, 229, 0.3), #D3DDF5, rgba(150, 185, 229, 0.3));
	padding: 2.5rem 1.5rem;
	margin-top: 2.5rem;
}

.ggi-objectives__title {
	text-align: center;
	font-size: 3rem;
	font-weight: 700;
	color: #10253A;
	margin: 0 0 4rem;
}

.ggi-objectives__title strong {
	color: #1e3a8a;
}

.ggi-objectives__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: 80rem;
	margin: 0 auto;
}

@media (min-width: 768px) {
	.ggi-objectives__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.ggi-objectives__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ggi-objective {
	border-radius: 1rem;
	padding: 1.5rem;
	transition: all 0.5s;
}

.ggi-objective:hover {
	transform: translateY(-0.5rem) scale(1.05);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ggi-objective__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ggi-objective__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1e3a8a, #10253A);
	color: #ffffff;
	font-size: 1.375rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: transform 0.5s;
}

.ggi-objective:hover .ggi-objective__icon {
	transform: rotate(12deg);
}

.ggi-objective__num {
	font-size: 1.875rem;
	font-weight: 700;
	color: #10253A;
	opacity: 0.7;
}

.ggi-objective h3 {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: #10253A;
	line-height: 1.3;
	transition: color 0.3s;
}

.ggi-objective:hover h3 {
	color: #1e3a8a;
}

.ggi-objective p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: #6b93d6;
}

.ggi-about-block {
	max-width: 80rem;
	margin: 0 auto;
	padding: 5rem 1.5rem 0;
	position: relative;
	z-index: 1;
}

.ggi-about-block h2 {
	font-size: 2.25rem;
	font-weight: 700;
	color: #5689D4;
	line-height: 1.2;
	margin: 0 0 2rem;
}

.ggi-about-block h2 strong {
	display: block;
	color: #10253A;
}

.ggi-callout {
	border-left: 4px solid #5689D4;
	border-radius: 0 0.75rem 0.75rem 0;
	padding: 1.5rem;
}

.ggi-callout p {
	font-size: 1.125rem;
	line-height: 1.7;
	color: #10253A;
	margin: 0 0 1rem;
}

.ggi-callout strong {
	color: #5689D4;
}

.ggi-video-cta {
	text-align: center;
	padding: 2rem 0;
}

/* Two radiating rings, ported from AboutPage.jsx's pair of `animate-ping` divs.
   Tailwind's ping is `1s cubic-bezier(0,0,.2,1) infinite` with 75%→scale(2)/opacity 0.
   They live on this wrapper rather than on the button so the button's :hover
   scale(1.1) does not drag them with it — on live they are siblings and stay put. */
@keyframes ggi-ping {

	75%,
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

.ggi-video-cta__pings {
	position: relative;
	display: inline-flex;
}

.ggi-video-cta__pings::before,
.ggi-video-cta__pings::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	border-radius: 9999px;
	pointer-events: none;
	animation: ggi-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ggi-video-cta__pings::before {
	inset: 0;
	border: 2px solid rgba(211, 221, 245, 0.3);
}

/* inset-0, lightblue/30 */
.ggi-video-cta__pings::after {
	inset: 8px;
	border: 2px solid rgba(150, 185, 229, 0.3);
	animation-delay: 1s;
}

/* inset-2, mediumblue/30 */
@media (prefers-reduced-motion: reduce) {

	.ggi-video-cta__pings::before,
	.ggi-video-cta__pings::after {
		animation: none;
	}
}

.ggi-video-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16rem;
	height: 16rem;
	border-radius: 9999px;
	border: 2px solid rgba(211, 221, 245, 0.3);
	background: transparent;
	cursor: pointer;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	transition: transform 0.5s;
}

.ggi-video-cta__btn:hover {
	transform: scale(1.1);
}

.ggi-video-cta__disc {
	width: 12rem;
	height: 12rem;
	border-radius: 9999px;
	background: #10253A;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	color: #D3DDF5;
	font-size: 3rem;
}

.ggi-video-cta p {
	margin-top: 2rem;
	font-weight: 700;
	font-size: 1.125rem;
	color: #10253A;
}

.ggi-modal {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
	align-items: center;
	justify-content: center;
}

.ggi-modal.is-open {
	display: flex;
}

.ggi-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 37, 58, 0.9);
}

.ggi-modal__content {
	position: relative;
	width: min(90vw, 60rem);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 1rem;
	overflow: hidden;
}

.ggi-modal__content iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.ggi-modal__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	border: 0;
	background: none;
	color: #ffffff;
	font-size: 2rem;
	cursor: pointer;
	line-height: 1;
}

/* ---------- Archives (NewsEvents.jsx / PublicationsPage.jsx / NetworkPage.jsx) ---------- */
.ggi-archive {
	max-width: 80rem;
	margin: 0 auto;
}

.ggi-filter-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	margin-bottom: 2rem;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid rgba(150, 185, 229, 0.15);
	border-radius: 0.75rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

@media (min-width: 640px) {
	.ggi-filter-bar {
		flex-direction: row;
		justify-content: space-between;
	}
}

.ggi-filter-bar__search {
	position: relative;
	flex: 1;
	max-width: 24rem;
	width: 100%;
}

.ggi-filter-bar__icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.875rem;
	opacity: 0.6;
}

.ggi-filter-bar__search input {
	width: 100%;
	padding: 0.625rem 0.75rem 0.625rem 2.25rem;
	border: 1px solid rgba(150, 185, 229, 0.3);
	border-radius: 0.5rem;
	background: #ffffff;
	font-size: 1.32rem;
	font-family: inherit;
	color: #10253A;
	transition: all 0.3s;
}

.ggi-filter-bar__search input:focus {
	outline: none;
	box-shadow: 0 0 0 1px #5689D4;
	border-color: transparent;
}

.ggi-filter-bar__pills {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	background: #f9fafb;
	border-radius: 0.5rem;
}

.ggi-filter-bar__pills button {
	padding: 0.5rem 0.75rem;
	border: 0;
	border-radius: 0.375rem;
	background: transparent;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	color: #10253A;
	cursor: pointer;
	transition: all 0.3s;
}

.ggi-filter-bar__pills button:hover {
	background: rgba(211, 221, 245, 0.2);
}

.ggi-filter-bar__pills button.is-active {
	background: #10253A;
	color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ggi-filter-bar__go {
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: 0.5rem;
	background: #10253A;
	color: #fff;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.ggi-featured {
	display: grid;
	grid-template-columns: 1fr;
	margin-bottom: 3rem;
	text-decoration: none;
}

@media (min-width: 1024px) {
	.ggi-featured {
		grid-template-columns: 1fr 1fr;
	}
}

.ggi-featured__media {
	height: 50vh;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ggi-featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.ggi-featured:hover .ggi-featured__media img {
	transform: scale(1.05);
}

.ggi-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2rem 2.5rem;
}

.ggi-featured__meta {
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: rgba(16, 37, 58, 0.6);
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.ggi-featured__body h2 {
	margin: 0;
	font-size: 2.25rem;
	font-weight: 700;
	/* GGI-owner ask: bold to match .ggi-acard__title's weight site-wide */
	line-height: 1.3;
	color: #10253A;
	/* same navy as .ggi-acard__title a */
	transition: color 0.3s;
}

@media (min-width: 1024px) {
	.ggi-featured__body h2 {
		font-size: 3rem;
	}
}

.ggi-featured:hover .ggi-featured__body h2 {
	color: #5689D4;
	/* same hover blue as the grid cards */
}

.ggi-archive-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.ggi-archive-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.ggi-archive-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ggi-acard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	/* equal-height cards */
	background: #ffffff;
	border: 1px solid rgba(150, 185, 229, 0.2);
	border-radius: 1rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transition: all 0.5s;
}

.ggi-acard:hover {
	transform: translateY(-0.5rem);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ggi-acard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	z-index: 1;
	background: linear-gradient(to right, #5689D4, #D3DDF5);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s;
}

.ggi-acard:hover::before {
	transform: scaleX(1);
}

.ggi-acard__media {
	position: relative;
	height: 12rem;
	overflow: hidden;
}

.ggi-acard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}

.ggi-acard:hover .ggi-acard__media img {
	transform: scale(1.1);
}

.ggi-card-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 0.75rem;
	font-weight: 600;
	color: #10253A;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ggi-card-badge__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: #5689D4;
}

/* Imageless cards (publications) show the same type pill inline at the top of
   the body. The overlay surface — near-white fill, white border, backdrop blur —
   is designed to sit on a photo and would vanish on the white card, so the
   inline variant borrows the team-chip tint instead. */
.ggi-card-badge--inline {
	position: static;
	align-self: flex-end;
	/* right-aligned, mirroring the overlay pill's top-right spot */
	margin: 0 0 1rem;
	background: rgba(211, 221, 245, 0.3);
	border-color: rgba(150, 185, 229, 0.3);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.ggi-acard__body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ggi-acard__title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ggi-acard__title a {
	color: #10253A;
	text-decoration: none;
	transition: color 0.3s;
}

.ggi-acard:hover .ggi-acard__title a {
	color: #5689D4;
}

.ggi-acard__desc {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(16, 37, 58, 0.7);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ggi-acard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.75rem;
	color: #96B9E5;
}

.ggi-acard__meta span {
	white-space: nowrap;
}

/* never break inside a date */
.ggi-acard__meta span:last-child {
	white-space: normal;
}

/* long author lists may wrap */
.ggi-acard__desc {
	flex: 1;
}

/* push meta+button down */
.ggi-acard__btn {
	margin-top: auto;
	/* pin to card bottom */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.75rem;
	background: linear-gradient(to right, #5689D4, #10253A);
	color: #ffffff;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
	transition: all 0.3s;
}

.ggi-acard__btn:hover {
	background: linear-gradient(to right, #10253A, #5689D4);
	transform: translateY(-2px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	color: #ffffff;
}

/* News/network cards are whole-card clickable (title carries .ggi-stretched-link,
   z-index 1). The button stays above the overlay so its own hover/press styling
   keeps working — it points at the same permalink, so either hit target is fine. */
.ggi-acard .ggi-acard__btn {
	position: relative;
	z-index: 2;
}

.ggi-acard:focus-within {
	outline: 2px solid #5689D4;
	outline-offset: 2px;
}

.ggi-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 3rem;
}

.ggi-pagination a,
.ggi-pagination span {
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	text-align: center;
	border-radius: 0.5rem;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
	color: #10253A;
	background: #ffffff;
	border: 1px solid rgba(150, 185, 229, 0.3);
	transition: all 0.3s;
}

.ggi-pagination a:hover {
	background: rgba(211, 221, 245, 0.3);
}

.ggi-pagination .is-current {
	background: #10253A;
	color: #ffffff;
	border-color: #10253A;
}

.ggi-archive-empty {
	text-align: center;
	padding: 5rem 0;
}

.ggi-archive-empty h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #10253A;
	margin: 0 0 0.75rem;
}

.ggi-archive-empty p {
	font-size: 1.125rem;
	color: #96B9E5;
	margin: 0;
}

/* ---------- Singles ---------- */
/* No separate hero block on these two singles (unlike .ggi-ne-hero on News &
   Events), so unlike that template there's no bleed-through zone to preserve —
   the whole thing lifts above the fixed watermark. Network Project posts can
   embed images via wp:post-content, same latent covering risk. */
.ggi-single {
	position: relative;
	z-index: 2;
	padding: 8rem 1.5rem 5rem;
}

.ggi-single__back {
	margin: 0 0 1.5rem;
}

.ggi-single__back a {
	color: #5689D4;
	text-decoration: none;
	font-weight: 600;
}

.ggi-single__back a:hover {
	color: #10253A;
}

.ggi-single__meta {
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0 2rem;
	color: #96B9E5;
	font-size: 0.875rem;
}

.ggi-single__meta .taxonomy-ggi_ne_type {
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
}

.ggi-single__meta .taxonomy-ggi_ne_type a {
	color: #5689D4;
	text-decoration: none;
}

.ggi-single__img img {
	border-radius: 1rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.ggi-video-frame {
	aspect-ratio: 16 / 9;
	margin: 2rem 0;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.ggi-video-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* "Embed the player" off (GGI Settings): the whole video rectangle is a link —
   poster + play button — that opens the video on YouTube in a new tab, rather
   than an inline iframe that would demand a bot-check sign-in. Used in the
   ggi/video-embed block and, via media.js, the media lightbox stage. */
.ggi-video-facade {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #10253A center / cover no-repeat;
	cursor: pointer;
}

.ggi-video-facade--stage {
	height: auto;
	aspect-ratio: 16 / 9;
}

.ggi-video-facade::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16, 37, 58, 0.35);
	transition: background 0.2s;
}

.ggi-video-facade:hover::before,
.ggi-video-facade:focus-visible::before {
	background: rgba(16, 37, 58, 0.12);
}

.ggi-video-facade__play {
	position: relative;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s;
}

.ggi-video-facade:hover .ggi-video-facade__play,
.ggi-video-facade:focus-visible .ggi-video-facade__play {
	transform: scale(1.08);
}

.ggi-video-facade__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 1.15rem solid #10253A;
	border-top: 0.8rem solid transparent;
	border-bottom: 0.8rem solid transparent;
}

/* ---------- News/Event single (NewsEventsDetailPage.jsx) ---------- */
/* Geometry cloned from the React page at 1504w: nav-bottom -> back = 31px,
   inner container 68rem (max-w-6xl minus px-8), title max 64rem. */
main.ggi-ne {
	margin-block-start: 0;
}

.ggi-ne-hero {
	position: relative;
	overflow: hidden;
	padding: 96px 2rem 3rem;
	/* 65px fixed nav + 31px gap. Was 118px against an 87px nav figure that
	   predated the navbar block-gap fix (.ggi-navbar__inner, functions.php) —
	   the nav has measured 65px since, so this was carrying 22px of stale
	   whitespace above "Back to News & Events" the whole time. */
	background: linear-gradient(135deg, rgba(8, 20, 35, 0.98) 0%, rgba(16, 37, 58, 0.95) 30%, rgba(30, 58, 88, 0.92) 70%, rgba(16, 37, 58, 0.98) 100%);
	/* same gradient as .ggi-hero */
}

/* The site-wide watermark (.ggi-watermark, functions.php) is position:fixed with
   z-index:1, so it paints over any normal-flow content regardless of DOM order —
   that's the intended bleed-through look on the hero above. Below the hero it
   was covering the featured image and post body instead (e.g. the right edge of
   a photo), since neither had a z-index of their own to compete with a fixed
   element. Every direct child of .ggi-ne except the hero gets lifted above it —
   covers the featured image and body today, and any future sibling. */
.ggi-ne > *:not(.ggi-ne-hero) {
	position: relative;
	z-index: 2;
}

/* decorative circles */
.ggi-ne-hero::before,
.ggi-ne-hero::after {
	content: "";
	position: absolute;
	border-radius: 9999px;
	pointer-events: none;
	opacity: 0.5;
	animation: ggi-ne-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.ggi-ne-hero::before {
	top: 4rem;
	right: 4rem;
	width: 6rem;
	height: 6rem;
	border: 1px solid rgba(211, 221, 245, 0.2);
}

.ggi-ne-hero::after {
	bottom: 3rem;
	left: 4rem;
	width: 5rem;
	height: 5rem;
	border: 1px solid rgba(150, 185, 229, 0.3);
	animation-delay: 1s;
}

@keyframes ggi-ne-pulse {

	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 0.25;
	}
}

/* dots + hairlines (one layer per feature) */
.ggi-ne .ggi-ne-hero__decor {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		radial-gradient(circle, #D3DDF5 50%, transparent 55%),
		radial-gradient(circle, #96B9E5 50%, transparent 55%),
		linear-gradient(rgba(211, 221, 245, 0.3), rgba(211, 221, 245, 0.3)),
		linear-gradient(rgba(211, 221, 245, 0.3), rgba(211, 221, 245, 0.3));
	background-size: 8px 8px, 6px 6px, 128px 1px, 128px 1px;
	background-position: 25% 50%, 67% 33%, 25% 50%, 75% 50%;
	background-repeat: no-repeat;
}

.ggi-ne-hero>* {
	position: relative;
	z-index: 10;
}

.ggi-ne .ggi-ne-hero__inner {
	max-width: 68rem;
	margin: 0 auto;
}

.ggi-ne .ggi-ne-hero__back {
	margin: 0 0 2rem;
}

.ggi-ne-hero__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #D3DDF5;
	font-weight: 500;
	line-height: 1.5rem;
	text-decoration: none;
	transition: all 0.3s;
}

.ggi-ne-hero__back a::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s;
}

.ggi-ne-hero__back a:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.2);
}

.ggi-ne-hero__back a:hover::before {
	transform: translateX(-0.25rem);
}

/* Type badge — post-terms renders links; pill + dot */
.ggi-ne-hero__type.taxonomy-ggi_ne_type {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0.5rem 1rem;
	border-radius: 0.75rem;
	background: rgba(86, 137, 212, 0.2);
	border: 1px solid rgba(211, 221, 245, 0.3);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #D3DDF5;
}

.ggi-ne-hero__type.taxonomy-ggi_ne_type::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: #D3DDF5;
}

/* Events term gets the mediumblue variant (news keeps blue) */
.ggi-ne-hero__type.taxonomy-ggi_ne_type:has(a[href$="/events/"]) {
	background: rgba(150, 185, 229, 0.2);
	border-color: rgba(150, 185, 229, 0.3);
}

.ggi-ne-hero__type.taxonomy-ggi_ne_type:has(a[href$="/events/"])::before {
	background: #96B9E5;
}

.ggi-ne-hero__type.taxonomy-ggi_ne_type a {
	color: inherit;
	text-decoration: none;
}

.ggi-ne .ggi-ne-hero__title {
	max-width: 64rem;
	margin: 0 0 2rem;
	/* Same size as the other pages' heading (.ggi-glow's has-hero-font-size) —
	   was a hand-rolled clamp() capping at 3.75rem/60px, smaller than the
	   theme's own hero size (caps at 4.5rem/72px, e.g. on /about/). */
	font-size: var(--wp--preset--font-size--hero);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.025em;
	/* matches .ggi-hero .ggi-glow; this rule lacked it */
	color: #ffffff;
}

.ggi-ne .ggi-ne-hero__meta {
	margin: 0;
	gap: 1.5rem;
	color: rgba(211, 221, 245, 0.9);
}

.ggi-ne-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 1rem;
	line-height: 1.5rem;
}

.ggi-ne-pill::before {
	content: "";
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	background: center / contain no-repeat;
}

.ggi-ne-pill--date::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3DDF5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Was the person icon (Author); same map-pin path as the footer address line,
   redrawn in the pill icon's own stroke style (weight/colour/viewBox) so it
   sits flush with the calendar icon beside it — same technique, same size. */
.ggi-ne-pill--location::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D3DDF5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* No location → the bound paragraph renders with no children at all, so
   :empty hides the whole pill (pin icon included) instead of an icon
   floating beside a blank bubble. Whitespace-only values can't defeat this:
   the meta's sanitize_textarea_field trims them to ''. */
.ggi-ne-pill--location:empty {
	display: none;
}

/* Featured image under the hero. Deliberately narrower than .ggi-ne-body's
   76rem text column — capped at ~40rem of image so it reads as a framed figure
   rather than a full-width banner. Centred; 2rem inline padding keeps a gutter
   once the viewport drops below the cap, 1rem block padding is the inset.
   NEWS-* : site owner asked for the thumbnail here, at a smaller proportion.
   The block only renders a <figure> when a thumbnail exists — no empty state. */
/* Narrower than the content column, not full-bleed. Documented here rather than
   inline in the template next to the block: a bare (non-"wp:") HTML comment
   sitting between a Group block's child blocks breaks Gutenberg's block-content
   validation — "Block contains unexpected or invalid content" in the editor,
   even though it rendered fine on the front end. The bare
   `<!-- wp:post-featured-image -->` block itself renders nothing when the post
   has no thumbnail, so there's no empty strip to hide either way. */
.ggi-ne .ggi-ne-featured {
	box-sizing: border-box;
	max-width: 44rem;
	margin: 0 auto;
	padding: 1rem 2rem;
}

.ggi-ne .ggi-ne-featured img {
	display: block;
	width: 100%;
	height: auto;
}

/* Article body — typography ported from .article-content.
   NEWS-* : the quote card that used to sit between the hero and the body was
   removed at the site owner's request; the 3rem top padding here stands in for
   the separation its margin provided. */
.ggi-ne .ggi-ne-body {
	margin: 0;
	padding: 3rem 2rem 8rem;
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(16, 37, 58, 0.9);
}

@media (min-width: 640px) {
	.ggi-ne .ggi-ne-body {
		font-size: 1.125rem;
	}
}

/* Back-to-top (appears after 300px scroll; JS in the single template) */
.ggi-ne-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 9999px;
	background: linear-gradient(to right, #5689D4, #96B9E5);
	color: #ffffff;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s;
}

.ggi-ne-top:hover {
	background: linear-gradient(to right, #10253A, #5689D4);
}

.ggi-ne-top[hidden] {
	display: none;
}

.ggi-ne-body .wp-block-post-content h1 {
	font-size: 2rem;
	font-weight: 700;
	color: #10253A;
	margin: 2rem 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid rgba(150, 185, 229, 0.3);
}

.ggi-ne-body .wp-block-post-content h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #5689D4;
	margin: 2rem 0 1rem;
}

.ggi-ne-body .wp-block-post-content h3 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #527796;
	margin: 1.5rem 0 0.75rem;
}

@media (min-width: 640px) {
	.ggi-ne-body .wp-block-post-content h1 {
		font-size: 2.5rem;
	}

	.ggi-ne-body .wp-block-post-content h2 {
		font-size: 2rem;
	}

	.ggi-ne-body .wp-block-post-content h3 {
		font-size: 1.75rem;
	}
}

.ggi-ne-body .wp-block-post-content p {
	margin: 0 0 1.5rem;
	text-align: justify;
}

.ggi-ne-body .wp-block-post-content ul {
	margin: 1.5rem 0;
	padding-left: 1.5rem;
	list-style: none;
}

.ggi-ne-body .wp-block-post-content li {
	position: relative;
	margin-bottom: 0.5rem;
	line-height: 1.6;
}

.ggi-ne-body .wp-block-post-content ul li::before {
	content: "\2022";
	position: absolute;
	left: -1rem;
	color: #5689D4;
	font-weight: 700;
}

.ggi-ne-body .wp-block-post-content strong {
	color: #10253A;
	font-weight: 600;
}

.ggi-ne-body .wp-block-post-content a {
	color: #5689D4;
	text-decoration: none;
	border-bottom: 1px solid rgba(86, 137, 212, 0.3);
	transition: all 0.3s;
}

.ggi-ne-body .wp-block-post-content a:hover {
	color: #10253A;
	border-bottom-color: rgba(16, 37, 58, 0.6);
}

.ggi-ne-body .wp-block-post-content blockquote {
	margin: 2rem 0;
	padding: 1.5rem;
	border-left: 4px solid #5689D4;
	border-radius: 0 8px 8px 0;
	background: rgba(150, 185, 229, 0.1);
	font-style: italic;
}

/* ---------- FAQ (FAQPage.jsx) ---------- */
.ggi-faq-wrap .ggi-team-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	padding: 0.5rem 1rem;
}

.ggi-faq-wrap .ggi-team-tab small {
	font-size: 0.875rem;
	font-weight: 400;
	color: #96B9E5;
}

.ggi-faq-wrap .ggi-team-tab.is-active small {
	color: #D3DDF5;
}

.ggi-faq-list {
	max-width: 56rem;
	margin: 0 auto 5rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ggi-faq {
	background: #ffffff;
	border: 1px solid rgba(150, 185, 229, 0.1);
	border-radius: 1rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: all 0.3s;
}

.ggi-faq:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
	border-color: rgba(86, 137, 212, 0.3);
}

.ggi-faq summary {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 2rem;
	cursor: pointer;
	list-style: none;
	transition: background 0.3s;
}

.ggi-faq summary::-webkit-details-marker {
	display: none;
}

.ggi-faq summary:hover {
	background: linear-gradient(to right, rgba(211, 221, 245, 0.05), rgba(150, 185, 229, 0.05));
}

.ggi-faq__chev {
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom right, #5689D4, #10253A);
	color: #ffffff;
	font-size: 1.25rem;
	line-height: 1;
	transition: transform 0.3s;
}

.ggi-faq[open] .ggi-faq__chev {
	transform: rotate(180deg) scale(1.1);
}

.ggi-faq summary h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: #10253A;
	line-height: 1.3;
}

.ggi-faq__answer {
	margin: 0 2rem 2rem 5.75rem;
	padding-left: 1.5rem;
	border-left: 4px solid rgba(86, 137, 212, 0.3);
	color: rgba(16, 37, 58, 0.8);
	line-height: 1.7;
}

.ggi-faq__answer a {
	color: #5689D4;
}

.ggi-faq__examples-label {
	font-weight: 600;
	color: #10253A;
}

.ggi-faq__examples ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.ggi-faq__examples li {
	font-size: 0.875rem;
	color: rgba(16, 37, 58, 0.7);
	margin-bottom: 0.5rem;
}

/* ---------- Contact form (ContactPage.jsx) ---------- */
.ggi-contact-card {
	max-width: 51.5rem !important;
	/* 824px */
	margin: 2.5rem auto 3rem;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid #e5e7eb;
	border-radius: 1rem;
	padding: 2rem;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.ggi-contact-card h2 {
	margin: 0 0 2rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: #1e3a8a;
}

.ggi-contact-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.ggi-contact-row {
		grid-template-columns: 1fr 1fr;
	}
}

.ggi-contact-card form p {
	margin: 0 0 1.5rem;
}

.ggi-contact-card label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #374151;
}

.ggi-contact-card input,
.ggi-contact-card select,
.ggi-contact-card textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid #d1d5db;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.5);
	font-family: inherit;
	font-size: 1rem;
	color: #10253A;
	transition: all 0.2s;
}

.ggi-contact-card input:focus,
.ggi-contact-card select:focus,
.ggi-contact-card textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px #4682b4;
	border-color: transparent;
}

.ggi-contact-submit {
	border: 0;
	width: 100%;
	cursor: pointer;
	font-size: 1rem;
	font-family: inherit;
}

.ggi-contact-error {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #b91c1c;
}

.ggi-contact-success {
	text-align: center;
}

.ggi-contact-success h2 {
	color: #15803d;
}

/* ---------- A11y (S6-4) ---------- */
:focus-visible {
	outline: 2px solid #5689D4;
	outline-offset: 2px;
}

.ggi-navbar :focus-visible,
.ggi-footer :focus-visible,
.ggi-hero :focus-visible {
	outline-color: #D3DDF5;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: #10253A;
	color: #fff;
}

.skip-link:focus {
	left: 0;
}

/* A11y: AA contrast for small text (brand blue 3.5:1 fails at small sizes;
   headings/buttons keep #5689D4 — only fine print darkens). */
.ggi-section-kicker span,
.ggi-update-card__kicker,
.ggi-view-all a,
.ggi-update-card__more,
.ggi-single__back a,
.ggi-member__toggle {
	color: #3D66A8;
}

.ggi-update-card__date {
	color: #5b6672;
}

.ggi-acard__meta {
	color: #527796;
}

.ggi-member__role {
	color: #3d6f99;
}

/* ---------- Media library (ggi/media-grid, ggi/media-stats, lightbox) ---------- */
.ggi-media {
	margin: 0 auto;
}

.ggi-media__heading {
	font-size: 1.75rem;
	font-weight: 700;
	color: #10253A;
	margin: 0 0 1.5rem;
}

.ggi-media__items {
	display: grid;
	grid-template-columns: repeat(var(--ggi-media-cols, 3), minmax(0, 1fr));
	gap: 1.6rem;
}

@media (max-width: 1100px) {
	.ggi-media__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.ggi-media__items {
		grid-template-columns: 1fr;
	}
}

.ggi-media__count {
	font-size: 0.95rem;
	color: #527796;
	margin: 1.5rem 0 1.25rem;
}

.ggi-media__count strong {
	color: #10253A;
}

.ggi-media__viewall,
.ggi-media__more,
.ggi-archive__more {
	text-align: center;
	margin-top: 2.25rem;
}

/* Card */
.ggi-mcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid #D3DDF5;
	border-radius: 0.75rem;
	overflow: hidden;
	transition: box-shadow 0.18s, transform 0.18s;
}

.ggi-mcard:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(16, 37, 58, 0.14);
}

/* .ggi-mfeature (the spotlight hero) shares this ring: ggi_media_spotlight()
   renders .ggi-mcard__open inside .ggi-mfeature, not .ggi-mcard, so without
   this the "outline: none" below still applies (it beats :focus-visible on
   specificity) with no compensating ring — the archive's largest control
   showed no focus indicator at all (WCAG 2.4.7). #5689D4, not #96B9E5: the
   ring sits outside the card on the surrounding page background, where
   #96B9E5 is only ≈2.0:1 — under the 3:1 WCAG 1.4.11 needs for a non-text
   focus indicator. #5689D4 is already this site's global focus colour
   (see :focus-visible below) and clears it. */
.ggi-mcard:focus-within,
.ggi-mfeature:focus-within {
	box-shadow: 0 0 0 3px #5689D4;
}

.ggi-mcard__open {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
}

.ggi-mcard__open:focus {
	outline: none;
}

.ggi-mcard__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, #10253A 0%, #527796 100%);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ggi-mcard__badge {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	background: rgba(255, 255, 255, 0.92);
	color: #10253A;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 0.25rem;
}

.ggi-mcard__meta {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	background: rgba(16, 37, 58, 0.82);
	color: #ffffff;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.25rem 0.55rem;
	border-radius: 0.25rem;
	font-variant-numeric: tabular-nums;
}

.ggi-mcard__play {
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.93);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	display: block;
	position: relative;
}

.ggi-mcard__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 1.05rem solid #10253A;
	border-top: 0.7rem solid transparent;
	border-bottom: 0.7rem solid transparent;
}

.ggi-mcard__play--sm {
	width: 2.2rem;
	height: 2.2rem;
}

.ggi-mcard__play--sm::after {
	border-left-width: 0.65rem;
	border-top-width: 0.42rem;
	border-bottom-width: 0.42rem;
}

.ggi-mcard__play--lg {
	width: 5.4rem;
	height: 5.4rem;
}

.ggi-mcard__play--lg::after {
	border-left-width: 1.6rem;
	border-top-width: 1rem;
	border-bottom-width: 1rem;
}

.ggi-mcard__body {
	padding: 1.1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ggi-mcard__cat {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-size: 0.82rem;
	color: #527796;
}

.ggi-mcard__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 9999px;
	flex: none;
}

.ggi-mcard__sep {
	color: #D3DDF5;
}

.ggi-mcard__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #10253A;
	margin: 0 0 0.55rem;
	line-height: 1.3;
	text-wrap: pretty;
}

.ggi-mcard__desc {
	font-size: 0.93rem;
	line-height: 1.55;
	color: #527796;
	margin: 0 0 0.85rem;
	text-wrap: pretty;
}

.ggi-mcard__speakers {
	font-size: 0.86rem;
	font-style: italic;
	color: #6b93d6;
	margin: 0 0 0.85rem;
}

.ggi-mcard__tags {
	margin-top: auto;
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

/* Strip */
.ggi-media--strip .ggi-media__items {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(17rem, 20rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.75rem;
}

.ggi-media--strip .ggi-mcard {
	scroll-snap-align: start;
}

/* List */
.ggi-media--list .ggi-media__items {
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

.ggi-mrow {
	flex-direction: row;
	align-items: center;
	gap: 0.9rem;
	padding: 0.6rem;
}

.ggi-mrow:hover {
	transform: none;
}

.ggi-mrow__thumb {
	position: relative;
	width: 5.5rem;
	height: 3.6rem;
	flex: none;
	border-radius: 0.4rem;
	background: linear-gradient(140deg, #10253A 0%, #527796 100%);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ggi-mrow__body {
	min-width: 0;
}

.ggi-mrow__title {
	font-size: 1rem;
	font-weight: 600;
	color: #10253A;
	margin: 0 0 0.25rem;
	line-height: 1.3;
}

.ggi-mrow .ggi-mcard__cat {
	margin: 0;
}

/* Spotlight / featured */
.ggi-mfeature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	border-radius: 0.9rem;
	overflow: hidden;
	background: #10253A;
	color: #ffffff;
	box-shadow: 0 18px 44px rgba(16, 37, 58, 0.2);
}

@media (max-width: 860px) {
	.ggi-mfeature {
		grid-template-columns: 1fr;
	}
}

.ggi-mfeature__media {
	position: relative;
	min-height: 21rem;
	background: linear-gradient(140deg, #1e3a8a 0%, #527796 100%);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ggi-mfeature__kicker {
	position: absolute;
	left: 1.4rem;
	top: 1.3rem;
	background: rgba(255, 255, 255, 0.92);
	color: #10253A;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 0.25rem;
}

.ggi-mfeature__body {
	padding: 2.4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ggi-mfeature__body .ggi-mcard__cat {
	color: #96B9E5;
}

.ggi-mfeature__body .ggi-mcard__sep {
	color: #527796;
}

.ggi-mfeature__title {
	font-size: 1.9rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 1rem;
	text-wrap: balance;
	/* The card body is navy (#10253A); without this the heading picks up the
	   global heading colour (also navy) and vanishes against it. */
	color: #ffffff;
}

.ggi-mfeature__desc {
	font-size: 1.02rem;
	line-height: 1.6;
	color: #D3DDF5;
	margin: 0 0 1.2rem;
	text-wrap: pretty;
}

.ggi-mfeature__cta {
	align-self: flex-start;
	margin-top: 0.6rem;
}

/* Filter bar */
/* Zero-height marker media.js watches with an IntersectionObserver to detect
   when the bar below it has become stuck (see media.js for the threshold). */
/* 1px, not 0 — a truly zero-area target's intersection ratio never leaves 0,
   which some browsers fail to re-observe reliably against a negative
   rootMargin once the initial state has been reported once. */
.ggi-media-filters__sentinel {
	height: 1px;
	margin: 0;
	padding: 0;
}

/* `top` clears the fixed `.ggi-navbar`: measured at 87px on desktop and 69px
   on mobile (Task: change-sticky-filters), so 6rem (96px) leaves a small,
   consistent gap under it at every width the bar can be stuck at. */
.ggi-media-filters {
	position: sticky;
	top: 6rem;
	z-index: 20;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	border: 1px solid #D3DDF5;
	border-radius: 0.75rem;
	padding: 1rem 1.15rem;
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	box-shadow: 0 4px 18px rgba(16, 37, 58, 0.07);
}

/* Gallery hero → search bar gap (Task: reduce-gallery-hero-gap). The
   `<main>` padding-top (owner ask: was 3rem/48px) and this bar's own
   margin-top (was 2rem/32px) are the only two contributors — they add
   directly rather than collapsing, since padding on `<main>` blocks margin
   collapse through it. Both values are cut by the same percentage so the
   *total* gap shrinks by that percentage: 65% with no spotlight card sitting
   in that space (nothing else is filling it, so less padding reads right),
   50% when the spotlight is showing (a big card already occupies the space,
   so a more modest cut). `.ggi-media--has-feature` is the modifier
   ggi_render_media_grid() adds only when the spotlight is actually rendered
   for the current page/request — not just whenever showFeature is on.
   `!important` overrides the block editor's inline `padding-top` on `<main>`
   the same way the rest of this file already does for other block styles. */
main.wp-block-group:has(> .ggi-media--archive:not(.ggi-media--has-feature)) {
	padding-top: 1.05rem !important;
	/* 3rem * 35% */
}

main.wp-block-group:has(> .ggi-media--has-feature) {
	padding-top: 1.5rem !important;
	/* 3rem * 50% */
}

.ggi-media--archive:not(.ggi-media--has-feature) .ggi-media-filters {
	margin-top: 0.7rem;
	/* 2rem * 35% */
}

.ggi-media--has-feature .ggi-media-filters {
	margin-top: 1rem;
	/* 2rem * 50% */
}

.ggi-media-filters__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.ggi-media-filters__row--sub {
	border-top: 1px solid #e8f0fe;
	padding-top: 0.8rem;
}

.ggi-media-filters__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #96B9E5;
}

/* Pushes the type pills (and, following them in source order, Sort) to the
   row's right edge, opposite the search box — mirrors `.ggi-filter-bar`'s
   search-left/pills-right layout on the News & Events and Publications
   archives. Scoped to `:not(.is-stuck)`: the stuck state lays every child out
   via its own explicit `order` values (below) and would have this auto
   margin fight that layout otherwise, since `display: contents` on the row
   wrappers doesn't stop a descendant selector like this from still matching. */
.ggi-media-filters:not(.is-stuck) .ggi-media-filters__types {
	margin-left: auto;
}

/* Single-type libraries drop the type pills entirely (see ggi_media_filter_bar),
   so the right-edge auto margin has to move to the next child in source order —
   Sort — to keep it opposite the search box. */
.ggi-media-filters--no-types:not(.is-stuck) .ggi-media-filters__sort {
	margin-left: auto;
}

.ggi-media-filters__types a {
	padding: 0.4rem 0.9rem;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: #527796;
	text-decoration: none;
}

.ggi-media-filters__types a.is-active {
	background: #10253A;
	color: #ffffff;
}

.ggi-media-filters__cats,
.ggi-media-filters__tags,
.ggi-media-filters__years {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.ggi-media-filters__cats a,
.ggi-media-filters__tags a,
.ggi-media-filters__years a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.84rem;
	color: #527796;
	background: #e8f0fe;
	border: 1px solid #D3DDF5;
	border-radius: 9999px;
	padding: 0.3rem 0.75rem;
	text-decoration: none;
}

.ggi-media-filters__cats a.is-active,
.ggi-media-filters__tags a.is-active,
.ggi-media-filters__years a.is-active {
	background: #10253A;
	border-color: #10253A;
	color: #ffffff;
}

.ggi-media-filters__sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: #527796;
}

.ggi-media-filters__sort select {
	font-size: 0.875rem;
	color: #10253A;
	background: #ffffff;
	border: 1px solid #D3DDF5;
	border-radius: 0.4rem;
	padding: 0.4rem 0.6rem;
}

.ggi-media-filters__clear {
	margin-left: auto;
	font-size: 0.84rem;
	font-weight: 600;
	color: #1e3a8a;
	text-decoration: none;
}

/* Collapsed-bar dropdowns (Categories / Tags / Year). Baseline (not stuck):
   the <details> wrapper is invisible scaffolding — its `open` attribute
   (always present in the markup) keeps the same cats/tags/years pills shown
   exactly as before, with the toggle button hidden. This is what ships with
   JavaScript disabled: fully expanded, always, at every scroll position. */
.ggi-media-filters__dd {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.ggi-media-filters__dd>summary {
	display: none;
}

.ggi-media-filters__ddbtn {
	list-style: none;
	cursor: pointer;
	user-select: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: #527796;
	background: #e8f0fe;
	border: 1px solid #D3DDF5;
	border-radius: 9999px;
	padding: 0.3rem 0.9rem;
}

.ggi-media-filters__ddbtn::-webkit-details-marker {
	display: none;
}

.ggi-media-filters__ddbtn::marker {
	content: "";
}

.ggi-media-filters__ddbtn::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 0.3rem solid transparent;
	border-right: 0.3rem solid transparent;
	border-top: 0.35rem solid currentColor;
}

.ggi-media-filters__ddbtn.is-active {
	background: #10253A;
	border-color: #10253A;
	color: #ffffff;
}

/* Stuck: type tabs stay put, categories/tags/years fold behind the three
   dropdown buttons above, "Clear all filters" sits between the Year dropdown
   and Sort (order 5) — the gap the owner circled while reviewing the gallery
   live (Task: change-clear-action). It previously fell after Sort (order 6),
   which put it last in tab order and visually adrift from the rest of the
   controls rather than in that gap. The two `__row` wrappers go
   `display: contents` so their children — the type pills, each dropdown, the
   sort form, the clear link — become one flat, reordered flex row instead of
   two stacked ones, with no markup change and no duplicated links. Clear's
   own `margin-left: auto` (its base rule, shared with the expanded state)
   is what pushes it and Sort together to the row's right edge. */
.ggi-media-filters.is-stuck {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.75rem;
	padding: 0.6rem 0.9rem;
}

.ggi-media-filters.is-stuck .ggi-media-filters__row,
.ggi-media-filters.is-stuck .ggi-media-filters__row--sub {
	display: contents;
}

.ggi-media-filters.is-stuck .ggi-media-filters__types {
	order: 1;
}

.ggi-media-filters.is-stuck .ggi-media-filters__dd[data-dd="tag"] {
	order: 2;
}

.ggi-media-filters.is-stuck .ggi-media-filters__dd[data-dd="year"] {
	order: 3;
}

.ggi-media-filters.is-stuck .ggi-media-filters__dd[data-dd="cat"] {
	order: 4;
}

.ggi-media-filters.is-stuck .ggi-media-filters__clear {
	order: 5;
}

.ggi-media-filters.is-stuck .ggi-media-filters__sort {
	order: 6;
}

.ggi-media-filters.is-stuck .ggi-media-filters__dd {
	display: inline-flex;
	position: relative;
}

.ggi-media-filters.is-stuck .ggi-media-filters__dd>summary {
	display: inline-flex;
}

.ggi-media-filters.is-stuck .ggi-media-filters__dd>.ggi-media-filters__label {
	display: none;
}

.ggi-media-filters.is-stuck .ggi-media-filters__dd>*:not(summary) {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	min-width: 12rem;
	max-width: 20rem;
	max-height: 60vh;
	overflow-y: auto;
	padding: 0.7rem;
	background: #ffffff;
	border: 1px solid #D3DDF5;
	border-radius: 0.6rem;
	box-shadow: 0 14px 34px rgba(16, 37, 58, 0.18);
}

.ggi-loadmore {
	display: inline-block;
	font-size: 0.95rem;
	font-weight: 600;
	color: #10253A;
	background: #ffffff;
	border: 1px solid #D3DDF5;
	border-radius: 0.5rem;
	padding: 0.85rem 2rem;
	text-decoration: none;
}

.ggi-loadmore:hover {
	border-color: #10253A;
	background: #e8f0fe;
}

.ggi-loadmore.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

/* Lazy-loaded state (media.js only adds this once its IntersectionObserver
   has actually taken over triggering the fetch): the button chrome
   disappears, collapsing to a thin unstyled strip — still a real element
   with real height for the observer to watch, just not something a
   scrolling user is meant to see or click, since scrolling near it is what
   fires the load now. `:focus` restores full button styling, so a keyboard
   user tabbing through the page can still find and use it, matching the
   click handler that stays in media.js as this state's fallback path. */
.ggi-loadmore--auto {
	display: block;
	width: 100%;
	padding: 0.4rem;
	font-size: 0;
	color: transparent;
	background: transparent;
	border-color: transparent;
	text-align: center;
}

.ggi-loadmore--auto:focus {
	display: inline-block;
	width: auto;
	padding: 0.85rem 2rem;
	font-size: 0.95rem;
	color: #10253A;
	background: #ffffff;
	border-color: #D3DDF5;
}

/* The one moment `--auto` is meant to be visible unprompted: a small,
   centred status while a lazily-triggered batch is actually in flight, so
   scrolling to the end of what's loaded doesn't look like the list just
   stopped. Generated content rather than reusing the real "Load more" text
   node — that node stays at font-size: 0 here so it can't show through
   alongside this if a keyboard user's :focus and .is-loading ever overlap. */
.ggi-loadmore--auto.is-loading {
	width: auto;
	padding: 0.5rem 0;
	opacity: 1;
}

.ggi-loadmore--auto.is-loading::after {
	content: "Loading more…";
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 500;
	color: #527796;
}

/* Stats */
.ggi-media-stats {
	display: flex;
	gap: 2rem;
	align-items: stretch;
}

.ggi-media-stats__rule {
	width: 1px;
	background: #D3DDF5;
}

.ggi-media-stats__n {
	display: block;
	font-size: 2.1rem;
	font-weight: 700;
	color: #10253A;
	line-height: 1;
}

.ggi-media-stats__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #527796;
	margin-top: 0.4rem;
}

/* Lightbox */
.ggi-lightbox {
	border: 0;
	border-radius: 0.9rem;
	padding: 0;
	width: min(72rem, 92vw);
	max-width: 92vw;
	max-height: 90vh;
	overflow: visible;
	background: #ffffff;
	color: #10253A;
	position: relative;
}

.ggi-lightbox::backdrop {
	background: rgba(16, 37, 58, 0.86);
	backdrop-filter: blur(6px);
}

/* The scroll/clip boundary moved off the dialog itself and onto this wrapper
   so the item-nav buttons below can sit outside the dialog's visual box
   (negative left/right) without being clipped by the dialog's own overflow. */
.ggi-lightbox__scroll {
	max-height: 90vh;
	overflow-x: hidden;
	overflow-y: auto;
	border-radius: 0.9rem;
}

.ggi-lightbox__close {
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 2.4rem;
	height: 2.4rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
}

/* Item-to-item navigation: circular translucent buttons matching the close
   button's treatment, anchored to the dialog's outer edges (not the stage)
   so they never collide with the within-item photo arrows below. Below
   ~1300px there isn't enough room outside the (92vw-capped) dialog for them
   to sit fully off the box, so they move inset onto the stage's bottom
   corners — clear of the close button (top-right), the photo arrows
   (vertically centred) and the photo counter (bottom-centre). */
.ggi-lightbox__itemnav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	box-shadow: 0 8px 22px rgba(16, 37, 58, 0.35);
	color: #ffffff;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ggi-lightbox__itemnav:hover {
	background: rgba(255, 255, 255, 0.32);
}

.ggi-lightbox__itemnav:focus-visible {
	outline: 3px solid #96B9E5;
	outline-offset: 2px;
}

.ggi-lightbox__itemnav--prev {
	left: -4rem;
}

.ggi-lightbox__itemnav--next {
	right: -4rem;
}

@media (max-width: 1300px) {
	.ggi-lightbox__itemnav {
		top: auto;
		bottom: 0.85rem;
		transform: none;
		width: 2.4rem;
		height: 2.4rem;
		font-size: 1.3rem;
		background: rgba(16, 37, 58, 0.55);
	}

	.ggi-lightbox__itemnav--prev {
		left: 0.85rem;
		right: auto;
	}

	.ggi-lightbox__itemnav--next {
		right: 0.85rem;
		left: auto;
	}
}

.ggi-lightbox__stage {
	position: relative;
	min-height: 22rem;
	background: #10253A;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ggi-lightbox__stage img {
	max-width: 100%;
	max-height: 68vh;
	display: block;
}

.ggi-lightbox__stage iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
}

.ggi-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.8rem;
	height: 2.8rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #10253A;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ggi-lightbox__nav--prev {
	left: 1rem;
}

.ggi-lightbox__nav--next {
	right: 1rem;
}

.ggi-lightbox__counter {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.82rem;
	color: #D3DDF5;
}

.ggi-lightbox__strip {
	display: flex;
	gap: 0.5rem;
	padding: 0.9rem 2rem 0;
	overflow-x: auto;
}

.ggi-lightbox__thumb {
	width: 4.5rem;
	height: 3rem;
	flex: none;
	border: 2px solid transparent;
	border-radius: 0.3rem;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	padding: 0;
}

.ggi-lightbox__thumb.is-active {
	border-color: #5689D4;
}

.ggi-lightbox__body {
	padding: 1.6rem 2rem 2rem;
}

.ggi-lightbox__title {
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0 0 0.7rem;
	line-height: 1.25;
}

.ggi-lightbox__desc {
	font-size: 1rem;
	line-height: 1.6;
	color: #527796;
	margin: 0 0 0.7rem;
}

.ggi-lightbox__tags {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	margin-top: 0.9rem;
}

.ggi-lightbox__related {
	margin-top: 1.6rem;
	border-top: 1px solid #e8f0fe;
	padding-top: 1.1rem;
}

.ggi-lightbox__related-items {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 0.7rem;
}

.ggi-lightbox__related-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.88rem;
	color: #527796;
	max-width: 16rem;
}

.ggi-lightbox__related-thumb {
	width: 3.4rem;
	height: 2.3rem;
	flex: none;
	border-radius: 0.25rem;
	background: linear-gradient(140deg, #10253A 0%, #527796 100%);
	background-size: cover;
	background-position: center;
	position: relative;
}

.ggi-lightbox__related-thumb.is-video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-left: 0.5rem solid #ffffff;
	border-top: 0.32rem solid transparent;
	border-bottom: 0.32rem solid transparent;
}

/* Editor sidebar label */
.ggi-inspector-label {
	font-weight: 600;
	margin: 1em 0 0.5em;
}

/* Gallery archive hero */
.ggi-media-head {
	align-items: flex-end;
	gap: 2.5rem;
	margin-bottom: 0.5rem;
}

.ggi-media-kicker {
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}