/*
 * Theme — UI kit
 *
 * Глобальні компоненти з дизайн-системи ( Figma → «02 · Components» ).
 * Тут лежить те, що повторюється на кількох сторінках: кнопки, поля,
 * чипи, заголовок секції, надзаголовок, текстове посилання зі стрілкою.
 *
 * Правило: якщо елемент трапляється більш ніж на одній сторінці —
 * його місце тут, а не в css/pages/*.css.
 */

/* ── Типографічні класи ─────────────────────────────────────────────────── */
.t-lead    { font-size: 20px; line-height: 32px; font-weight: 400; }
.t-body    { font-size: 16px; line-height: 26px; font-weight: 400; }
.t-body-s  { font-size: 15px; line-height: 22px; font-weight: 400; }
.t-caption { font-size: 12px; line-height: 18px; font-weight: 400; }
.t-muted   { color: var(--text-muted); }
.t-second  { color: var(--text-secondary); }

/* Числа: статистика й ціни — окремі стилі з від'ємним трекінгом */
.t-stat {
    font-size:      36px;
    line-height:    40px;
    font-weight:    800;
    letter-spacing: -.36px;
}
.t-price {
    font-size:      24px;
    line-height:    32px;
    font-weight:    700;
    letter-spacing: -.5px;
}

/* ── Надзаголовок ───────────────────────────────────────────────────────── */
/* Золотий текст у розрядку з ромбиками-орнаментами обабіч. Ромбики
   намальовані бордюрами — окремих зображень не треба. */
.eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            20px;
    margin:         0;
    color:          var(--gold-text);
    font-size:      14px;
    font-weight:    700;
    line-height:    16px;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}
/* Орнамент: два контурні ромби 7×7 з кроком 7px. Фігура задається маскою,
   тому колір лишається токеном, а не зашитим у SVG. */
.eyebrow::before,
.eyebrow::after {
    content:     "";
    flex:        0 0 auto;
    width:       26px;
    height:      14px;
    background:  var(--gold-solid);
    mask-image:  var(--eyebrow-ornament);
    mask-repeat: no-repeat;
    -webkit-mask-image:  var(--eyebrow-ornament);
    -webkit-mask-repeat: no-repeat;
}
/* Ліве вирівнювання: орнамент лише зліва */
.eyebrow--left::after { display: none; }
/* Щільніший варіант — теглайн над великим заголовком (hero), де секція
   вже й так велика, і 20px проміжку від «Про квартал» виглядають зайво. */
.eyebrow--tight { gap: 12px; }

/* ── Заголовок секції ───────────────────────────────────────────────────── */
.section-head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            22px;
    text-align:     center;
}
.section-head--left {
    align-items: flex-start;
    text-align:  left;
}
.section-head__title {
    margin:         0;
    font-size:      44px;
    line-height:    58px;
    font-weight:    600;
    letter-spacing: .88px;
    text-transform: uppercase;
    color:          var(--text-primary);
}
.section-head__text {
    max-width:   880px;
    margin:      0;
    font-size:   18px;
    line-height: 28px;
    font-weight: 500;
    color:       rgba(255, 255, 255, .9);
}

/* ── Ряд «медіа + текст» ────────────────────────────────────────────────── */
/* Дві колонки: фото й текстовий блок. Патерн повторюється на «Комерції»
   («Чому саме зараз», «Площі») і «Готових об'єктах» (кожна пропозиція),
   тому живе тут, а не в css/pages/*.

   Порядок у DOM завжди однаковий: спершу контент, потім медіа. Так на
   вузькому екрані кожен блок починається із заголовка без жодних `order`,
   а `--reverse` лише міняє колонки місцями на широкому. */
.media-row {
    display:     flex;
    align-items: stretch;
    gap:         64px;
}
.media-row--reverse { flex-direction: row-reverse; }

.media-row__content {
    display:        flex;
    flex-direction: column;
    justify-content: center;
    gap:            32px;
    flex:           1 1 52%;
    min-width:      0;
}

/* Фото завжди на всю висоту ряду — її задає текстова колонка.
   Картинка позиціюється абсолютно, а не через `height: 100%`: у другого
   висота img залежить від висоти figure, а та — від вмісту, тобто від
   самої img. Цикл браузер розриває інтринсивною висотою картинки, і ряд
   розтягується на її повний розмір (знайдено скріншотом: 1500px замість
   ~660). Absolute прибирає img із потоку — figure лишається нульової
   висоти й просто розтягується флексом.
   min-height — щоб коротка колонка тексту не сплющила фото в смугу. */
.media-row__media {
    position:   relative;
    flex:       1 1 48%;
    min-width:  0;
    min-height: 360px;
    margin:     0;
    overflow:   hidden;
}
.media-row__image {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Перелік переваг ────────────────────────────────────────────────────── */
/* Маркер — ромб, та сама фігура, що в орнаменті .eyebrow. */
.feature-list {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin:         0;
    padding:        0;
    list-style:     none;
}
.feature-list__item {
    position:     relative;
    padding-left: 28px;
    font-size:    16px;
    line-height:  26px;
    color:        var(--text-secondary);
}
.feature-list__item::before {
    content:    "";
    position:   absolute;
    left:       0;
    top:        9px;
    width:      8px;
    height:     8px;
    background: var(--gold-solid);
    transform:  rotate(45deg);
}

/* ── Виносний блок ──────────────────────────────────────────────────────── */
/* Репліка або ціна: підкладка + золота грань зліва. */
.callout {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    margin:         0;
    padding:        20px 24px;
    color:          var(--text-primary);
    background:     var(--bg-elevated);
    border-left:    2px solid var(--gold-solid);
}
.callout__value {
    margin:      0;
    color:       var(--gold-text);
    font-variant-numeric: tabular-nums;
}
.callout__text {
    margin: 0;
    color:  var(--text-secondary);
}
/* Дрібний рядок під значенням: застереження, курс, дата */
.callout__note {
    margin:      0;
    font-size:   13px;
    line-height: 20px;
    color:       var(--text-muted);
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         16px 36px;
    overflow:        hidden;
    color:           var(--on-solid);
    font-family:     inherit;
    font-size:       16px;
    font-weight:     600;
    line-height:     24px;
    letter-spacing:  .08px;
    text-align:      center;
    text-decoration: none;
    background:      var(--gold-gradient);
    border:          0;
    border-radius:   var(--radius);
    cursor:          pointer;
    transition:      background var(--transition), box-shadow var(--transition),
                     color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover {
    background: var(--gold-gradient-hover);
    box-shadow: var(--gold-glow);
}
.btn:active { transform: translateY(1px); }

/* Розмір M */
.btn--m {
    padding:     11px 26px;
    font-size:   14px;
    line-height: 20px;
}

/* Secondary — волосяна золота рамка */
.btn--secondary {
    color:        var(--gold-text);
    background:   none;
    border:       1px solid var(--gold-line);
}
.btn--secondary:hover {
    color:        var(--gold-text);
    background:   none;
    border-color: var(--gold-solid);
    box-shadow:   none;
}

/* Ghost — лише текст */
.btn--ghost {
    padding:    16px 0;
    color:      var(--text-primary);
    background: none;
    border:     0;
}
.btn--ghost.btn--m { padding: 11px 0; }
.btn--ghost:hover {
    color:      var(--gold-text);
    background: none;
    box-shadow: none;
}

/* Gold Line — рамка 1.5px, золота підкладка і постійне м'яке свічення */
.btn--line {
    color:        var(--gold-text);
    background:   rgba(189, 137, 95, .05);
    border:       1.5px solid var(--gold-1);
    box-shadow:   0 0 24px 0 rgba(189, 137, 95, .16);
}
.btn--line:hover {
    color:        var(--gold-text);
    background:   rgba(189, 137, 95, .12);
    border-color: #f1dcbc;
    box-shadow:   var(--gold-glow);
}

/* На вузькому екрані кнопка займає всю ширину рядка: у стовпчику вона
   лишається сама в рядку, і повнорозмірна ціль зручніша за таблетку збоку.
   Модифікатор ставиться в розмітці завжди — вмикається лише нижче 768. */
@media (max-width: 768px) {
    .btn--block { display: flex; width: 100%; }
}

/* Блик, що проїжджає по кнопці: 1.6s, потім пауза 4s */
.btn--shine::after {
    content:    "";
    position:   absolute;
    top:        0;
    bottom:     0;
    width:      150px;
    background: var(--gold-sheen);
    animation:  btn-sheen 5.6s ease-in-out infinite;
    pointer-events: none;
}
.btn--shine:hover::after { animation-duration: 5.2s; }

@keyframes btn-sheen {
    0%       { transform: translateX(-150px); }
    28.6%    { transform: translateX(var(--sheen-end, 400px)); }
    100%     { transform: translateX(var(--sheen-end, 400px)); }
}

@media (prefers-reduced-motion: reduce) {
    .btn--shine::after { animation: none; opacity: 0; }
}

/* ── Поля форм ──────────────────────────────────────────────────────────── */
.field {
    width:         100%;
    height:        60px;
    padding:       0 22px;
    color:         var(--text-primary);
    font-family:   inherit;
    font-size:     16px;
    line-height:   26px;
    background:    var(--bg-field);
    border:        1px solid var(--border-field);
    border-radius: var(--radius);
    transition:    border-color var(--transition), background-color var(--transition);
}
.field::placeholder { color: var(--text-muted); }
.field:hover {
    background:   var(--bg-field-alt);
    border-color: var(--border-field-hover);
}
.field:focus {
    outline:      none;
    background:   var(--bg-field-alt);
    border-color: var(--gold-solid);
    caret-color:  var(--gold-text);
}
textarea.field {
    height:     auto;
    min-height: 120px;
    padding:    16px 22px;
    resize:     vertical;
}

/* Згода під формою */
.consent {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-size:   12px;
    line-height: 18px;
    color:       var(--text-muted);
}
.consent a {
    color:                 var(--gold-text);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

/* ── Чипи ───────────────────────────────────────────────────────────────── */
/* Фільтр — пігулка, активна заливається суцільним золотом */
.chip {
    display:         inline-flex;
    align-items:     center;
    padding:         11px 22px;
    color:           var(--text-secondary);
    font-size:       15px;
    line-height:     22px;
    text-decoration: none;
    background:      none;
    border:          1px solid var(--border-subtle);
    border-radius:   var(--radius-pill);
    cursor:          pointer;
    transition:      color var(--transition), border-color var(--transition), background-color var(--transition);
}
.chip:hover {
    color:        var(--gold-text);
    border-color: var(--gold-line);
}
/* Нефільтрувальний варіант: просто мітка умови, не клікається */
.chip--static { cursor: default; }
.chip--static:hover {
    color:        var(--text-secondary);
    border-color: var(--border-subtle);
}
.chip.is-active {
    color:        var(--on-solid);
    background:   var(--gold-solid);
    border-color: var(--gold-solid);
}

/* Статус квартири — прямокутний чип із крапкою */
.status {
    display:       inline-flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 16px;
    color:         var(--text-secondary);
    font-size:     12px;
    line-height:   18px;
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius);
}
.status::before {
    content:       "";
    flex:          0 0 auto;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--status-available);
}
.status--reserved::before { background: var(--status-reserved); }
.status--sold::before     { background: var(--status-sold); }
/* Нейтральний: статус, який не про наявність (стадія будівництва тощо) —
   зелена крапка там обіцяла б «вільно», чого поле не означає. */
.status--neutral::before  { background: var(--gold-solid); }

/* ── Картка-перевага ────────────────────────────────────────────────────── */
/* Медальйон з іконкою + номер у куті. Головна («Формат життя») і
   «Комерція» («Для якого бізнесу», «Умови придбання») — тому блок живе
   тут, а не в css/pages/home.css. */
.feature-card {
    position:         relative;
    display:          flex;
    flex-direction:   column;
    align-items:      center;
    gap:              22px;
    padding:          30px;
    text-align:       center;
    background:       rgba(4, 47, 95, .03);
    border:           1px solid var(--gold-line-soft);
    border-radius:    4px;
}
/* Медальйон — золоте коло з іконкою всередині. Одна фігура на дві назви:
   `.feature-card__medallion` лишився з часів, коли він був тільки в картці
   переваг, `.medallion` — те саме для будь-якого блоку (картки контактів).
   Дублювати правило не можна, тож вони йдуть одним селектором. */
.medallion,
.feature-card__medallion {
    position:        relative;
    display:         grid;
    place-items:     center;
    flex:            0 0 auto;
    width:           76px;
    height:          76px;
    color:           var(--on-solid);
    border-radius:   50%;
    background:      var(--gold-solid);
}
/* Менший розмір: там, де медальйон стоїть поруч із коротким підписом,
   а не очолює картку. */
.medallion--sm {
    width:  56px;
    height: 56px;
}
.medallion__icon,
.feature-card__icon {
    position:  absolute;
    top:       50%;
    left:      50%;
    width:     42px;
    height:    42px;
    transform: translate(-50%, -50%);
}
.medallion--sm .medallion__icon {
    width:  24px;
    height: 24px;
}
.feature-card__body {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}
.feature-card__name {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}
.feature-card__title {
    margin:         0;
    font-size:      24px;
    line-height:    32px;
    font-weight:    800;
    letter-spacing: .72px;
    text-transform: uppercase;
    color:          var(--text-primary);
}
.feature-card__subtitle {
    margin:         0;
    font-size:      16px;
    line-height:    24px;
    font-weight:    600;
    letter-spacing: .32px;
    text-transform: uppercase;
    color:          var(--terracotta-400);
}
.feature-card__text {
    margin:      0;
    font-size:   16px;
    line-height: 1.6;
    font-weight: 400;
    color:       var(--text-primary);
}
.feature-card__index {
    position:       absolute;
    top:            31px;
    right:          29px;
    display:        flex;
    align-items:    center;
    gap:            10px;
    font-size:      13px;
    font-weight:    600;
    line-height:    16px;
    letter-spacing: 1.3px;
    color:          rgba(189, 137, 95, .85);
}
.feature-card__index::before {
    content:    "";
    width:      20px;
    height:     1px;
    background: rgba(189, 137, 95, .45);
}

/* Без медальйона: коли іконки для набору немає, порожнє золоте коло
   виглядає як недовантажена картинка. Текст тоді притискаємо вліво —
   центрування має сенс лише навколо медальйона. */
.feature-card--plain {
    align-items: flex-start;
    gap:         14px;
    text-align:  left;
}
.feature-card--plain .feature-card__medallion { display: none; }

/* Значення-число замість заголовка (умови оплати, площі) */
.feature-card__value {
    margin: 0;
    color:  var(--gold-text);
}

/* ── Таблиця характеристик ──────────────────────────────────────────────── */
/* Умови, ціни, специфікації. Головне тут — вирівняні колонки: значення
   читаються згори вниз, і два блоки поруч можна порівняти поглядом.
   Рядком-списком (значення підряд у рядку) цього не досягти — початок
   кожної колонки «плаває» від довжини попереднього значення. */
.data-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       15px;
    line-height:     22px;
    text-align:      left;
}
.data-table th {
    padding:        0 12px 10px 0;
    color:          var(--text-muted);
    font-size:      11px;
    font-weight:    600;
    line-height:    16px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space:    nowrap;
    border-bottom:  1px solid var(--gold-line-soft);
}
/* Значення не переносяться: «12 місяців» у два рядки читається як два
   різні числа. Стискання бере на себе перша колонка — назві рядка
   перенос природний (див. --name нижче). */
.data-table td {
    padding:        12px 12px 12px 0;
    color:          var(--text-secondary);
    vertical-align: top;
    white-space:    nowrap;
    border-bottom:  1px solid var(--border-subtle);
    font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }

/* Перша колонка — назва рядка, вона й тримає ієрархію.
   Селектор із двома класами, бо перебиває `.data-table td` (0,1,1). */
.data-table .data-table__name {
    color:       var(--text-primary);
    font-weight: 600;
    white-space: normal;
}
/* Значення — білим. Золотим лишається тільки одне на рядок (--accent):
   три золоті колонки поспіль дають три рівні акценти, і жоден не веде. */
.data-table__value { color: var(--text-primary); }
.data-table__value--accent { color: var(--gold-text); }
/* Порожня клітинка: прочерк замість дірки — видно, що умови просто немає */
.data-table__empty { color: var(--text-muted); }

/* Нижче 640px чотири колонки не вміщаються в жодну картку — рядок
   розкладається у блок, а заголовки колонок переїжджають до значень
   через data-label. Саме тому вони дублюються в атрибуті: інакше
   в стовпчику значення лишились би без підписів. */
@media (max-width: 640px) {
    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td { display: block; width: 100%; }
    .data-table thead { display: none; }
    .data-table tr {
        padding-bottom: 14px;
        margin-bottom:  14px;
        border-bottom:  1px solid var(--border-subtle);
    }
    .data-table tr:last-child {
        padding-bottom: 0;
        margin-bottom:  0;
        border-bottom:  0;
    }
    .data-table td {
        display:         flex;
        align-items:     baseline;
        justify-content: space-between;
        gap:             16px;
        padding:         4px 0;
        white-space:     normal;
        border-bottom:   0;
    }
    .data-table td::before {
        content:        attr(data-label);
        flex:           0 0 auto;
        color:          var(--text-muted);
        font-size:      11px;
        font-weight:    600;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }
    /* Назва рядка — заголовком блоку, без підпису й на всю ширину.
       Обидва селектори з двома класами: `.data-table td` і
       `.data-table td::before` мають (0,1,1) і інакше перемагають. */
    .data-table .data-table__name {
        display:       block;
        padding:       0 0 6px;
        font-size:     16px;
        border-bottom: 0;
    }
    .data-table .data-table__name::before { content: none; }
}

/* ── Кроки ──────────────────────────────────────────────────────────────── */
/* Пронумерована послідовність дій. Номер — той самий медальйон, що й під
   іконку, тільки з цифрою: заводити для нього окреме коло не треба. */
/* Flex, а не grid з auto-fit: той створює стільки треків, скільки влазить
   (під 5 кроків на 1920 виходило 6, останній порожній — ряд «завалювався»
   вліво). Flex ділить рядок рівно між наявними кроками, скільки б їх не
   було, і сам переносить їх у стовпчик — без жодного брейкпоінта. */
.steps {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             28px 20px;
    margin:          0;
    padding:         0;
    list-style:      none;
}
.steps__item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            14px;
    /* Росте до рівної частки ряду, але не ширше 260px: інакше один крок,
       що лишився в останньому ряду, розтягувався б на всю ширину. */
    flex:           1 1 160px;
    max-width:      260px;
    text-align:     center;
}
.steps__num {
    font-size:      20px;
    font-weight:    700;
    line-height:    1;
    font-variant-numeric: tabular-nums;
}
.steps__text {
    margin:      0;
    color:       var(--text-secondary);
    font-size:   15px;
    line-height: 22px;
}

/* ── Показники ──────────────────────────────────────────────────────────── */
/* Число + підпис із золотою гранню зліва. «Комерція» (площі) і
   «Розтермінування» (умови купівлі) — тому блок тут, а не в css/pages/*. */
/* flex-wrap + nowrap на значенні працюють у парі: значення не переноситься,
   тому min-content показника дорівнює всьому числу, і флекс не стискає
   його нижче — замість цього переносить показник на наступний рядок.
   Так само, як у .data-table: число, розірване на два рядки, читається
   як два різні числа. Заміряно: без цього «від 30%» ламалось уже на 700px,
   а всі три — на 481px, тобто задовго до порогу стовпчика. */
.stats {
    display:   flex;
    flex-wrap: wrap;
    gap:       48px;
    margin:    0;
}
.stats__item {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    padding-left:   20px;
}
.stats__item::before {
    content:    "";
    position:   absolute;
    left:       0;
    top:        4px;
    bottom:     4px;
    width:      2px;
    background: var(--gold-solid);
}
.stats__value   { margin: 0; color: var(--gold-text); white-space: nowrap; }
.stats__caption { margin: 0; }

/* ── Фото-картка ────────────────────────────────────────────────────────── */
/* Фото на всю картку, щільний скрим знизу, текст у нижній третині.
   «Наші проєкти» на головній і роки в «Ході будівництва» — тому блок тут,
   а не в css/pages/home.css. */
.pcard {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    width:           100%;
    height:          560px;
    padding:         32px;
    overflow:        hidden;
    background:      var(--bg-elevated);
    text-decoration: none;
}
.pcard__media {
    position: absolute;
    inset:    0;
    z-index:  0;
    overflow: hidden;
}
.pcard__image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    /* Наїзд фото при наведенні — за спекою компонента (Card / Project). */
    transition: transform 400ms ease-out;
}
.pcard__scrim {
    position:       absolute;
    inset:          0;
    z-index:        1;
    background:     linear-gradient(180deg,
                        rgba(1, 21, 44, 0) 0%,
                        rgba(1, 21, 44, .096) 30%,
                        rgba(1, 21, 44, .499) 52%,
                        rgba(1, 21, 44, .826) 72%,
                        rgba(1, 21, 44, .922) 100%);
    pointer-events: none;
    transition:     opacity var(--transition);
}
/* Золота лінія зверху при наведенні — з'являється, а не зсуває контент. */
.pcard::after {
    content:    "";
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    z-index:    3;
    height:     2px;
    background: var(--gold-solid);
    transform:  scaleX(0);
    transform-origin: left center;
    transition: transform 400ms ease-out;
}

.pcard__status {
    position:                absolute;
    top:                     32px;
    left:                    32px;
    z-index:                 2;
    padding:                 7px 14px;
    font-size:               12px;
    line-height:             18px;
    letter-spacing:          1.2px;
    text-transform:          uppercase;
    color:                   var(--gold-text);
    background:              rgba(1, 21, 44, .8);
    border:                  1px solid var(--gold-line);
    border-radius:           var(--radius);
    backdrop-filter:         blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pcard__body {
    position:       relative;
    z-index:        2;
    display:        flex;
    flex-direction: column;
    gap:            14px;
}
.pcard__title {
    font-size:      28px;
    line-height:    36px;
    font-weight:    500;
    letter-spacing: -.14px;
    color:          var(--text-primary);
}
.pcard__text {
    font-size:   15px;
    line-height: 22px;
    color:       var(--text-secondary);
}
.pcard__link {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding-top:    6px;
    font-size:      14px;
    line-height:    20px;
    font-weight:    600;
    letter-spacing: .07px;
    color:          var(--gold-text);
}
.pcard__arrow {
    flex:       0 0 auto;
    width:      24px;
    height:     24px;
    transition: transform 400ms ease-out;
}

/* Стани — лише для картки-посилання: у картки без сайту немає куди вести,
   тож і реакції на наведення бути не повинно. */
a.pcard:hover .pcard__image,
a.pcard:focus-visible .pcard__image { transform: scale(1.06); }
a.pcard:hover .pcard__scrim,
a.pcard:focus-visible .pcard__scrim { opacity: 1; }
a.pcard:hover::after,
a.pcard:focus-visible::after { transform: scaleX(1); }
a.pcard:hover .pcard__arrow,
a.pcard:focus-visible .pcard__arrow { transform: translateX(4px); }
a.pcard:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pcard__image,
    .pcard__arrow,
    .pcard::after { transition: none; }
    a.pcard:hover .pcard__image { transform: none; }
}

/* ── Картка запису ──────────────────────────────────────────────────────── */
/* Банер зверху, текст під ним. На відміну від .pcard (фото на всю картку з
   текстом поверх) тут зображення — готовий рекламний банер із власною
   типографікою, накладати на нього ще й заголовок не можна. Назва запису
   лишається справжнім HTML-текстом під банером, а не тільки пікселями в
   картинці: інакше її не бачать ні пошук, ні скрінрідер. */
.entry-card {
    display:         flex;
    flex-direction:  column;
    height:          100%;
    overflow:        hidden;
    color:           var(--text-primary);
    text-decoration: none;
    background:      var(--bg-elevated);
    border:          1px solid var(--gold-line-soft);
    border-radius:   4px;
    transition:      border-color var(--transition), transform var(--transition);
}
.entry-card__media {
    position: relative;
    overflow: hidden;
}
.entry-card__image {
    display:      block;
    width:        100%;
    aspect-ratio: 3 / 2;
    object-fit:   cover;
    transition:   transform 400ms ease-out;
}
.entry-card__body {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    flex:           1 1 auto;
    padding:        24px 26px 26px;
}
.entry-card__title {
    margin:      0;
    font-size:   20px;
    line-height: 28px;
    font-weight: 600;
    color:       var(--text-primary);
}
.entry-card__text {
    margin:   0;
    color:    var(--text-secondary);
    /* Автовитяг WordPress — 25 слів; у вузькій картці це 6-7 рядків і
       картка перетворюється на стіну тексту. Обрізаємо до трьох: решту
       читач побачить на самій сторінці запису. */
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}
/* Стрілка притиснута до низу картки — у рядку сітки картки різної
   висоти, і без цього посилання «плавало» б на різних рівнях. */
.entry-card__more { margin-top: auto; padding-top: 4px; }

/* Сітка записів для загальних шаблонів (archive.php, index.php, search.php).
   Flex із базисом, а не grid Nx1fr: кількість записів у вибірці довільна —
   у фіксованій сітці один результат «висне» зліва з порожніми колонками.
   Базис 340px — картка .entry-card з читабельним банером 16/10. */
.entries {
    display:    flex;
    flex-wrap:  wrap;
    gap:        28px;
    margin:     0;
    padding:    0;
    list-style: none;
}
.entries__item {
    display: flex;
    flex:    1 1 340px;
    /* Стеля — щоб один-два результати не розтягувались на весь 1280 */
    max-width: 420px;
}
.entries__empty {
    margin:    0;
    font-size: 17px;
    color:     var(--text-secondary);
}
/* Секція-обгортка сітки — той самий вертикальний ритм, що в решти секцій */
.entries-section {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}

/* Форма пошуку: поле й кнопка — готові .field і .btn, тут лише рядок.
   Базис поля 320px — нижче цього placeholder «Пошук…» уже тисне кнопку. */
.search-form {
    display:   flex;
    flex-wrap: wrap;
    gap:       12px;
    width:     100%;
    max-width: 620px;
}
.search-form__field  { flex: 1 1 320px; min-width: 0; }
.search-form__submit { flex: 0 0 auto; }

@media (max-width: 1024px) {
    .entries         { gap: 20px; }
    .entries-section { padding: 80px 0; }
}
@media (max-width: 768px) {
    .entries-section { padding: 64px 0; }
}
@media (max-width: 640px) {
    .entries { gap: 14px; }
    .entries__item { flex-basis: 100%; max-width: none; }
}
@media (max-width: 480px) {
    .entries-section { padding: 48px 0; }
    .search-form__submit { width: 100%; }
}

/* Статус поверх банера — той самий патерн, що `.pcard__status` на головній:
   підкладка з розмиттям, щоб чип читався на будь-якому кадрі. */
.entry-card__status {
    position:                absolute;
    top:                     16px;
    left:                    16px;
    z-index:                 2;
    color:                   var(--gold-text);
    letter-spacing:          1.2px;
    text-transform:          uppercase;
    background:              rgba(1, 21, 44, .8);
    border-color:            var(--gold-line);
    backdrop-filter:         blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Дії картки — притиснуті до низу: у сусідніх карток різна кількість
   рядків контенту, і без цього кнопки стояли б на різних рівнях. */
.entry-card__actions {
    margin-top: auto;
    padding-top: 4px;
}

/* Картка, що не веде нікуди (не посилання): реакції на наведення бути не
   повинно, інакше вона обіцяє клік, якого немає. */
.entry-card--static { cursor: default; }
.entry-card--static:hover { border-color: var(--gold-line-soft); }
.entry-card--static:hover .entry-card__image { transform: none; }

/* Стан наведення на сам блок — єдиний дозволений випадок вкладеності. */
.entry-card:hover,
.entry-card:focus-visible { border-color: var(--gold-line); }
.entry-card:hover .entry-card__image,
.entry-card:focus-visible .entry-card__image { transform: scale(1.04); }
.entry-card:hover .entry-card__more,
.entry-card:focus-visible .entry-card__more { gap: 18px; color: var(--gold-text); }
.entry-card:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .entry-card__image { transition: none; }
}

/* ── Текст із редактора ─────────────────────────────────────────────────── */
/* Розмітку тут пише контент-менеджер у Гутенберзі, класів на елементах
   немає — тому це єдине місце в дизайн-системі, де стилі чіпляються за
   теги. Обгортка з класом `.prose` обмежує їх одним контейнером. */
.prose {
    /* Довжина рядка. У двох колонках вона й так ~72 знаки, але в стовпчику
       (нижче 900px) текст розтягувався на всю ширину контейнера — заміряно
       96-104 знаки на рядок, удвічі більше комфортного.
       `ch` — ширина нуля (10.4px), а середня кирилична літера тут 8.3px,
       тому 58ch ≈ 72 знаки, а не 58. Одиниця обрана саме за те, що
       масштабується разом із кеглем на адаптиві. */
    max-width:   58ch;
    font-size:   17px;
    line-height: 30px;
    color:       var(--text-secondary);
}
/* Довідкові/юридичні сторінки (page.php: політика конфіденційності, умови)
   мають нумеровані пункти, а не суцільний наратив — 58ch там читався як
   вузька колонка з порожнім полем обабіч. Знімає кеп, текст росте до
   ширини батьківської обгортки (page-body__inner, 860px). */
.prose--wide { max-width: none; }
.prose > *     { margin: 0; }
.prose > * + * { margin-top: 18px; }

.prose h2,
.prose h3,
.prose h4 {
    color:       var(--text-primary);
    font-weight: 600;
    line-height: 1.25;
}
.prose > h2 { margin-top: 40px; font-size: 28px; }
.prose > h3 { margin-top: 32px; font-size: 22px; }
.prose > h4 { margin-top: 26px; font-size: 19px; }
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }

/* Списки: маркер — ромб, як у .feature-list; нумерація — власний лічильник */
.prose ul,
.prose ol {
    margin:     0;
    padding:    0;
    list-style: none;
}
.prose li {
    position:     relative;
    padding-left: 28px;
}
.prose li + li { margin-top: 10px; }
.prose ul > li::before {
    content:    "";
    position:   absolute;
    left:       0;
    top:        11px;
    width:      8px;
    height:     8px;
    background: var(--gold-solid);
    transform:  rotate(45deg);
}
.prose ol { counter-reset: prose-list; }
.prose ol > li { counter-increment: prose-list; }
.prose ol > li::before {
    content:     counter(prose-list) ".";
    position:    absolute;
    left:        0;
    top:         0;
    color:       var(--gold-text);
    font-weight: 600;
}
.prose li > ul,
.prose li > ol { margin-top: 10px; }

.prose a {
    color:                 var(--gold-text);
    text-decoration:       underline;
    text-underline-offset: 3px;
    transition:            color var(--transition);
}
.prose a:hover { color: var(--text-primary); }
.prose strong,
.prose b { color: var(--text-primary); }

.prose blockquote {
    padding:     4px 0 4px 22px;
    color:       var(--text-primary);
    font-size:   19px;
    line-height: 1.6;
    border-left: 2px solid var(--gold-solid);
}
.prose img,
.prose iframe {
    max-width: 100%;
    height:    auto;
}
.prose hr {
    height:     1px;
    margin:     32px 0;
    background: var(--gold-line-soft);
    border:     0;
}

/* Таблиця не має ламати сторінку — скрол усередині своєї обгортки */
.prose table {
    width:           100%;
    border-collapse: collapse;
    font-size:       16px;
}
.prose th,
.prose td {
    padding:     12px 16px;
    text-align:  left;
    border:      1px solid var(--border-subtle);
}
.prose th { color: var(--text-primary); font-weight: 600; }
.prose .wp-block-table { overflow-x: auto; }

/* ── Пагінація ──────────────────────────────────────────────────────────── */
/* Імена класів дає ядро WordPress (`the_posts_pagination`), під БЕМ їх не
   перейменувати — тому вони тут як є, але без прив'язки до сторінки. */
.pagination { margin-top: 48px; }
.nav-links {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             8px;
}
.page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       44px;
    height:          44px;
    padding:         0 14px;
    color:           var(--text-secondary);
    font-size:       15px;
    line-height:     22px;
    text-decoration: none;
    border:          1px solid var(--border-subtle);
    border-radius:   var(--radius);
    transition:      color var(--transition), border-color var(--transition), background-color var(--transition);
}
.page-numbers:hover {
    color:        var(--gold-text);
    border-color: var(--gold-line);
}
.page-numbers.current {
    color:        var(--on-solid);
    background:   var(--gold-solid);
    border-color: var(--gold-solid);
}
.page-numbers.dots {
    border-color: transparent;
}

/* ── Розкладка «медіа + текст» з липкою колонкою ──────────────────────────── */
/* Двоколонковий сингл: ліворуч медіа (не обов'язково просте фото — може бути
   й ціла галерея), праворуч текст, ліва колонка липка на ПК. На відміну від
   `.media-row` тут медіа НЕ підлаштовується під висоту тексту — колонка
   лишається природного розміру й прилипає при скролі. Патерн повторюється
   на сторінці програми («Державні програми») і на звіті «Ходу будівництва»,
   тому живе тут, а не в css/pages/*. */
.split {
    display:     flex;
    align-items: flex-start;
    gap:         60px;
}
.split__aside {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    flex:           0 0 46%;
    max-width:      46%;
    position:       sticky;
    /* --viewport-offset рахує js/main.js: шапка + адмінбар */
    top:            calc(var(--viewport-offset, 92px) + 24px);
}
.split__content {
    flex:      1 1 auto;
    min-width: 0;
}

@media (max-width: 1024px) {
    .split        { gap: 40px; }
    .split__aside { flex-basis: 42%; max-width: 42%; }
}
/* 900px — той самий поріг, що в .media-row: нижче ~400px на колонку рядок
   ламається по 4-6 слів. Медіа-колонка йде зверху, як усюди в стовпчику. */
@media (max-width: 900px) {
    .split {
        flex-direction: column;
        align-items:    stretch;
        gap:            32px;
    }
    .split__aside {
        position:   static;
        flex-basis: auto;
        max-width:  none;
    }
}
@media (max-width: 768px) {
    .split { gap: 26px; }
}

/* ── Навігація між сусідніми записами ──────────────────────────────────── */
/* Попередній / наступний: пост блогу, звіт будівництва — усюди, де записи
   йдуть послідовно один за одним. */
.entry-nav {
    padding:    36px 0;
    background: var(--bg-subtle);
}
.entry-nav__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   24px;
    max-width:             860px;
    margin:                0 auto;
}
.entry-nav__link {
    display:         flex;
    align-items:     center;
    gap:             14px;
    color:           var(--text-primary);
    text-decoration: none;
    transition:      color var(--transition);
}
.entry-nav__link--next { justify-content: flex-end; text-align: right; }
.entry-nav__link:hover { color: var(--gold-text); }
.entry-nav__arrow {
    flex:      0 0 auto;
    font-size: 18px;
    color:     var(--gold-text);
}
.entry-nav__text {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}
.entry-nav__label {
    color:          var(--text-muted);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.entry-nav__title {
    overflow:      hidden;
    font-size:     15px;
    line-height:   22px;
    text-overflow: ellipsis;
    white-space:   nowrap;
}

/* 640px — у стовпчику вирівнювання справа для «наступного» виглядає як
   обірваний рядок (текст притиснутий до правого краю картки без опори).
   Обидва посилання переходять на той самий лівий макет, що й «попередній»;
   стрілка лишається смисловою — вона просто більше не задає бік блоку. */
@media (max-width: 640px) {
    .entry-nav__inner {
        grid-template-columns: 1fr;
        gap:                   20px;
    }
    .entry-nav__link--next {
        justify-content: flex-start;
        text-align:      left;
    }
}

/* ── Текстове посилання зі стрілкою ─────────────────────────────────────── */
.link-arrow {
    display:         inline-flex;
    align-items:     center;
    gap:             12px;
    color:           var(--text-primary);
    font-size:       14px;
    font-weight:     600;
    line-height:     20px;
    letter-spacing:  .07px;
    text-decoration: none;
    transition:      color var(--transition), gap var(--transition);
}
.link-arrow::after {
    content:      "";
    width:        8px;
    height:       8px;
    border-top:   1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform:    rotate(45deg);
    transition:   transform var(--transition);
}
.link-arrow:hover {
    gap:   18px;
    color: var(--gold-text);
}

/* ── Роздільник ─────────────────────────────────────────────────────────── */
.divider-gold {
    height:     1px;
    border:     0;
    margin:     0;
    background: linear-gradient(90deg, var(--gold-line) 0%, rgba(189, 137, 95, 0) 100%);
}
.divider-gold--center {
    background: linear-gradient(90deg,
                  rgba(189, 137, 95, 0) 0%,
                  var(--gold-line) 50%,
                  rgba(189, 137, 95, 0) 100%);
}

/* ── Відео-фасад ────────────────────────────────────────────────────────── */
/* До кліку показуємо тільки обкладинку й кнопку — важкий iframe YouTube
   вантажиться після натискання ( js/pages/home.js ). Кадр 16:9, тонка
   золота рамка на 4px назовні — як у макеті ( 1288×728 навколо 1280×720 ). */
.video-facade {
    position:      relative;
    aspect-ratio:  16 / 9;
    overflow:      hidden;
    background:    var(--bg-subtle);
}
.video-facade::after {
    content:        "";
    position:       absolute;
    inset:          -4px;
    border:         1px solid var(--gold-solid);
    pointer-events: none;
}
.video-facade__poster,
.video-facade__frame {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}
.video-facade__poster { object-fit: cover; }

.video-facade__play {
    position:         absolute;
    top:              50%;
    left:             50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            96px;
    height:           96px;
    padding:          0;
    color:            var(--gold-text);
    background:       rgba(1, 21, 44, .42);
    border:           1.5px solid var(--gold-solid);
    border-radius:    50%;
    transform:        translate(-50%, -50%);
    cursor:           pointer;
    backdrop-filter:  blur(12px);
    transition:       background var(--transition), color var(--transition),
                      box-shadow var(--transition);
}
.video-facade__play:hover,
.video-facade__play:focus-visible {
    color:      var(--on-solid);
    background: var(--gold-solid);
    box-shadow: var(--gold-glow);
}
/* Трикутник оптично зміщений вправо — інакше в колі здається зсунутим уліво. */
.video-facade__icon {
    width:     20px;
    height:    24px;
    transform: translateX(2px);
}

/* ── Адаптація ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .section-head__title { font-size: 34px; line-height: 44px; }
    .section-head__text  { font-size: 17px; line-height: 26px; }
    .t-stat { font-size: 30px; line-height: 34px; }
    .feature-card__title { font-size: 21px; line-height: 28px; }
    .media-row          { gap: 40px; }
    .media-row__content { gap: 26px; }
    .stats              { gap: 32px; }
    .pcard              { height: 480px; padding: 24px; }
    .pcard__status      { top: 24px; left: 24px; }
    .pcard__title       { font-size: 24px; line-height: 30px; }
}

/* 900px — той самий поріг, що на головній: нижче ~400px на колонку рядок
   ламається по 4–6 слів. `--reverse` теж стає стовпчиком. */
@media (max-width: 900px) {
    .media-row,
    .media-row--reverse {
        flex-direction: column;
        align-items:    stretch;
        gap:            32px;
    }
    /* У стовпчику фото — зверху, незалежно від того, з якого боку воно
       стояло на широкому екрані. У DOM воно йде після контенту (щоб
       `--reverse` обходився без `order` на десктопі), тож тут піднімаємо
       його одним правилом на обидва варіанти блоку. */
    .media-row__media { order: -1; }
    /* У стовпчик — фото повертається у звичайний потік зі своєю пропорцією:
       розтягуватись більше немає по чому, ряд став вертикальним. */
    .media-row__media {
        position:   static;
        min-height: 0;
    }
    .media-row__image {
        position:     static;
        height:       auto;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 768px) {
    .section-head        { gap: 16px; }
    .section-head__title { font-size: 26px; line-height: 34px; }
    .section-head__text  { font-size: 16px; line-height: 25px; }
    /* flex-start замість center: коли текст (наприклад, довга адреса в hero)
       не влазить в один рядок і переносить, ромбики більше не «зависають»
       по центру двох рядків, а тримаються першого — для однорядкового
       eyebrow різниця в 1px непомітна. */
    .eyebrow             { font-size: 12px; letter-spacing: 2px; gap: 10px; align-items: flex-start; }
    .eyebrow::before,
    .eyebrow::after      { width: 20px; background-position: 0 center, 7px center; }
    .btn                 { padding: 14px 26px; font-size: 15px; }
    .btn--ghost          { padding: 12px 0; }
    .field               { height: 54px; padding: 0 18px; font-size: 15px; }
    .t-stat              { font-size: 26px; line-height: 30px; }
    .video-facade__play  { width: 68px; height: 68px; }
    .video-facade__icon  { width: 15px; height: 18px; }
    .feature-card        { padding: 24px; gap: 18px; }
    .feature-card__title { font-size: 19px; line-height: 26px; }
    .media-row__content  { gap: 22px; }
    .stats               { gap: 24px; }
    .pcard               { height: 440px; padding: 20px; }
    .pcard__status       { top: 20px; left: 20px; }
    .steps               { gap: 22px 16px; }
    .entry-card__body    { padding: 20px 20px 22px; }
    .entry-card__title   { font-size: 18px; line-height: 26px; }
    .entry-card__status  { top: 12px; left: 12px; }
    .prose               { font-size: 16px; line-height: 27px; }
    .prose > h2          { margin-top: 30px; font-size: 22px; }
    .prose > h3          { margin-top: 26px; font-size: 19px; }
    .feature-list        { gap: 12px; }
    .feature-list__item  { padding-left: 24px; font-size: 15px; line-height: 24px; }
    .callout             { padding: 16px 18px; }
}

/* 640: сітка карток уже в один стовпчик — картка нижча, бо фото на всю
   ширину й так домінує. */
@media (max-width: 640px) {
    .pcard { height: 420px; }
}

/* Найвужчий крок іде останнім: у CSS перемагає той запит, що нижче в
   файлі, а не той, що з меншим числом. */
@media (max-width: 480px) {
    .stats { flex-direction: column; gap: 18px; }
    /* На телефоні опис переносить на 3-4 рядки: при 380px текстовий блок
       з'їдав 40-46% картки проти ~29% на десктопі, і фото ставало смужкою.
       440px повертає пропорцію ближче до десктопної. */
    .pcard         { height: 440px; }
    .pcard__title  { font-size: 22px; line-height: 28px; }
    .pcard__status { padding: 6px 12px; font-size: 11px; letter-spacing: 1px; }
}