/**
 * Prozhektor theme — main stylesheet.
 * Organized: reset -> base/typography -> layout helpers -> buttons/forms ->
 * header/mega-menu -> footer -> homepage sections -> cards -> page templates
 * -> FAQ accordion -> responsive.
 */

/* ---------------------------------- Reset --------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Also needed here, not just on body: a few blocks (e.g. the Post Grid
	   "Важливі новини" carousel) intentionally render wider than the
	   viewport and rely on overflow being clipped rather than scrollable.
	   overflow-x:hidden on body alone clips that content visually and blocks
	   scrolling, but doesn't stop the overflow from inflating the *layout*
	   viewport itself — confirmed via window.innerWidth reporting the
	   document's full scrollWidth (610px on a 375px device) instead of the
	   actual device width. position:fixed elements (e.g. .back-to-top)
	   resolve right/bottom offsets against that inflated width, landing
	   them off-screen past the real right edge. Setting it on html too pins
	   the layout viewport back to the real device width. */
	overflow-x: hidden;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text);
	background: var(--color-white);
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font: inherit;
	color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-head);
	font-weight: 400;
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-4);
}

p {
	margin: 0 0 var(--space-4);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	background: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-sm);
	z-index: 999;
	transition: top var(--duration) var(--ease);
}
.skip-link:focus {
	top: var(--space-4);
}

/* --------------------------------- Layout --------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section--tight {
	padding-block: var(--space-7);
}

.section--tint {
	background: var(--color-tint);
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
	flex-wrap: wrap;
}

.section-head__text {
	max-width: 640px;
}

.section-head__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.section-title {
	font-size: var(--fs-h2);
}

.section-title em {
	color: var(--color-primary);
	font-style: normal;
}

.section-eyebrow {
	display: inline-block;
	font-size: var(--fs-small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.grid {
	display: grid;
	gap: var(--space-5);
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ---------------------------------- Icons ----------------------------------- */
.icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	flex: none;
}
.icon svg {
	width: 100%;
	height: 100%;
}
.icon--flip {
	transform: scaleX(-1);
}

/* --------------------------------- Buttons --------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 60px;
	padding-inline: 32px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-body);
	white-space: nowrap;
	transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease), opacity var(--duration) var(--ease);
}

.btn .icon {
	width: 18px;
	height: 18px;
}

.btn--primary {
	background: var(--color-primary);
	color: var(--color-white);
}
.btn--primary:hover {
	background: var(--color-primary-hover);
}

.btn--outline {
	background: transparent;
	border: 1px solid currentColor;
	color: var(--color-white);
}
.btn--outline:hover {
	background: rgba(255, 255, 255, 0.12);
}

.btn--outline-dark {
	background: transparent;
	border: 1px solid var(--color-text-faint);
	color: var(--color-text);
}
.btn--outline-dark:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/* Figma "Наші донори та партнери": Донори entries use .btn--outline-dark,
   but every Партнери entry's own CTA button (node 241-1158, "Уповноважений
   Верховної Ради…", "УМСА", "МН4U", … — all 15 of them) is a solid dark
   fill instead, same fill as .partners-badge/.team-badge. */
.btn--dark {
	background: var(--color-text);
	color: var(--color-white);
}
.btn--dark:hover {
	background: var(--color-primary);
}

.btn--ghost {
	background: transparent;
	color: var(--color-primary);
	height: auto;
	padding: 0;
	border-radius: 0;
}

.btn--sm {
	height: 44px;
	padding-inline: 22px;
	font-size: var(--fs-small);
}

.btn--block {
	width: 100%;
	justify-content: center;
}

/* ---------------------------------- Forms ---------------------------------- */
.form-row {
	margin-bottom: var(--space-4);
}

.form-input,
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-surface-200);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	font-size: var(--fs-body);
}

.form-input:focus,
.wpcf7-form-control:focus {
	outline: none;
	border-color: var(--color-primary);
}

.form-label {
	display: block;
	font-size: var(--fs-small);
	color: var(--color-text-soft);
	margin-bottom: var(--space-2);
}

.form-notice {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
	margin-bottom: var(--space-4);
}
.form-notice--success {
	background: rgba(39, 92, 172, 0.1);
	color: var(--color-primary);
}
.form-notice--error {
	background: rgba(255, 0, 51, 0.1);
	color: var(--color-accent);
}

/* --------------------------------- Header ---------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
}

.utility-bar {
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: var(--color-text);
	border-bottom: 1px solid rgba(33, 34, 39, 0.06);
}

.utility-bar__row {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	height: var(--header-height);
}

.utility-bar__menu-toggle {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.utility-bar__menu-toggle .icon {
	width: 22px;
	height: 22px;
}

.utility-bar__logo {
	margin-inline: var(--space-4);
	display: flex;
	align-items: center;
}

.logo {
	display: inline-flex;
	align-items: center;
}
.logo img,
.logo__mark {
	height: 36px;
	width: auto;
}
.mega-menu__logo .logo img,
.mega-menu__logo .logo__mark {
	height: 120px; /* Figma "Menu": 120×131 lockup at the top of the panel */
}

.utility-bar__lang {
	display: flex;
	gap: var(--space-2);
	font-size: var(--fs-small);
	font-weight: 500;
}

.utility-bar__lang a {
	color: var(--color-text-faint);
	transition: color var(--duration) var(--ease);
}

.utility-bar__lang a:hover,
.utility-bar__lang a:focus-visible {
	color: var(--color-text);
}

.utility-bar__lang a.is-active,
.utility-bar__lang a[aria-current] {
	color: var(--color-text);
	font-weight: 700;
}

.utility-bar__phone {
	font-size: var(--fs-small);
	font-weight: 500;
	white-space: nowrap;
}

.utility-bar__social {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-left: auto;
}

.social-link {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-text);
	color: var(--color-white);
	transition: background var(--duration) var(--ease);
}
.social-link:hover {
	background: var(--color-primary);
}
.social-link .icon {
	width: 15px;
	height: 15px;
}

.utility-bar__search .icon {
	width: 20px;
	height: 20px;
}

.utility-bar__donate .btn {
	height: 40px;
	padding-inline: 22px;
	font-size: var(--fs-small);
}

/* ------------------------------- Mega menu -------------------------------- */
.mega-menu-overlay {
	position: fixed;
	inset: 0;
	/* Figma "Menu": the page behind the panel is dimmed with #212227 @ 48%. */
	background: rgba(33, 34, 39, 0.48);
	z-index: 90;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration) var(--ease);
}
.mega-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.mega-menu {
	position: fixed;
	inset-block: 0;
	left: 0;
	/* Figma "Menu": the panel is exactly half the 1920 canvas (960px). The
	   92vw cap keeps a strip of the darkened page visible on narrow screens. */
	width: min(960px, 92vw);
	background: var(--color-tint);
	z-index: 91;
	transform: translateX(-100%);
	transition: transform var(--duration) var(--ease);
	overflow-y: auto;
	display: flex;
}
.mega-menu.is-open {
	transform: translateX(0);
}

.mega-menu__panel {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-8); /* Figma: 64px between logo, link row and CTA */
	padding: var(--space-8);
}

.mega-menu__close {
	position: absolute;
	/* Figma puts the close control at the panel's top-left corner (64px in,
	   24px down), above the logo — not top-right. */
	top: var(--space-5);
	left: var(--space-8);
}
.mega-menu__close .icon {
	width: 18px;
	height: 18px;
}

/* Two-column layout (Figma "Menu"): every top-level item stacks in a narrow
   left column; the single item with children ("Проєкти") projects its
   submenu as a persistent second column beside the list, not an accordion. */
.mega-menu__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-6); /* Figma: 32px between primary items */
}

.mega-menu__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 1.25rem; /* Figma: flat 20px, body face (not the display font) */
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
.mega-menu__link .icon {
	width: 18px;
	height: 18px;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.mega-menu__item:hover > .mega-menu__link .icon,
.mega-menu__item:focus-within > .mega-menu__link .icon {
	opacity: 1;
	transform: translateX(0);
}

.mega-menu__submenu {
	position: absolute;
	top: 0;
	/* left column is ~160px wide in the design, then a 64px gutter */
	left: calc(160px + var(--space-8));
	right: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-5); /* Figma: 24px between sub-items */
}

.mega-menu__subitem {
	line-height: 1.2;
}

.mega-menu__sublink {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-small); /* Figma: 14px, uppercase, trailing arrow */
	text-transform: uppercase;
	color: var(--color-text);
}
.mega-menu__sublink:hover {
	color: var(--color-primary);
}
.mega-menu__sublink .icon {
	width: 14px;
	height: 14px;
	flex: none;
}

.mega-menu__cta {
	margin-top: 0;
}

/* Language switcher inside the slide-in menu panel. Kept independent of
   .utility-bar__lang so the ≤768px `display:none` on that one doesn't hide
   it — this is the only switcher mobile visitors get. */
.mega-menu__lang {
	display: flex;
	gap: var(--space-4);
	font-size: 1rem;
	font-weight: 500;
}
.mega-menu__lang a {
	color: var(--color-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.01em;
	transition: color var(--duration) var(--ease);
}
.mega-menu__lang a:hover,
.mega-menu__lang a:focus-visible {
	color: var(--color-text);
}
.mega-menu__lang a.is-active,
.mega-menu__lang a[aria-current] {
	color: var(--color-text);
	font-weight: 700;
}

/* -------------------------------- Homepage --------------------------------- */
.hero {
	position: relative;
	color: var(--color-text);
}

.hero__intro {
	/* Figma: text block sits flush with the top of the hero frame (no top
	   inset — the frame already starts right below the header) and the
	   auto-layout gap before the photo is 54px. Also carries its own
	   240px (@1920) side inset instead of the shared .container, since
	   the hero frame measures 1440px wide inside the 1920px canvas. */
	padding-block: 0 3.375rem;
	padding-inline: clamp(20px, 12.5vw, 240px);
}

.hero__title {
	font-size: var(--fs-h1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: 1.75rem; /* Figma: 28px gap to the intro paragraph */
}

.hero__text {
	max-width: 867px; /* Figma: paragraph text box is 867px wide */
	font-size: var(--fs-body-lg);
	color: var(--color-text);
}

.hero__media {
	width: 100%;
	aspect-ratio: 192 / 55; /* Figma: photo is 1920x550 */
	overflow: hidden;
}
.hero__media img,
.hero__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stats {
	padding-block: var(--space-7);
}

.stats__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between; /* Figma: item spacing set to "Auto", i.e. evenly distributed — 111.67px between each of the 3 stats + button at the 1440px reference width */
	gap: var(--space-5);
}

.stat {
	flex: none;
}

.stat__value {
	font-family: var(--font-head);
	font-size: var(--fs-stat);
	font-weight: 500; /* Figma: Geist Medium; e-Ukraine Head only ships Regular/Bold so this resolves to Regular */
	color: var(--color-text);
	line-height: var(--lh-heading); /* Figma: 120% */
	margin-bottom: var(--space-4); /* Figma: 16px gap between number and label */
}

.stat__label {
	max-width: 248px; /* Figma: label text box is 248px wide, wraps to 2 lines for the longest stat */
	font-size: var(--fs-body-lg); /* Figma: 18px */
	font-weight: 400; /* Figma: Regular */
	line-height: var(--lh-body); /* Figma: 130% */
	color: var(--color-text); /* Figma: full-opacity text color, not the soft/faded variant */
}

.stats__cta .btn {
	text-transform: uppercase; /* Figma: button text layer has Case = Uppercase */
}

/* Просвіта / initiative link cards
   Figma (node 168-178/183): pills are Hug-width and pack left with an 8px
   row gap — they do NOT stretch to fill the row. Each pill is a fixed
   40px-tall dark pill (#212227 = --color-text), 32px horizontal padding,
   0 vertical padding (content centered), fully rounded, white 14px
   uppercase Regular label + 16px white arrow with an 8px label/icon gap. */
.wp-block-prozhektor-link-card-row {
	padding-block: var(--space-9);
}

.link-card-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2); /* Figma: 8px item spacing between pills */
}

.link-card {
	display: flex;
	align-items: center;
	gap: var(--space-2); /* Figma: 8px gap between label and arrow */
	height: 40px; /* Figma: fixed 40px pill height */
	padding-inline: var(--space-6); /* Figma: 32px horizontal padding */
	background: var(--color-text); /* Figma: #212227 pill fill */
	color: var(--color-white);
	border-radius: var(--radius-pill); /* Figma: fully rounded pill, not radius-md */
	font-family: var(--font-body); /* Figma: e-Ukraine (body), not head */
	font-size: var(--fs-small); /* Figma: 14px */
	font-weight: 400; /* Figma: Regular */
	text-transform: uppercase; /* Figma: Case = Uppercase */
	white-space: nowrap;
	transition: background var(--duration) var(--ease);
}
.link-card:hover {
	/* Figma frame has no hover state to sample — inferred from the site's
	   existing primary-accent hover convention (.btn--primary:hover). */
	background: var(--color-primary);
}
.link-card .icon {
	width: 16px;
	height: 16px;
	color: var(--color-white); /* Figma: white arrow */
	flex: none;
}
.link-card .icon svg path {
	stroke-width: 2; /* Figma: 2px stroke at 16px icon size */
}

/* Team preview grid (also reused on Team page)
   Figma (node 168-133, "conteiner" > cards "1/2/3"): 3 cards of 338px each
   with a 143px column gap at the 1440 frame — an unusually wide, deliberate
   gap (~42% of card width) rather than the site's usual --space-5 grid gap,
   so it gets its own large token instead of reusing .grid's default. */
.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-10);
}

.team-card__photo {
	aspect-ratio: 1;
	border-radius: 0; /* Figma: square corners, no rounding on founder photos */
	overflow: hidden;
	margin-bottom: var(--space-6);
	background: var(--color-surface-200);
	filter: grayscale(1);
	transition: filter var(--duration) var(--ease);
}
.team-card:hover .team-card__photo {
	filter: grayscale(0);
}
.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__name {
	font-family: var(--font-body); /* Figma: e-Ukraine, not the e-Ukraine Head h-tag default */
	font-size: 1.25rem; /* Figma: 20px Medium */
	font-weight: 500;
	line-height: var(--lh-body);
	margin-bottom: var(--space-2); /* Figma: 8px gap to the role line below */
}

.team-card__role {
	font-size: var(--fs-small);
	font-weight: 500; /* Figma: e-Ukraine Medium */
	color: var(--color-text);
	margin-bottom: var(--space-6); /* Figma: 32px gap to the bio paragraph below */
}

.team-card__bio {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 300; /* Figma: e-Ukraine Light */
	line-height: var(--lh-body);
	color: var(--color-text);
}
.team-card__bio :is(p, ul, ol):last-child {
	margin-bottom: 0;
}

.team-grid--dense {
	grid-template-columns: repeat(4, 1fr);
	/* Figma (Team page, node 204-382/967/968, "Команда"/"Учасники проєктів"
	   sections): 4 cards of 338px with a 30px gap at the 1439px content
	   frame — close enough to the shared --space-5 (24px) grid gap to reuse
	   it rather than add a one-off token. */
	gap: var(--space-5);
}
.team-grid--dense .team-card__photo {
	/* Figma: the placeholder image layer measures 338×338 — square, same
	   1:1 crop as the 3-up founders cards, not the 3:4 this rule used to
	   guess (no dense-grid frame existed in Figma when that guess was made). */
	aspect-ratio: 1;
}
.team-grid--dense .team-card__role {
	/* Figma: 16px gap from the name/role group to the bio paragraph here,
	   vs. the 3-up founders cards' 32px (--space-6, the default above). */
	margin-bottom: var(--space-4);
}

/* Team Grid block wrapper — group intro (heading/subtitle) + badge pill +
   the .team-grid itself. Figma (Team page): three stacked sections share
   this same shape (Правління has heading+subtitle+badge on a tint
   background; Команда/Учасники проєктів are badge+grid only, no
   background) — heading/subtitle/badge/background are all block attributes
   rather than being split into separate hardcoded sections. */
.team-grid-block {
	padding-block: var(--space-9);
}

.team-grid-intro {
	max-width: 720px;
	margin-bottom: var(--space-3);
}

.team-grid-intro__title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-3);
}
.team-grid-intro__title em {
	color: var(--color-primary);
	font-style: normal;
}

.team-grid-intro__text {
	color: var(--color-text-soft);
	font-size: var(--fs-body-lg);
}
.team-grid-intro__text p:last-child {
	margin-bottom: 0;
}

.team-badge {
	display: inline-flex;
	align-items: center;
	height: 40px; /* Figma: fixed 40px pill height, matches .link-card */
	padding-inline: var(--space-6); /* Figma: 32px horizontal padding */
	margin-bottom: var(--space-6); /* Figma: 32px gap down to the grid below */
	background: var(--color-text); /* Figma: #212227 pill fill */
	color: var(--color-white);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-small); /* Figma: 14px */
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Team Video block (Home, Figma node 160-191 "video" under "наша команда"):
   a ~16:9 dark card = a social identity strip (48px round avatar + name +
   a smaller note) on top of a YouTube player. The real embed supplies the
   poster / play button / scrubber / YouTube logo the mock draws by hand.
   Top/bottom padding is author-configurable (prozhektor_padding_scale()),
   set inline by render.php. */
.team-video-block {
	padding-block: var(--space-9);
}
.team-video {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-text); /* Figma: #212227 chrome */
}
.team-video__bar {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	color: var(--color-white);
}
a.team-video__bar {
	transition: background var(--duration) var(--ease);
}
a.team-video__bar:hover {
	background: rgba(255, 255, 255, 0.06);
}
.team-video__avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-white);
	display: flex;
}
.team-video__avatar img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 7px;
}
.team-video__id {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.team-video__name {
	font-size: var(--fs-body); /* Figma: 16px */
	font-weight: 500;
	line-height: 1.3;
}
.team-video__note {
	font-size: var(--fs-small); /* Figma: 14px, e-Ukraine Light */
	font-weight: 300;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.3;
}
.team-video__bar .icon {
	flex: none;
	margin-left: auto;
	width: 20px;
	height: 20px;
}
.team-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-text);
}
.team-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.team-video__frame .description {
	margin: 0;
	padding: var(--space-6);
	color: rgba(255, 255, 255, 0.7);
}

/* Instagram Grid (Team page, Figma node 208-966 "instagram"): heading +
   "@handle" .link-card pill *stacked* (not side by side — Figma's "title"
   node is a vertical auto-layout, 16px gap, both left-aligned) on the
   plain page background, then a separate full-width tint band (Figma:
   the fill rect exactly hugs the grid's own bounds, no fill behind the
   heading/pill) holding a 5-up grid of square post images — Figma
   measures 5 columns × 275px with a 16px gap at the 1440px content frame.
   Top/bottom padding on .instagram-grid-block itself is author-configurable
   (paddingTop/paddingBottom, see prozhektor_padding_scale()) and set inline
   by render.php; the band's own internal padding around the grid is a
   fixed design constant, not exposed as a setting. */
.instagram-grid-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4); /* Figma: 16px gap between heading and pill */
	margin-bottom: var(--space-5); /* Figma: 24px gap down to the tint band */
}

.instagram-grid-band {
	padding-block: var(--space-7);
}

.instagram-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-4);
}

.instagram-grid__item {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--color-surface-200);
}
.instagram-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}
a.instagram-grid__item:hover img {
	transform: scale(1.04);
}

.section-video {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 16/9;
	margin-top: var(--space-6);
}
.section-video iframe,
.section-video video {
	width: 100%;
	height: 100%;
}

/* CTA banner ("Не залишайтеся з проблемою наодинці") — Figma: this section's
   frame is a flush, edge-to-edge 1920x400 rectangle (unlike most sections it
   isn't nested in a max-width container, and there's no ancestor max-width
   here either, so it already renders full-bleed with no align-full trick
   needed) — no card radius, no side margins, and — unlike every other
   section on the site — no vertical gap from the block above/below either,
   so the wrapper carries no padding of its own; .cta-banner's own
   padding-block below is what spaces the copy from the banner's edges. */
.cta-banner {
	position: relative;
	background: var(--color-primary);
	color: var(--color-white);
	overflow: hidden;
	/* Text column carries the same 240px (@1920) side inset as .hero__intro —
	   both are full-bleed sections referencing the same 1920 frame. */
	padding-inline: clamp(20px, 12.5vw, 240px);
	/* Figma centers the text block vertically in the fixed 400px frame
	   ((400 - 285) / 2 ≈ 57/58px top/bottom with the default copy); using
	   padding instead of a fixed height + flex-center keeps the banner from
	   clipping when real content runs longer than the Figma placeholder. */
	padding-block: clamp(2rem, 1.6rem + 1.7vw, 3.625rem);
}

/* Specificity note: qualified with .cta-banner (not a bare .cta-banner__title
   class selector) so this reliably beats .article__body h2 — this block can
   land on a plain page (page.php wraps the_content() in .article__body),
   not just the homepage, and a class+element selector like that one would
   otherwise silently win over an equal/lower-specificity class selector. */
.cta-banner .cta-banner__title {
	/* Figma sets this heading to a flat 50px at the 1920 frame — smaller
	   than --fs-h2's 60px plateau, because --fs-h2 is calibrated to the
	   1440px-reference sections nested in .container, not this edge-to-edge
	   1920px one. Fluid clamp plateauing at 50px (3.125rem) at 1920vw. */
	font-size: clamp(1.75rem, 1.6rem + 1.42vw, 3.125rem);
	max-width: 610px;
	margin-bottom: var(--space-5);
}

.cta-banner__text {
	max-width: 685px;
	/* Explicit (not just inherited from body's own 16px default) because
	   .article__body — the page.php content wrapper this block can also
	   land in outside the homepage — sets its own font-size that would
	   otherwise cascade in and inflate this to 18px. */
	font-size: var(--fs-body);
	font-weight: 300; /* Figma: e-Ukraine Light */
	margin-bottom: 40px;
}

.cta-banner__art {
	position: absolute;
	top: 0;
	right: clamp(20px, 12.5vw, 240px);
	width: 580px;
	max-width: 42%;
	aspect-ratio: 580 / 400;
	background: url('../images/cta-banner-hands.svg') no-repeat center / contain;
	pointer-events: none;
}

/* Figma (node 176-290): a near-invisible (8% white) "ПРОЖЕКТОР" wordmark
   bleeding the banner's left edge, vertically centered and flipped 180°.
   Centered with top:50%+translateY(-50%) (not align-items) because
   align-items resolves against the element's own writing-mode — which is
   vertical-rl here — so it'd act on the wrong (horizontal) axis instead of
   the vertical one it looks like it targets. */
.cta-banner__watermark {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(2rem, 1rem + 1.8vw, 3rem);
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.08);
	white-space: nowrap;
	pointer-events: none;
}

.cta-banner .btn {
	/* Figma: this button's text is 14px (--fs-small) and uppercased via a
	   Case:AG text style, not literal uppercase characters — the stored
	   attribute stays sentence case so it still reads correctly anywhere
	   else the value might surface (e.g. og:description). No arrow icon on
	   this particular instance (hidden in the Figma component override). */
	font-size: var(--fs-small);
	text-transform: uppercase;
}

/* --------------------------------- Cards ------------------------------------ */
.card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
}

.post-grid {
	padding-block: var(--space-9);
}

/* card-grid--3 is only used by the Post Grid block (blocks/post-grid) — the
   Figma "Важливі новини" frame (node 176-296) draws it as a horizontally
   scrollable row of fixed-width cards (each card is a flat 700px-wide
   component at the 1680px reference frame, i.e. 41.6667% of the row, with a
   30px gap) that overflows the row and is clipped, so the 3rd card peeks in
   as a scroll affordance. `.card-grid` and `.card-grid--3`'s grid sibling
   rules elsewhere (archives, search, index, front-page fallback) are
   untouched — everything below is scoped under `.card-grid--3` and its
   descendants so it only affects this block's 3-column variant. */
.card-grid--3 {
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Figma: 40px between the section heading and the row; the h2 above it
	   has a 16px default bottom margin (see the global heading reset) which
	   collapses against this margin-top, so the larger value (40px) wins. */
	margin-top: 40px;
}
.card-grid--3::-webkit-scrollbar {
	display: none;
}

.card-grid--3 .card {
	flex: 0 0 41.6667%;
	min-width: 0;
	scroll-snap-align: start;
	/* Figma: no card chrome here — image + text sit directly on the page
	   background, no white panel/shadow/radius (unlike the default .card
	   used by the archive/search grids). */
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	gap: 32px;
}

.card-grid--3 .card__media {
	aspect-ratio: 70 / 27; /* Figma: 700x270 image layer */
	border-radius: 0;
}

.card-grid--3 .card__body {
	padding: 0;
	gap: 16px;
}

.card-grid--3 .post-meta {
	font-size: var(--fs-body);
	font-family: var(--font-body);
	font-weight: 300;
	color: var(--color-text);
	margin-bottom: 0;
}

.card-grid--3 .card__title {
	font-size: 1.25rem;
	margin-bottom: 0;
}

.card-grid--3 .card__excerpt {
	/* Figma: this card variant only shows date + title, no excerpt text. */
	display: none;
}

/* Static position indicator under the 3-up row — see render.php for why
   it isn't wired to scroll position. */
.card-grid-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 40px;
}
.card-grid-dots__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-surface-200);
}
.card-grid-dots__dot--active {
	background: var(--color-primary);
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.card__media {
	aspect-ratio: 16/10;
	overflow: hidden;
	position: relative;
}
.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}
.card:hover .card__media img {
	transform: scale(1.04);
}

.card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	background: var(--color-white);
	border-radius: var(--radius-pill);
	padding: 4px 14px;
	font-size: var(--fs-tiny);
	font-weight: 500;
}

.card__body {
	padding: var(--space-4) var(--space-5) var(--space-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-meta {
	font-size: var(--fs-tiny);
	color: var(--color-text-faint);
	display: block;
	margin-bottom: var(--space-2);
}
.post-meta__dot {
	margin-inline: var(--space-1);
}

.card__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-body-lg);
	margin-bottom: var(--space-2);
}
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.card {
	position: relative;
}

.card__excerpt {
	color: var(--color-text-soft);
	font-size: var(--fs-small);
	margin-bottom: 0;
}

/* --------------------------- News List block (Figma «Новини») ---------------
   Paginated archive of real posts. Deliberately NOT the .card panel look:
   flat cards (image + text straight on the page background, no white box /
   shadow / radius), 2-up, wide 705×340 images, an uppercase black date-pill,
   outline tag pills, near-black text throughout, and a full-bleed hairline
   rule between every row + around the pager. The card markup reuses .card /
   .card__* so it still gets the whole-card link (.card__title a::after) and
   the image hover-zoom; .card--news overrides the chrome. The Post Grid 3-up
   carousel (.card-grid--3) never gets .card--news, so it's untouched. */
.news-list__intro {
	margin-bottom: var(--space-7);
}
.news-list__title {
	font-size: var(--fs-h2);
	text-transform: uppercase;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}
.news-list__text {
	max-width: 900px;
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-text);
}
.news-list__text p:last-child {
	margin-bottom: 0;
}
.news-list__empty {
	color: var(--color-text-soft);
}

/* #tag filter — Figma «Блог» frame: a wrapping row of chips between the
   intro and the grid. Outline by default; the selected chips fill primary;
   a trailing dashed "Скинути" chip (with a refresh icon) clears them. Each
   chip is a plain link carrying the toggled selection in ?filter_tag= —
   no JS. */
.news-list__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-7);
}
.news-list__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 38px;
	padding: 7px 18px;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: 1;
	text-transform: uppercase;
	transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.news-list__chip:hover {
	background: var(--color-tint);
}
.news-list__chip.is-active {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}
.news-list__chip.is-active:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
}
.news-list__chip--reset {
	border-style: dashed;
}
.news-list__chip--reset .icon {
	width: 15px;
	height: 15px;
}
.news-list__chip--reset.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Full-bleed hairline: breaks out of .container to the viewport edges,
   like the theme's own .alignfull. Contained again on mobile. */
.news-list__rule {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--color-surface-100);
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.news-list__rows .news-list__rule {
	margin-block: 40px;
}

.news-list__row {
	display: grid;
	grid-template-columns: repeat(var(--news-cols, 2), minmax(0, 1fr));
	gap: var(--space-8) var(--space-6);
}

.news-list__pager {
	margin-top: var(--space-8);
}
/* Numbers stay centred; the arrow-plus-label prev/next are pinned to the
   row's edges (Figma pagination frame: prev | numbers | next, spread). */
.news-list__pager .pagination ul {
	position: relative;
	margin: var(--space-5) 0;
	padding-inline: 8.5rem;
}
.news-list__pager .pagination .prev,
.news-list__pager .pagination .next {
	position: absolute;
	top: 0;
	width: auto;
	padding-inline: var(--space-3);
	gap: 0.4em;
	font-weight: 500;
}
.news-list__pager .pagination .prev {
	left: 0;
}
.news-list__pager .pagination .next {
	right: 0;
}
.news-list__pager .pagination .prev:hover,
.news-list__pager .pagination .next:hover {
	color: var(--color-primary);
	background: none;
}
.pagination__arrow {
	font-size: 1.1em;
	line-height: 1;
}
@media (max-width: 640px) {
	.news-list__pager .pagination ul {
		flex-wrap: wrap;
		padding-inline: 0;
	}
	.news-list__pager .pagination .prev,
	.news-list__pager .pagination .next {
		position: static;
	}
	.news-list__pager .pagination .prev {
		order: -1;
	}
}

/* Flat card overrides */
.card--news {
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	gap: var(--space-6);
}
.card--news .card__media {
	aspect-ratio: 705 / 340;
	border-radius: 0;
}
.card--news .card__body {
	padding: 0;
	gap: var(--space-4);
}

.card--news__pills {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}
/* Figma «Новини» card `date` frame: 32px-tall fully-rounded #212227 pill,
   16px side padding, one uniform run of white 12px e-Ukraine Regular in
   UPPERCASE — "25.06.2026 від teamprojector", no dimming, no tracking. */
.news-byline {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	min-height: 32px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	background: var(--color-text);
	color: var(--color-white);
	font-size: var(--fs-tiny);
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}
.card--news__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
/* Shared pill geometry — category and tag chips differ only in fill. */
.news-cat,
.news-tag {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	border-radius: var(--radius-pill);
	color: var(--color-text);
	font-size: var(--fs-tiny);
	line-height: 1;
	text-transform: uppercase;
	transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
/* Category = filled tint pill (Figma «Новини» card). */
.news-cat {
	padding: 4px 12px;
	background: var(--color-tint);
}
.news-cat:hover {
	background: var(--color-tint-strong);
}
/* Tag = outline "#Tag" pill (Figma «Блог» card). */
.news-tag {
	padding: 3px 8px;
	border: 1px solid var(--color-text);
}
.news-tag:hover {
	background: var(--color-text);
	color: var(--color-white);
}

.card--news .card__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--color-text);
	margin: 0;
}
.card--news .card__excerpt {
	font-size: var(--fs-small);
	font-weight: 300;
	line-height: 1.55;
	color: var(--color-text);
	margin: 0;
}
/* "Читати далі" — three styles, chosen on the News List block. */
.card--news__more--inline {
	white-space: nowrap;
	font-weight: 500;
	color: var(--color-primary);
}
a.card--news__more {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	font-size: var(--fs-small);
	font-weight: 500;
	transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.card--news__more--link {
	color: var(--color-primary);
}
.card--news__more--link:hover {
	text-decoration: underline;
}
.card--news__more--button {
	padding: 10px 22px;
	border: 1px solid var(--color-text);
	border-radius: var(--radius-pill);
	color: var(--color-text);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.card--news__more--button:hover {
	background: var(--color-text);
	color: var(--color-white);
}

@media (max-width: 768px) {
	.news-list__row {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}
	.news-list__rule {
		width: auto;
		max-width: none;
		margin-inline: 0;
	}
	.news-list__rows .news-list__rule {
		margin-block: var(--space-6);
	}
	.card--news {
		gap: var(--space-4);
	}
}

/* ----------------------------- Feature Cards ---------------------------------
   Two densities of the same Figma component, switched by card count via the
   `data-count` attribute the block sets on .feature-card-grid:
   - 3-4 cards ("Просвіта"): flat image + caption, no card chrome, plain
     page background.
   - 1-2 cards ("Правозахист і підтримка"): larger image, title, body text,
     numbered list, an optional pill button, and the block adds the shared
     `.section--tint` (#e3ebfe) class to its own wrapper for this density.
-------------------------------------------------------------------------- */
.feature-cards {
	padding-block: var(--space-9);
}

.feature-cards .section-head {
	margin-bottom: 40px; /* Figma: 40px gap here vs. the shared .section-head's 32px */
}

.feature-cards__eyebrow {
	/* Figma: title comes first, eyebrow below it — the 16px gap between them
	   is the h2's own default bottom margin (see the global heading reset),
	   so the eyebrow itself doesn't need one. */
	display: block;
	font-family: var(--font-mono);
	font-weight: 400; /* Figma: Geist Mono Regular — body's default 300 is too light here */
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--color-text);
}

.feature-card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
.feature-card-grid[data-count="1"] {
	grid-template-columns: 1fr;
}
.feature-card-grid[data-count="2"] {
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

.feature-card {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.feature-card__media {
	aspect-ratio: 338 / 200;
	overflow: hidden;
}
.feature-card-grid[data-count="1"] .feature-card__media,
.feature-card-grid[data-count="2"] .feature-card__media {
	aspect-ratio: 700 / 270;
}
.feature-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.feature-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.feature-card__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-body-lg);
	line-height: 1.3;
	color: var(--color-text);
	margin: 0;
}
.feature-card-grid[data-count="1"] .feature-card__title,
.feature-card-grid[data-count="2"] .feature-card__title {
	font-size: 1.25rem;
}

.feature-card__text {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--fs-body);
	line-height: 1.3;
	color: var(--color-text);
	margin: 0;
}

.feature-card__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}
.feature-card__list-item {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.feature-card__list-num {
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-weight: 300;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--color-text);
}
.feature-card__list-text {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: var(--fs-body);
	line-height: 1.3;
	color: var(--color-text);
}

.feature-card__cta {
	margin-top: 8px; /* combines with the 32px flex gap above it to reach Figma's 40px */
}
.feature-cards .btn--outline-dark {
	border-color: var(--color-primary);
}

@media (max-width: 1024px) {
	.feature-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.feature-card-grid[data-count="1"] {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	/* [data-count="1"]/[data-count="2"] are included explicitly: those
	   attribute selectors have higher specificity than the plain
	   .feature-card-grid above, so without repeating them here the 2-card
	   density's own desktop rule (repeat(2, 1fr), 40px gap) would keep
	   winning below 768px and the grid would never collapse to one column. */
	.feature-card-grid,
	.feature-card-grid[data-count="1"],
	.feature-card-grid[data-count="2"] {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
	.feature-cards__eyebrow {
		font-size: 1.125rem;
	}
	.feature-cards .section-head {
		margin-bottom: var(--space-5);
	}
}

@media (max-width: 480px) {
	/* Figma "mobile" page, 428px-wide frames ("просвіта" / "правозахист і
	   підтримка" sections on Home). Below this, phone layouts were inheriting
	   the 768px tablet values verbatim; these read directly off the mobile
	   frames' own layer inspector (Position/Layout/Typography panels) rather
	   than the tablet ones. */

	/* Title-to-eyebrow gap tightens from the h2's default 16px bottom
	   margin (desktop/tablet) to 8px on both densities. */
	.feature-cards .section-title {
		margin-bottom: var(--space-2);
	}

	/* Image-to-caption/body gap: 24px on both densities (desktop is 32px).
	   The rich density's body-to-button gap stays 40px via the cta's own
	   margin-top, same trick the desktop rule already uses. */
	.feature-card {
		gap: 24px;
	}
	.feature-card__cta {
		margin-top: 16px; /* 24px gap above + 16px margin = Figma's 40px */
	}

	/* Image aspect ratio flattens on phones instead of scaling proportionally
	   with the narrower card width. */
	.feature-card__media {
		aspect-ratio: 396 / 200; /* was 338 / 200 */
	}
	.feature-card-grid[data-count="1"] .feature-card__media,
	.feature-card-grid[data-count="2"] .feature-card__media {
		aspect-ratio: 396 / 160; /* was 700 / 270 */
	}

	/* Simple-density caption drops a step; rich-density title drops to what
	   the caption uses at desktop. */
	.feature-card__title {
		font-size: var(--fs-body); /* 16px, was --fs-body-lg (18px) */
	}
	.feature-card-grid[data-count="1"] .feature-card__title,
	.feature-card-grid[data-count="2"] .feature-card__title {
		font-size: var(--fs-body-lg); /* 18px, was 1.25rem (20px) */
	}

	/* Rich density's pill button shrinks: 48px tall, 24px horizontal
	   padding, 14px/regular label (desktop: 60px / 32px / 16px / medium). */
	.feature-cards .btn--outline-dark {
		height: var(--space-7);
		padding-inline: var(--space-5);
		font-size: var(--fs-small);
		font-weight: 400;
	}
}

/* --------------------------------- Footer ------------------------------------ */
.site-footer {
	background: var(--color-white);
}

.footer-help {
	padding-block: var(--space-9);
}

.footer-columns {
	padding-block: var(--space-8);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

.footer-col__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-body);
	margin-bottom: var(--space-4);
}

.footer-col ul li {
	margin-bottom: var(--space-2);
}
.footer-col ul a {
	color: var(--color-text-soft);
	font-size: var(--fs-small);
}
.footer-col ul a:hover {
	color: var(--color-primary);
}

.footer-col--contact address {
	font-style: normal;
	font-size: var(--fs-small);
	color: var(--color-text-soft);
}

.footer-col--contact p {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}
.footer-col--contact .icon {
	width: 16px;
	height: 16px;
	flex: none;
	margin-top: 2px;
	color: var(--color-primary);
}

.footer-social {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.footer-social .social-link {
	background: rgba(33, 34, 39, 0.06);
	color: var(--color-text);
}
.footer-social .social-link:hover {
	background: var(--color-primary);
	color: var(--color-white);
}

.footer-bottom {
	border-top: 1px solid rgba(33, 34, 39, 0.1);
	padding-block: var(--space-5);
	font-size: var(--fs-tiny);
	color: var(--color-text-faint);
}

.back-to-top {
	position: fixed;
	right: var(--space-5);
	bottom: var(--space-5);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
	z-index: 40;
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.back-to-top .icon {
	width: 18px;
	height: 18px;
	transform: rotate(-90deg);
}

/* ------------------------------ Page templates -------------------------------- */
.page-hero {
	padding-block: var(--space-8) var(--space-6);
}

.page-hero__title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-3);
}

.page-hero__text {
	max-width: 720px;
	color: var(--color-text-soft);
	font-size: var(--fs-body-lg);
}

/* Templates that drop the breadcrumb trail into a bare .container (FAQ, Team,
   Partners) have no section padding above it, so it sits flush under the
   header — give it a top gap. .page-hero / .article already pad their top,
   so the trail is reset back to flush inside those. */
.breadcrumbs {
	margin-top: var(--space-6);
}
.page-hero .breadcrumbs,
.article .breadcrumbs {
	margin-top: 0;
}
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	font-size: var(--fs-tiny);
	color: var(--color-text-faint);
	margin-bottom: var(--space-4);
}
.breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: var(--space-2);
}
.breadcrumbs a:hover {
	color: var(--color-primary);
}

/* Article / long-form content */
.article {
	padding-block: var(--space-8);
}

/* Figma «Article pages» header: title, then a `date+tag` block (gap 8) —
   the same black byline pill as the cards, then a row of outline #Tag
   chips (.news-tag, shared with the Blog cards). */
.article__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}
.article__header .page-hero__title {
	margin-bottom: 0;
}
.article__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}
.article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* Prev/next article nav — Figma «pagination» frame: a hairline-framed row,
   prev pushed to the left edge, next to the right. */
.article__nav {
	margin-top: var(--space-8);
	padding-block: var(--space-5);
	border-top: 1px solid var(--color-surface-100);
	border-bottom: 1px solid var(--color-surface-100);
	display: flex;
	gap: var(--space-5);
}
.article__nav a {
	display: inline-flex;
	gap: 0.4em;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--color-text);
}
.article__nav a:hover {
	color: var(--color-primary);
}
.article__nav-prev {
	margin-right: auto;
}
.article__nav-next {
	margin-left: auto;
	text-align: right;
}

.article__cover {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--space-6);
	aspect-ratio: 16/8;
}
.article__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Figma «Article pages»: the body `text` groups are the full 1440 content
   width — same left/right edges as the title, not a narrow centred column.
   Paragraphs are 16px e-Ukraine Light.

   This block is ALSO the style-of-record for the prose-level stock core/*
   blocks the legacy imported pages (default page.php → .article__body) are
   built from — the theme ships no other wp-block-* CSS. Layout/interactive
   core blocks (columns, buttons, separator, latest-posts, embed, gallery,
   group, details) are in the "Core (default WordPress) …" section just
   below. Editor-side mirror of both: assets/css/editor.css. */
.article__body {
	font-size: var(--fs-body);
}
.article__body > *:first-child {
	margin-top: 0;
}
/* WP peppers imported content with empty spacer <p></p> — don't let each
   one add a blank line's worth of gap. */
.article__body p:empty {
	display: none;
}
.article__body p,
.article__body li {
	font-weight: 300;
	line-height: 1.55;
}
.article__body p {
	font-size: var(--fs-body);
}

/* Headings — all six levels. Imported content uses h2–h4 (and the odd
   stray in-content h1, which we down-map since the template already
   prints the page <h1>). */
.article__body :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-head);
	font-weight: 500;
	scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.article__body h1,
.article__body h2 {
	font-size: var(--fs-h2);
	margin-top: var(--space-7);
}
.article__body h3 {
	font-size: var(--fs-h3);
	margin-top: var(--space-6);
}
.article__body h4 {
	font-size: var(--fs-h4);
	margin-top: var(--space-6);
}
.article__body h5 {
	font-size: var(--fs-body-lg);
	margin-top: var(--space-5);
}
.article__body h6 {
	font-size: var(--fs-body);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-soft);
	margin-top: var(--space-5);
}

/* Lists (core/list — both the legacy flat <ul> and the v2 markup that
   wraps each <li> in a list-item block). */
.article__body ul,
.article__body ol {
	margin: 0 0 var(--space-4);
	padding-left: 1.5em;
}
.article__body ul {
	list-style: disc;
}
.article__body ol {
	list-style: decimal;
}
.article__body li + li {
	margin-top: var(--space-2);
}
.article__body li > ul,
.article__body li > ol {
	margin: var(--space-2) 0 0;
}

/* Text alignment + inline size utilities emitted by core blocks */
.article__body .has-text-align-left {
	text-align: left;
}
.article__body .has-text-align-center {
	text-align: center;
}
.article__body .has-text-align-right {
	text-align: right;
}
.article__body .has-small-font-size {
	font-size: var(--fs-small);
}
.article__body .has-medium-font-size {
	font-size: var(--fs-body);
}
.article__body .has-large-font-size {
	font-size: var(--fs-body-lg);
}
.article__body .has-x-large-font-size {
	font-size: var(--fs-h3);
}
.article__body .has-drop-cap::first-letter {
	float: left;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 3.1em;
	line-height: 0.86;
	margin: 0.06em 0.12em 0 0;
	color: var(--color-primary);
}

/* Images / figures (core/image + raw <figure>). Base radius + block
   margin; refined for figures, captions, sizes and floats. */
.article__body img {
	border-radius: var(--radius-md);
	margin-block: var(--space-5);
}
.article__body figure {
	margin: var(--space-6) 0;
}
.article__body figure img {
	margin-block: 0;
}
/* Let images render at their natural size, capped at the column (reset
   already sets max-width:100%). Don't force width:100% — imported content
   is full of small inline logos with an explicit width the author chose. */
.article__body .wp-block-image {
	margin: var(--space-6) 0;
}
.article__body .wp-block-image img {
	height: auto;
}
.article__body .wp-block-image.is-style-rounded img {
	border-radius: var(--radius-lg);
}
.article__body figcaption,
.article__body .wp-element-caption {
	margin-top: var(--space-2);
	font-size: var(--fs-small);
	color: var(--color-text-soft);
	text-align: center;
}
/* Floated / centred media (core alignleft / alignright / aligncenter) */
.article__body .alignleft {
	float: left;
	margin: var(--space-2) var(--space-5) var(--space-4) 0;
}
.article__body .alignright {
	float: right;
	margin: var(--space-2) 0 var(--space-4) var(--space-5);
}
.article__body .aligncenter {
	margin-inline: auto;
	text-align: center;
}
.article__body figure.aligncenter,
.article__body .wp-block-image.aligncenter {
	display: block;
}

/* Blockquote / core quote + pullquote */
.article__body blockquote,
.article__body .wp-block-quote {
	border-left: 3px solid var(--color-primary);
	margin: var(--space-6) 0;
	padding-left: var(--space-5);
	font-style: italic;
	color: var(--color-text-soft);
}
.article__body cite,
.article__body .wp-block-quote cite,
.article__body .wp-block-quote__citation {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--fs-small);
	font-style: normal;
	color: var(--color-text-faint);
}
.article__body .wp-block-pullquote {
	border: 0;
	border-block: 2px solid var(--color-text);
	padding: var(--space-6) 0;
	margin: var(--space-7) 0;
	text-align: center;
}
.article__body .wp-block-pullquote blockquote {
	border: 0;
	margin: 0;
	padding: 0;
	font-style: normal;
	color: var(--color-text);
}
.article__body .wp-block-pullquote p {
	font-size: var(--fs-h4);
}

/* Inline code / preformatted / core code block */
.article__body :not(pre) > code,
.article__body kbd {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-surface-100);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
}
.article__body pre,
.article__body .wp-block-code,
.article__body .wp-block-preformatted {
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	background: var(--color-surface-100);
	padding: var(--space-5);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin: var(--space-6) 0;
}

/* Tables (core/table + raw <table> from imported page-builder HTML) */
.article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space-6) 0;
	font-size: var(--fs-small);
}
.article__body :is(th, td) {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-surface-200);
	text-align: left;
	vertical-align: top;
}
.article__body thead th {
	background: var(--color-surface-100);
	font-weight: 500;
}

.article__body a:not(.btn):not(.wp-block-button__link) {
	color: var(--color-primary);
	text-decoration: underline;
}
.article__body a:not(.btn):not(.wp-block-button__link):hover {
	text-decoration: none;
}

.article__gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	max-width: 780px;
	margin: var(--space-6) auto 0;
}
.article__gallery img {
	border-radius: var(--radius-md);
	aspect-ratio: 4/3;
	object-fit: cover;
}

.article__share {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-surface-200);
}

/* ======================================================================
   Core (default WordPress) layout & component blocks
   ----------------------------------------------------------------------
   Used by the 54 legacy imported pages (default page.php → .article__body)
   — see design-backup/CORE-BLOCKS.md. Prose-level core blocks (paragraph,
   heading, list, image, quote, table, code) are handled in the
   .article__body block above; this section is the layout/interactive set.
   Everything is scoped under .article__body so it beats core's
   wp-block-library-theme opinionated styles on specificity without
   !important. Editor mirror: assets/css/editor.css.
   ====================================================================== */

/* -- Wide / full alignment ------------------------------------------------
   .article__body has no content max-width of its own (it fills .container),
   so `wide` just reclaims the gutter, clamped so it can never trigger
   horizontal scroll; `full` is an edge-to-edge breakout (same technique as
   .news-list__rule). */
.article__body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
.article__body .alignwide {
	margin-inline: calc(-1 * clamp(0px, 50vw - 50%, 7rem));
}
.article__body .alignfull > img,
.article__body .alignfull .wp-block-image img {
	border-radius: 0;
}
.article__body .alignfull
	> :where(p, h1, h2, h3, h4, h5, h6, ul, ol, .wp-block-buttons) {
	padding-inline: var(--container-pad);
}

/* -- core/columns + core/column ---------------------------------------- */
.article__body .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin: var(--space-6) 0;
	align-items: flex-start;
}
.article__body .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
	word-break: break-word;
}
.article__body .wp-block-column[style*="flex-basis"] {
	flex-grow: 0;
}
.article__body .wp-block-column > :first-child {
	margin-top: 0;
}
.article__body .wp-block-columns.are-vertically-aligned-center {
	align-items: center;
}
.article__body .wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end;
}
.article__body .wp-block-column.is-vertically-aligned-center {
	align-self: center;
}
.article__body .wp-block-column.is-vertically-aligned-bottom {
	align-self: flex-end;
}
/* Stack breakpoint matches WordPress core's own column CSS (781px) so
   there's no mismatched window between our layout and core's. */
@media (max-width: 781px) {
	.article__body .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column;
	}
	.article__body
		.wp-block-columns:not(.is-not-stacked-on-mobile)
		> .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* -- core/buttons + core/button -------------------------------------------
   Restyled to the Figma pill — same shape/tokens as the theme's own .btn
   (see the Buttons section) and the prozhektor/button block, so a core
   button dropped into legacy content is indistinguishable.

   !important on shape + colour is deliberate: the imported content's
   buttons carry inline `border-radius` / `background-color` from the old
   page-builder (e.g. `style="border-radius:3px;background-color:#374855"`),
   and the Figma has exactly one button style. A button that genuinely
   needs a different colour should get a modifier class, not an inline
   style. (Alternative if this ever bites: strip the inline style in a
   `render_block` filter — see design-backup/CORE-BLOCKS.md.) */
.article__body .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: var(--space-5) 0;
	padding: 0;
	list-style: none;
}
.article__body .wp-block-buttons.is-content-justification-center {
	justify-content: center;
}
.article__body .wp-block-buttons.is-content-justification-right {
	justify-content: flex-end;
}
.article__body .wp-block-buttons.is-vertical {
	flex-direction: column;
	align-items: flex-start;
}
.article__body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 60px;
	padding: 0 32px;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-body);
	line-height: 1.2;
	text-decoration: none;
	background: var(--color-primary) !important;
	color: var(--color-white) !important;
	transition: background var(--duration) var(--ease),
		color var(--duration) var(--ease),
		border-color var(--duration) var(--ease);
}
.article__body .wp-block-button__link:hover {
	background: var(--color-primary-hover) !important;
}
.article__body .wp-block-button.is-style-outline .wp-block-button__link,
.article__body .wp-block-button__link.is-style-outline {
	background: transparent !important;
	border: 1px solid var(--color-text-faint);
	color: var(--color-text) !important;
}
.article__body
	.wp-block-button.is-style-outline
	.wp-block-button__link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary) !important;
}
.article__body .wp-block-button__link.has-small-font-size {
	min-height: 44px;
	padding-inline: 22px;
	font-size: var(--fs-small);
}
.article__body .wp-block-button.wp-block-button__width-100 {
	flex: 1 1 100%;
}
.article__body
	.wp-block-button.wp-block-button__width-100
	.wp-block-button__link {
	width: 100%;
	justify-content: center;
}

/* -- core/separator -----------------------------------------------------
   The full-bleed hairline is .news-list__rule; this is the in-flow one. */
.article__body .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--color-surface-200);
	height: 0;
	width: 100%;
	max-width: none;
	margin: var(--space-7) 0;
	opacity: 1;
}
.article__body .wp-block-separator.is-style-dots {
	border: 0;
	height: auto;
	text-align: center;
	line-height: 1;
}
.article__body .wp-block-separator.is-style-dots::before {
	content: "···";
	padding-left: 0.5em;
	font-size: 1.5rem;
	letter-spacing: 0.5em;
	color: var(--color-text-faint);
}

/* -- core/latest-posts -------------------------------------------------
   The legacy stand-in for the prozhektor/post-grid block. List mode = a
   hairline-ruled link list; grid mode echoes the panel card
   (template-parts/card-post.php) without swapping the markup. */
.article__body .wp-block-latest-posts {
	margin: var(--space-6) 0;
	padding: 0;
	list-style: none;
}
/* Block config that resolves to no posts (common on the trimmed local
   import) renders a bare empty <ul> — don't leave its margin behind. */
.article__body .wp-block-latest-posts:empty {
	display: none;
	margin: 0;
}
.article__body .wp-block-latest-posts:not(.is-grid) > li {
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--color-surface-200);
}
.article__body .wp-block-latest-posts:not(.is-grid) > li:first-child {
	padding-top: 0;
}
.article__body .wp-block-latest-posts > li > a {
	font-family: var(--font-head);
	font-size: var(--fs-body-lg);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
}
.article__body .wp-block-latest-posts > li > a:hover {
	color: var(--color-primary);
}
.article__body .wp-block-latest-posts__post-date {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--fs-small);
	color: var(--color-text-faint);
}
.article__body .wp-block-latest-posts__post-excerpt,
.article__body .wp-block-latest-posts__post-full-content {
	margin-top: var(--space-2);
	font-weight: 300;
	font-size: var(--fs-body);
}
.article__body .wp-block-latest-posts.is-grid {
	display: grid;
	grid-template-columns: repeat(var(--lp-cols, 2), minmax(0, 1fr));
	gap: var(--space-5);
}
.article__body .wp-block-latest-posts.is-grid.columns-3 {
	--lp-cols: 3;
}
.article__body .wp-block-latest-posts.is-grid.columns-4 {
	--lp-cols: 4;
}
.article__body .wp-block-latest-posts.is-grid > li {
	margin: 0;
	padding: var(--space-5);
	background: var(--color-white);
	border: 0;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}
.article__body .wp-block-latest-posts__featured-image img {
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-3);
}
@media (max-width: 781px) {
	.article__body .wp-block-latest-posts.is-grid {
		grid-template-columns: 1fr;
	}
}

/* -- core/embed ------------------------------------------------------- */
.article__body .wp-block-embed {
	margin: var(--space-6) 0;
}
.article__body .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper,
.article__body .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}
.article__body .wp-block-embed.wp-has-aspect-ratio iframe,
.article__body .wp-block-embed.is-type-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--radius-md);
}
.article__body .wp-block-embed figcaption {
	text-align: center;
}

/* -- core/gallery ---------------------------------------------------
   Core's wp-block-library already lays the gallery out (flex rows,
   columns-N, is-cropped equal-height). Only retint it: our gap token,
   image radius, block margin, caption. */
.article__body .wp-block-gallery {
	gap: var(--space-3);
	margin: var(--space-6) 0;
}
.article__body .wp-block-gallery .wp-block-image {
	margin: 0;
}
.article__body .wp-block-gallery .wp-block-image img {
	border-radius: var(--radius-sm);
}
.article__body .wp-block-gallery figcaption {
	text-align: center;
}

/* -- core/group ---------------------------------------------------- */
.article__body .wp-block-group {
	margin: var(--space-6) 0;
}
.article__body .wp-block-group.has-background {
	padding: var(--space-6);
	border-radius: var(--radius-md);
}
.article__body .wp-block-group > :first-child {
	margin-top: 0;
}

/* -- core/details ------------------------------------------------
   Visually echoes the FAQ accordion; native <details>, no JS. */
.article__body .wp-block-details {
	margin: var(--space-5) 0;
	padding: 0 var(--space-5);
	border: 1px solid var(--color-surface-200);
	border-radius: var(--radius-md);
}
.article__body .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	font-weight: 500;
	list-style: none;
	cursor: pointer;
}
.article__body .wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.article__body .wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-size: 1.4em;
	line-height: 1;
	color: var(--color-primary);
}
.article__body .wp-block-details[open] > summary::after {
	content: "\2013";
}
.article__body .wp-block-details > :not(summary) {
	margin: 0 0 var(--space-4);
}

/* -- Contact Form 7 output (core/shortcode + the CF7 block) -------------
   Align with the Feedback Form block; scoped tight to .wpcf7 so other
   plugin output isn't disturbed. Base field styling is in the Forms
   section (.wpcf7-form-control). */
.article__body .wpcf7 {
	margin: var(--space-6) 0;
}
.article__body .wpcf7-form p {
	margin-bottom: var(--space-4);
}
.article__body .wpcf7 label {
	display: block;
	margin-bottom: var(--space-2);
	font-size: var(--fs-small);
	color: var(--color-text-soft);
}
.article__body .wpcf7 input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	padding: 0 32px;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 500;
	font-size: var(--fs-body);
}
.article__body .wpcf7 input[type="submit"]:hover {
	background: var(--color-primary-hover);
}
.article__body .wpcf7-not-valid-tip {
	font-size: var(--fs-small);
	color: var(--color-accent);
}
.article__body .wpcf7-response-output {
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	font-size: var(--fs-small);
}

/* Partner List block (Наші донори та партнери, Figma node 241-380/241-979
   "Our Partners" — donor/partner entries pulled live from the Partners post
   type). Heading/badge/padding are all block attributes rather than a
   hardcoded page-hero (see team-grid-intro/team-badge above, same pattern)
   — add one instance per group, the first carrying the page heading. */
.partners-intro {
	max-width: 900px;
	margin-bottom: var(--space-6);
}

.partners-intro__title {
	font-size: var(--fs-h2);
}
.partners-intro__title em {
	color: var(--color-primary);
	font-style: normal;
}

.partners-badge {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding-inline: var(--space-6);
	margin-bottom: var(--space-6);
	background: var(--color-text);
	color: var(--color-white);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
}

.partners-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-7) var(--space-6);
}

.partner-card {
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-surface-100);
}

/* Featured entries (Figma: OutRight Action International, HEKS/EPER, …)
   span the full grid row, logo beside the text instead of on top of it. */
.partner-card--featured {
	grid-column: 1 / -1;
}
.partner-card--featured .partner-card__inner {
	display: grid;
	grid-template-columns: minmax(220px, 380px) 1fr;
	gap: var(--space-6);
	align-items: center;
}

.partner-card__media {
	aspect-ratio: 2 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5);
	margin-bottom: var(--space-5);
	background: var(--color-surface-200);
	border-radius: var(--radius-sm);
}
.partner-card--featured .partner-card__media {
	margin-bottom: 0;
}
.partner-card__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.partner-card__logo-placeholder {
	font-family: var(--font-head);
	font-size: var(--fs-h4);
	color: var(--color-text-faint);
	text-align: center;
}

.partner-card__title {
	font-family: var(--font-body);
	font-size: 1.25rem; /* 20px, same scale as .team-card__name */
	font-weight: 500;
	line-height: var(--lh-heading);
	margin-bottom: var(--space-3);
}
.partner-card__title a {
	color: inherit;
}
.partner-card__title a:hover {
	color: var(--color-primary);
}

.partner-card__desc {
	color: var(--color-text-soft);
	font-size: var(--fs-small);
	line-height: var(--lh-body);
}
.partner-card__desc :last-child {
	margin-bottom: 0;
}

.partner-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	margin-top: var(--space-5);
}

.partner-card__note {
	color: var(--color-text-soft);
	font-size: var(--fs-small);
	max-width: 60ch;
}
.partner-card__note :last-child {
	margin-bottom: 0;
}
.partner-card__note a {
	color: var(--color-primary);
}
.partner-card__note a:hover {
	color: var(--color-primary-hover);
}

.partner-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-left: auto;
}
/* Figma "btn" component inside the partner card (node 241-1178): 40px
   tall, 32px horizontal padding — its own size, not the shared .btn--sm
   (44px/22px, tuned for stats/cta-banner instead). */
.partner-card__actions .btn {
	height: 40px;
	padding-inline: 32px;
	font-size: var(--fs-small);
}
/* Донори outline pills read as light gray against the base .btn--outline-dark
   border (--color-text-faint, tuned for feature-cards on a light background)
   — Figma's own donor buttons (node 241-859/241-1178) use a --color-primary
   border by default, same override .feature-cards already applies. */
.partner-card__actions .btn--outline-dark {
	border-color: var(--color-primary);
}

/* Contacts page */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.contact-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	height: 40px; /* Figma: fixed 40px pill height, matches .team-badge/.partners-badge */
	padding-inline: var(--space-6);
	background: var(--color-text);
	color: var(--color-white);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
}
.contact-info__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}
.contact-info__label {
	display: block;
	font-size: var(--fs-small);
	color: var(--color-text-soft);
	margin-bottom: var(--space-2);
}
.contact-info__value {
	display: inline-block;
	font-size: var(--fs-body-lg);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
}
.contact-info__messengers {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-3);
}
.contact-info__messengers .icon {
	/* Figma (node 266-486/487/488): all three icon vectors — WhatsApp, Viber,
	   Telegram alike — are filled with Color 2 (#212227), not per-brand
	   colors or the site's primary blue. */
	width: 22px;
	height: 22px;
	color: var(--color-text);
}
.contact-map {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 21/9;
}
.contact-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Figma always shows this band edge-to-edge — unlike Team Grid/CTA Banner's
   optional tint (where the editor's "Full width" align is a deliberate
   per-instance choice), this block only has the one full-bleed look, so it
   shouldn't depend on the author remembering to set alignment. Same
   negative-margin technique as .alignfull, applied unconditionally. */
.contact-form-section-wrap {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.contact-form-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: center;
}
.contact-form-section__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4/3;
}
.contact-form-section__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Figma (node 268-636): heading + subtext sit in their own group, then a
   larger gap down to the first field — read directly off the frame rather
   than the shared .section-title/.page-hero__text spacing, which is tuned
   for other blocks. The title is a single line ("Зворотній зв'язок"), so it
   never wraps even where the column gets tight. */
.contact-form-section__content .section-title {
	margin-bottom: var(--space-6);
	white-space: nowrap;
}
.contact-form-section__text {
	max-width: 720px;
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-text);
	margin-bottom: var(--space-7);
	/* Keep the author's hard break between the question and the CTA, but let
	   the browser even out the question's own wrap instead of a long line
	   followed by a lone "…співпрацю?" — matches the Figma's two-line look. */
	text-wrap: balance;
}

/* Underlined-line inputs, scoped to this form only — the shared .form-input
   (used by searchform.php/single.php's comment form too) stays boxed.
   Label color/typography matches Figma (node 268-648): e-Ukraine Light,
   full-opacity #212227, not --color-text-soft. The row/label spacing itself
   is tightened below the Figma auto-layout gaps (24/40/32px) — a real
   `<input>`'s own line-height + padding already adds height a flat design
   layer doesn't have, so matching those gaps literally reads as too loose
   once rendered. */
.feedback-form .form-row {
	margin-bottom: var(--space-5);
}
.feedback-form .form-row:last-of-type {
	margin-bottom: var(--space-4);
}
.feedback-form .form-label {
	font-size: var(--fs-body);
	font-weight: 300;
	color: var(--color-text);
	margin-bottom: var(--space-3);
}
.feedback-form .form-input {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-text);
	border-radius: 0;
	padding: 0 0 8px;
	font-weight: 400;
	color: var(--color-text);
}
.feedback-form .form-input:focus {
	border-color: var(--color-primary);
}
/* Figma: button stroke is --color-primary (#275cac), not the
   .btn--outline-dark default --color-text-faint border. */
.feedback-form .btn--outline-dark {
	border-color: var(--color-primary);
}
.feedback-form .btn {
	text-transform: uppercase; /* Figma: button text layer has Case = Uppercase */
}
.feedback-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	font-size: var(--fs-small);
	font-weight: 300;
	color: var(--color-text);
	cursor: pointer;
}
/* Figma (node 273-715): 16px square, 1px #212227 border, 4px corner radius
   — custom-drawn since native checkboxes can't match that spec. */
.feedback-form__consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	border: 1px solid var(--color-text);
	border-radius: 4px;
	background: var(--color-white);
	position: relative;
	cursor: pointer;
}
.feedback-form__consent input[type="checkbox"]:checked {
	border-color: var(--color-primary);
	background: var(--color-primary);
}
.feedback-form__consent input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.feedback-form__consent a {
	color: var(--color-primary);
	text-decoration: underline;
}

/* FAQ page */
.faq-intro {
	margin-bottom: var(--space-6);
}
.faq-intro__title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-6);
}
.faq-intro__text {
	color: var(--color-text);
}
.faq-intro__text p:last-child {
	margin-bottom: 0;
}
.faq-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--space-9);
	border-top: 1px solid var(--color-surface-100);
}
.faq-columns--single {
	grid-template-columns: 1fr;
}
.faq-column {
	display: flex;
	flex-direction: column;
}
.faq-item {
	border-bottom: 1px solid var(--color-surface-100);
	padding-block: var(--space-4);
}
.faq-item__question {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	text-align: left;
	font-size: var(--fs-body-lg);
	font-weight: 400;
}
.faq-item__question .icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-surface-200);
	color: var(--color-text);
	transform: rotate(90deg);
	transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.faq-item__question .icon svg {
	width: 20px;
	height: 20px;
}
.faq-item.is-open .faq-item__question .icon {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	transform: rotate(-90deg);
}
.faq-item__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--duration) var(--ease);
	color: var(--color-text);
	font-size: var(--fs-small);
}
.faq-item__answer-inner {
	padding: var(--space-2) calc(40px + var(--space-4)) 0 0;
	text-align: justify;
}
.faq-item.is-open .faq-item__answer {
	max-height: 600px;
}

/* Pagination */
.pagination ul {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-7);
}
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
}
.pagination .current {
	background: var(--color-primary);
	color: var(--color-white);
}
.pagination a:hover {
	background: var(--color-surface-200);
}

/* Comments */
.comment-list,
.comment-list .children {
	margin: 0 0 var(--space-6);
}
.comment-list li {
	list-style: none;
}
.comment-body {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-surface-200);
}
.comment-author .fn {
	font-weight: 500;
	font-style: normal;
}
.comment-meta {
	font-size: var(--fs-tiny);
	color: var(--color-text-faint);
	margin-bottom: var(--space-2);
}
.comment-content p {
	margin-bottom: var(--space-2);
}
.comment-reply-link {
	color: var(--color-primary);
	font-size: var(--fs-small);
}
.comment-respond .comment-form p {
	margin-bottom: var(--space-4);
}

/* WordPress core alignment helpers */
.alignwide {
	max-width: calc(var(--container-max) + 160px);
	margin-inline: auto;
}
.alignfull {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ------------------------------- Responsive ----------------------------------- */
@media (max-width: 1024px) {
	.card-grid,
	.team-grid,
	.team-grid--dense,
	.contact-form-section {
		grid-template-columns: repeat(2, 1fr);
	}
	.footer-columns {
		grid-template-columns: repeat(2, 1fr);
	}
	.faq-columns {
		grid-template-columns: 1fr;
	}
	/* The 128px desktop gap (--space-10) is a 3-up-at-1440 proportion —
	   too wide once the grid drops to 2 columns on tablet. */
	.team-grid {
		gap: var(--space-6);
	}
	/* card-grid--3 (Post Grid block) isn't a CSS grid — see the base rule
	   above — so it needs its own flex-basis instead of the
	   grid-template-columns reset the other grids get. Widen the peeking
	   card so roughly 1.7 cards show per viewport at tablet width. */
	.card-grid--3 .card {
		flex-basis: 58%;
	}
	/* Instagram Grid: no tablet spec in Figma (desktop-only frame) — steps
	   down from 5 to 3 columns here, same progressive-collapse pattern the
	   other grids on this page use. */
	.instagram-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --fs-h1's desktop clamp (3rem + 6.25vw) grows faster than .hero__intro's
   padding-inline clamp (12.5vw) shrinks the text column, so "ПРОЖЕКТОР" — one
   unbreakable word — overflows past the column's right edge anywhere from
   just above the 480px mobile breakpoint up to ~1119px (solved analytically:
   7.115·(48 + 0.0625X) = 0.75X → X ≈ 1118.7; confirmed empirically via
   scrollWidth vs. clientWidth on the live title: 194px overflow at 481px,
   107px at 768px, 29px at 1024px, 0px at 1120px). That crossover doesn't
   land on the theme's standard 1024px tablet breakpoint, so this gets its
   own dedicated one rather than stretching the 1024px block (which other
   selectors above rely on staying exactly at 1024px). Tying font-size to the
   column's own width instead of raw vw — the same fix already applied at
   ≤480px — keeps it proportional to the space it actually has. The 7.115
   divisor is the word-width ÷ font-size ratio, measured empirically off the
   live title at three viewport widths (all agreeing to 3 sig figs). */
@media (max-width: 1120px) {
	.hero__title {
		font-size: clamp(2.75rem, calc((100vw - 2 * clamp(20px, 12.5vw, 240px)) / 7.115), 7rem);
	}
}

/* Below ~900px the panel is too narrow for the two side-by-side link
   columns, so the submenu drops back to a static indented list under its
   parent (still always visible — no accordion). */
@media (max-width: 900px) {
	.mega-menu__submenu {
		position: static;
		margin-top: var(--space-4);
		padding-left: var(--space-4);
		border-left: 2px solid var(--color-tint-strong);
		gap: var(--space-3);
	}
}

@media (max-width: 768px) {
	:root {
		--header-height: 64px;
	}
	.utility-bar__phone,
	.utility-bar__lang {
		display: none;
	}
	.utility-bar__social {
		margin-left: 0;
	}
	.card-grid,
	.team-grid,
	.team-grid--dense,
	.grid--2,
	.grid--3,
	.grid--4,
	.contact-form-section,
	.footer-columns,
	.partners-grid {
		grid-template-columns: 1fr;
	}
	.instagram-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	/* Every entry stacks single-column below 768px, including "featured"
	   ones — Figma "mobile" page (node 472-6473 "Our Partners") has the
	   logo full-width on top for every card, compact or featured alike. */
	.partner-card--featured .partner-card__inner {
		grid-template-columns: 1fr;
	}
	.partner-card__footer {
		align-items: stretch;
	}
	.partner-card__actions {
		margin-left: 0;
	}
	/* Same reasoning as the 1024px breakpoint above: card-grid--3 is a flex
	   row, not a grid, so it gets its own mobile card width — most of one
	   card per screen with a small peek of the next. */
	.card-grid--3 .card {
		flex-basis: 88%;
	}
	.section-head {
		align-items: flex-start;
	}
	.mega-menu {
		width: 100vw;
	}
	.mega-menu__panel {
		gap: var(--space-6);
		padding: var(--space-6) var(--space-5);
	}
	.mega-menu__close {
		left: var(--space-5);
	}
	.mega-menu__list {
		gap: var(--space-4);
	}
	.mega-menu__logo .logo img,
	.mega-menu__logo .logo__mark {
		height: 88px;
	}
	.stats__cta {
		width: 100%;
	}
	.cta-banner__art,
	.cta-banner__watermark {
		/* Hand illustration + wordmark are calibrated to the desktop 240px
		   inset; below 1024px the text column no longer leaves them room
		   without overlapping, so they drop out rather than get squeezed. */
		display: none;
	}
	.contact-form-section {
		gap: var(--space-5);
	}
	.contact-map {
		aspect-ratio: 4/3;
	}
	.article__gallery {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.utility-bar__row {
		gap: var(--space-3);
	}
	.utility-bar__social {
		display: none;
	}
	.utility-bar__donate .btn {
		padding-inline: 16px;
		font-size: var(--fs-tiny);
	}
	/* Figma "mobile" page, Home frame, hero section (428px-wide frame). The
	   hero frame sits at Y 120 below the 80px header — a 40px gap the base
	   rules don't carry — and its "text" group only carries a flat 16px side
	   inset (vs. the desktop clamp's ~47-53px at this width), a 24px title-
	   to-paragraph gap (vs. the desktop-derived 28px), a 16px paragraph size
	   (vs. --fs-body-lg's 18px), and a 40px gap to the photo (the intro's own
	   24px bottom padding plus the paragraph <p>'s inherited 16px margin).
	   The photo itself crops to 428x350 here, nowhere near the desktop
	   192:55 aspect ratio. */
	.hero {
		padding-top: 40px;
	}
	.hero__intro {
		padding-inline: 16px;
		padding-block: 0 1.5rem;
	}
	.hero__title {
		/* The old clamp(2.25rem, 2rem + 6vw, 3.5rem) was tuned against full
		   viewport width, not the 16px-inset column above — "ПРОЖЕКТОР" is one
		   unbreakable word, and at narrow phone widths (< ~400px) that clamp
		   renders wider than the column and overflows past the viewport edge.
		   Tying the size to the column's own width (100vw - 32px for the two
		   16px insets) instead keeps it proportional to the space it actually
		   has, matching the tight, no-slack fit of the Figma frame (56px text
		   in a 396px column at the 428px reference width — ratio ~0.14). Floor/
		   ceiling unchanged from the old clamp. */
		font-size: clamp(2.25rem, calc((100vw - 32px) * 0.14), 3.5rem);
		margin-bottom: 1.5rem;
	}
	.hero__text {
		font-size: 1rem;
	}
	.hero__media {
		aspect-ratio: 428 / 350;
	}
	/* Figma "mobile" page, Home frame, stats section (428px-wide frame). The
	   "numbers" frame sits at Y 760.95, flush against the hero frame's own
	   bottom edge (Y 120 + H 640.95) — zero gap, so the base --space-7 (48px)
	   top padding that pads every breakpoint doesn't belong here. Within the
	   stack: 32px between each stat (vs. the base --space-5/24px .stats__row
	   gap), an 8px number-to-label gap (vs. --space-4/16px), and a 40px gap
	   before the button (32px carried by the row gap + 8px more on the CTA).
	   The number itself is a flat 80px (Geist Medium) rather than continuing
	   --fs-stat's vw-based clamp (~33px at this width) down to phone size,
	   the label drops to 16px/--fs-body (vs. --fs-body-lg's 18px) and its
	   248px desktop max-width, which would wrap it early. The donate button
	   is Hug-width (not the 768px breakpoint's 100%), 48px tall with 24px
	   horizontal padding and 14px/--fs-small text, vs. the base .btn's
	   60px/32px/16px. */
	.stats {
		padding-top: 0;
	}
	.stats__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-6);
	}
	.stat__value {
		font-size: 5rem;
		margin-bottom: var(--space-2);
	}
	.stat__label {
		max-width: none;
		font-size: var(--fs-body);
	}
	.stats__cta {
		width: auto;
		margin-top: var(--space-2);
	}
	.stats__cta .btn {
		height: var(--space-7);
		padding-inline: var(--space-5);
		font-size: var(--fs-small);
	}
	/* Partner List. Figma "mobile" page, "Our Partners" frame (node 472-6473,
	   428px reference) — every entry's CTA button(s) go full-width here,
	   vs. the desktop Hug-width pills.

	   Overflow bug root cause: the base .btn rule sets white-space: nowrap,
	   so a long label (e.g. "Когорта"/"ЛІГА"'s "УГОДА ПРО СПІВРОБІТНИЦТВО ТА
	   ОРГАНІЗАЦІЮ ВЗАЄМОВІДНОСИН") locks the pill to its full unwrapped
	   min-content width — and since a flex item's default min-width is auto
	   (= its content size), `flex: 1 1 auto` alone can't shrink it back
	   down, so it blows out .partners-grid and the whole page scrolls
	   horizontally. Figma's own mobile frame (node 481-7361, the "Інститут
	   політичної інформації" card) shows the fix: long labels wrap onto a
	   second line inside the same full-width pill instead of overflowing —
	   text flush left, arrow pinned flush right via margin-left: auto
	   rather than justify-content: center (which would leave an odd gap
	   down the middle once the label wraps). */
	.partner-card__actions {
		width: 100%;
	}
	.partner-card__actions .btn {
		flex: 1 1 auto;
		justify-content: flex-start;
		min-width: 0;
		height: auto;
		min-height: 40px;
		padding-block: var(--space-2);
		white-space: normal;
		text-align: left;
	}
	.partner-card__actions .btn .icon {
		flex-shrink: 0;
		margin-left: auto;
	}

	/* Link Card Row ("Просвіта" pills). Figma "mobile" page, Home frame,
	   "інфо для спільнот" section (428px-wide frame — the row's own desktop
	   reference width). The title grows to a flat 40px/120% (vs. --fs-h2's
	   fluid clamp, which only measures ~32px at this width) and the title-
	   to-pills gap widens to 40px (vs. the shared .section-head's 32px
	   margin-bottom). The "links" group stacks the three pills in a single
	   Hug-width column with the same 8px gap as desktop's row, instead of
	   wrapping them horizontally.

	   Overflow bug root cause: .link-card forces white-space: nowrap on its
	   label, so the pill's min-content width locks to the label's full
	   unwrapped text width regardless of layout direction. The "Актуально
	   для трансспільноти" pill measures ~373px unwrapped — that's Figma's
	   own Hug width at the 428px reference frame (396px column), so it fits
	   there, but a real 375px-wide phone (iPhone SE et al.) only has ~335px
	   of column left after the shared .container's 20px insets, so the pill
	   overflowed the document's scrollWidth past the viewport by ~18px.
	   Letting the label wrap — and swapping the pill's fixed 40px height for
	   a min-height so a wrapped 2-line label can grow it instead of being
	   clipped — fixes that for any phone narrower than the Figma reference
	   without changing how the single-line pills already render. */
	.wp-block-prozhektor-link-card-row .section-title {
		font-size: 2.5rem; /* 40px flat, Figma mobile has no fluid clamp here */
	}
	.wp-block-prozhektor-link-card-row .section-head {
		margin-bottom: 40px;
	}
	.link-card-row {
		flex-direction: column;
		align-items: flex-start; /* Hug-width pills, left-aligned — not stretched to fill the row */
	}
	.link-card {
		max-width: 100%;
		height: auto;
		min-height: 40px;
		white-space: normal; /* overflow fix: allow the label to wrap instead of forcing the pill wider than the viewport */
	}

	/* Team Grid founders cards (.team-grid — see the "Team preview grid" comment
	   above; .team-grid--dense/the /nasha-komanda/ page is out of scope for this
	   pass). Figma "mobile" page, Home frame, "наша команда" section (428px-wide
	   frame, X 16/W 396, matching the reference width already used elsewhere in
	   this block). Checked against all three founder cards: the single-column
	   stacking gap (32px), the 338×338 1:1 photo crop, and the internal
	   photo→name (32px)/name→role (8px)/role→bio (32px) spacing are all already
	   correct as inherited from desktop — Figma's mobile frame doesn't specify
	   anything different for those. The one real change is the founder name,
	   which drops to 18px Medium here (vs. desktop's 20px); role/bio stay flat
	   14px Light at 130% line-height, same as --fs-small already in use. */
	.team-card__name {
		font-size: 1.125rem; /* Figma mobile: 18px Medium (desktop is 1.25rem/20px) */
	}

	/* Post Grid "Важливі новини" 3-up carousel (.card-grid--3 — see the base
	   rule and its comment near the top of the file). Figma "mobile" page,
	   Home frame, "Важливі новини" section (428px-wide frame, X 16/W 396,
	   same reference column used throughout this block). The "conteiner" row
	   is still an overflowing auto-layout row in the Figma frame (1236px wide,
	   holding all 3 cards) — same carousel mechanism as desktop/tablet — but
	   each card itself is Hug-width at exactly 396px, i.e. the full column
	   width with no partial peek of the next card (unlike the 58%/88%
	   treatments at 1024px/768px). Card-internal spacing tightens too: 24px
	   image-to-text gap (vs. the base 32px), an 8px date-to-title gap (vs.
	   16px), a 396x160 image crop (2.475:1, vs. the base 70:27/~2.593:1), a
	   14px/--fs-small date (vs. --fs-body's 16px), and a 16px/--fs-body title
	   (vs. the base 1.25rem/20px). The row's own card-to-card gap narrows to
	   24px (vs. the base 30px). The dots indicator (24px gap, 40px margin-top,
	   6x6 dots) already matches this frame exactly as inherited from the base
	   rule, so it's left untouched. */
	.card-grid--3 {
		gap: 24px;
	}
	.card-grid--3 .card {
		flex-basis: 100%;
		gap: 24px;
	}
	.card-grid--3 .card__media {
		aspect-ratio: 396 / 160;
	}
	.card-grid--3 .card__body {
		gap: 8px;
	}
	.card-grid--3 .post-meta {
		font-size: var(--fs-small);
	}
	.card-grid--3 .card__title {
		font-size: var(--fs-body);
	}

	/* CTA banner ("Не залишайтеся з проблемою наодинці"). Figma "mobile" page,
	   Home frame, CTA banner section (428px-wide frame, matching the
	   reference column used throughout this block). The section's own
	   clamp()-based inline/block padding — tuned to the 1920px desktop
	   reference and sharing .hero__intro's 12.5vw side inset — and the
	   title's vw-based font clamp don't carry a phone-specific value the way
	   the rest of this pass already overrides at 480px; Figma drops both to
	   flat numbers here: a 16px side inset (vs. the desktop clamp's ~47-53px
	   at this width) and an 80px top/bottom section padding (vs. the clamp's
	   ~32px floor, measured off the Figma frame: text block starts at Y 80
	   and the button's bottom edge lands 80px above the 492px frame height).
	   The title drops to a flat 40px/120% (vs. the fluid clamp, which only
	   measures ~31px at this width) with the title-to-text gap tightening to
	   16px (vs. the base --space-5/24px margin-bottom). That flat 40px isn't
	   quite safe at the narrow end of this breakpoint though: "залишайтеся"
	   — the title's longest word — measures 295.4px at 40px/e-Ukraine Head,
	   wider than the 288px column a 320px-wide phone (16px insets either
	   side) leaves it, a confirmed 7px scrollWidth-vs-clientWidth overflow
	   (0px overflow already by 330px). Tying the size to the column's own
	   width below that crossover — same technique as .hero__title's fixes
	   above, with a 7.3848 divisor measured the same way (word-width ÷
	   font-size, here off the live title at 320px) plus a small safety
	   margin — keeps it from ever running past the column while still
	   plateauing at the flat 40px Figma calls for everywhere from ~333px up
	   through this breakpoint's 480px ceiling. The text's own 40px
	   margin-bottom to the button is already flat and already matches Figma
	   exactly, so it's left untouched. The button itself shrinks off the
	   shared 60px/32px .btn default to a 48px/24px pill (--space-7/--space-5)
	   — same treatment as .stats__cta .btn above — while its 14px/--fs-small
	   text and uppercase transform (already set by the base .cta-banner .btn
	   rule) stay as-is.

	   The hand illustration and the wordmark both stay hidden here too, per
	   the existing ≤768px rule — the text column still doesn't leave the
	   illustration room, and the wordmark is left off on mobile entirely
	   rather than given a phone-specific redraw. */
	.cta-banner {
		padding-inline: 16px;
		padding-block: 80px;
	}
	.cta-banner .cta-banner__title {
		/* 40px (2.5rem) flat is the Figma value; the calc() only bites below
		   ~333px viewport width, where it shrinks just enough to keep
		   "залишайтеся" from overflowing the column — see comment above. */
		font-size: clamp(2.25rem, calc((100vw - 32px) * 0.133), 2.5rem);
		margin-bottom: 1rem; /* 16px */
	}
	.cta-banner .btn {
		height: var(--space-7);
		padding-inline: var(--space-5);
	}
}