/* ==========================================================================
   Малоданилівка — дизайн-система (ТЗ 4, варіант Б)
   Порядок: шрифти → токени → база → розкладка → шапка/підвал → компоненти → друк.
   Мобільна версія — основна; ширші екрани — через min-width.
   ========================================================================== */

/* ---------- Шрифти (локально, WOFF2) ---------- */
@font-face {
	font-family: "e-Ukraine";
	src: url("../fonts/e-ukraine-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "e-Ukraine";
	src: url("../fonts/e-ukraine-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "e-Ukraine";
	src: url("../fonts/e-ukraine-bold.woff2") format("woff2");
	font-weight: 700 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Токени (ТЗ 4.1) ---------- */
:root {
	--c-page: #F3F4F6;
	--c-surface: #FFFFFF;
	--c-border: #E4E6EA;
	--c-border-field: #D3D7DE;
	--c-border-strong: #7A818E; /* межі полів і кнопок ≥ 3:1 на білому та фоні сторінки (WCAG 1.4.11) */
	--c-text: #15181E;
	--c-text-2: #3B414D;
	--c-muted: #555C69;
	--c-btn: #15181E;
	--c-btn-hover: #2B303A;
	--c-accent: #1F3DB8;
	--c-accent-hover: #172F8F;
	--c-accent-soft: #E8ECFB;
	--c-teal: #DDF5F6;
	--c-teal-border: #BFE9EB;
	--c-teal-text: #2E5F63;
	--c-yellow: #FFE14D;
	--c-yellow-soft: #FFF7C2;
	--c-yellow-text: #5C4A00;
	--c-safe-bg: #E3F5EA;
	--c-safe-text: #0F5A30;
	--c-safe-dot: #16A34A;
	--c-alarm-bg: #FDE8E1;
	--c-alarm-text: #A1281A;
	--c-alarm-dot: #D3222A;
	--c-dark: #15181E;
	--c-dark-card: #262A33;
	--c-dark-text: #C7CBD3;
	--c-dark-line: #333844;
	--c-focus: #1F3DB8;
	--c-focus-dark: #FFE14D;

	--r-btn: 14px;
	--r-card: 20px;
	--r-block: 24px;
	--r-block-lg: 28px;
	--r-pill: 999px;

	--font: "e-Ukraine", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-body: 1.125rem;   /* 18 px */
	--fs-small: 1rem;      /* 16 px */
	--fs-lead: 1.25rem;    /* 20 px */
	--fs-h1: clamp(2.375rem, 1.6rem + 3.2vw, 3.875rem); /* 38–62 px */
	--fs-h2: clamp(2rem, 1.85rem + 0.6vw, 2.25rem);     /* 32–36 px */
	--fs-h3: clamp(1.375rem, 1.3rem + 0.3vw, 1.5rem);   /* 22–24 px */
	--fs-h4: 1.25rem;
	--lh: 1.55;

	--gutter: 16px;
	--container: 1280px;
	--space-section: clamp(48px, 6vw, 72px);
	--shadow-hover: 0 10px 28px rgba(21, 24, 30, .08);
}

@media (min-width: 768px) {
	:root { --gutter: 24px; }
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 16px;
}

body {
	margin: 0;
	background: var(--c-page);
	color: var(--c-text);
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: var(--lh);
	font-synthesis: none;
	overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
svg.icon { flex: none; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
	margin: 0 0 .5em;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--c-text);
}
h1, .h1 { font-size: var(--fs-h1); line-height: 1.06; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.3; }

p, ul, ol, dl, figure, blockquote, table { margin: 0 0 1em; }

a { color: var(--c-accent); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-accent-hover); text-decoration-thickness: 2px; }

strong, b { font-weight: 700; }
small, .small { font-size: var(--fs-small); }
.lead { font-size: var(--fs-lead); color: var(--c-text-2); max-width: 40em; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; background: var(--c-page); border-radius: 6px; padding: .1em .35em; }
abbr[title] { text-decoration: none; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: 2em 0; }

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

/* Фокус: 3 px + відступ (ТЗ 5.3). На темному — жовтий. */
:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--c-focus-dark); }
main:focus { outline: none; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.placeholder { color: inherit; }

.skip-link {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 100000; /* над панеллю адміністратора */
	padding: 12px 20px;
	background: var(--c-yellow);
	color: var(--c-text);
	font-weight: 700;
	border-radius: var(--r-btn);
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 3px solid var(--c-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Розкладка ---------- */
.container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.page-main { padding-block: 24px var(--space-section); }
.stack > * + * { margin-top: 16px; }

.grid { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }

.panel {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-block);
	padding: 8px 20px;
}
@media (min-width: 768px) { .panel { padding: 8px 26px; } }

.card-list { display: grid; gap: 0; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-block); padding: 4px 20px; margin-bottom: 32px; }
.card-list > .news-card + .news-card { border-top: 1px solid var(--c-border); }

.link-list { padding-left: 1.2em; }
.link-list li { margin-bottom: .4em; }

/* ---------- Фірмова смуга і службовий рядок ---------- */
.brand-strip {
	height: 6px;
	background: linear-gradient(90deg, var(--c-accent) 0 50%, var(--c-yellow) 50% 100%);
}

.topbar { background: var(--c-dark); color: var(--c-dark-text); font-size: var(--fs-small); }
.topbar__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 4px 24px; padding-block: 8px;
}
.topbar p { margin: 0; }
.topbar a { color: #fff; }
.topbar__title { display: none; }
@media (min-width: 768px) { .topbar__title { display: block; } }

/* ---------- Шапка ---------- */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: relative; }
.site-header__inner {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 12px 16px; padding-block: 12px;
}

.brand {
	display: flex; align-items: center; gap: 12px;
	color: var(--c-text); text-decoration: none;
	margin-right: auto; min-height: 48px; min-width: 0; flex: 1 1 220px; /* від ~360 px кнопки в одному рядку з гербом; вужче — переносяться нижче */
	border-radius: 8px;
}
.brand:hover { color: var(--c-text); }
/* Герб у шапці — завжди повний (ТЗ 4.3): 56 px, на ≥ 1024 px — 88 px. */
.brand__emblem { flex: none; }
.brand__emblem img { width: auto; height: 56px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }
.brand__sub { font-size: .9375rem; color: var(--c-muted); font-weight: 500; }

@media (min-width: 768px) {
	.brand { gap: 14px; }
	.brand__name { font-size: 1.25rem; }
	.brand__sub { font-size: 1rem; }
}
@media (min-width: 1024px) {
	.brand__emblem img { height: 88px; }
	.brand__name { font-size: 1.375rem; } /* 22 px */
}

.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.icon-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-width: 48px; min-height: 48px; padding: 0 12px;
	border: 1px solid var(--c-border-strong); border-radius: var(--r-btn);
	background: var(--c-surface); color: var(--c-text);
	font-weight: 700; font-size: var(--fs-small); cursor: pointer;
}
.icon-btn:hover { border-color: var(--c-accent); color: var(--c-accent); }
.icon-btn[aria-expanded="true"] { background: var(--c-text); border-color: var(--c-text); color: #fff; }
/* На вузьких екранах підпис кнопки прихований візуально, але лишається для читачів екрана. */
@media (max-width: 479px) {
	.icon-btn__label {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
	}
}

.site-header__actions .site-header__cta { display: none; }
@media (min-width: 768px) { .site-header__actions .site-header__cta { display: inline-flex; } }
.site-nav .site-nav__cta { margin: 12px 12px 4px; }
@media (min-width: 768px) { .site-nav .site-nav__cta { display: none; } }

/* Меню: на телефоні — панель під шапкою, на ≥ 1200 px — у рядок. */
.site-nav { flex-basis: 100%; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-nav__link {
	display: flex; align-items: center; min-height: 48px;
	padding: 8px 12px; border-radius: 10px;
	color: var(--c-text); font-weight: 700; text-decoration: none;
}
.site-nav__link:hover { background: var(--c-page); color: var(--c-accent); }
.site-nav__link[aria-current="page"] { color: var(--c-accent); box-shadow: inset 0 -3px 0 var(--c-accent); }
.site-nav__phone { margin: 12px 12px 4px; font-size: var(--fs-small); color: var(--c-muted); }

/* З JS панелі приховані одразу (ще до виконання скрипту — без «стрибка» сторінки), відкриває клас is-open. */
.js .site-nav:not(.is-open), .js .site-search:not(.is-open) { display: none; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }

/* ≥ 1024 px: меню — окремим рядком під гербом на всю ширину (8 пунктів шрифтом e-Ukraine не вміщуються поруч із гербом). */
@media (min-width: 1024px) {
	.site-header__inner { padding-bottom: 0; }
	.js .menu-btn { display: none; }
	.js .site-nav:not(.is-open) { display: block; }
	.site-nav { border-top: 1px solid var(--c-border); margin-top: 4px; }
	.site-nav__list { display: flex; flex-wrap: wrap; gap: 0 4px; margin-inline: -12px; }
	.site-nav__link { min-height: 56px; padding: 8px 2px 8px 10px; border-radius: 0; }
	.site-nav__link:hover { background: none; text-decoration: underline; text-underline-offset: .3em; }
	.site-nav__phone { display: none; }
	/* Комп'ютер: підменю — панель під пунктом меню. */
	.site-nav__item { flex-wrap: nowrap; }
	.site-nav__toggle { width: 44px; height: 44px; margin-right: 0; } /* ціль натискання ≥ 44×44 (ТЗ 5.4) */
	.submenu {
		position: absolute; top: 100%; left: 0; z-index: 60; min-width: 300px; max-width: 420px;
		padding: 10px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card);
		box-shadow: 0 18px 40px rgba(21, 24, 30, .14);
	}
	.submenu ul { margin: 0; padding: 0; border: 0; }
	.site-nav__item:last-child .submenu, .site-nav__item:nth-last-child(2) .submenu { left: auto; right: 0; }
	html:not(.js) .submenu { display: none; }
	html:not(.js) .site-nav__item:hover .submenu, html:not(.js) .site-nav__item:focus-within .submenu { display: block; }
}
@media (min-width: 768px) {
	.brand__name { white-space: nowrap; }
}

/* Підменю розділів. Телефон: розкривається всередині меню. */
.site-nav__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.site-nav__item > .site-nav__link { flex: 1; }
.site-nav__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: 0; padding: 0;
	border: 0; border-radius: 10px; background: none; color: var(--c-text); cursor: pointer;
}
.site-nav__toggle:hover { background: var(--c-page); color: var(--c-accent); }
.site-nav__toggle .icon { transition: transform .15s; }
.site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.submenu { flex-basis: 100%; }
.submenu ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; border-left: 2px solid var(--c-border); }
.submenu a { display: flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 8px; color: var(--c-text-2); text-decoration: none; font-size: var(--fs-small); line-height: 1.3; }
.submenu a:hover { background: var(--c-page); color: var(--c-accent); }
.js .submenu { display: none; }
.js .site-nav__toggle[aria-expanded="true"] + .submenu { display: block; }
html:not(.js) .site-nav__toggle { display: none; }

.site-search { border-top: 1px solid var(--c-border); background: var(--c-page); padding-block: 16px; }

/* ---------- Пошук ---------- */
.search-form { max-width: 680px; margin-bottom: 24px; }
.search-form__label { display: block; font-weight: 700; margin-bottom: 8px; }
.search-form__box {
	display: flex; align-items: center; gap: 10px;
	background: var(--c-surface); border: 1px solid var(--c-border-strong);
	border-radius: 18px; padding: 6px 6px 6px 16px;
}
.search-form__box:focus-within { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.search-form__box > .icon { color: var(--c-muted); }
.search-form__input {
	flex: 1; min-width: 0; min-height: 44px;
	border: 0; background: transparent; padding: 8px 0;
	font-size: var(--fs-body); color: var(--c-text);
}
.search-form__input:focus { outline: none; }
.search-form__input::placeholder { color: var(--c-muted); opacity: 1; }
.search-form__input::-webkit-search-cancel-button { cursor: pointer; }
.search-form__submit { min-height: 48px; padding-inline: 18px; }
.search-form--hero .search-form__box { background: var(--c-page); }
/* Телефон: поле на всю ширину, кнопка під ним — підказка в полі не обрізається. */
@media (max-width: 479px) {
	.search-form__box { flex-wrap: wrap; padding: 6px; gap: 6px; }
	.search-form__box > .icon { margin-left: 8px; }
	.search-form__input { flex-basis: calc(100% - 48px); }
	.search-form__submit { flex-basis: 100%; }
}
.search-summary { color: var(--c-text-2); }

/* ---------- Рядок безпеки ---------- */
.safety-bar { background: var(--c-teal); border-bottom: 1px solid var(--c-teal-border); color: var(--c-teal-text); font-size: var(--fs-small); }
.safety-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 24px; padding-block: 6px; }
.safety-bar__main { flex: 1 1 320px; min-width: 0; padding-block: 4px; }
.safety-bar p { margin: 0; }
.safety-bar__status { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; }
.safety-bar__status > svg, .safety-bar__status .safety-bar__dot { margin-top: .2em; }
.safety-bar__note { margin-top: 2px !important; padding-left: 22px; font-size: .8125rem; line-height: 1.4; }
.safety-bar__links { display: flex; flex-wrap: wrap; gap: 0 16px; list-style: none; margin: 0; padding: 0 0 0 22px; }
@media (min-width: 1024px) { .safety-bar__links { padding-left: 0; } }
.safety-bar__links a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 700; }
.safety-bar__dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
@media (min-width: 1024px) {
	.safety-bar__inner { flex-wrap: nowrap; }
	.safety-bar__links { flex-wrap: nowrap; white-space: nowrap; margin-left: auto; }
}
.safety-bar--safe { background: var(--c-safe-bg); border-color: #C3E6D0; color: var(--c-safe-text); }
.safety-bar--safe .safety-bar__dot { background: var(--c-safe-dot); box-shadow: 0 0 0 4px rgba(22, 163, 74, .2); }
.safety-bar--alarm { background: var(--c-alarm-bg); border-color: #F5C6B8; color: var(--c-alarm-text); }
.safety-bar--alarm .safety-bar__dot { background: var(--c-alarm-dot); box-shadow: 0 0 0 4px rgba(211, 34, 42, .2); }
.safety-bar--unknown { background: var(--c-page); border-color: var(--c-border); color: var(--c-text-2); }
.safety-bar--unknown .safety-bar__dot { background: var(--c-muted); }

/* ---------- Перший екран (головна) ---------- */
.hero { background: var(--c-surface); }
.hero__inner { display: flex; flex-wrap: wrap; gap: 32px; padding-block: 40px 48px; }
.hero__main { flex: 3 1 520px; display: flex; flex-direction: column; gap: 20px; justify-content: center; min-width: 0; }
.hero__aside { flex: 2 1 320px; min-width: 0; align-self: center; }
.hero__title { margin: 0; letter-spacing: -.03em; }
.hero__lead { margin: 0; font-size: var(--fs-lead); color: var(--c-text-2); max-width: 36em; }
.hero .search-form { margin: 0; }
@media (min-width: 768px) { .hero__inner { padding-block: 56px 64px; gap: 40px; } }

.badge {
	display: inline-flex; align-self: flex-start; align-items: center;
	margin: 0; padding: 6px 14px; border-radius: var(--r-pill);
	font-weight: 700; font-size: var(--fs-small);
}

/* ---------- Кнопки ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 0 24px;
	border: 1px solid transparent; border-radius: var(--r-btn);
	font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center;
	text-decoration: none; cursor: pointer;
}
.btn--sm { min-height: 48px; padding: 0 20px; }
.btn--primary { background: var(--c-btn); color: #fff; }
.btn--primary:hover { background: var(--c-btn-hover); color: #fff; }
.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn--secondary:hover { border-color: var(--c-text); color: var(--c-text); }
.btn--accent { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: var(--c-accent-hover); color: #fff; }
.btn--on-dark { background: #fff; color: var(--c-text); }
.btn--on-dark:hover { background: var(--c-yellow); color: var(--c-text); }
.btn--on-dark-secondary { background: transparent; color: #fff; border-color: #8A919E; }
.btn--on-dark-secondary:hover { border-color: #fff; color: #fff; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-page); color: var(--c-muted); border-color: var(--c-border-field); cursor: not-allowed; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	font-weight: 700; text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow .icon { transition: transform .15s; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- Чипи і мітки ---------- */
.chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.chip {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
	border: 1px solid var(--c-border-strong); border-radius: var(--r-pill);
	background: var(--c-surface); color: var(--c-text-2);
	font-weight: 700; font-size: var(--fs-small); text-decoration: none;
}
.chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--c-text); border-color: var(--c-text); color: #fff; }

.tag {
	display: inline-flex; align-items: center;
	padding: 3px 12px; border-radius: var(--r-pill);
	font-size: .9375rem; font-weight: 700; line-height: 1.4;
}

/* Тони (пари з контрастом ≥ 4,5:1) */
.tone--blue { background: var(--c-accent-soft); color: var(--c-accent); }
.tone--amber { background: #FFF1D6; color: #8A5A00; }
.tone--green { background: var(--c-safe-bg); color: #146C3A; }
.tone--red { background: var(--c-alarm-bg); color: var(--c-alarm-text); }
.tone--yellow, .tone--yellow-soft { background: var(--c-yellow-soft); color: var(--c-yellow-text); }
.tone--neutral { background: #EEF0F3; color: var(--c-text-2); }
.tone--violet { background: #ECE9FE; color: #4C2FC7; }
.tone--land { background: #E8F3E2; color: #3D6B1F; }
.tone--rose { background: #FDE8EC; color: #A01842; }
.tone--sky { background: #E3F1F8; color: #0B5B83; }
/* Іконки на темному блоці (текст поруч не розміщується) */
.tone--teal { background: #9FE6E8; color: var(--c-text); }
.tone--mint { background: #B8E6C8; color: var(--c-text); }
.tone--salmon { background: #FFB4A2; color: var(--c-text); }
.tile__icon.tone--yellow { background: var(--c-yellow); color: var(--c-text); }

/* ---------- Заголовок секції ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 24px; }
.section-head__title { margin: 0; }
.section-head__lead { margin: 8px 0 0; color: var(--c-text-2); }

/* ---------- Плитка послуги ---------- */
.tile {
	position: relative;
	display: flex; flex-direction: column; gap: 12px;
	min-height: 100%; padding: 22px;
	background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card);
	color: var(--c-text); text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: var(--c-accent); box-shadow: var(--shadow-hover); color: var(--c-text); }
.tile:hover .tile__title { color: var(--c-accent); text-decoration: underline; }
.tile__icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; }
.tile__title { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.tile__text { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.45; }

/* Телефон: компактні плитки — іконка ліворуч, текст праворуч (вдвічі коротший список). */
@media (max-width: 639px) {
	.tile:has(.tile__icon) { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px; }
	.tile:has(.tile__icon) .tile__icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; }
	.tile:has(.tile__icon) .tile__icon .icon { width: 22px; height: 22px; }
	.tile { padding: 16px 18px; }
	.grid--tiles { gap: 10px; }
}

.tile--dark { background: var(--c-dark-card); border-color: var(--c-dark-card); color: #fff; }
.tile--dark .tile__text { color: var(--c-dark-text); }
.tile--dark .tile__icon { width: 48px; height: 48px; border-radius: 14px; }
.tile--dark:hover { border-color: var(--c-yellow); color: #fff; box-shadow: none; }
.tile--dark:hover .tile__title { color: #fff; }

/* ---------- Новини ---------- */
.news-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.news-layout > .news-card--featured { flex: 3 1 520px; min-width: 0; }
.news-feed {
	flex: 2 1 340px; min-width: 0;
	display: flex; flex-direction: column;
	background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-block);
	padding: 4px 20px;
}
.news-feed > .news-card + .news-card { border-top: 1px solid var(--c-border); }
.news-feed__all { border-top: 1px solid var(--c-border); padding-block: 12px; }

.news-card { position: relative; }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: var(--fs-small); color: var(--c-muted); font-weight: 500; }
.news-card__title { margin: 0; font-size: 1.125rem; line-height: 1.35; letter-spacing: -.01em; }
.news-card__title a { color: var(--c-text); text-decoration: none; }
.news-card:hover .news-card__title a { color: var(--c-accent); text-decoration: underline; }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 3px solid var(--c-focus); outline-offset: 3px; }

.news-card--row { padding-block: 16px; }

.news-card--featured {
	display: flex; flex-direction: column;
	background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-block);
	overflow: hidden;
}
.news-card--featured:hover { border-color: var(--c-accent); }
.news-card--featured .news-card__body { padding: 22px 22px 26px; }
.news-card--featured .news-card__title { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; }
.news-card__excerpt { margin: 12px 0 0; color: var(--c-text-2); }
.news-card__media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--c-teal); }
/* Фото будь-якої орієнтації кадрується в 2:1 — картка не розтягується вертикальним фото. */
.news-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-card__placeholder {
	display: flex; align-items: center; justify-content: center; height: 100%;
	color: var(--c-teal-text); font-weight: 700; font-size: var(--fs-small); letter-spacing: .04em; text-align: center; padding: 8px;
}

/* ---------- Документи ---------- */
.doc-list > .doc-row + .doc-row { border-top: 1px solid var(--c-border); }
.doc-list__all { border-top: 1px solid var(--c-border); padding-block: 12px; width: 100%; }
.doc-row { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; align-items: center; padding-block: 18px; }
.doc-row__badge {
	width: 46px; height: 54px; border-radius: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
}
.doc-row__badge--pdf { background: #FDECEC; color: #B42318; }
.doc-row__badge--doc { background: var(--c-accent-soft); color: var(--c-accent); }
.doc-row__badge--xls { background: var(--c-safe-bg); color: #146C3A; }
.doc-row__body { min-width: 0; }
.doc-row__title { margin: 0 0 4px; font-size: 1.0625rem; line-height: 1.35; letter-spacing: 0; }
.doc-row__title a { color: var(--c-text); text-decoration: none; }
.doc-row__title a:hover { color: var(--c-accent); text-decoration: underline; }
.doc-row__meta { margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
.doc-row__download {
	grid-column: 2;
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; justify-self: start;
	font-weight: 700; font-size: var(--fs-small);
}
.doc-row__file { font-weight: 500; color: var(--c-muted); }
.doc-row__restricted { grid-column: 2; margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
@media (min-width: 768px) { .doc-row__restricted { grid-column: 3; max-width: 14em; text-align: right; } }
@media (max-width: 767px) {
	.doc-row { align-items: start; gap: 6px 12px; }
	.doc-row__badge { width: 38px; height: 44px; font-size: .75rem; border-radius: 8px; }
}
@media (min-width: 768px) {
	.doc-row { grid-template-columns: auto 1fr auto; }
	.doc-row__download { grid-column: 3; justify-self: end; text-align: right; }
}

/* ---------- Блок «Безпека» ---------- */
.safety-block {
	background: var(--c-dark); color: #fff;
	border-radius: var(--r-block-lg); padding: 28px 20px;
	display: flex; flex-direction: column; gap: 24px;
}
@media (min-width: 768px) { .safety-block { padding: 40px; } }
.safety-block__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.safety-block__title { color: #fff; margin: 0; font-size: var(--fs-h2); }
.safety-block__lead { margin: 8px 0 0; color: var(--c-dark-text); }
.phones { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.phone-card {
	display: flex; flex-direction: column; align-items: flex-start;
	min-width: 116px; padding: 10px 18px; border-radius: var(--r-btn);
	background: var(--c-dark-card); color: #fff; text-decoration: none;
	border: 1px solid transparent;
}
.phone-card:hover { border-color: var(--c-yellow); color: #fff; }
.phone-card__num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.phone-card__label { font-size: .9375rem; color: var(--c-dark-text); font-weight: 500; }
.safety-block__cards > li { display: flex; }
.safety-block__cards .tile { width: 100%; }

/* ---------- Проєкти відновлення ---------- */
.project-card {
	position: relative;
	display: flex; flex-direction: column; gap: 12px;
	padding: 18px; background: var(--c-surface);
	border: 1px solid var(--c-border); border-radius: var(--r-card);
}
.project-card:hover { border-color: var(--c-accent); box-shadow: var(--shadow-hover); }
.project-card__media { aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden; background: var(--c-teal); }
.project-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.project-card__title { margin: 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; }
.project-card__title a { color: var(--c-text); text-decoration: none; }
.project-card:hover .project-card__title a { color: var(--c-accent); text-decoration: underline; }
.project-card__step { margin: 0; font-size: var(--fs-small); color: var(--c-muted); font-weight: 500; }
.steps { display: flex; gap: 6px; margin-top: auto; }
.steps__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--c-border); }
.steps__bar.is-done { background: var(--c-accent); }

/* ---------- Звернення до голови ---------- */
.appeal {
	display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px;
	background: var(--c-yellow-soft); border-radius: var(--r-block-lg); padding: 28px 20px;
}
@media (min-width: 768px) { .appeal { padding: 36px 40px; } }
.appeal__photo {
	width: 112px; height: 112px; border-radius: 50%; flex: none;
	background: #FFE98A; color: var(--c-yellow-text);
	display: flex; align-items: center; justify-content: center; text-align: center;
	font-size: .8125rem; font-weight: 700; padding: 8px;
}
.appeal__body { flex: 1 1 340px; min-width: 0; }
.appeal__kicker { margin: 0 0 4px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-yellow-text); }
.appeal__name { margin: 0 0 8px; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.appeal__text { margin: 0; color: #4A3D08; }
.appeal__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.appeal .btn--secondary { border-color: #8A7A2E; }

/* ---------- Хлібні крихти ---------- */
.breadcrumbs { margin-bottom: 16px; font-size: var(--fs-small); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--c-muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumbs [aria-current="page"] { color: var(--c-muted); }

/* ---------- Пагінація ---------- */
.pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 24px 0; padding: 0; }
.pagination a {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-width: 48px; min-height: 48px; padding: 0 14px;
	border: 1px solid var(--c-border-strong); border-radius: var(--r-btn);
	background: var(--c-surface); color: var(--c-text); font-weight: 700; text-decoration: none;
}
.pagination a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.pagination a[aria-current="page"] { background: var(--c-text); border-color: var(--c-text); color: #fff; }
.pagination__gap { padding: 0 4px; color: var(--c-muted); }

/* ---------- Акордеон ---------- */
.accordion { border-top: 1px solid var(--c-border); }
.accordion details { border-bottom: 1px solid var(--c-border); }
.accordion summary {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 56px; padding: 12px 4px;
	font-weight: 700; font-size: 1.125rem; cursor: pointer; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--c-accent); }
.accordion summary .icon { transition: transform .2s; }
.accordion details[open] summary .icon { transform: rotate(180deg); }
.accordion__body { padding: 0 4px 16px; }

/* ---------- Таблиця ---------- */
.table-wrap { position: relative; overflow-x: auto; margin-bottom: 24px; border: 1px solid var(--c-border); border-radius: var(--r-card); background: var(--c-surface); }
.table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--fs-small); }
.table caption { text-align: left; font-weight: 700; font-size: 1.0625rem; padding: 16px 16px 8px; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--c-border); }
.table thead th { background: var(--c-page); font-weight: 700; white-space: nowrap; }
.table tbody th { font-weight: 700; }

/* ---------- Повідомлення ---------- */
.notice {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 16px 20px; border-radius: var(--r-card); border: 1px solid;
	border-left-width: 6px;
}
.notice__body { min-width: 0; }
.notice__title { margin: 0; font-weight: 700; }
.notice__text { margin: 4px 0 0; }
.notice--info { background: var(--c-accent-soft); border-color: var(--c-accent); color: #142A80; }
.notice--success { background: var(--c-safe-bg); border-color: #16A34A; color: var(--c-safe-text); }
.notice--warning { background: var(--c-yellow-soft); border-color: #B08A00; color: var(--c-yellow-text); }
.notice--error { background: var(--c-alarm-bg); border-color: var(--c-alarm-dot); color: var(--c-alarm-text); }
.notice a { color: inherit; font-weight: 700; }

/* ---------- Форма ---------- */
.form { max-width: 640px; }
.field { margin-bottom: 24px; }
.field__label { display: block; font-weight: 700; margin-bottom: 6px; }
.field__req, .field__opt { font-weight: 500; color: var(--c-muted); font-size: var(--fs-small); }
.field__hint { margin: 0 0 8px; font-size: var(--fs-small); color: var(--c-muted); }
.field__error { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; color: var(--c-alarm-text); font-weight: 700; font-size: var(--fs-small); }
.field__error .icon { margin-top: 2px; }
.field__input {
	display: block; width: 100%; min-height: 52px;
	padding: 12px 16px; border: 1px solid var(--c-border-strong); border-radius: var(--r-btn);
	background: var(--c-surface); color: var(--c-text); font-size: var(--fs-body);
}
textarea.field__input { min-height: 140px; resize: vertical; }
select.field__input {
	appearance: none; padding-right: 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2315181E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.field__input:hover { border-color: var(--c-text); }
.field__input:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.has-error .field__input { border: 2px solid var(--c-alarm-text); }
.has-error { padding-left: 16px; border-left: 4px solid var(--c-alarm-text); }
.field__check { display: flex; gap: 12px; align-items: flex-start; }
.field__check input { width: 28px; height: 28px; margin: 0; flex: none; accent-color: var(--c-text); cursor: pointer; }
.field__check label { cursor: pointer; padding-top: 1px; }

.error-summary {
	margin-bottom: 28px; padding: 20px 24px;
	border: 3px solid var(--c-alarm-text); border-radius: var(--r-card); background: var(--c-surface);
}
.error-summary:focus { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.error-summary__title { font-size: 1.25rem; margin: 0 0 8px; }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: var(--c-alarm-text); font-weight: 700; }

/* ---------- Сторінка / запис ---------- */
.entry__title { max-width: 22em; }
.entry__meta { color: var(--c-muted); font-size: var(--fs-small); }
.entry__media { margin: 0 0 24px; border-radius: var(--r-card); overflow: hidden; max-width: 960px; }

.prose { max-width: 75ch; }
.prose > :last-child { margin-bottom: 0; }
/* Заголовки в тексті сторінок — спокійніші за заголовки розділів, щоб довгі перенесені тексти не «стрибали». */
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.4em; }
.prose h4 { font-size: 1.125rem; margin-top: 1.3em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { max-width: 75ch; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .35em; }
.prose img { border-radius: 14px; }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: var(--fs-small); color: var(--c-muted); margin-top: 8px; }
.prose blockquote, .wp-block-quote {
	margin: 1.5em 0; padding: 4px 0 4px 20px;
	border-left: 4px solid var(--c-yellow); font-size: var(--fs-lead);
}
.prose blockquote cite { display: block; margin-top: 8px; font-size: var(--fs-small); font-style: normal; color: var(--c-muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose .wp-block-table { overflow-x: auto; margin: 1.5em 0; }
.prose th, .prose td { border: 1px solid var(--c-border); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--c-page); }
.wp-block-file {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin: 1.5em 0; padding: 14px 18px;
	border: 1px solid var(--c-border); border-radius: var(--r-btn); background: var(--c-surface);
}
.wp-block-file a { font-weight: 700; }
.wp-block-file .wp-block-file__button { display: none; }
.wp-block-embed { margin: 1.5em 0; }
.wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }

/* ---------- Архів документів ---------- */
.docs-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .docs-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; } }

.docs-filters { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); }
.docs-filters__summary {
	display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 20px;
	font-weight: 700; cursor: pointer; list-style: none;
}
.docs-filters__summary::-webkit-details-marker { display: none; }
.docs-filters__summary span { flex: 1; }
.docs-filters[open] .docs-filters__summary .icon--chevron { transform: rotate(180deg); }
.docs-filters__form { padding: 0 20px 20px; }
.docs-filters .field { margin-bottom: 16px; }
.docs-filters .field__input { min-height: 48px; padding: 10px 14px; font-size: 1rem; }
.docs-filters select.field__input { padding-right: 44px; }
.docs-filters__actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
.docs-filters__actions .btn { flex: 1; padding: 0 16px; }
.docs-filters__reset { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 700; white-space: nowrap; }
@media (min-width: 1024px) {
	/* Панель не вища за екран: фільтри прокручуються всередині, кнопка «Показати» завжди видна внизу. */
	/* Вміст <details> не бере участі у flex, тож висоту списку фільтрів задаємо явно:
	   екран − відступи (32) − заголовок панелі (56) − блок кнопки (~80). */
	.docs-filters { position: sticky; top: 16px; }
	.admin-bar .docs-filters { top: 48px; }
	.docs-filters__form { padding: 0; }
	.docs-filters__fields { max-height: calc(100vh - 176px); overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 4px; scrollbar-width: thin; }
	.admin-bar .docs-filters__fields { max-height: calc(100vh - 208px); }
	.docs-filters .field { margin-bottom: 12px; }
	.docs-filters .field__label { font-size: var(--fs-small); margin-bottom: 4px; }
	.docs-filters .field__hint { display: none; }
	.docs-filters .field__input { min-height: 44px; padding: 8px 12px; }
	.docs-filters__actions {
		flex: none; padding: 12px 20px 16px; background: var(--c-surface);
		border-top: 1px solid var(--c-border); box-shadow: 0 -8px 16px -12px rgba(21, 24, 30, .25);
	}
}
@media (max-width: 1023px) {
	.docs-filters__fields { padding: 0; }
	/* Телефон: кнопка «Показати» прилипає до низу екрана, поки відкрита форма фільтрів. */
	.docs-filters__actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -20px; padding: 12px 20px; background: var(--c-surface); border-top: 1px solid var(--c-border); }
}

.docs-results__title { font-size: var(--fs-h4); margin: 4px 0 12px; letter-spacing: 0; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
.chip--remove { gap: 8px; background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent); }
.chip--remove:hover { background: var(--c-surface); }

/* ---------- Сторінка документа ---------- */
.doc { max-width: 880px; }
.doc__kicker { margin: 0 0 8px; font-weight: 700; color: var(--c-muted); }
.doc__title { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.2; margin-bottom: 24px; }
.doc__details {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0;
	margin: 0 0 28px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden;
}
.doc__details > div { padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.doc__details dt { font-size: var(--fs-small); color: var(--c-muted); }
.doc__details dd { margin: 2px 0 0; font-weight: 700; }
.doc__plain { margin-bottom: 28px; padding: 20px 24px; background: var(--c-teal); border: 1px solid var(--c-teal-border); border-radius: var(--r-card); }
.doc__plain h2 { margin-top: 0; }
.doc__plain p { margin: 0; }
.doc__files, .doc__text { margin-bottom: 32px; }
.doc__files .notice { margin-bottom: 16px; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.file-link {
	display: flex; align-items: center; gap: 16px; padding: 14px 18px;
	background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-btn);
	color: var(--c-text); text-decoration: none;
}
.file-link:hover { border-color: var(--c-accent); color: var(--c-accent); }
.file-link:hover .file-link__name { text-decoration: underline; }
.file-link__text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }
.file-link__name { font-weight: 700; }
.file-link__meta { color: var(--c-muted); }
.file-link > .icon { color: var(--c-accent); }
.doc__auto-note { font-size: var(--fs-small); color: var(--c-muted); }
.doc__content { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 24px; }
.doc__content p { margin-bottom: .8em; }

/* ---------- Сторінки: розкладка з бічною панеллю ---------- */
.page-layout { display: grid; gap: 32px; align-items: start; }
.page-layout > *, .contacts-grid > *, .docs-layout > *, .commissions > *, .people-grid > *, .people-list > *, .grid > *, .cat-grid > * { min-width: 0; } /* колонка не розтягується під довге слово */
h1, h2, h3, h4 { overflow-wrap: break-word; } /* без автопереносів: «За-хисників» читається гірше */
.kv dd, .notice__text, .aside-card, .prose a, .site-footer__contacts { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
	.page-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; }
	.page-layout--wide { grid-template-columns: minmax(0, 1fr); }
}
.entry__header { margin-bottom: 24px; }
.entry__header .lead { margin: 0; }
.page-layout--wide .entry__header .lead { max-width: 48em; }

.page-aside { display: grid; gap: 20px; }
@media (min-width: 1024px) { .page-aside { position: sticky; top: 16px; } }
.side-nav { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 12px; }
.side-nav__title { font-size: 1.0625rem; margin: 0 8px 8px; letter-spacing: 0; }
.side-nav__title a { color: var(--c-text); text-decoration: none; }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav a { display: block; padding: 10px 8px; border-radius: 8px; text-decoration: none; font-size: var(--fs-small); line-height: 1.35; color: var(--c-text-2); }
.side-nav a:hover { background: var(--c-page); color: var(--c-accent); }
.side-nav a[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-accent); font-weight: 700; }
.side-nav__item--d2 a { padding-left: 24px; }
.aside-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 18px 20px; font-size: var(--fs-small); }
.aside-card p { margin: 0 0 8px; }
.aside-card__title { font-size: 1.0625rem; letter-spacing: 0; margin: 0 0 10px; }
.aside-card__updated { color: var(--c-muted); }
.service__contact { margin-top: 32px; max-width: 75ch; }

.tile--page { gap: 8px; padding-right: 48px; }
.tile__arrow { position: absolute; right: 18px; top: 22px; color: var(--c-accent); }
.hub-grid { margin-bottom: 32px; }
.hub-text { margin-top: 32px; }
.section-children { margin-top: 40px; }
.grid > li { display: flex; }
.grid > li > * { width: 100%; }

.card-block { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 20px; }
.card-block > :last-child { margin-bottom: 0; }
.kv { display: grid; gap: 10px; margin: 0 0 12px; }
.kv > div { display: grid; gap: 2px; }
@media (min-width: 640px) { .kv > div { grid-template-columns: 200px 1fr; gap: 16px; } }
.kv dt { color: var(--c-muted); font-size: var(--fs-small); }
.kv dd { margin: 0; font-weight: 500; }
.contacts-grid { display: grid; gap: 20px; margin-bottom: 12px; align-items: start; }
.contacts-grid > section + section { margin-top: 0; }
@media (min-width: 1024px) { .contacts-grid { grid-template-columns: 1fr 1fr; } .contacts-grid .card-block { margin-bottom: 0; } }
.plain-list { list-style: none; margin: 0 0 12px; padding: 0; }
.plain-list li { padding: 6px 0; border-bottom: 1px solid var(--c-border); }
.plain-list li:last-child { border-bottom: 0; }
.chips-inline { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
/* Консультації та відкриті дані */
.consult-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.consult-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 20px; }
.consult-item .tag, .consult .entry__header .tag { margin: 0 0 8px; }
.consult-item__title { margin: 0 0 4px; font-size: 1.125rem; }
.consult-item__meta { margin: 0; color: var(--c-text-2); font-size: var(--fs-small); }
.consult__facts { margin-bottom: 24px; }
.entry-content + section, .prose + section { margin-top: 32px; }
.opendata__desc { display: block; margin-top: 4px; font-weight: 400; color: var(--c-text-2); font-size: var(--fs-small); }
/* Плашка тестової версії (плагін, «Налаштування сайту → Запуск сайту») */
.test-banner { background: var(--c-yellow); color: var(--c-text); padding: 10px 0; font-size: var(--fs-small); line-height: 1.45; }
.test-banner a { color: var(--c-text); font-weight: 700; }
.place__photo { margin: 0 0 24px; }
.place__photo img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: var(--r-card); }
.place__photo figcaption { margin-top: 6px; color: var(--c-text-2); font-size: var(--fs-small); }
.opendata__links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.page-layout section > h2, .home-section h2 { margin-top: 8px; }
.page-main section + section { margin-top: 32px; }

/* ---------- Головна ---------- */
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.popular__title { margin: 0; font-size: var(--fs-small); color: var(--c-muted); font-weight: 500; }
.popular .chips-inline { margin: 0; }
.hero__aside { display: grid; gap: 14px; align-self: stretch; }
.hero-card { background: var(--c-teal); border: 1px solid var(--c-teal-border); border-radius: var(--r-block); padding: 24px; color: var(--c-text); }
.stats__title { margin: 0 0 16px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-teal-text); }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0 0 16px; }
.stats__item dd { margin: 0; display: flex; flex-direction: column; }
.stats__value { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.stats__label { margin-top: 6px; color: var(--c-teal-text); font-size: var(--fs-small); }
.about .stats { background: var(--c-teal); border: 1px solid var(--c-teal-border); border-radius: var(--r-card); padding: 20px 24px; }
.next-card { background: var(--c-page); border: 1px solid var(--c-border); border-radius: var(--r-block); padding: 18px 24px; }
.next-card__title { margin: 0 0 10px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.next-card dl { margin: 0; display: grid; gap: 8px; }
.next-card dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.next-card dt { font-weight: 700; }
.next-card dd { margin: 0; color: var(--c-text-2); }
.home-section { padding-top: var(--space-section); }
.docs-home { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .docs-home { grid-template-columns: 1fr 2fr; gap: 32px; } }
.docs-home__intro h2 { margin-top: 0; }
.appeal__photo { border-radius: 50%; object-fit: cover; width: 112px; height: 112px; }
.appeal__list { margin: 4px 0 0; padding-left: 1.2em; color: #4A3D08; }
.appeal__text { margin: 0; color: #4A3D08; font-weight: 700; }

/* ---------- Новини ---------- */
.news-grid .news-card--featured { height: 100%; }
.news-grid .news-card__title { font-size: 1.1875rem; }
.news-grid .news-card__media { aspect-ratio: 2 / 1; }
.news-article { max-width: 880px; }
.news-article .entry__media img { width: 100%; height: auto; }
.news-article__places { color: var(--c-muted); font-size: var(--fs-small); }
.rss-link { margin-top: 24px; font-size: var(--fs-small); }
.prose .wp-block-image img { width: auto; max-width: 100%; height: auto; max-height: 480px; object-fit: contain; }
.prose .wp-block-image.size-medium img { max-height: 280px; }

/* Новина: велике головне фото, галерея, перегляд фото */
.news-article { max-width: 960px; }
.news-article .entry-content { max-width: 75ch; font-size: 1.1875rem; }
.news-hero { margin: 0 0 28px; border-radius: var(--r-block); overflow: hidden; background: var(--c-teal); }
.news-hero img { width: 100%; height: auto; max-height: 620px; object-fit: cover; }
.news-hero--small { display: flex; justify-content: center; padding: 16px; }
.news-hero--small .md-zoom { max-width: 100%; }
.news-hero--small img { width: auto; max-width: 100%; max-height: 480px; object-fit: contain; border-radius: 10px; }
.md-zoom { display: block; position: relative; cursor: zoom-in; border-radius: 14px; }
.md-zoom img { transition: transform .25s, filter .25s; }
.md-zoom:hover img { filter: brightness(.94); }
.md-zoom::after {
	content: ""; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
	background: rgba(21, 24, 30, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.md-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 1.5em 0; max-width: none; }
.md-gallery .wp-block-image { margin: 0; }
.md-gallery .md-zoom, .md-gallery .wp-block-image > img { aspect-ratio: 4 / 3; overflow: hidden; }
.md-gallery img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.lightbox { width: min(96vw, 1400px); max-width: none; height: min(92vh, 1000px); max-height: none; padding: 0; border: 0; border-radius: var(--r-card); background: #0B0D11; color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(5, 7, 10, .85); }
.lightbox__figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 16px; gap: 12px; }
.lightbox__img { max-width: 100%; max-height: calc(100% - 64px); object-fit: contain; border-radius: 8px; }
.lightbox__caption { color: #E6E8EC; font-size: var(--fs-small); text-align: center; max-width: 70ch; }
.lightbox__count { position: absolute; top: 14px; left: 20px; margin: 0; color: #C7CBD3; font-size: var(--fs-small); }
.lightbox__btn {
	position: absolute; display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff;
	font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .26); }
.lightbox__btn:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.lightbox__close { top: 10px; right: 10px; }
.lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 639px) { .lightbox__figure { padding: 56px 8px 72px; } .lightbox__prev, .lightbox__next { top: auto; bottom: 12px; transform: none; } }
.news-card__media--brand { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-teal), var(--c-accent-soft)); }
.news-card__media--brand img { position: static; width: auto; height: 56%; object-fit: contain; opacity: .9; }

/* ---------- Послуга ---------- */
.service-summary { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 6px solid var(--c-accent); border-radius: var(--r-card); padding: 20px 24px; margin-bottom: 32px; max-width: 75ch; }
.service-summary h2 { margin-top: 0; }
.check-list { list-style: none; margin: 0 0 16px; padding: 0; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.check-list .icon { color: var(--c-safe-text); margin-top: 2px; }

/* ---------- Населений пункт, про громаду ---------- */
.settlement__codes { margin-top: 32px; color: var(--c-muted); font-size: var(--fs-small); }
.about { display: grid; gap: 24px; align-items: start; margin-bottom: 32px; }
@media (min-width: 768px) { .about { grid-template-columns: 220px 1fr; } }
.about__emblem { width: 220px; height: auto; }

/* ---------- Пошук, мапа сайту ---------- */
.search-group { margin-top: 32px; }
.search-group h2 { font-size: var(--fs-h3); }
.search-group h2:focus { outline: none; }
.search-group__count { color: var(--c-muted); font-weight: 500; }
.sitemap ul { list-style: none; padding-left: 0; }
.sitemap ul ul { padding-left: 1.4em; border-left: 2px solid var(--c-border); margin: 4px 0 8px 6px; }
.sitemap li { margin: 4px 0; }
.sitemap a { display: inline-flex; min-height: 36px; align-items: center; }

/* ---------- ЦНАП ---------- */
.cta-band {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
	margin-bottom: 24px; padding: 22px 26px; border-radius: var(--r-block);
	background: var(--c-accent-soft); border: 1px solid #C9D4F6;
}
.cta-band__title { margin: 0 0 4px; font-size: var(--fs-h4); letter-spacing: 0; }
.cta-band p { margin: 0; color: var(--c-text-2); }
.schedule { width: 100%; border-collapse: collapse; }
.schedule th, .schedule td { padding: 10px 0; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.schedule th { font-weight: 500; color: var(--c-text-2); padding-right: 16px; }
.schedule td { font-weight: 700; white-space: nowrap; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; list-style: none; margin: 0 0 32px; padding: 0; }
.cat-link {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; height: 100%;
	padding: 10px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
	color: var(--c-text); font-weight: 700; font-size: var(--fs-small); text-decoration: none;
}
.cat-link:hover { border-color: var(--c-accent); color: var(--c-accent); }
.cat-link .icon { color: var(--c-accent); }

/* ---------- Люди: керівництво, апарат, депутати, комісії ---------- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; list-style: none; margin: 0 0 32px; padding: 0; }
.people-grid > li, .people-list > li { display: flex; }
.people-grid > li > *, .people-list > li > * { width: 100%; }
.people-grid--lead { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.person {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card);
}
.person__photo { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: var(--c-accent-soft); }
.people-grid--lead .person__photo { width: 120px; height: 120px; }
.person__photo--initials { display: inline-flex; align-items: center; justify-content: center; color: var(--c-accent); font-weight: 700; font-size: 1.5rem; }
.person__body { min-width: 0; flex: 1; }
.person__name { margin: 0 0 4px; font-size: 1.125rem; line-height: 1.3; letter-spacing: -.01em; }
.person__position { margin: 0 0 8px; color: var(--c-text-2); font-size: var(--fs-small); }
.person__meta { margin: 0 0 8px; color: var(--c-muted); font-size: .9375rem; }
.person__contact { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: var(--fs-small); }
.person__contact .icon { color: var(--c-muted); }
.person__contact a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 700; }
.person__label { margin: 8px 0 2px; font-size: var(--fs-small); font-weight: 700; }
.person__extra ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-small); }
.person__district { margin-top: 8px; font-size: var(--fs-small); }
.person__district summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--c-accent); cursor: pointer; }
.person__district p { margin: 0 0 6px; color: var(--c-text-2); }
.person--vacant { background: var(--c-page); border-style: dashed; }
.person--compact { padding: 12px 16px; border-radius: 14px; }
.person--compact .person__name { font-size: 1rem; }
.person--compact .person__position { margin: 0; }
.people-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; list-style: none; margin: 0 0 12px; padding: 0; }
.dep-section { padding-top: 24px; scroll-margin-top: 16px; }
.dep-section h2 { font-size: var(--fs-h3); }
.toc { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 20px; margin-bottom: 16px; }
.toc__title { font-size: 1.0625rem; letter-spacing: 0; margin: 0 0 8px; }
.toc ul { columns: 2 260px; margin: 0; padding-left: 1.2em; font-size: var(--fs-small); }
.toc li { margin-bottom: 4px; break-inside: avoid; }
.dep-people { margin-bottom: 32px; }
.dep-people__contact { font-size: var(--fs-small); color: var(--c-muted); }
.commissions { display: grid; gap: 16px; margin-bottom: 24px; }
@media (min-width: 1024px) { .commissions { grid-template-columns: 1fr 1fr; } }
.commission { margin: 0; }
.commission__num { margin: 0 0 4px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-accent); }
.commission h2 { margin-top: 0; }
.plain-list--inline li { border: 0; padding: 2px 0; }

/* ---------- Відгук про сторінку ---------- */
.feedback { margin-top: 48px; padding: 20px 24px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); max-width: 760px; }
.feedback:focus { outline: none; }
.feedback fieldset { border: 0; margin: 0 0 12px; padding: 0; }
.feedback__title { font-weight: 700; font-size: 1.125rem; padding: 0; margin-bottom: 8px; }
.feedback__choices { display: flex; gap: 12px; }
.feedback__choice { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--c-border-strong); border-radius: var(--r-btn); font-weight: 700; cursor: pointer; }
.feedback__choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--c-text); }
.feedback__choice:has(input:checked) { border-color: var(--c-text); background: var(--c-page); }
.feedback .field { margin-bottom: 16px; }
.feedback .field__input { min-height: 96px; }

/* ---------- Підвал ---------- */
.site-footer { background: var(--c-dark); color: var(--c-dark-text); font-size: var(--fs-small); margin-top: var(--space-section); }
.site-footer a { color: var(--c-dark-text); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; gap: 32px; padding-block: 48px 32px; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } }
.site-footer__about { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.site-footer__emblem { width: auto; height: 140px; }
.site-footer__name { color: #fff; font-weight: 700; font-size: 1.25rem; margin: 0 0 8px; }
.site-footer__contacts { line-height: 1.7; }
.site-footer__heading { color: #fff; font-size: 1.0625rem; letter-spacing: 0; margin: 0 0 8px; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 24px;
	border-top: 1px solid var(--c-dark-line); padding-block: 16px 24px;
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; margin: 0; padding: 0; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__credit { width: 100%; }

/* ---------- Вітрина компонентів ---------- */
.styleguide .lead { margin-bottom: 24px; }
.sg-toc ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0 0 16px; padding: 16px 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); }
.sg-toc a { display: inline-flex; align-items: center; min-height: 44px; }
.sg-section { padding-block: 40px; border-top: 1px solid var(--c-border); }
.sg-section > h2 { margin-bottom: 20px; }
.sg-section--bleed .safety-bar { border-radius: 14px; margin-bottom: 12px; }
.sg-note { color: var(--c-muted); font-size: var(--fs-small); }
.sg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; }
.sg-row--end { align-items: flex-end; }
.sg-dark { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 24px; border-radius: var(--r-card); background: var(--c-dark); color: #fff; }
.sg-dark a:not(.btn) { color: #fff; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; list-style: none; margin: 0 0 24px; padding: 0; }
.sg-swatch { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; font-size: var(--fs-small); }
.sg-swatch__color { height: 56px; border-radius: 10px; border: 1px solid var(--c-border); margin-bottom: 8px; }
.sg-swatch__name { font-weight: 700; }
.sg-swatch code { background: none; padding: 0; color: var(--c-text-2); }
.sg-sample { display: inline-block; padding: 4px 10px; border-radius: 6px; font-weight: 700; }
.sg-type { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 24px; }
.sg-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; }
.sg-figure figcaption { font-size: var(--fs-small); color: var(--c-muted); }
.sg-figure--dark { background: var(--c-dark); border-color: var(--c-dark); }
.sg-figure--dark figcaption { color: var(--c-dark-text); }

/* ---------- Друк ---------- */
@media print {
	.brand-strip, .topbar, .site-header__actions, .site-nav, .site-search, .safety-bar,
	.skip-link, .site-footer__grid .site-footer__col, .site-footer__legal, .pagination, .sg-toc { display: none !important; }
	body { background: #fff; font-size: 12pt; }
	.site-header, .site-footer { background: #fff; color: #000; border: 0; }
	.site-footer a, .site-footer__name { color: #000; }
	.prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; word-break: break-all; }
	.brand__emblem img { height: 56px; }
}

/* ---------- Карта (OpenStreetMap, assets/js/map.js) ---------- */
.md-map { margin: 24px 0; }
.md-map__bar { display: flex; flex-wrap: wrap; gap: 12px; }
.md-map__bar .btn { gap: 8px; }
.md-map [hidden] { display: none; }
.md-map__note { margin: 8px 0 0; font-size: var(--fs-small); color: var(--c-muted); }
.md-map__canvas { display: none; }
.md-map.is-loaded .md-map__canvas { display: block; height: min(70vh, 460px); margin-top: 12px; border: 1px solid var(--c-border); border-radius: var(--r-card); z-index: 0; }
.md-map.is-loaded .md-map__note { display: none; }
.md-map__canvas:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.md-map__status { margin: 8px 0 0; font-size: var(--fs-small); }
.md-map__status:empty { display: none; }
.md-map .leaflet-popup-content { font: inherit; font-size: 15px; }
.md-map .leaflet-popup-content p { margin: 4px 0 0; }
.md-map .leaflet-container a { color: var(--c-accent); }

/* ---------- Форми жителів (звернення, повідомлення про проблему) ---------- */
.form-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-border); }
.form-section .form > * + * { margin-top: 20px; }
.form-section .notice { margin: 16px 0; }
.form-result:focus { outline: none; }
.form__group { border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 16px 20px 20px; margin: 24px 0 0; }
.form__group legend { padding: 0 8px; font-weight: 700; }
.form__group > * + * { margin-top: 16px; }
.form__note { font-size: var(--fs-small); color: var(--c-text-2); }
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.field--file .field__input { padding: 10px; height: auto; min-height: 48px; }
.form .md-map { margin: 8px 0 0; }
/* ---------- Проєкт відновлення ---------- */
.project__stage { margin: 8px 0 24px; max-width: 720px; }
.project__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--c-muted); }
.project__steps .is-done { color: var(--c-text); }
.project__steps [aria-current] { font-weight: 700; color: var(--c-accent); }
.project__facts { max-width: 720px; margin-bottom: 24px; }
.project__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.project__photos figure { margin: 0; }
.project__photos img { width: 100%; height: auto; border-radius: 14px; }
.project__photos figcaption { margin-top: 6px; font-weight: 700; }
.project section { margin-top: 32px; }
.project-list { margin-top: 24px; }
@media (max-width: 599px) { .project__steps { grid-template-columns: 1fr 1fr; } }
/* ---------- Легке читання (ТЗ 14.7) ---------- */
.easy-link { margin: 12px 0 0; }
.easy-link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 2px solid var(--c-accent); border-radius: var(--r-pill); font-weight: 700; text-decoration: none; }
.easy-link a:hover { background: var(--c-teal); }
.easy-read .entry-content { font-size: 1.25rem; line-height: 1.7; max-width: 38em; }
.easy-read .entry-content p, .easy-read .entry-content li { margin-bottom: .6em; }
.easy-read .entry-content h2 { margin-top: 1.6em; }
.easy-read .entry-content ul, .easy-read .entry-content ol { padding-left: 1.4em; }
.places__kind { display: block; margin-top: 4px; font-weight: 400; font-size: var(--fs-small); color: var(--c-muted); }
.places__source { margin-top: 12px; font-size: var(--fs-small); color: var(--c-text-2); }

/* ---------- Пам’ять (загиблі Захисники громади) — стримано, без анімацій ---------- */
.memorial-hero { background: #15181E; color: #fff; padding: 8px 0 40px; }
.memorial-hero .breadcrumbs, .memorial-hero .breadcrumbs a { color: #C7CBD3; }
.memorial-hero__title { margin: 16px 0 8px; font-size: clamp(2.25rem, 5vw, 3.5rem); color: #fff; }
.memorial-hero__lead { max-width: 40em; font-size: 1.25rem; color: #E6E8EC; margin: 0; }
.memorial-hero__count { margin: 16px 0 0; font-weight: 700; color: #FFE14D; }
.memorial-hero__note { margin: 8px 0 0; font-size: var(--fs-small); color: #C7CBD3; }
.memorial-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 32px 0 8px; }
.memorial-filter .field { flex: 1 1 220px; margin: 0; }
.memorial-found { margin: 16px 0 0; }
.memorial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 24px; list-style: none; margin: 24px 0 0; padding: 0; }
.memorial-card { position: relative; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); overflow: hidden; }
.memorial-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.memorial-card__photo { position: relative; aspect-ratio: 3 / 4; background: #E6E8EC; overflow: hidden; }
.memorial-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.memorial-card__nophoto { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3rem; font-weight: 700; color: #7A818E; letter-spacing: .05em; }
/* Траурна стрічка в куті портрета */
.memorial-card__ribbon, .hero-page__photo figure::after { position: absolute; top: 14px; right: -34px; width: 120px; height: 14px; background: #15181E; transform: rotate(45deg); }
.memorial-card__body { padding: 14px 16px 18px; }
.memorial-card__rank { margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
.memorial-card__name { margin: 4px 0 6px; font-size: 1.125rem; line-height: 1.3; }
.memorial-card__name a { color: var(--c-text); text-decoration: none; }
.memorial-card__name a:hover { text-decoration: underline; }
.memorial-card__name a:focus { outline: none; }
.memorial-card__dates, .memorial-card__town { margin: 0; font-size: var(--fs-small); color: var(--c-text-2); }
.memorial-empty { margin: 32px 0; padding: 24px; border: 1px dashed var(--c-border); border-radius: var(--r-card); max-width: 44em; }
.memorial-cta { margin: 48px 0 24px; padding: 28px; border-radius: var(--r-block); background: var(--c-surface); border: 1px solid var(--c-border); max-width: 52em; }
.memorial-cta h2 { margin-top: 0; }
.memorial-cta__help { font-size: var(--fs-small); color: var(--c-text-2); margin-bottom: 0; }

.hero-page { display: grid; gap: 32px; margin: 16px 0 40px; }
@media (min-width: 900px) { .hero-page { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; } }
.hero-page__photo figure { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: #E6E8EC; }
.hero-page__photo figure::after { content: ""; }
.hero-page__photo img { width: 100%; height: auto; display: block; }
.hero-page__rank { margin: 0; color: var(--c-muted); }
.hero-page__name { margin: 4px 0 8px; }
.hero-page__call { margin: 0 0 4px; }
.hero-page__dates { margin: 0; font-size: 1.25rem; font-weight: 700; }
.hero-page__town { margin: 4px 0 0; color: var(--c-text-2); }
.hero-page__story { margin-top: 24px; }
.hero-page section { margin-top: 28px; }
.hero-page__awards { padding-left: 1.2em; }
.hero-page__memory { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--c-border); font-weight: 700; }
.hero-page__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hero-page__nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.memorial-hero .breadcrumbs [aria-current], .memorial-hero .breadcrumbs * { color: #E6E8EC; }
.memorial-hero .breadcrumbs a { color: #fff; }

/* Розробник сайту в підвалі: логотип на світлій підкладці — щоб будь-який логотип було видно на темному тлі */
.site-footer__dev { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; line-height: 1.6; color: #C7CBD3; }
.site-footer__dev p { margin: 0; }
.site-footer__dev a { text-decoration: underline; min-height: 0; }
.site-footer__dev-logo { width: 32px; height: 32px; object-fit: contain; flex: none; }
@media (min-width: 1100px) { .site-footer__dev { grid-column: 2 / -1; } }

/* Головна: «Пам’ятаємо» */
.memorial-home { display: grid; gap: 28px; padding: 32px; border-radius: var(--r-block); background: #15181E; color: #E6E8EC; }
@media (min-width: 1024px) { .memorial-home { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; padding: 40px; } }
.memorial-home__title { margin: 0 0 8px; color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.memorial-home__lead { margin: 0; font-size: 1.125rem; }
.memorial-home__count { margin: 12px 0 0; font-weight: 700; color: #FFE14D; }
.memorial-home__text { margin: 12px 0 0; color: #C7CBD3; }
.memorial-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 20px 0 0; }
.memorial-home__link { display: inline-flex; align-items: center; min-height: 44px; color: #fff; text-decoration: underline; }
.memorial-home__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1280px) { .memorial-home__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.memorial-home__hero { display: flex; flex-direction: column; gap: 4px; color: #fff; text-decoration: none; }
.memorial-home__hero:hover .memorial-home__name { text-decoration: underline; }
.memorial-home__photo { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #2A2F38; }
.memorial-home__photo img { width: 100%; height: 100%; object-fit: cover; }
.memorial-home__photo .memorial-card__nophoto { color: #8A919E; font-size: 1.75rem; }
.memorial-home__photo .memorial-card__ribbon { top: 8px; right: -40px; width: 110px; height: 10px; background: #000; }
.memorial-home__name { font-size: .875rem; font-weight: 700; line-height: 1.3; }
.memorial-home__dates { font-size: .8125rem; color: #C7CBD3; }
/* Добірка рішень на сторінці */
.doclist { margin-top: 40px; }
.doclist__note { font-size: var(--fs-small); color: var(--c-text-2); }
.doclist .doc-list { margin-top: 12px; }

/* Закупівлі з Prozorro */
.tenders { margin-top: 40px; }
.tender-list { list-style: none; margin: 12px 0 16px; padding: 4px 24px; }
.tender { padding: 16px 0; border-bottom: 1px solid var(--c-border); }
.tender:last-child { border-bottom: 0; }
.tender__title { font-weight: 700; overflow-wrap: anywhere; }
.tender__meta { margin: 6px 0 0; font-size: var(--fs-small); color: var(--c-text-2); }
.tender__id { white-space: nowrap; }
@media (max-width: 599px) { .tender-list { padding: 4px 16px; } }