/* =========================================================
   Shkola — основні стилі
   Порядок: змінні → база → службове → макет → шапка →
   контент → картки → компоненти → підвал → адаптив
   ========================================================= */

:root {
    --navy: #12294b;
    --navy-2: #1d3c66;
    --accent: #ee5a38;
    --accent-2: #d2462a;
    --text: #333a44;
    --muted: #7b8794;
    --line: #e4e8ee;
    --surface: #f5f7fa;
    --white: #fff;

    --wrap: 1180px;
    --gap: 1.5rem;
    --radius: 6px;
    --radius-pill: 999px;

    --font-body:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-head:
        "Jost", "Questrial", "Century Gothic", "Trebuchet MS", var(--font-body);

    --shadow:
        0 1px 2px rgba(18, 41, 75, 0.06), 0 8px 24px rgba(18, 41, 75, 0.06);
}

/* ---------- База ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.6em;
    font-family: var(--font-head);
    font-weight: 500;
    line-height: 1.2;
    color: var(--navy);
}

h1 {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}
h2 {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}
h3 {
    font-size: 1.3rem;
}

/* Браузер за замовчуванням робить h4–h6 дрібнішими за основний текст.
   Заголовок усередині блоку має бути більшим, а не меншим. */
h4 {
    font-size: 1.2rem;
}
h5 {
    font-size: 1.12rem;
}
h6 {
    font-size: 1.05rem;
}

p,
ul,
ol,
table,
figure,
pre {
    margin: 0 0 1.1em;
}

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover,
a:focus {
    color: var(--accent-2);
    text-decoration: underline;
}

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

/* Для iframe height: auto НЕ ставимо: воно перебиває атрибут height=""
   у розмітці, і браузер підставляє свої стандартні 150 px. */
iframe {
    max-width: 100%;
    border: 0;
}

/* Таблиці. Стандартні блокові стилі WordPress малюють рамку навколо
   всієї таблиці — прибираємо її й лишаємо тільки тонкі лінії між рядками.
   Атрибут border="1" зі старого HTML теж перекривається. */
table,
.wp-block-table table,
table[border] {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    margin-bottom: 1.25rem;
}

th,
td,
.wp-block-table th,
.wp-block-table td,
table[border] th,
table[border] td,
/*
 * Останні два селектори — щоб перебити «фірмові» стилі блоків
 * WordPress (wp-block-library-theme). Вони вмикаються підтримкою
 * wp-block-styles, малюють рамку навколо кожної клітинки й
 * підключаються ПІСЛЯ стилів теми. Вага в них така сама, тому
 * додаємо ще один рівень: клас, потім table, потім клітинка.
 * Без цього таблиця на сайті виглядала інакше, ніж у редакторі.
 */
.wp-block-table table th,
.wp-block-table table td {
    padding: 0.75rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

thead th,
.wp-block-table table thead th {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}

/* Ядро малює під шапкою жирну лінію в 3 пікселі — прибираємо,
   вона в нас на самих клітинках шапки. */
.wp-block-table table thead,
.wp-block-table table tfoot {
    border: 0;
}

tbody tr:last-child td,
.wp-block-table table tbody tr:last-child td {
    border-bottom: 0;
}

.wp-block-table figcaption {
    color: var(--muted);
    font-size: 0.875rem;
}

blockquote {
    margin: 0 0 1.1em;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 3px solid var(--accent);
    color: var(--muted);
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2rem 0;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Службове ---------- */

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

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--navy);
    color: #fff;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* ---------- Макет ---------- */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main {
    flex: 1 0 auto;
    padding-block: 2.5rem 3.5rem;
}

.layout {
    display: block;
}

.layout--sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 2.5rem;
    align-items: start;
}

.layout__content {
    min-width: 0;
}
.layout__content--wide {
    max-width: 100%;
}

.layout__aside {
    min-width: 0;
}

/* ---------- Верхня смуга ---------- */

.topbar {
    background: var(--navy);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
}

/* Верхня смуга: тільки контакти. Логотип живе в липкому меню нижче,
   щоб лишатися на екрані під час прокручування.
   Блоки розносимо по всій ширині — інакше зліва порожньо. */
.topbar__inner {
    display: flex;
    flex-wrap: nowrap; /* Забороняємо перенос елементів на новий рядок */
    align-items: center; /* Вирівнюємо іконки та текст по центру по вертикалі */
    justify-content: space-between;
    gap: 1rem 1.25rem; /* Оптимальні відступи між 3 блоками */
    padding-block: 0.85rem;
}

/* Об'єднані та виправлені стилі для блоків */
.topbar__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1 1 0%; /* Рівномірно розподіляє ширину між 3 блоками */
    min-width: 0; /* ДОЗВОЛЯЄ блоку стискатися і тримати 3 елементи в один рядок */
}

/*
 * Назва сайту в шапці. Колір темний, бо шапка світла.
 *
 * Раніше тут стояло #fff — з часів, коли логотип був у темній
 * верхній смузі. Помилка не виявлялася лише тому, що зараз у шапці
 * стоїть картинка-логотип, а текстова назва не показується. Варто
 * було б її прибрати з налаштувань — і назва зникла б безслідно.
 */
.brand {
    display: block;
    color: var(--navy);
    text-decoration: none;
}
.brand:hover {
    color: var(--accent);
    text-decoration: none;
}
.brand__name {
    display: block;
    font-family: var(--font-head);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.brand__tagline {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Іконка на всю висоту двох рядків тексту. Розмір задаємо на
   псевдоелементі — у стилях Flaticon він жорстко прописаний як 20px. */
.topbar__icon {
    flex: 0 0 auto;
    color: #fff;
    font-size: clamp(2rem, 2.5vw, 2.7rem);
    line-height: 1;
}
.topbar__icon::before {
    font-size: 1em;
    line-height: 1;
    margin: 0;
}

/* Тонкий роздільник між іконкою та текстом. */
.topbar__text {
    display: block;
    min-width: 0;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
    line-height: 1.45;
}

.topbar__label {
    display: inline;
    margin-right: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.topbar__label::after {
    content: ":";
}

.topbar__value {
    display: inline;
    color: #fff;
}
.topbar__value a {
    color: #fff;
    white-space: nowrap;
}
.topbar__value a:hover {
    color: var(--accent);
    text-decoration: none;
}
.topbar__email {
    display: block;
}
.topbar__off {
    display: block;
    font-style: normal;
    opacity: 0.7;
}

/* Перенос в один стовпчик тільки на смартфонах/планшетах */
@media (max-width: 991px) {
    .topbar__inner {
        flex-wrap: wrap;
    }
    .topbar__item {
        flex: 1 1 100%;
    }
}
/* ---------- Шапка й меню ---------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.masthead__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
}

.masthead__brand {
    margin-right: 2rem;
    flex: 0 0 auto;
}
.masthead__brand .brand__name {
    color: var(--navy);
}
.masthead__brand img,
.masthead__brand .custom-logo {
    max-height: 54px;
    width: auto;
}

.nav {
    margin-right: auto;
}

.nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__list li {
    position: relative;
}

.nav__list a {
    display: block;
    padding: 0.65rem 0;
    font-family: var(--font-head);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
}
.nav__list a:hover,
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a {
    color: var(--accent);
}

/* Підменю */
.nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 5;
    min-width: 230px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity 0.15s,
        transform 0.15s,
        visibility 0.15s;
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.nav__list .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    line-height: 1.35;
}

/* Третій рівень: розкривається збоку від другого. */
.nav__list .sub-menu .sub-menu {
    top: -0.5rem;
    left: 100%;
    margin-left: 1px;
}

/* Якщо праворуч не вистачає місця — відкриваємо вліво. */
.nav__list > li:nth-last-child(-n + 2) .sub-menu .sub-menu {
    left: auto;
    right: 100%;
    margin: 0 1px 0 0;
}

.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

/* У підменю стрілка вказує вбік, а не вниз. */
.sub-menu .menu-item-has-children > a::after {
    margin-left: 0;
    transform: translateY(-1px) rotate(-45deg);
    color: var(--accent);
}

.nav-toggle,
.search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--navy);
    cursor: pointer;
}
.search-toggle {
    display: inline-flex;
    font-size: 1.5rem;
    line-height: 1;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition:
        transform 0.2s,
        opacity 0.2s;
}
.nav-toggle__bars {
    position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}
.nav-toggle__bars::before {
    top: -7px;
}
.nav-toggle__bars::after {
    top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-7px) rotate(-45deg);
}

.site-search {
    padding-block: 1rem;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.searchform {
    display: flex;
    gap: 0.5rem;
}
.searchform__field {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 1rem;
    font: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}
.searchform__submit {
    padding: 0.7rem 1.5rem;
    font: inherit;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.searchform__submit:hover {
    background: var(--accent-2);
}

/* ---------- Заголовок сторінки й крихти ---------- */

.page-head {
    position: relative;
    padding-block: clamp(2.5rem, 6vw, 5.5rem);
    background: var(--surface);
    text-align: center;
}
.page-head__title {
    margin: 0;
}
.page-head__subtitle {
    margin: 0.5rem 0 0;
    color: var(--muted);
}

/* Банер із фото. Світла вуаль поверх — щоб темно-синій заголовок
   лишався читабельним на будь-якому знімку. */
.page-head--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.page-head--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.55);
}
.page-head--image .wrap {
    position: relative;
}
.page-head--image .page-head__title {
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.page-header-hidden .page-head {
    display: none;
}

.crumbs {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.875rem;
}
.crumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
}
.crumbs__item + .crumbs__item::before {
    content: "›";
    margin-right: 0.4rem;
    color: var(--line);
}
.crumbs__item a {
    color: var(--navy);
}

/* ---------- Контент запису ---------- */

.entry {
    margin-bottom: 2.5rem;
}

.entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--muted);
}
.entry__date {
    white-space: nowrap;
}

.entry__thumb {
    margin: 0 0 1.75rem;
}
/*
 * Головне зображення запису нічого не обрізає.
 *
 * Раніше тут стояло width: 100% разом із max-height і object-fit:
 * cover. Для горизонтальних фото це виглядало добре, але вертикальні
 * плакати — а їх серед новин чимало — не вміщалися в таку рамку, і
 * їм зрізало верх із низом разом із текстом.
 *
 * Тепер обмеження задані обидва, а розмір браузер добирає сам,
 * зберігаючи пропорції: широке фото впирається в ширину колонки,
 * високе — у 600 пікселів висоти й стає посередині.
 */
.entry__thumb img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 600px;
    margin-inline: auto;
    border-radius: var(--radius);
}

/* ---------- Галереї ----------
   Класична [gallery] віддає плитки з інлайновою шириною й обтіканням.
   Перебиваємо це сіткою. */

.gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem;
}
.gallery-columns-1 {
    grid-template-columns: 1fr;
}
.gallery-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gallery-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.gallery-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.gallery .gallery-item {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
}
.gallery .gallery-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 0 !important;
    border-radius: var(--radius);
    transition: transform 0.3s ease;
}
.gallery .gallery-item a:hover img {
    transform: scale(1.03);
}

.gallery .gallery-caption {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--muted);
}

.gallery br {
    display: none;
}

/* Галерея з vc_masonry_media_grid / vc_gallery. */
.media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem;
}
.media-grid--1 {
    grid-template-columns: 1fr;
}
.media-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.media-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.media-grid--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.media-grid--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.media-grid__item {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
}
.media-grid__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.media-grid__item:hover img {
    transform: scale(1.04);
}
.media-grid__item.is-hidden {
    display: none;
}

.media-gallery__more {
    margin: 0 0 1.75rem;
    text-align: center;
}

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

/* Блокова галерея Gutenberg. */
.wp-block-gallery {
    margin-bottom: 1.75rem;
}
.wp-block-gallery .wp-block-image img {
    border-radius: var(--radius);
}

.entry__content > *:first-child {
    margin-top: 0;
}
.entry__content h2 {
    margin-top: 2rem;
}
.entry__content h3 {
    margin-top: 1.5rem;
}

.entry__content ul,
.entry__content ol {
    padding-left: 1.25rem;
}
.entry__content li {
    margin-bottom: 0.35rem;
}

.entry__tags {
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

.entry__pages {
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

.backlink {
    margin-top: 2rem;
}

/* ---------- Картки ---------- */

.cards {
    display: grid;
    gap: var(--gap);
    margin-bottom: 2.5rem;
}
.cards--3 {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cards--4 {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition:
        box-shadow 0.2s,
        transform 0.2s;
}
.card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.card__thumb {
    display: block;
    overflow: hidden;
}
.card__thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.card__thumb--portrait img {
    aspect-ratio: 3 / 4;
}

.card__thumb--empty {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 2;
    background: var(--surface);
}
.card__thumb--portrait.card__thumb--empty {
    aspect-ratio: 3 / 4;
}

.card__initials {
    font-family: var(--font-head);
    font-size: 2.5rem;
    color: var(--line);
}

.card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}
.card__body--center {
    text-align: center;
    align-items: center;
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    color: var(--muted);
}
.card__meta .entry__date {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
}
.card__meta .entry__terms::before {
    content: "·";
    margin-right: 0.5rem;
    color: var(--line);
}
.card__meta a {
    color: var(--muted);
}
.card__meta a:hover {
    color: var(--accent);
}

.card__title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.card__title a {
    color: var(--navy);
}
.card__title a:hover {
    color: var(--accent);
    text-decoration: none;
}

.card__role {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

/* ---------- Картка співробітника ----------
   Окремі класи, щоб на неї не впливали стилі інших карток. */

/* ---------- Перемикачі розділів персоналу ---------- */

/* Два ряди, а не один суцільний: розділи закладу зверху, методичні
   комісії — окремо й дрібніше. В один ряд дев'ять кнопок різної
   довжини рвалися абияк і читалися як звалище. */
.staff-filter {
    margin-bottom: 2.25rem;
}

/*
 * Ряд — це дві колонки, а не спільний потік.
 *
 * Спершу підпис і кнопки лежали поруч в одному флексі. Поки кнопки
 * вміщалися в рядок, усе було добре; щойно вони переносилися, другий
 * рядок починався від краю й заходив під підпис. Окрема колонка під
 * кнопки тримає їх усі на одній вертикалі, скільки б не переносилося.
 */
.staff-filter__row {
    display: grid;
    grid-template-columns: 10.5rem minmax(0, 1fr);
    align-items: start;
}

.staff-filter__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.staff-filter__row--sub {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

/* Ширина колонки з підписом однакова в обох рядах, тому кнопки
   починаються з однієї вертикалі, і два ряди читаються як одна
   таблиця, а не як два випадкові рядки. */
.staff-filter__label {
    padding-top: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* На вузькому екрані колонка з'їдала б місце в самих кнопок —
   там підпис стає окремим рядком над ними. */
@media (max-width: 700px) {
    .staff-filter__row {
        grid-template-columns: minmax(0, 1fr);
    }
    .staff-filter__label {
        padding-top: 0;
        margin-bottom: 0.5rem;
    }
}

.staff-filter__item {
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--navy);
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    transition:
        background 0.15s,
        color 0.15s;
}
.staff-filter__item:hover {
    color: #fff;
    background: var(--navy);
    text-decoration: none;
}

/* Методичні комісії — дрібніші й на прозорому тлі, щоб з першого
   погляду було видно, що це рівень нижче за «Вчителів». */
.staff-filter__item--child {
    padding-block: 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
    background: none;
    border-color: var(--line);
}

.staff-filter__item.is-active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.staff-filter__item.is-active:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
}

/* Ширина картки задає й розмір фото: за пропорції 3:4 ширина 270 px
   дає висоту знімка приблизно 360 px. */
.member-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 270px;
    margin-inline: auto;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.member-card:hover {
    box-shadow: none;
    transform: none;
}

.member-card__photo {
    display: block;
    overflow: hidden;
    border-radius: 10px;
}

/* Сіра підкладка — лише під справжнім знімком, поки він вантажиться.
   Під заглушкою вона світилася б крізь пунктирну рамку й зводила
   нанівець увесь сенс тонкої рамки. */
.member-card__photo:has(img) {
    background: var(--surface);
}
.member-card__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 22%;
    transition: transform 0.35s ease;
}
.member-card:hover .member-card__photo img {
    transform: scale(1.04);
}

/*
 * Заглушка для картки без фото.
 *
 * Пропорції ті самі, що в знімка, — і це навмисно. Спершу я зробив
 * заглушку нижчою, але від цього картки в ряду стали різної висоти,
 * і сірі прямокутники просто змінилися на білі провали: у сітці
 * висота ряду однаково дорівнює найвищому елементу.
 *
 * Тому висоту повернуто, а прибрано вагу: замість заливки — тонка
 * пунктирна рамка. Сітка лишається рівною, а порожнє місце читається
 * як «фото ще немає», а не як сіра пляма.
 */
.member-card__initials {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    font-family: var(--font-head);
    font-size: 2.75rem;
    color: var(--muted);
    background: none;
    border: 1px dashed var(--line);
    border-radius: 10px;
    opacity: 0.55;
}

.member-card__body {
    padding: 0.95rem 0.25rem 0;
    text-align: center;
}

.member-card__name {
    margin: 0 0 0.3rem;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.3;
}
.member-card__name a {
    color: var(--navy);
}
.member-card__name a:hover {
    color: var(--accent);
    text-decoration: none;
}

/*
 * Посада показується повністю.
 *
 * Був проміжний варіант із обрізанням на двох рядках — щоб вирівняти
 * висоту рядів. Від нього відмовилися: посада це зміст, а не окраса,
 * і «вчитель основ правознавства та громадянської освіти, вчитель…»
 * не каже нічого. До того ж потреба відпала сама, щойно заглушка без
 * фото отримала повну висоту: тепер картки різняться на рядок-два,
 * а не на пів екрана.
 */
.member-card__role {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Позначка голови методичної комісії.
   width: fit-content — інакше рядковий блок розтягнувся б на всю
   ширину картки, і тло виглядало б як смуга, а не як позначка. */
.member-badge {
    width: fit-content;
    margin: 0 0 0.35rem;
    padding: 0.15em 0.6em;
    border-radius: var(--radius-pill);
    background: rgba(238, 90, 56, 0.12);
    color: var(--accent-2);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
}
/* У картці вміст вирівняний по центру, тож і позначку тягнемо туди.
   width: fit-content не дає їй розтягнутися, тому центрувати треба
   саме полями, а не text-align. */
.member-card__body .member-badge {
    margin-inline: auto;
}
.member-single__body .member-badge {
    margin-bottom: 0.6rem;
}

/* Категорія і звання в картці: дрібно, щоб не сперечалися з посадою. */
.member-card__meta {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--accent);
}

/* Кваліфікація на сторінці вчителя: два стовпці, назва — значення.
   auto для першого стовпця означає «по найдовшій назві», тож
   значення вирівнюються між собою без жодних фіксованих ширин. */
.member-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    margin: 0 0 1.75rem;
    padding: 1.25rem 0;
    border-block: 1px solid var(--line);
}
.member-facts dt {
    color: var(--muted);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.member-facts dd {
    margin: 0;
}

@media (max-width: 560px) {
    .member-facts {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .member-facts dd {
        margin-bottom: 0.6rem;
    }
}

.card__excerpt {
    flex: 1;
    font-size: 0.95rem;
    color: var(--muted);
}
.card__excerpt p:last-child {
    margin-bottom: 0;
}

.card__more {
    margin-top: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    align-self: flex-start;
}
.card__more::after {
    content: " →";
}

/* ---------- Кнопки ---------- */

.btn {
    display: inline-block;
    padding: 0.7rem 1.6rem;
    font-family: var(--font-head);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
}
.btn:hover {
    background: var(--accent-2);
    border-color: var(--accent-2);
    color: #fff;
    text-decoration: none;
}

.btn--outline {
    color: var(--accent);
    background: transparent;
}
.btn--outline:hover {
    color: #fff;
    background: var(--accent);
}

.btn--light {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
}
.btn--light:hover {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
}

/* ---------- Компоненти для блокового редактора ----------
   Це постійні класи теми, а не шар сумісності. Ними користуються
   сторінки, вже переписані на блоки. */

/* Іконка в кольоровому кружку. Клас іконки — з набору Flaticon. */
.icon-circle {
    display: grid;
    place-items: center;
    width: clamp(96px, 8vw, 130px);
    aspect-ratio: 1;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    font-size: clamp(2.1rem, 2.8vw, 2.9rem);
    line-height: 1;
}
.icon-circle::before {
    font-size: 1em;
    line-height: 1;
    margin: 0;
}

.icon-circle--accent {
    background: var(--accent);
    color: #fff;
}
.icon-circle--navy {
    background: var(--navy);
    color: #fff;
}
.icon-circle--light {
    background: var(--surface);
    color: var(--accent);
}

/*
 * Звичайний роздільник.
 *
 * Досі в темі був описаний лише варіант із крапкою, а простий
 * лишався на розсуд ядра — і виглядав по-різному в редакторі та на
 * сайті: у редакторі лінію видно, на сторінці вона зникала.
 * Тому задаємо вигляд самі: коротка лінія по центру, як у редакторі.
 *
 * :not(.divider-dot) потрібен, щоб не зачепити варіант із крапкою,
 * і заразом дає вагу, достатню щоб перебити стилі ядра.
 */
.wp-block-separator:not(.divider-dot) {
    width: 170px;
    max-width: 100%;
    height: 0;
    margin: 2rem auto;
    border: 0;
    border-top: 1px solid var(--line);
    opacity: 1;
}

/* Стиль «широкий» із панелі блока — на всю ширину колонки. */
.wp-block-separator.is-style-wide:not(.divider-dot) {
    width: 100%;
}

/* Роздільник секції: лінія з кружком посередині. */
.wp-block-separator.divider-dot {
    position: relative;
    width: 170px;
    max-width: 170px;
    height: 0;
    margin: 1.75rem auto 2.5rem;
    border: 0;
    border-top: 1px solid var(--accent);
    opacity: 1;
}
.wp-block-separator.divider-dot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid var(--accent);
    border-radius: 50%;
}

/* Розкривний блок «Подробиці». Замінює вкладки й акордеони
   зі старого конструктора. Працює без JavaScript. */
.wp-block-details {
    margin-bottom: 0;
    border-bottom: 1px solid var(--line);
}
.wp-block-details > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 0.25rem;
    font-family: var(--font-head);
    font-size: 1.15rem;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}
.wp-block-details > summary::-webkit-details-marker {
    display: none;
}
.wp-block-details > summary::before {
    content: "+";
    flex: 0 0 auto;
    width: 1.25rem;
    color: var(--accent);
    font-size: 1.35rem;
    line-height: 1;
}
.wp-block-details[open] > summary::before {
    content: "–";
}
.wp-block-details > summary:hover {
    color: var(--accent);
}

.wp-block-details > *:not(summary) {
    padding-left: 2rem;
}
.wp-block-details > *:last-child {
    padding-bottom: 1.5rem;
}

@media (max-width: 560px) {
    .wp-block-details > *:not(summary) {
        padding-left: 0;
    }
}

/* Блок «Петля запиту»: картки такі самі, як у стрічці новин.
   Два селектори, бо WordPress має два способи розкладки цього блока:
   старий гнучкий і новий сітковий. Який саме застосується — залежить
   від версії й від того, як блок збережено. */
.wp-block-post-template.is-flex-container,
.wp-block-post-template.is-layout-grid {
    gap: var(--gap);
}

/* Гуртки: підпис під карткою по центру — на відміну від новин, тут
   немає ні дати, ні великого тексту, і рядок сам по собі виглядав
   притиснутим до лівого краю. */
.courses-grid .wp-block-post-title,
.courses-grid .wp-block-post-excerpt {
    text-align: center;
}

.wp-block-post-template > li.wp-block-post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition:
        box-shadow 0.2s,
        transform 0.2s;
}
.wp-block-post-template > li.wp-block-post:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.wp-block-post > * {
    padding-inline: 1.25rem;
}
.wp-block-post > .wp-block-post-featured-image {
    margin: 0;
    padding: 0;
}
.wp-block-post > .wp-block-post-featured-image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.wp-block-post > *:last-child {
    padding-bottom: 1.25rem;
}

.wp-block-post .wp-block-post-date {
    margin: 1rem 0 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
}
.wp-block-post .wp-block-post-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    line-height: 1.35;
}
.wp-block-post .wp-block-post-title a {
    color: var(--navy);
}
.wp-block-post .wp-block-post-title a:hover {
    color: var(--accent);
    text-decoration: none;
}
.wp-block-post .wp-block-post-excerpt {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
}
.wp-block-post .wp-block-post-excerpt__more-text {
    margin-top: 0.6rem;
}

/*
 * Оголошення: іконка, текст, кнопка в один рядок.
 *
 * Сітка з трьох колонок в один рядок: іконка, текст, кнопка.
 * align-items: center центрує кожну колонку окремо по висоті рядка,
 * а висоту рядка задає найвищий елемент — коло з іконкою. Тому текст
 * (заголовок разом із підзаголовком) і кнопка стоять рівно проти
 * центру кола незалежно від того, скільки в них рядків.
 */
.announce {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(1rem, 2vw, 2rem);
    /* margin-block: 0 обов'язковий. Смуга оголошень — блок «Група»,
       і WordPress роздає всім її дітям 24px відступу згори й нуль
       знизу. Через це кожне оголошення з'їжджало вниз відносно свого
       розділювача: зверху 24 + власний відступ, знизу — лише власний.
       Проміжки між рядками задаємо тільки через padding, симетрично. */
    margin-block: 0;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.announce .icon-circle {
    grid-column: 1;
}
.announce__body {
    grid-column: 2;
}
.announce__action {
    grid-column: 3;
}
.announce:last-of-type {
    border-bottom: 0;
}

/* В оголошенні кружок менший, ніж у картках: тут він стоїть у рядку
   поруч із текстом, а не над ним. */
.announce .icon-circle {
    margin: 0;
    width: clamp(72px, 6vw, 92px);
}

/*
 * Гасимо вертикальні відступи, які WordPress роздає дітям блока
 * «Група» (24px згори кожному, крім першого).
 *
 * У сітці такий відступ входить у розрахунок центрування: елемент
 * із відступом згори опускається на половину його висоти. Саме через
 * це текст і кнопка стояли нижче за центр кола, а між заголовком
 * і підзаголовком зяяв завеликий проміжок.
 *
 * Клас .wp-block-group у селекторі не для краси: без нього правило
 * має меншу вагу, ніж стилі ядра, і не спрацьовує.
 */
.announce.wp-block-group > *,
.announce__body.wp-block-group > * {
    margin-block: 0;
}
.announce__body.wp-block-group > .announce__sub {
    margin-top: 0.35rem;
}

.announce__title {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
    font-weight: 400;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
}
.announce__sub {
    color: var(--muted);
    font-size: 0.95rem;
}

/* Кнопка в оголошенні набирається як решта кнопок теми — дрібним
   капітелем із розрядкою. Блокова кнопка сама по собі цього не вміє. */
.announce__action .wp-block-button__link {
    padding: 0.6rem 1.5rem;
    font-family: var(--font-head);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* На телефоні три колонки не вміщаються — складаємо все в стовпчик. */
@media (max-width: 560px) {
    .announce {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        row-gap: 0.9rem;
    }
    .announce .icon-circle,
    .announce__body,
    .announce__action {
        grid-column: 1;
    }
    /* width: 100% розтягує обгортку на всю ширину, але сама кнопка
       всередині лишалася б ліворуч: .wp-block-buttons — це флекс,
       і без цього рядка він притискає вміст до початку рядка. */
    .announce__action {
        width: 100%;
        justify-content: center;
    }
}

/* Картка з іконкою: контакти, переваги тощо. */
.info-card {
    text-align: center;
}
.info-card h3,
.info-card h4,
.info-card h5 {
    margin-bottom: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 1.05rem;
}
/* Увесь текст картки — однакового кольору й кегля.
   Раніше абзаци були приглушено-сірими, а пункти списків
   успадковували звичайний колір тексту, і в сусідніх картках
   те саме за змістом виглядало по-різному. */
.info-card p,
.info-card li {
    color: var(--text);
    font-size: 1rem;
}
.info-card p {
    margin-bottom: 0.8rem;
}
.info-card p:last-child,
.info-card ul:last-child,
.info-card ol:last-child {
    margin-bottom: 0;
}

/* Той самий блок, але з текстом по лівому краю: центрований опис
   на вісім рядків читається важко.
   Іконка при цьому лишається по центру колонки — так ряд карток
   читається як ряд, а не як рвана драбинка. */
.info-card--left {
    text-align: left;
}

/* На вузькому екрані колонки стають одна під одною, і заголовок
   доречніше теж поставити по центру, під іконкою.
   781px — саме та ширина, на якій блок «Колонки» перестає бути
   рядком і складається в стовпчик. */
@media (max-width: 781px) {
    .info-card--left h3,
    .info-card--left h4,
    .info-card--left h5 {
        text-align: center;
    }
}

/* Блоки «на всю ширину» мають розривати контейнер вмісту.
   Без цього вони впираються в 1180px обгортки й темні смуги на
   головній виглядають вставленими в рамку.
   Горизонтальну прокрутку від 100vw гасить overflow-x: clip
   на .site-main — див. розділ про вбудовані документи нижче. */
.entry__content > .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Смуга оголошень на темному тлі (верх головної сторінки).
   Сам вигляд оголошення описаний вище, тут лише поправки на темний фон. */

/* Вміст усередині повношириної смуги все одно тримаємо в межах
   основної колонки, інакше він розповзається по всьому екрану. */
.announce-band .announce {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 1.25rem;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.announce-band .announce__title {
    color: #fff;
}
.announce-band .announce__sub {
    color: rgba(255, 255, 255, 0.7);
}
.announce-band .is-style-outline .wp-block-button__link {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}
.announce-band .is-style-outline .wp-block-button__link:hover {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
}

/* Перелік із помаранчевими галочками замість маркерів. */
.checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}
.checklist li {
    position: relative;
    padding-left: 2.1rem;
    margin-bottom: 0.85rem;
}
/* Вступ на фото: текст має бути білим, бо заголовки в темі
   темно-сині, а перелік — кольору основного тексту. */
.intro-band .wp-block-heading,
.intro-band .checklist li {
    color: #fff;
}

/* Вступ у дві колонки: заголовок ліворуч, перелік праворуч.
   На телефоні колонки стають одна під одною, і вирівнювання
   заголовка по правому краю там уже недоречне — центруємо обидва,
   а сам перелік стискаємо до ширини найдовшого рядка, щоб галочки
   не роз'їхалися сходинками. */
@media (max-width: 781px) {
    .intro-split h3 {
        text-align: center;
    }
    .intro-split .checklist {
        width: fit-content;
        margin-inline: auto;
    }
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: no-repeat center / 0.7rem 0.7rem
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.5l3 3 7-8' fill='none' stroke='%23ee5a38' stroke-width='2'/%3E%3C/svg%3E");
}

/* Кроки: пронумеровані кружки в ряд. */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Чотири в ряд, потім два, потім один. Свідомо без auto-fit:
   він переносив четвертий крок на другий рядок. */
@media (max-width: 780px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 420px) {
    .steps {
        grid-template-columns: 1fr;
    }
}
.step {
    text-align: center;
}
.step__num {
    display: grid;
    place-items: center;
    width: 74px;
    aspect-ratio: 1;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.9rem;
    line-height: 1;
}
.step__num--accent {
    background: var(--accent);
}
.step__title {
    margin: 0 0 0.4rem;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
}
.step p {
    margin: 0;
    color: var(--muted);
}

/* Лічильники: число «доганяє» ціль, коли ряд потрапляє в поле зору.
   Анімацію робить theme.js за атрибутом data-count-to. */
.counters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.counter {
    text-align: center;
    padding: 1.25rem 0;
}
.counter__icon {
    display: block;
    margin-bottom: 0.6rem;
    color: var(--accent);
    font-size: 2.75rem;
    line-height: 1;
}
.counter__icon::before {
    font-size: 1em;
    line-height: 1;
    margin: 0;
}
.counter__num {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    line-height: 1.1;
    color: var(--navy);
}
.counter__desc {
    display: block;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Варіант для темного фону або фото. */
.counters--light .counter__icon,
.counters--light .counter__num {
    color: #fff;
}
.counters--light .counter__desc {
    color: rgba(255, 255, 255, 0.75);
}

/* ---------- Стрічка досягнень ----------
   Горизонтальна прокрутка на самому CSS: overflow-x: auto плюс
   scroll-snap, щоб картки «прилипали» до краю. Скрипт потрібен лише
   стрілкам — без нього стрічка все одно гортається пальцем і колесом. */

.strip {
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--line);
}

.strip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
}

.strip__title {
    margin: 0;
    margin-right: auto;
    font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
}

.strip__tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.strip__all {
    margin-right: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.strip__nav {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--navy);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.strip__nav:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.strip__nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.strip__track {
    display: flex;
    gap: var(--gap);
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.strip__item {
    flex: 0 0 clamp(210px, 24vw, 280px);
    scroll-snap-align: start;
    margin: 0;
}

.strip__card {
    display: block;
    color: inherit;
    text-decoration: none;
}
.strip__card:hover {
    text-decoration: none;
}

.strip__thumb {
    display: block;
    margin-bottom: 0.75rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
}
.strip__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.strip__card:hover .strip__thumb img {
    transform: scale(1.04);
}

.strip__date {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.strip__name {
    display: block;
    font-family: var(--font-head);
    font-size: 1.02rem;
    line-height: 1.35;
    color: var(--navy);
}
.strip__card:hover .strip__name {
    color: var(--accent);
}

/* На телефоні стрілки зайві — там гортають пальцем. */
@media (max-width: 560px) {
    .strip__nav {
        display: none;
    }
}

/* ---------- Дрібні компоненти ---------- */

.factlist {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--muted);
}
.factlist li {
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--line);
}
.factlist li:last-child {
    border-bottom: 0;
}
.factlist span {
    display: inline-block;
    min-width: 8rem;
    color: var(--navy);
    font-weight: 600;
}
.factlist--wide {
    margin-bottom: 1.75rem;
}

.course-facts {
    font-size: 0.9rem;
    color: var(--muted);
}
.course-facts div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--line);
}
.course-facts span {
    color: var(--navy);
    font-weight: 600;
}

/* Назва властивості — приглушена, значення лишається помітним.
   Без цього правила обидві половини рядка були б однаково жирними:
   загальний селектор вище фарбує будь-який span. */
.course-facts__label {
    color: var(--muted);
    font-weight: 400;
}

.course-facts div:last-child {
    border-bottom: 0;
}

.socials {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

/* Посилання на соцмережу з іконкою зі шрифту теми.
   Колір навмисно не заданий — іконка успадковує колір посилання,
   тож однаково працює і на світлому тлі, і на темному підвалі. */
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.social-link__icon {
    flex: 0 0 auto;
    font-size: 1.6rem;
    line-height: 1;
}
.social-link__icon::before {
    font-size: 1em;
    line-height: 1;
    margin: 0;
}

/* Сторінка окремого співробітника.
   Клас навмисно не `.member` — його WordPress сам додає до кожного
   запису цього типу, і стилі протікали на картки в сітці. */
.member-single {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}
.member-single__photo {
    margin: 0;
}
.member-single__photo img {
    width: 100%;
    border-radius: var(--radius);
}
.member-single__role {
    margin: 0 0 1.25rem;
    color: var(--accent);
    font-weight: 600;
}

.notice {
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
}

.notice--empty,
.notice--404 {
    padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
    text-align: center;
}
.notice--empty h2,
.notice--404 h2 {
    margin-bottom: 0.8rem;
}

.notice--empty p,
.notice--404 p {
    margin-bottom: 1.75rem;
}

.notice--empty .searchform,
.notice--404 .searchform {
    max-width: 520px;
    margin: 0 auto 1.75rem;
}

.notice--empty > *:last-child,
.notice--404 > *:last-child {
    margin-bottom: 0;
}

.results {
    margin: 0;
    padding: 0;
    list-style: none;
}
.results__item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}
.results__type {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}
.results__title {
    margin: 0.25rem 0 0.35rem;
    font-size: 1.15rem;
}
.results__title a {
    color: var(--navy);
}
.results__excerpt {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Пагінація */
.pagination {
    margin-block: 2rem;
}
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 0.6rem;
    color: var(--navy);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.pagination .page-numbers:hover {
    border-color: var(--accent);
    text-decoration: none;
}
.pagination .current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.post-navigation {
    margin-block: 2.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.post-navigation .nav-links {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.postnav__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.postnav__title {
    color: var(--navy);
    font-family: var(--font-head);
}

/* Віджети */
.widget {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--line);
}
.widget:last-child {
    border-bottom: 0;
}
.widget__title {
    font-size: 1.05rem;
    margin-bottom: 0.75rem;
}
.widget ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.widget li {
    padding: 0.3rem 0;
}

/* Коментарі */
.comments {
    margin-top: 3rem;
}
.comments__list {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}
.comments__list ol {
    list-style: none;
    padding-left: 1.5rem;
}
.comments__list .comment-body {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.7rem 1rem;
    font: inherit;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.comment-form textarea {
    min-height: 160px;
}
.comment-form .submit {
    padding: 0.7rem 1.6rem;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

/* ---------- Підвал ---------- */

.site-footer {
    padding-block: 2.75rem 1.75rem;
    background: var(--navy);
    color: rgba(255, 255, 255, 0.8);
}
.site-footer a {
    color: #fff;
}
.site-footer h2,
.site-footer h3 {
    color: #fff;
}
.site-footer__widgets {
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    margin-bottom: 1.5rem;
}

/* Кожна колонка стакається сама: віджети йдуть один під одним
   без порожнеч. */
.site-footer__col > .widget + .widget {
    margin-top: 2.5rem;
}
.site-footer .widget {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Заголовок віджета: великі літери й помаранчева риска під ним.
   Другий селектор — для блокових віджетів. Класичним віджетам клас
   .widget__title підставляє сама тема, а блокові його не мають:
   там заголовок — звичайний блок. Без цього рядка підвал виглядав би
   по-різному залежно від того, яким віджетом його наповнили. */
.site-footer .widget__title,
.site-footer .widget .wp-block-heading {
    position: relative;
    margin-bottom: 1.75rem;
    padding-bottom: 0.9rem;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
}
.site-footer .widget__title::after,
.site-footer .widget .wp-block-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58px;
    height: 3px;
    background: var(--accent);
}

/* Списки з галочками. */
.site-footer .widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer .widget li:not(.item-post) {
    position: relative;
    padding: 0 0 0 2rem;
    margin-bottom: 0.7rem;
}
.site-footer .widget li:not(.item-post)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: no-repeat center / 0.6rem 0.6rem
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.5l3 3 7-8' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}

/* Віджет «Свіжі новини» з enfant-theme-extension. */
.recent-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recent-posts .item-post {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 0.2rem 1.15rem;
    margin-bottom: 1.15rem;
}
.recent-posts .item-post:last-child {
    margin-bottom: 0;
}
.recent-posts .item-post > a:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    overflow: hidden;
    border-radius: 3px;
}
.recent-posts .item-post img {
    width: 92px;
    height: 92px;
    object-fit: cover;
}
.recent-posts h6 {
    grid-column: 2;
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
}
/*
 * Колір назви залежить від того, де стоїть віджет.
 *
 * Спершу тут було просто #fff — бо писалося під темний підвал, де
 * віджет і жив. Але той самий віджет можна покласти в бічну колонку,
 * і там білі назви на білому тлі просто зникали: видно було лише
 * мініатюру й дату, а підпис проявлявся тільки під курсором.
 */
.recent-posts h6 a {
    color: var(--navy);
}
.site-footer .recent-posts h6 a {
    color: #fff;
}
.recent-posts h6 a:hover {
    color: var(--accent);
    text-decoration: none;
}

.recent-posts .ztl-recent-post-date {
    grid-column: 2;
}
.recent-posts .ztl-recent-post-date a {
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.recent-posts .ztl-recent-post-date b {
    font-family: var(--font-head);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: -1px;
}
.site-footer__line {
    margin: 0 0 0.35rem;
}
.site-footer__copy {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.85rem;
    text-align: center;
    opacity: 0.65;
}

.footer-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 30;
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow);
}

/* ---------- Вбудовані документи та карти ----------
   Ці правила стосуються блока «Файл» і карт у вмісті сторінок.
   Раніше жили в тимчасовому блоці сумісності — перенесені сюди,
   бо потрібні переписаним на блоки сторінкам. */

/* Прибирає горизонтальну прокрутку від повношириних блоків.
   Обрізаємо саме на .site-main, а не на body: якщо поставити це на
   body, у нього з'являється власний контекст прокрутки й липка шапка
   перестає фіксуватись. */
.site-main {
    overflow-x: clip;
    padding-top: 0;
}
.site-main > .wrap {
    padding-top: 2.5rem;
}

/* Виняток: якщо вміст починається з повношириної смуги, вона має
   притискатися до того, що над нею — саме так задумано на головній. */
.site-main > .wrap:has(.entry__content > .alignfull:first-child) {
    padding-top: 0;
}
.entry__content > .alignfull:first-child {
    margin-top: 0;
}

.wp-block-file {
    margin-bottom: 1.5rem;
}

/* Вбудований PDF. Висоту блок прописує інлайном у самому елементі,
   тому перебиваємо її явно. */
.wp-block-file__embed,
.entry__content iframe[src*=".pdf"],
.entry__content object[type="application/pdf"],
.entry__content embed[type="application/pdf"] {
    display: block;
    width: 100%;
    height: min(85vh, 950px) !important;
    margin-bottom: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.wp-block-file__button {
    display: inline-block;
    margin-left: 0.75rem;
    padding: 0.5rem 1.4rem;
    font-size: 0.85rem;
    color: #fff;
    background: var(--accent);
    border-radius: var(--radius-pill);
    text-decoration: none;
}
.wp-block-file__button:hover {
    background: var(--accent-2);
    color: #fff;
    text-decoration: none;
}

/* Карта. Висота задається тут, а не атрибутом iframe у вмісті. */
.map-embed,
.entry__content iframe[src*="google.com/maps"],
.entry__content iframe[src*="maps.google"],
.entry__content iframe[src*="openstreetmap.org"] {
    display: block;
    width: 100%;
    height: 350px;
    border: 0;
    border-radius: var(--radius);
}


/* ---------- Contact Form 7 ---------- */

.wpcf7 {
    max-width: 100%;
}
.wpcf7-form p {
    margin: 0 0 1.1rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 1.05rem 1.6rem;
    font: inherit;
    color: var(--text);
    background: #f0f1f3;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    transition:
        background 0.15s,
        border-color 0.15s;
}

.wpcf7-form textarea {
    min-height: 260px;
    border-radius: 18px;
    resize: vertical;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: var(--muted);
    opacity: 1;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    background: #fff;
    border-color: var(--accent);
    outline: none;
}

.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 1rem 2.6rem;
    font-family: var(--font-head);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
    background: var(--accent-2);
}

.wpcf7-spinner {
    margin-left: 0.75rem;
}

.wpcf7 form .wpcf7-response-output {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    border-width: 1px;
    font-size: 0.95rem;
}
.wpcf7-not-valid-tip {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: #c0392b;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
    .layout--sidebar {
        grid-template-columns: 1fr;
    }
    .member-single {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 1.75rem;
    }
}

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
        order: 3;
    }

    /*
     * Меню має власну прокрутку, і це не примха.
     *
     * .masthead — липкий (position: sticky, top: 0). Коли меню
     * розгортається, шапка стає вищою за екран, а липкий елемент
     * вищий за екран не прокручується разом зі сторінкою: він
     * лишається прибитим до верху, і нижні пункти стають
     * недосяжними. Тому прокручуємо не сторінку, а саме меню.
     *
     * 64px — мінімальна висота смуги з логотипом, її треба відняти.
     * dvh замість vh: на мобільних панель браузера то з'являється,
     * то ховається, і vh рахується від найбільшого стану — меню
     * вилазило б за екран.
     */
    .nav {
        order: 5;
        flex-basis: 100%;
        display: none;
        padding-bottom: 1rem;
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .nav.is-open {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .nav__list > li {
        border-bottom: 1px solid var(--line);
    }
    .nav__list a {
        padding: 0.8rem 0;
    }

    .nav__list .sub-menu,
    .nav__list .sub-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 0.5rem 1rem;
        margin: 0;
        min-width: 0;
    }
    .nav__list .sub-menu a {
        padding: 0.6rem 0;
    }
    .sub-menu .menu-item-has-children > a::after {
        transform: translateY(-2px) rotate(45deg);
    }

    .masthead__inner {
        flex-wrap: wrap;
    }
    .masthead__brand {
        order: 1;
    }
    .search-toggle {
        order: 2;
        margin-left: auto;
    }

    .topbar__inner {
        gap: 0.9rem 1.5rem;
        justify-content: flex-start;
    }
    .topbar__item {
        font-size: 0.85rem;
        gap: 0.8rem;
    }
    .topbar__icon {
        font-size: 1.9rem;
    }
    .topbar__text {
        padding-left: 0.8rem;
    }

    .member-single {
        grid-template-columns: 1fr;
    }
    .member-single__photo {
        max-width: 260px;
    }

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

}

@media (max-width: 560px) {
    .site-main {
        padding-block: 1.5rem 2.5rem;
    }
    .page-head {
        padding-block: 2rem;
    }
    .cards--3,
    .cards--4,
    .cards--2 {
        grid-template-columns: 1fr;
    }
    .site-footer__widgets {
        grid-template-columns: 1fr;
    }
    .factlist span {
        display: block;
        min-width: 0;
    }
}

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

@media print {
    .topbar,
    .masthead,
    .site-footer,
    .to-top,
    .crumbs,
    .pagination {
        display: none !important;
    }
    body {
        color: #000;
    }
}