/* ============================================================
   Фірмовий шрифт Inter — self-hosted (wwwroot/fonts), включно з
   кирилицею: всі тексти сайту рендеряться однаково на будь-якому
   пристрої, без залежності від системних шрифтів чи CDN
   ============================================================ */
/* Фірмовий шрифт — Montserrat (самохостований, latin+cyrillic) */
@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat-v31-cyrillic_latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat-v31-cyrillic_latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat-v31-cyrillic_latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/fonts/montserrat-v31-cyrillic_latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Inter — запасний (курсив, ваги поза набором Montserrat) */
@font-face {
    font-family: "Inter";
    src: url("/fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ============================================================
   Тема kspu.edu за методологією Google Material Design 3
   (Material You). Seed-колір — фірмовий синій теми «2022» #3175AB,
   акцент — золотий #C9990A (tertiary). Роботі MD3-ролей відповідають
   CSS-змінні нижче (tonal palette виведена від seed-кольору).
   Класи компонентів збережені — розмітка не змінювалась.
   ============================================================ */

:root {
    /* --- Палітра за ТЗ редизайну (2026-07): глибокий синій + бурштиновий CTA.
       Структура токенів — MD3 color roles, значення — з ТЗ п.4.1 --- */
    --primary: #1E3A8A;                 /* глибокий синій — стабільність */
    --on-primary: #FFFFFF;
    --primary-container: #DBEAFE;
    --on-primary-container: #0F2042;

    --secondary: #475569;
    --on-secondary: #FFFFFF;
    --secondary-container: #E2E8F0;
    --on-secondary-container: #1E293B;

    --tertiary: #B45309;                /* бурштиновий (#F59E0B) у доступному тоні */
    --on-tertiary: #FFFFFF;
    --tertiary-container: #FEF3C7;
    --on-tertiary-container: #451A03;

    --cta: #F59E0B;                     /* кнопки дій за ТЗ */
    --on-cta: #1E293B;
    --cta-hover: #D97706;

    --error: #BA1A1A;
    --on-error: #FFFFFF;
    --error-container: #FFDAD6;
    --on-error-container: #410002;

    --surface: #F8FAFC;                 /* світло-сірий фон (ТЗ) */
    --surface-dim: #E2E8F0;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #F1F5F9;
    --surface-container: #E9EEF4;
    --surface-container-high: #E2E8F0;
    --on-surface: #1E293B;              /* глибокий графітовий (ТЗ) */
    --on-surface-variant: #475569;
    --outline: #64748B;
    --outline-variant: #CBD5E1;

    --inverse-surface: #1E293B;
    --inverse-on-surface: #F1F5F9;

    /* --- MD3 elevation (тіні рівнів 1–3) --- */
    --elevation-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --elevation-2: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15);
    --elevation-3: 0 1px 3px rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15);

    /* --- MD3 shape scale --- */
    --shape-xs: 4px;
    --shape-sm: 8px;
    --shape-md: 12px;
    --shape-lg: 16px;
    --shape-xl: 28px;
    --shape-full: 999px;

    /* --- MD3 state layers --- */
    --state-hover: 8%;
    --state-press: 12%;

    /* --- MD3 motion --- */
    --easing-standard: cubic-bezier(.2, 0, 0, 1);
    --duration-short: 150ms;
    --duration-medium: 300ms;

    /* --- Типографіка за ТЗ п.4.2: Inter/Roboto/Open Sans, fluid scale --- */
    --font: Montserrat, Inter, Roboto, "Open Sans", system-ui, "Segoe UI", Arial, sans-serif;
    --fs-h1: clamp(2.25rem, 4.5vw, 3rem);       /* 36–48px Bold */
    --fs-h2: clamp(1.75rem, 3.2vw, 2rem);       /* 28–32px Semi-Bold */
    --fs-h3: clamp(1.25rem, 2.4vw, 1.5rem);     /* 20–24px Medium */
    /* Повна ширина екрана з невеликими полями (відгук: «30-40% пустоти») */
    --container: min(1720px, 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;               /* body-large: 16px */
    line-height: 1.5;
    letter-spacing: .009em;
    color: var(--on-surface);
    background: var(--surface);
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }

a { color: var(--primary); }
a:hover { color: var(--on-primary-container); }

:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--shape-xs);
}

/* ============================================================
   Top App Bar — сучасний світлий хедер: лого + назва зліва,
   CTA справа, sticky з тінню (редизайн 2026-07)
   ============================================================ */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    padding: .65rem clamp(1rem, 4vw, 2.5rem);
    box-shadow: var(--elevation-1);
    position: sticky;
    top: 0;
    z-index: 300;
    /* Фірмова лінія-акцент знизу: синій → бурштин */
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--primary) 0 60%, var(--cta)) 1;
}

.site-header__logo {
    display: flex;
    align-items: center;
    gap: .85rem;
    text-decoration: none;
}

.site-header__logo img {
    height: 60px;
    width: 60px;
    transition: transform var(--duration-medium) var(--easing-standard);
}

.site-header__logo:hover img { transform: scale(1.05); }

.site-header__wordmark {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1.2;
}

.site-header__wordmark strong {
    color: var(--primary);
    font-size: clamp(1.02rem, 2.2vw, 1.3rem);
    font-weight: 700;
    letter-spacing: .01em;
}

.site-header__logo:hover .site-header__wordmark strong { color: var(--on-primary-container); }

.site-header__wordmark small {
    color: var(--on-surface-variant);
    font-size: .72rem;               /* label-small */
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .site-header__wordmark small { display: none; }
    .site-header__logo img { height: 48px; width: 48px; }
}

.site-header__langs { display: flex; gap: .25rem; }

/* Мовний перемикач — MD3 segmented buttons */
.site-header__lang {
    padding: .3rem .8rem;
    border-radius: var(--shape-full);
    color: var(--on-primary);
    text-decoration: none;
    font-size: .875rem;             /* label-large */
    font-weight: 500;
    transition: background var(--duration-short) var(--easing-standard);
}

a.site-header__lang:hover { background: rgba(255,255,255,.12); color: var(--on-primary); }

.site-header__lang--active {
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
}

.site-header__auth {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--primary-container);
    font-size: .875rem;
}

.site-header__auth a { color: var(--on-primary); text-decoration: none; font-weight: 500; }
.site-header__auth a:hover { text-decoration: underline; }

.site-header__logout { margin: 0; }

/* Outlined button на кольоровому тлі */
.site-header__logout button {
    background: transparent;
    border: 1px solid rgba(255,255,255,.6);
    color: var(--on-primary);
    border-radius: var(--shape-full);
    padding: .35rem 1rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-short) var(--easing-standard);
}

.site-header__logout button:hover { background: rgba(255,255,255,.12); }

/* ============================================================
   Головне меню — MD3 tabs з active-індикатором
   ============================================================ */
.site-nav {
    background: var(--surface-container-low);
    border-bottom: 1px solid var(--outline-variant);
}

.site-nav__bar {
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    max-width: var(--container);
}

/* Коли пунктів більше, ніж влазить (редактор/адмін бачить додаткові
   розділи) — перенос на наступний рядок. НЕ overflow-x: скрол-контейнер
   обрізає абсолютні дропдауни підменю */
.site-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.site-nav__item { position: relative; }

.site-nav__list a {
    position: relative;
    display: block;
    padding: .7rem clamp(.4rem, 1vw, .9rem);
    color: var(--on-surface-variant);
    font-size: clamp(.78rem, .9vw, .875rem);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--shape-sm) var(--shape-sm) 0 0;
    transition: background var(--duration-short) var(--easing-standard),
                color var(--duration-short) var(--easing-standard);
}

.site-nav__list a:hover {
    background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
    color: var(--primary);
}

.site-nav__list a.site-nav__active {
    color: var(--primary);
}

/* Active indicator — фірмова MD3-смужка */
.site-nav__list a.site-nav__active::after {
    content: "";
    position: absolute;
    left: .9rem; right: .9rem; bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--primary);
}

/* Дропдаун другого рівня (як на kspu.edu) */
.site-nav__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 240px;
    max-width: 320px;
    list-style: none;
    margin: 0;
    padding: .4rem 0;
    background: var(--surface);
    border-radius: 0 0 var(--shape-md) var(--shape-md);
    box-shadow: var(--elevation-3);
    border-top: 3px solid var(--primary);
}

/* Праві пункти — дропдаун вирівнюється правим краєм, щоб не вилазив */
.site-nav__item:nth-last-child(-n+2) .site-nav__dropdown { left: auto; right: 0; }

.site-nav__dropdown a {
    padding: .5rem 1rem;
    white-space: normal;
    font-size: .84rem;
    border-radius: 0;
}

.site-nav__caret {
    display: none;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    font-size: 1rem;
    cursor: pointer;
    padding: .5rem .8rem;
}

/* Бургер: три смужки в колонку + підпис «Меню» */
.site-nav__burger {
    display: none;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: .7rem 0;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
}

.site-nav__burger-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-nav__burger-lines span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary);
}

@media (min-width: 1025px) {
    /* Десктоп: дропдаун по hover/фокусу */
    .site-nav__item:hover .site-nav__dropdown,
    .site-nav__item:focus-within .site-nav__dropdown { display: block; }
}

@media (max-width: 1024px) {
    .site-nav__burger { display: inline-flex; }

    .site-nav__list { display: none; flex-direction: column; padding-bottom: .5rem; }
    .site-nav--open .site-nav__list { display: flex; }

    .site-nav__item { display: flex; flex-wrap: wrap; align-items: center; }
    .site-nav__item > a { flex: 1; }
    .site-nav__caret { display: block; }

    .site-nav__dropdown {
        display: none;
        position: static;
        flex-basis: 100%;
        box-shadow: none;
        border-top: none;
        border-left: 2px solid var(--outline-variant);
        margin-left: .8rem;
        max-width: none;
    }
    .site-nav__item--open .site-nav__dropdown { display: block; }
}

/* ============================================================
   Хлібні крихти
   ============================================================ */
/* Приглушені: дрібний кегль, сірі лінки — не конкурують із контентом */
.breadcrumbs {
    max-width: var(--container);
    margin: .5rem auto 0;
    padding: 0 clamp(1rem, 3vw, 2rem);
    font-size: .72rem;              /* label-small */
    opacity: .85;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    padding: 0;
    color: var(--on-surface-variant);
}

.breadcrumbs li + li::before {
    content: "›";
    margin-right: .25rem;
    color: var(--outline);
}

.breadcrumbs a { color: var(--on-surface-variant); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumbs li[aria-current] { color: var(--on-surface-variant); font-weight: 500; }

/* ============================================================
   Каркас макетів (7 legacy-макетів, MD3-поверхня)
   ============================================================ */
.layout {
    display: grid;
    gap: 1.25rem;
    max-width: var(--container);
    margin: 1.25rem auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    align-items: start;
}

.layout-zone { min-width: 0; }

.layout--fullpage { grid-template-columns: 1fr; }

/* LeftSideBar: MainContainer = вузька ЛІВА (300px), RightContainer = контент
   (звірено з legacy ascx) */
.layout--leftsidebar { grid-template-columns: 300px 1fr; }

/* RightSideBar: Main = контент, Right = вузька права */
.layout--rightsidebar { grid-template-columns: 1fr 300px; }

/* ThreeColumnsPage: ліва 300px + дві контентні */
.layout--threecolumnspage,
.layout--threecolumnspagewithfooter {
    grid-template-columns: 300px 1fr 1fr;
}

/* DefaultPageLayout: 18% / 62% (центр — контент) / 18%, як legacy */
.layout--defaultpagelayout,
.layout--defaultpagelayoutwithtop {
    grid-template-columns: minmax(190px, 1fr) 3.4fr minmax(190px, 1fr);
}

.layout-zone--topcolumn,
.layout-zone--fourthcolumn { grid-column: 1 / -1; }

@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr !important; }
    .layout-zone { grid-column: auto !important; }
    .layout-zone--rightcontainer,
    .layout-zone--firstcolumn { order: 2; }
}

/* Сумісність зі старим каркасом (login/admin) */
.page-zone--top {
    max-width: var(--container);
    margin: 1.25rem auto 0;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.page-layout {
    display: flex;
    gap: 1.25rem;
    max-width: var(--container);
    margin: 1.25rem auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    align-items: flex-start;
}

.page-zone--left { flex: 0 0 250px; min-width: 0; }
.page-zone--content { flex: 1; min-width: 0; }
.page-zone--right { flex: 0 0 260px; min-width: 0; }

@media (max-width: 900px) {
    .page-layout { flex-direction: column; }
    .page-zone--left, .page-zone--right { flex: none; width: 100%; order: 2; }
    .page-zone--content { order: 1; width: 100%; }
}

/* ============================================================
   Модулі — MD3 elevated cards
   ============================================================ */
.module {
    background: var(--surface-container-lowest);
    border-radius: var(--shape-md);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: 1.25rem;
    box-shadow: var(--elevation-1);
    overflow-wrap: break-word;
    transition: box-shadow var(--duration-medium) var(--easing-standard);
}

.module:hover { box-shadow: var(--elevation-2); }

.module__title {
    margin: 0 0 .75rem;
    color: var(--on-primary-container);
    font-size: clamp(1.15rem, 2.4vw, 1.375rem);  /* title-large */
    font-weight: 500;
    line-height: 1.3;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--outline-variant);
}

/* Приборкання legacy-HTML контенту */
/* Legacy-таблиці ширші за екран: max-width таблицю НЕ стискає нижче
   min-content — на iOS (WebKit) це роздуває канву сторінки й дає
   «фантомний» скрол під футером. Тому — внутрішній горизонтальний скрол */
.module table {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Вбудовані медіа з legacy-контенту не ширші за колонку */
.module iframe,
.module embed,
.module object,
.module video {
    max-width: 100%;
}
.module iframe { max-width: 100%; }

/* ============================================================
   Навігація (секційне меню) — MD3 list items
   ============================================================ */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    display: block;
    padding: .6rem .9rem;
    margin: .125rem 0;
    color: var(--on-surface);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--shape-full);
    transition: background var(--duration-short) var(--easing-standard);
}

.nav-menu a:hover {
    background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
    color: var(--primary);
}

.nav-menu a.nav-menu__active {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
    font-weight: 600;
}

.nav-menu__parent { color: inherit; text-decoration: none; }
.nav-menu__parent:hover { text-decoration: underline; }

/* ============================================================
   Новини — MD3 list + state layers
   ============================================================ */
/* Компактна стрічка: менші відступи, анонс обрізається до 2 рядків */
.news-item {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    border-bottom: 1px solid var(--outline-variant);
    padding: .6rem .35rem;
    border-radius: var(--shape-sm);
    transition: background var(--duration-short) var(--easing-standard);
}

/* Мініатюра новини — акцент на фото (відгук 2026-07): велика, скруглена */
.news-item__thumb {
    flex: 0 0 168px;
    width: 168px;
    height: 112px;
    object-fit: cover;
    border-radius: var(--shape-md);
    margin-top: .2rem;
    box-shadow: var(--elevation-1);
}

.news-item__body { flex: 1; min-width: 0; }

@media (max-width: 560px) {
    .news-item__thumb { flex-basis: 96px; width: 96px; height: 68px; }
}

.news-item:hover {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.news-item:last-of-type { border-bottom: none; }

.news-item__title {
    margin: 0;
    font-size: .95rem;               /* title-small */
    font-weight: 500;
    line-height: 1.35;
}

/* Анонс — 3 рядки (стиль стрічки соцмереж), картинки в анонсі ховаються
   (перше фото вже витягнуте в мініатюру) */
.news-item__description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--on-surface-variant);
    font-size: .875rem;
    line-height: 1.5;
    margin-top: .3rem;
}

.news-item__description img { display: none; }
.news-item__description p { margin: 0; }

/* Заголовок і фото — клікабельні (як у стрічках соцмереж), без підкреслень */
.news-item__title a {
    color: var(--on-surface);
    text-decoration: none;
    transition: color var(--duration-short) var(--easing-standard);
}

.news-item:hover .news-item__title a { color: var(--primary); }

.news-item__thumb-link { flex: 0 0 auto; display: block; border-radius: var(--shape-md); }
.news-item__thumb-link:hover .news-item__thumb { box-shadow: var(--elevation-2); }

/* Мета-рядок: дата · перегляди — дрібно, без акценту */
.news-item__meta {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .15rem;
    color: var(--on-surface-variant);
    font-size: .74rem;               /* label-small */
}

.news-item__views {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    opacity: .8;
}

.news-reader__date,
.news-reader__views {
    color: var(--on-surface-variant);
    font-size: .8rem;
}

.module--publisher__archive {
    display: inline-block;
    margin-top: .8rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--outline);
    border-radius: var(--shape-full);
    color: var(--primary);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-short) var(--easing-standard);
}

.module--publisher__archive:hover {
    background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
}

.news-reader__title {
    margin: 0 0 .25rem;
    color: var(--on-primary-container);
    font-size: clamp(1.4rem, 3vw, 1.75rem);  /* headline-medium */
    font-weight: 500;
    line-height: 1.3;
}

/* ============================================================
   Карусель / Галерея — MD3 media cards
   ============================================================ */
.carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: var(--outline-variant) transparent;
}

.carousel__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

.carousel__slide img {
    width: 100%;
    border-radius: var(--shape-lg);
    display: block;
}

.carousel__slide figcaption {
    text-align: center;
    color: var(--on-surface-variant);
    font-size: .875rem;
    margin-top: .5rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}

.gallery-item { margin: 0; text-align: center; }

.gallery-item img {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--shape-md);
    box-shadow: var(--elevation-1);
    transition: box-shadow var(--duration-medium) var(--easing-standard),
                transform var(--duration-medium) var(--easing-standard);
}

.gallery-item a:hover img {
    transform: scale(1.03);
    box-shadow: var(--elevation-3);
}

.gallery-item figcaption {
    font-size: .75rem;
    color: var(--on-surface-variant);
    margin-top: .4rem;
}

/* ============================================================
   Таблиці — MD3 data tables
   ============================================================ */
.files-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;             /* body-medium */
}

.files-table th,
.files-table td {
    text-align: left;
    padding: .7rem .75rem;
    border-bottom: 1px solid var(--outline-variant);
    vertical-align: top;
}

.files-table thead th {
    color: var(--on-surface-variant);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.files-table tbody tr {
    transition: background var(--duration-short) var(--easing-standard);
}

.files-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.files-table__count { text-align: center; }

@media (max-width: 720px) {
    .files-table { display: block; overflow-x: auto; }
}

/* ============================================================
   Контакти
   ============================================================ */
.contact-card {
    padding: 1rem 0;
    border-bottom: 1px solid var(--outline-variant);
}

.contact-card:last-child { border-bottom: none; }

.contact-card__department {
    margin: 0 0 .5rem;
    color: var(--on-primary-container);
    font-size: 1rem;
    font-weight: 500;
}

/* Ширина відстежується по САМОМУ модулю (container query), а не по екрану:
   модуль контактів часто стоїть у вузькій боковій колонці ~300px,
   де двоколонкова сітка ламає текст по слову на рядок */
.module--contacts { container-type: inline-size; }

.contact-card__rows {
    display: grid;
    grid-template-columns: minmax(96px, 140px) 1fr;
    gap: .3rem .75rem;
    margin: 0;
    font-size: .875rem;
    overflow-wrap: anywhere;   /* довгі email/URL не розпирають колонку */
}

/* Вузький контейнер (бокова колонка чи телефон) — підпис НАД значенням */
@container (max-width: 430px) {
    .contact-card__rows { grid-template-columns: 1fr; }
    .contact-card__rows dt { margin-top: .4rem; font-weight: 600; }
}

/* Fallback для старих браузерів без container queries */
@media (max-width: 540px) {
    .contact-card__rows { grid-template-columns: 1fr; }
    .contact-card__rows dt { margin-top: .4rem; font-weight: 600; }
}

.contact-card__rows dt { color: var(--on-surface-variant); }
.contact-card__rows dd { margin: 0; }

/* ============================================================
   Календар
   ============================================================ */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.calendar-nav__month {
    font-weight: 600;
    color: var(--on-primary-container);
    text-transform: capitalize;
}

.calendar-nav__link {
    padding: .4rem .9rem;
    border-radius: var(--shape-full);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-short) var(--easing-standard);
}

.calendar-nav__link:hover {
    background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
}

.calendar-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.calendar-grid th {
    padding: .4rem;
    color: var(--on-surface-variant);
    font-size: .75rem;
    font-weight: 600;
    border-bottom: 2px solid var(--outline-variant);
}

.calendar-grid__day,
.calendar-grid__empty {
    vertical-align: top;
    height: 72px;
    padding: .25rem;
    border: 1px solid var(--surface-container);
}

.calendar-grid__date { font-size: .75rem; color: var(--on-surface-variant); }

.calendar-event {
    display: block;
    font-size: .72rem;
    line-height: 1.25;
    border-radius: var(--shape-xs);
    padding: .15rem .4rem;
    margin-top: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .calendar-grid__day, .calendar-grid__empty { height: 48px; }
    .calendar-event { font-size: 0; padding: 3px; height: 8px; }
}

/* ============================================================
   Списки посилань / оновлень
   ============================================================ */
.link-list,
.updates-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .875rem;
}

.link-list li + li,
.updates-list li + li { margin-top: .4rem; }

.link-list a,
.updates-list a { text-decoration: none; }
.link-list a:hover,
.updates-list a:hover { text-decoration: underline; }

.updates-list time {
    display: block;
    color: var(--on-surface-variant);
    font-size: .7rem;
}

/* ============================================================
   Пагінація — MD3 icon buttons
   ============================================================ */
.archive-pager {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: 1rem;
}

.archive-pager a,
.archive-pager__current {
    min-width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--shape-full);
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: background var(--duration-short) var(--easing-standard);
}

.archive-pager a:hover {
    background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
    color: var(--primary);
}

.archive-pager__current {
    background: var(--primary);
    color: var(--on-primary);
}

/* ============================================================
   Форми — MD3 outlined text fields + filled buttons
   ============================================================ */
.wish-form {
    display: grid;
    gap: 1rem;
    max-width: 480px;
}

.wish-form label {
    display: grid;
    gap: .35rem;
    color: var(--on-surface-variant);
    font-size: .75rem;               /* label-medium над полем */
    font-weight: 500;
    letter-spacing: .03em;
}

.wish-form input,
.wish-form textarea,
.wish-form select {
    padding: .75rem .9rem;
    border: 1px solid var(--outline);
    border-radius: var(--shape-xs);
    font: inherit;
    font-size: 1rem;
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    transition: border-color var(--duration-short) var(--easing-standard),
                box-shadow var(--duration-short) var(--easing-standard);
}

.wish-form input:hover,
.wish-form textarea:hover,
.wish-form select:hover { border-color: var(--on-surface); }

.wish-form input:focus,
.wish-form textarea:focus,
.wish-form select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--primary);
}

.wish-form input[type="file"] {
    border-style: dashed;
    background: var(--surface-container-low);
}

/* Filled button (MD3) */
.wish-form button,
.edit-html-form button {
    justify-self: start;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: var(--shape-full);
    padding: .65rem 1.6rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: none;
    transition: box-shadow var(--duration-short) var(--easing-standard),
                background var(--duration-short) var(--easing-standard);
}

.wish-form button:hover,
.edit-html-form button:hover {
    background: color-mix(in srgb, var(--on-primary) var(--state-hover), var(--primary));
    box-shadow: var(--elevation-1);
}

.wish-form button:active,
.edit-html-form button:active {
    background: color-mix(in srgb, var(--on-primary) var(--state-press), var(--primary));
    box-shadow: none;
}

.wish-form__status--ok {
    color: #146C2E;
    background: #C4EED0;
    border-radius: var(--shape-sm);
    padding: .6rem .9rem;
    font-size: .875rem;
    font-weight: 500;
}

.wish-form__status--error {
    color: var(--on-error-container);
    background: var(--error-container);
    border-radius: var(--shape-sm);
    padding: .6rem .9rem;
    font-size: .875rem;
    font-weight: 500;
}

.btn-danger {
    background: var(--error);
    color: var(--on-error);
    border: none;
    border-radius: var(--shape-full);
    padding: .65rem 1.6rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--duration-short) var(--easing-standard);
}

.btn-danger:hover { background: #93000A; }

/* ============================================================
   Карта сайту
   ============================================================ */
.sitemap-tree,
.sitemap-tree ul {
    list-style: none;
    padding-left: 1.25rem;
    margin: .25rem 0;
    font-size: .875rem;
}

.sitemap-tree { padding-left: 0; }

.sitemap-tree li { padding: .15rem 0; }

.sitemap-tree ul li::before {
    content: "└";
    color: var(--outline-variant);
    margin-right: .4rem;
}

.sitemap-tree a { text-decoration: none; }
.sitemap-tree a:hover { text-decoration: underline; }

/* ============================================================
   Вхід / Адмінка
   ============================================================ */
.login-page {
    max-width: 420px;
    margin: 3rem auto;
    padding: 0 1rem;
}

.login-box { box-shadow: var(--elevation-3); }

.admin-page {
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.admin-muted { color: var(--on-surface-variant); font-size: .8rem; }

/* MD3 assist chips */
.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: transparent;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    border-radius: var(--shape-sm);
    padding: .25rem .7rem;
    font-size: .78rem;
    font-weight: 500;
    margin: .12rem .15rem;
    text-decoration: none;
    transition: background var(--duration-short) var(--easing-standard);
}

a.admin-chip:hover {
    background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
}

.admin-chip--edit {
    background: var(--secondary-container);
    border-color: transparent;
    color: var(--on-secondary-container);
}

a.admin-chip--edit:hover {
    background: color-mix(in srgb, var(--on-secondary-container) var(--state-hover), var(--secondary-container));
    color: var(--on-secondary-container);
}

.edit-html-form textarea {
    width: 100%;
    font-family: Consolas, "Courier New", monospace;
    font-size: .85rem;
    padding: .75rem;
    border: 1px solid var(--outline);
    border-radius: var(--shape-xs);
    resize: vertical;
}

.edit-html-form__actions { margin-top: .75rem; }

.edit-html-preview {
    border: 1px dashed var(--outline-variant);
    border-radius: var(--shape-md);
    padding: 1rem;
    background: var(--surface-container-low);
}

.file-url {
    background: var(--surface-container);
    border-radius: var(--shape-xs);
    padding: .12rem .45rem;
    font-size: .75rem;
    user-select: all;
}

.files-actions {
    display: flex;
    gap: 3rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Редактор макетів */
.layout-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.layout-picker__item {
    cursor: pointer;
    text-align: center;
    font-size: .72rem;
    color: var(--on-surface-variant);
}

.layout-picker__item input { position: absolute; opacity: 0; }

.layout-thumb {
    display: grid;
    gap: 3px;
    width: 96px;
    height: 64px;
    padding: 4px;
    border: 2px solid var(--outline-variant);
    border-radius: var(--shape-md);
    background: var(--surface-container-lowest);
    margin-bottom: .3rem;
    transition: border-color var(--duration-short) var(--easing-standard),
                box-shadow var(--duration-short) var(--easing-standard);
}

.layout-picker__item:hover .layout-thumb { box-shadow: var(--elevation-1); }

.layout-picker__item input:checked + .layout-thumb {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-container);
}

.layout-thumb i {
    background: var(--secondary-container);
    border-radius: 2px;
    display: block;
}

.layout-thumb i.main { background: var(--primary); }

.layout-thumb--fullpage { grid-template-columns: 1fr; }
.layout-thumb--leftsidebar { grid-template-columns: 1fr 2.2fr; }
.layout-thumb--rightsidebar { grid-template-columns: 2.2fr 1fr; }
.layout-thumb--threecolumnspage { grid-template-columns: 1fr 1.4fr 1.4fr; }
.layout-thumb--threecolumnspagewithfooter,
.layout-thumb--defaultpagelayout {
    grid-template-columns: 1fr 1.4fr 1.4fr;
    grid-template-rows: 1fr auto;
}
.layout-thumb--threecolumnspagewithfooter i.wide,
.layout-thumb--defaultpagelayout i.wide { grid-column: 1 / -1; height: 10px; }
.layout-thumb--defaultpagelayoutwithtop {
    grid-template-columns: 1fr 1.4fr 1.4fr;
    grid-template-rows: auto 1fr auto;
}
.layout-thumb--defaultpagelayoutwithtop i.wide { grid-column: 1 / -1; height: 10px; }

/* ============================================================
   Підвал — MD3 surface
   ============================================================ */
.site-footer {
    margin-top: 2rem;
    background: var(--on-primary-container);   /* глибокий синій, як utility-nav */
    color: #cbd5e1;
    font-size: .875rem;
}

.site-footer a { color: #e2e8f0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__grid {
    max-width: var(--container);
    margin: 0 auto;
    padding: 2rem clamp(1rem, 3vw, 2rem) 1.25rem;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr 1fr;
    gap: 1.5rem;
}

.site-footer__col h3 {
    margin: 0 0 .7rem;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
}

.site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__col li + li { margin-top: .4rem; }
.site-footer__col p { margin: 0 0 .5rem; }

.site-footer__social {
    display: flex;
    gap: .8rem;
    flex-wrap: wrap;
}

.site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    transition: background var(--duration-short) var(--easing-standard);
}

.site-footer__social a:hover { background: rgba(255,255,255,.2); }

.site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
    padding: .8rem 1rem;
    font-size: .8rem;
}

.site-footer__bottom p { margin: 0; }
.site-footer__bottom p + p { margin-top: .25rem; opacity: .85; }
.site-footer__bottom a { color: inherit; }

@media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* Іконка пошти в utility-nav */
.utility-nav__icon {
    display: inline-flex;
    align-items: center;
    padding: .25rem;
}

/* ============================================================
   ТЗ редизайну (2026-07): типографіка, utility nav, CTA, картки
   ============================================================ */

/* Fluid-ієрархія заголовків у контенті (ТЗ п.4.2) */
.layout-zone h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; }
.layout-zone h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; }
.layout-zone h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; }
body { line-height: 1.6; }

/* Utility Nav — верхній міні-рядок (ТЗ п.2.1) */
.utility-nav {
    background: var(--on-primary-container);
    color: #cbd5e1;
    font-size: .8rem;
}

.utility-nav__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: .3rem clamp(1rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.utility-nav a {
    color: #cbd5e1;
    text-decoration: none;
    padding: .15rem .3rem;
    border-radius: 4px;
}

.utility-nav a:hover { color: #fff; text-decoration: underline; }

.utility-nav__spacer { flex: 1; }

/* Пошук у шапці */
.utility-nav__search {
    display: flex;
    gap: .3rem;
}

.utility-nav__search input {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: var(--shape-full);
    padding: .2rem .8rem;
    font: inherit;
    width: 150px;
}

.utility-nav__search input::placeholder { color: #94a3b8; }

/* Кнопка пошуку — той самий стиль, що й іконки поруч (пошта/переклад) */
.utility-nav__search button {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    padding: .25rem;
    border-radius: 4px;
    transition: color var(--duration-short) var(--easing-standard);
}

.utility-nav__search button:hover { color: #fff; }

/* CTA-кнопки в шапці (ТЗ п.2.1): Primary заливка / Secondary контур */
.header-cta {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.btn-cta {
    display: inline-block;
    background: var(--cta);
    color: var(--on-cta);
    font-weight: 600;
    font-size: .875rem;
    padding: .55rem 1.3rem;
    border-radius: var(--shape-full);
    text-decoration: none;
    transition: background var(--duration-short) var(--easing-standard),
                transform var(--duration-short) var(--easing-standard);
}

.btn-cta:hover { background: var(--cta-hover); color: #fff; transform: translateY(-1px); }

/* На білому хедері — контур у primary (назва класу лишилась legacy) */
.btn-outline-light {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    font-weight: 500;
    font-size: .875rem;
    padding: .5rem 1.2rem;
    border-radius: var(--shape-full);
    text-decoration: none;
    transition: background var(--duration-short) var(--easing-standard);
}

.btn-outline-light:hover {
    background: color-mix(in srgb, var(--primary) var(--state-hover), transparent);
    color: var(--primary);
}

/* Картки: hover — лише тінь, БЕЗ transform: підняття всієї картки-модуля
   змушувало її «тікати» з-під курсора на краю (hover втрачається → картка
   опускається → hover знову) — сторінка мерехтіла (баг на /Legislation) */
.module:hover {
    box-shadow: var(--elevation-2);
}

.module {
    transition: box-shadow var(--duration-medium) var(--easing-standard),
                transform var(--duration-medium) var(--easing-standard);
}

/* Результати пошуку */
.search-result { padding: .8rem .35rem; border-bottom: 1px solid var(--outline-variant); }
.search-result:last-child { border-bottom: none; }
.search-result__path { color: var(--on-surface-variant); font-size: .78rem; }
.search-result a { text-decoration: none; font-weight: 500; }
.search-result a:hover { text-decoration: underline; }

/* ============================================================
   Банери та бокові кнопки (legacy JavaScript-модулі головної)
   ============================================================ */
.js-module-html { margin-bottom: .8rem; }

/* inline-block (не block!): дрібні іконки (соцмережі) лишаються в ряд,
   а широкі банери однаково займають всю ширину колонки через max-width */
.js-module-html a { display: inline-block; max-width: 100%; }

.js-module-html img,
.js-module-html .mainBanner {
    max-width: 100%;
    height: auto;
    border-radius: var(--shape-md);
    vertical-align: middle;
    transition: transform var(--duration-short) var(--easing-standard),
                box-shadow var(--duration-short) var(--easing-standard);
}

/* Бокові кнопки-переходи: підняття як у карток (ТЗ п.4.3) */
.js-module-html a:hover img {
    transform: translateY(-2px);
    box-shadow: var(--elevation-2);
}

/* Патч інлайн-стилів legacy (float:left ламає потік) */
.js-module-html a[style], .js-module-html img[style] { float: none !important; }

/* ============================================================
   Карусель проєктів (legacy slick-розмітка, двигун — site.js)
   ============================================================ */
.ksu-carousel {
    position: relative;
    padding: 0 2.4rem;
}

/* !important — перебиває інлайновий display:grid із legacy-розмітки */
.slick-slider1 {
    display: flex !important;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: .4rem 0;
}

.slick-slider1::-webkit-scrollbar { display: none; }

.slick-slider1 .slick-slide {
    flex: 0 0 auto;
    width: auto !important;
    max-width: min(280px, 70vw) !important;
    padding: 0 !important;
    scroll-snap-align: start;
}

.slick-slider1 .slick-slide img { max-height: 150px; width: auto; }

.ksu-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--elevation-2);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: box-shadow var(--duration-short) var(--easing-standard);
}

.ksu-carousel__arrow:hover { box-shadow: var(--elevation-3); }
.ksu-carousel__arrow--prev { left: 0; }
.ksu-carousel__arrow--next { right: 0; }

/* ============================================================
   Читалка новини: hero-фото + лід (фото живе в Description)
   ============================================================ */
/* Hero на всю ширину статті (структура сучасних медіа) */
.news-reader__hero {
    display: block;
    width: 100%;
    height: auto;
    max-height: 640px;
    object-fit: cover;
    border-radius: var(--shape-md);
    box-shadow: var(--elevation-1);
    margin: .8rem 0 .4rem;
}

.news-reader__lead {
    font-weight: 600;
    font-size: 1.06rem;
    line-height: 1.5;
}

/* Лічильник у ряду «поділитися» — праворуч, без акценту */
.news-share__views {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
    color: var(--on-surface-variant);
    font-size: .85rem;
}

/* Пагінація архіву */
.archive-pager {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: 1rem;
    align-items: center;
}

.archive-pager a,
.archive-pager__current {
    min-width: 2.1rem;
    text-align: center;
    padding: .35rem .5rem;
    border-radius: var(--shape-sm);
    text-decoration: none;
    font-size: .875rem;
}

.archive-pager a:hover { background: color-mix(in srgb, var(--primary) var(--state-hover), transparent); }

.archive-pager__current {
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

.archive-pager__gap { color: var(--on-surface-variant); }

/* ============================================================
   Лайтбокс — перегляд фото (галереї, новини)
   ============================================================ */
.ksu-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .92);
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
}

.ksu-lightbox.is-open { display: flex; }

.ksu-lightbox figure {
    margin: 0;
    max-width: min(1400px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}

.ksu-lightbox img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    border-radius: var(--shape-md);
    box-shadow: var(--elevation-3);
}

.ksu-lightbox figcaption {
    color: #e2e8f0;
    font-size: .9rem;
    text-align: center;
}

.ksu-lightbox__close,
.ksu-lightbox__nav {
    position: absolute;
    z-index: 2;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--duration-short) var(--easing-standard);
}

.ksu-lightbox__close:hover,
.ksu-lightbox__nav:hover { background: rgba(255,255,255,.28); }

.ksu-lightbox__close { top: 1rem; right: 1rem; }
.ksu-lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.ksu-lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }

/* Галерея: охайні квадратні мініатюри */
.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--shape-sm);
    transition: transform var(--duration-short) var(--easing-standard);
}

.gallery-item a:hover img { transform: scale(1.03); }

/* Кнопка Google на сторінці входу */
.login-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.1rem 0;
    color: var(--on-surface-variant);
    font-size: .85rem;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--outline-variant);
}

.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    padding: .6rem 1rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-full);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    font-weight: 500;
    text-decoration: none;
    transition: box-shadow var(--duration-short) var(--easing-standard);
}

.btn-google:hover { box-shadow: var(--elevation-1); color: var(--on-surface); }

/* Адмінка: інлайн-форма додавання модуля + небезпечна кнопка */
.admin-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.admin-inline-form label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .85rem;
    color: var(--on-surface-variant);
}

.admin-inline-form select,
.admin-inline-form input {
    padding: .45rem .6rem;
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-sm);
    font: inherit;
}

.admin-danger {
    background: transparent;
    border: 1px solid var(--error);
    color: var(--error);
    border-radius: var(--shape-full);
    padding: .3rem .9rem;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.admin-danger:hover { background: var(--error-container); }

/* ============================================================
   Режим редагування на сторінці (legacy edit mode)
   ============================================================ */
.edit-bar {
    max-width: var(--container);
    margin: .6rem auto 0;
    padding: .5rem clamp(1rem, 3vw, 2rem);
    display: flex;
    gap: 1.2rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
    border-radius: var(--shape-md);
    font-size: .9rem;
}

.edit-bar a { color: var(--on-tertiary-container); font-weight: 500; }

.utility-nav__edit-on { color: var(--cta) !important; font-weight: 600; }

.layout-zone--edit {
    outline: 2px dashed var(--outline-variant);
    outline-offset: 4px;
    border-radius: var(--shape-sm);
    min-height: 3rem;
}

.edit-zone-label {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--on-surface-variant);
    margin-bottom: .4rem;
}

.edit-zone-label a { text-decoration: none; font-weight: 600; }

.edit-chrome {
    position: relative;
    outline: 1px dashed color-mix(in srgb, var(--primary) 40%, transparent);
    outline-offset: 2px;
    border-radius: var(--shape-sm);
    margin-bottom: .9rem;
}

.edit-chrome__bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    padding: .25rem .55rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border-radius: var(--shape-sm) var(--shape-sm) 0 0;
    font-size: .78rem;
}

.edit-chrome__name { flex: 1; font-weight: 600; color: var(--on-surface); }

.edit-chrome__name em {
    font-style: normal;
    font-weight: 400;
    color: var(--on-surface-variant);
    margin-left: .4rem;
}

.edit-chrome__bar a { text-decoration: none; font-weight: 500; }

.edit-chrome__bar form { margin: 0; display: inline; }

.edit-chrome__bar button {
    background: none;
    border: none;
    color: var(--error);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.edit-chrome__bar button:hover { text-decoration: underline; }

/* ============================================================
   Utility-nav на мобільному: все в один рядок, пошук стискається,
   зайве — в горизонтальний скрол (фікс «з'їзду» Eng/Увійти)
   ============================================================ */
@media (max-width: 720px) {
    .utility-nav__inner {
        flex-wrap: nowrap;
        gap: .45rem;
        padding: .3rem .7rem;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .utility-nav__inner::-webkit-scrollbar { display: none; }

    .utility-nav__spacer { display: none; }

    .utility-nav__search {
        flex: 1 1 auto;
        min-width: 90px;
    }

    .utility-nav__search input {
        width: 100%;
        min-width: 0;
    }

    .utility-nav a,
    .site-header__lang {
        white-space: nowrap;
        flex: 0 0 auto;
        padding: .15rem .4rem;
    }

    .site-header__logout button {
        white-space: nowrap;
        padding: .15rem .55rem;
        font-size: .75rem;
    }
}

/* ============================================================
   Адмінка: мовні вкладки редактора, поля фото/SEO
   ============================================================ */
.admin-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--outline-variant);
    margin-bottom: 1rem;
}

.admin-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: .55rem 1.1rem;
    font: inherit;
    font-weight: 500;
    color: var(--on-surface-variant);
    cursor: pointer;
}

.admin-tab--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.admin-tab-panel--hidden { display: none; }

.admin-fieldset {
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-md);
    padding: .9rem 1.1rem 1.1rem;
    margin: 1rem 0;
}

.admin-fieldset legend {
    padding: 0 .5rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--on-surface-variant);
}

.admin-picture {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .7rem;
}

.admin-picture img {
    border-radius: var(--shape-sm);
    box-shadow: var(--elevation-1);
    max-width: 220px;
}

.admin-check { display: flex; align-items: center; gap: .4rem; font-size: .875rem; }

/* ============================================================
   Мобільні скрол-фікси: без «гумового» доскролу за межі сторінки
   (фантомний екран під футером) і без горизонтальних вилазів
   ============================================================ */
html {
    overscroll-behavior-y: none;
}

html, body {
    overflow-x: clip;
}

/* ============================================================
   Репост новини в соцмережі
   ============================================================ */
/* Ряд шерів між фото і текстом (як у медіа): без верхньої лінії,
   знизу — розділювач перед контентом */
.news-share {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .6rem 0 1rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--outline-variant);
}

.news-share__label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-right: .3rem;
}

.news-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--duration-short) var(--easing-standard),
                box-shadow var(--duration-short) var(--easing-standard);
}

.news-share__btn:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); color: #fff; }

.news-share__btn--fb { background: #1877F2; }
.news-share__btn--tg { background: #229ED9; }
.news-share__btn--vb { background: #7360F2; }
.news-share__btn--x  { background: #0F1419; }
.news-share__btn--in { background: #0A66C2; }
.news-share__btn--copy { background: var(--secondary); }
.news-share__btn--copy.is-copied { background: #16A34A; }

/* Редактор коду банерів (JS-модулі) */
.admin-code {
    width: 100%;
    font-family: Consolas, "Cascadia Mono", Menlo, monospace;
    font-size: .82rem;
    line-height: 1.5;
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-sm);
    padding: .6rem .8rem;
    background: var(--surface-container-low);
    resize: vertical;
}

/* Нормалізація стилю: порівняння до/після */
.normalize-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.normalize-pane {
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-md);
    padding: 1rem;
    max-height: 420px;
    overflow: auto;
    background: var(--surface-container-lowest);
    font-size: .9rem;
}

@media (max-width: 900px) {
    .normalize-compare { grid-template-columns: 1fr; }
}

/* ============================================================
   Кнопка «нагору»
   ============================================================ */
.to-top {
    position: fixed;
    right: clamp(.8rem, 2vw, 1.6rem);
    bottom: clamp(.8rem, 2vw, 1.6rem);
    z-index: 900;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--elevation-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--duration-short) var(--easing-standard),
                transform var(--duration-short) var(--easing-standard),
                visibility var(--duration-short);
}

.to-top--visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--on-primary-container); box-shadow: var(--elevation-3); }

/* ============================================================
   Модуль інклюзивності: панель + режими (класи на <html>)
   ============================================================ */
.a11y { position: relative; }

.a11y__panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 500;
    width: 250px;
    padding: .9rem 1rem;
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    border-radius: var(--shape-md);
    box-shadow: var(--elevation-3);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .875rem;
}

/* display:flex вище перебиває атрибут hidden — повертаємо йому силу */
.a11y__panel[hidden] { display: none; }

.a11y__row {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.a11y__row span { flex: 1; }

.a11y__row button {
    border: 1px solid var(--outline-variant);
    background: none;
    border-radius: 6px;
    padding: .2rem .55rem;
    font: inherit;
    cursor: pointer;
}

.a11y__row button:nth-of-type(2) { font-size: 1.05em; }
.a11y__row button:nth-of-type(3) { font-size: 1.15em; }
.a11y__row button.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.a11y__reset {
    margin-top: .3rem;
    border: none;
    background: var(--surface-container);
    border-radius: var(--shape-full);
    padding: .4rem;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

/* Режими доступності */
html.a11y-font-110 { font-size: 110%; }
html.a11y-font-125 { font-size: 125%; }

/* Висока контрастність: інверсія всієї сторінки, медіа — назад */
html.a11y-contrast { filter: invert(1) hue-rotate(180deg); background: #000; }
html.a11y-contrast img,
html.a11y-contrast video,
html.a11y-contrast iframe,
html.a11y-contrast svg { filter: invert(1) hue-rotate(180deg); }

html.a11y-gray { filter: grayscale(1); }
html.a11y-contrast.a11y-gray { filter: invert(1) hue-rotate(180deg) grayscale(1); }

html.a11y-links a { text-decoration: underline !important; }

html.a11y-spacing body {
    letter-spacing: .1em;
    word-spacing: .18em;
    line-height: 1.8;
}

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

/* Системне prefers-reduced-motion поважаємо й без панелі */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Файловий менеджер: drag&drop зона, список завантажень
   ============================================================ */
.dropzone {
    border: 2px dashed var(--outline);
    border-radius: var(--shape-lg);
    padding: 1.6rem;
    text-align: center;
    cursor: pointer;
    background: var(--surface-container-low);
    transition: border-color var(--duration-short) var(--easing-standard),
                background var(--duration-short) var(--easing-standard);
}

.dropzone:hover,
.dropzone--over {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-container-low));
}

.upload-list {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
}

.upload-list li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .35rem 0;
    font-size: .875rem;
}

.upload-list__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-list progress { width: 160px; }

.file-link { display: inline-flex; gap: .4rem; align-items: center; }

.copy-url {
    border: none;
    background: none;
    cursor: pointer;
    font-size: .95rem;
    padding: .1rem .25rem;
}

/* ============================================================
   Мобільні: компактні CTA в шапці + новини «фото зверху»
   ============================================================ */
@media (max-width: 640px) {
    /* CTA-кнопки: один слим-рядок на всю ширину замість двох великих */
    .header-cta {
        width: 100%;
        gap: .5rem;
        flex-wrap: nowrap;
    }

    .header-cta .btn-cta,
    .header-cta .btn-outline-light {
        flex: 1;
        text-align: center;
        justify-content: center;
        font-size: .8rem;
        padding: .45rem .5rem;
        white-space: nowrap;
    }

    .header-cta .btn-outline-light svg { display: none; } /* економія місця */
}

@media (max-width: 560px) {
    /* Новини як у стрічках соцмереж: фото на всю ширину зверху,
       великий заголовок, дрібна мета, короткий анонс */
    .news-item {
        flex-direction: column;
        gap: .5rem;
        padding: .8rem 0 1rem;
    }

    .news-item__thumb-link { width: 100%; }

    .news-item__thumb {
        flex-basis: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: var(--shape-md);
        margin-top: 0;
    }

    /* Баланс мобільної картки: помірний заголовок, довший анонс */
    .news-item__title {
        font-size: 1rem;
        line-height: 1.35;
        font-weight: 600;
    }

    .news-item__description {
        -webkit-line-clamp: 4;
        font-size: .85rem;
    }
}

/* Сніпет у результатах пошуку */
.search-result__snippet {
    font-size: .84rem;
    color: var(--on-surface-variant);
    margin-top: .15rem;
}

.search-result__snippet mark {
    background: var(--tertiary-container);
    color: var(--on-tertiary-container);
    border-radius: 3px;
    padding: 0 .15em;
}

/* Панель доступності на мобільному: utility-nav має overflow-x:auto,
   який ОБРІЗАЄ absolute-панель — виносимо її у fixed поверх сторінки */
@media (max-width: 720px) {
    .a11y__panel {
        position: fixed;
        top: 3rem;
        left: .6rem;
        right: .6rem;
        width: auto;
        z-index: 1100;
    }
}

/* ============================================================
   Legacy-акордеони (toggleBar) — /Legislation тощо: сучасні картки
   ============================================================ */
.acc-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-md);
    padding: .35rem 1rem;
    margin: .5rem 0 0;
    transition: background var(--duration-short) var(--easing-standard),
                box-shadow var(--duration-short) var(--easing-standard);
}

.acc-item:hover {
    background: color-mix(in srgb, var(--primary) 5%, var(--surface-container-low));
    box-shadow: var(--elevation-1);
}

/* Стрілка ▼: компактна, обертається legacy-скриптом (inline transform) */
.acc-arrow {
    font-size: .7rem !important;
    color: var(--primary);
    margin: 0 !important;
    transition: transform var(--duration-short) var(--easing-standard);
    flex: 0 0 auto;
}

/* Заголовок категорії */
.acc-head {
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--on-surface);
    margin: .35rem 0 !important;
    flex: 1;
    user-select: none;
}

.acc-item:hover .acc-head { color: var(--primary); }

.acc-head:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }

/* Розгорнутий блок зі списком документів */
.acc-body {
    border-left: 3px solid var(--primary-container);
    margin: .25rem 0 .25rem .9rem;
    padding: .3rem 0 .3rem 1rem;
}

.acc-body ul { margin: .2rem 0; padding-left: 1rem; }

.acc-body li { margin: .35rem 0; line-height: 1.45; }

.acc-body a {
    text-decoration: none;
    color: var(--primary);
}

.acc-body a:hover { text-decoration: underline; }

/* Посилання на документи (усюди в контенті): іконка + розрив довгих назв */
.module a[href*="FileDownload"] {
    overflow-wrap: anywhere;
}

.acc-body a[href*="FileDownload"]::before,
.acc-body a[href$=".pdf"]::before {
    content: "📄 ";
}

/* ============================================================
   Контент-шаблони (docs/AI-CONTENT-GUIDE.md): персони, документи,
   освітні програми, нативний акордеон — цільова розмітка для
   ШІ-форматування і ручної верстки редакторів
   ============================================================ */

/* --- Перелік осіб: сітка карток --- */
.person-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.person-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-lg);
    padding: 1.1rem;
    transition: box-shadow var(--duration-short) var(--easing-standard),
                transform var(--duration-short) var(--easing-standard);
}

.person-card:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }

.person-card img {
    width: 132px;
    height: 132px;
    object-fit: cover;
    border-radius: 50%;
    align-self: center;
    margin-bottom: .5rem;
    box-shadow: var(--elevation-1);
}

.person-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    text-align: center;
    margin: 0;
}

.person-card__name a { text-decoration: none; }

.person-card__role {
    font-size: .85rem;
    color: var(--on-surface-variant);
    text-align: center;
    margin: 0 0 .4rem;
}

.person-card__bio { font-size: .875rem; line-height: 1.5; margin: 0; }

.person-card__contacts {
    margin-top: auto;
    padding-top: .6rem;
    border-top: 1px solid var(--outline-variant);
    font-size: .85rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.person-card__contacts a { text-decoration: none; }

/* --- Набір документів --- */
.doc-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.doc-list li {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .55rem .8rem;
    border-radius: var(--shape-sm);
    border-bottom: 1px solid var(--outline-variant);
}

.doc-list li:hover { background: color-mix(in srgb, var(--primary) 4%, transparent); }

.doc-list li::before { content: "📄"; flex: 0 0 auto; }

.doc-list a {
    flex: 1;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.doc-list a:hover { text-decoration: underline; }

.doc-list .doc-meta {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--on-surface-variant);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .doc-list li { flex-wrap: wrap; }
    .doc-list .doc-meta { flex-basis: 100%; padding-left: 1.6rem; }
}

/* --- Освітні програми з ревізіями --- */
.edu-program {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-left: 4px solid var(--primary);
    border-radius: var(--shape-md);
    padding: 1rem 1.2rem;
    margin: .8rem 0;
}

.edu-program__title { font-size: 1.05rem; font-weight: 700; margin: 0; }

.edu-program__meta {
    font-size: .8rem;
    color: var(--on-surface-variant);
    margin: .15rem 0 .5rem;
}

.edu-program__meta span + span::before { content: " · "; }

.edu-program .doc-list { margin: .4rem 0 0; }
.edu-program .doc-list li { border-bottom: none; padding: .25rem .4rem; }

/* Ревізії: актуальна виділяється */
.edu-program .doc-list li.rev-current { background: var(--tertiary-container); border-radius: var(--shape-sm); }
.edu-program .doc-list li.rev-current::after {
    content: "чинна";
    font-size: .7rem;
    font-weight: 700;
    color: var(--on-tertiary-container);
    text-transform: uppercase;
    margin-left: .4rem;
}

/* --- Нативний акордеон для нового контенту (details/summary) --- */
details.acc {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-md);
    margin: .5rem 0;
    overflow: hidden;
}

details.acc summary {
    padding: .75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    user-select: none;
}

details.acc summary::before {
    content: "▸";
    color: var(--primary);
    transition: transform var(--duration-short) var(--easing-standard);
}

details.acc[open] summary::before { transform: rotate(90deg); }

details.acc summary:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }

details.acc > :not(summary) { margin: 0 1rem; }
details.acc > :last-child { margin-bottom: .9rem; }

/* ============================================================
   Цитати в контенті (blockquote) — фірмове оформлення:
   редактори ставлять їх у новинах (пряма мова, подяки)
   ============================================================ */
blockquote {
    margin: 1.1rem 0;
    padding: .85rem 1.25rem;
    border-left: 4px solid var(--primary);
    background: var(--surface-container-low);
    border-radius: 0 var(--shape-md) var(--shape-md) 0;
    font-style: italic;
    color: var(--on-surface);
}

blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }

/* Мітка «хто/коли редагував» у тулбарі модуля (режим редагування) */
.edit-chrome__lastedit {
    font-weight: 400;
    font-size: .72rem;
    color: var(--on-surface-variant);
    margin-left: .5rem;
    white-space: nowrap;
}

/* ============================================================
   Мобільний текст: legacy-контент вирівняний «по ширині»
   (text-align: justify у інлайн-стилях редакторів) — на вузьких
   екранах це дає величезні прірви між словами. Скидаємо на left
   і трохи зменшуємо кегль основного тексту.
   ============================================================ */
@media (max-width: 720px) {
    .news-reader__lead,
    .news-reader__body,
    .news-reader__body [style*="justify"],
    .news-reader__lead [style*="justify"],
    .layout-zone [style*="justify"],
    .module--htmltext [style*="justify"] {
        text-align: left !important;
    }

    .news-reader__body,
    .news-reader__lead,
    .module--htmltext {
        font-size: .95rem;
        line-height: 1.55;
    }
}

/* Плашка «сторінка не опублікована» (видно лише редакторам) */
.unpublished-bar {
    max-width: var(--container);
    margin: .6rem auto 0;
    padding: .55rem clamp(1rem, 3vw, 2rem);
    background: var(--error-container);
    color: var(--on-error-container);
    border-radius: var(--shape-md);
    font-size: .9rem;
}

.unpublished-bar a { color: var(--on-error-container); font-weight: 600; }

/* ============================================================
   Адмінка: дерево структури сторінок (legacy SiteStructureEditor)
   ============================================================ */
.page-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
}

.page-tree__row {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .3rem;
    border-radius: var(--shape-sm);
}

.page-tree__row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.page-tree__row--hidden { display: none; }

.page-tree__toggle {
    flex: 0 0 1.3rem;
    width: 1.3rem;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    cursor: pointer;
    font-size: .8rem;
    padding: 0;
    text-align: center;
}

.page-tree__toggle--leaf { cursor: default; }

.page-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-tree__name a { text-decoration: none; }
.page-tree__name a:hover { text-decoration: underline; }

.page-tree__actions {
    display: none;
    gap: .35rem;
    align-items: center;
    flex: 0 0 auto;
}

.page-tree__row:hover .page-tree__actions { display: inline-flex; }

.page-tree__actions a,
.page-tree__act {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .95rem;
    text-decoration: none;
    padding: .05rem .2rem;
    border-radius: 4px;
}

.page-tree__actions a:hover,
.page-tree__act:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }

.admin-chip--warn {
    background: var(--error-container);
    color: var(--on-error-container);
    font-size: .68rem;
}

/* ============================================================
   Файл-менеджер: плитка з прев'ю (критично для фото)
   ============================================================ */
.view-toggle { display: inline-flex; border: 1px solid var(--outline-variant); border-radius: var(--shape-full); overflow: hidden; }

.view-toggle__btn {
    background: transparent;
    border: none;
    padding: .4rem .9rem;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
    color: var(--on-surface-variant);
}

.view-toggle__btn--active { background: var(--primary); color: var(--on-primary); }

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .9rem;
    margin-top: .6rem;
}

.file-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--outline-variant);
    border-radius: var(--shape-md);
    overflow: hidden;
    background: var(--surface-container-lowest);
    transition: box-shadow var(--duration-short) var(--easing-standard);
}

.file-card:hover { box-shadow: var(--elevation-2); }

.file-card__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    background: var(--surface-container-low);
    font-size: 2.6rem;
    text-decoration: none;
    overflow: hidden;
}

.file-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.file-card__name {
    padding: .4rem .55rem 0;
    font-size: .78rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .1rem .55rem .45rem;
    color: var(--on-surface-variant);
    font-size: .72rem;
}

/* Редакторський ✎-лінк у стрічці/архіві новин + стрілки порядку модулів */
.news-item__editlink {
    color: var(--primary);
    text-decoration: none;
    font-size: .74rem;
    font-weight: 600;
}

.edit-chrome__move { display: inline-flex; gap: .1rem; margin: 0; }

.edit-chrome__move button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    color: var(--on-surface-variant);
    padding: 0 .2rem;
}

.edit-chrome__move button:hover { color: var(--primary); }

/* Адмін-форми: селекти/інпути не вилазять за картку (фікс «попливлого» дропдауну) */
.admin-form select,
.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="search"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-form select {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ============================================================
   Новини у вузькій колонці (container query по ширині МОДУЛЯ):
   мініатюра зверху на всю ширину, текст під нею — замість
   «стовпчика літер» біля фото
   ============================================================ */
.module--publisher,
.module--publisher-archive { container-type: inline-size; }

@container (max-width: 420px) {
    .news-item { flex-direction: column; gap: .45rem; }

    .news-item__thumb-link { width: 100%; }

    .news-item__thumb {
        flex-basis: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .news-item__title { font-size: .9rem; }
    .news-item__description { -webkit-line-clamp: 3; font-size: .8rem; }
}

/* (2026-07-22) Скрол-хак меню прибрано: overflow-x: auto обрізав
   випадаючі підменю. Перенос рядів — flex-wrap: wrap у базовому правилі. */

/* Дерево структури: вертикальні напрямні по рівнях вкладеності */
.page-tree__indent {
    align-self: stretch;
    flex: 0 0 auto;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(1.15rem - 1px),
        var(--outline-variant) calc(1.15rem - 1px),
        var(--outline-variant) 1.15rem);
}

.page-tree__toggle:not(.page-tree__toggle--leaf) {
    color: var(--primary);
    font-weight: 700;
}

/* Кнопки ▲▼ у таблицях адмінки */
.edit-chrome__move-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .75rem;
    color: var(--on-surface-variant);
    padding: .1rem .25rem;
}

.edit-chrome__move-btn:hover { color: var(--primary); }