/*
 * Квартири — архів планувань, черги, архіви таксономій
 *
 * Зібрана з готового: .phero--flat (main.css, шапка), .entry-card (ui.css,
 * картки черг — фото черги це готовий банер із власним написом, той самий
 * компонент, що на картках «Державних програм»), .field (ui.css, поля
 * фільтрів), .pagination/.page-numbers (ui.css). Своє тут — сітка/картка
 * планування (.kv-card, показує характеристики, а не просто фото-банер)
 * і форма фільтрів (.kv-filters).
 *
 * Чергування фонів: шапка (флет, subtle) → черги canvas → сітка планувань
 * canvas → CTA elevated.
 */

/* ── Ціна черги ─────────────────────────────────────────────────────────── */
/* Ціна м² «від» у шапці сторінки черги ( pages/kvartiri/hero.php ). Одна на
   чергу, тож стоїть поруч із назвою, а не в кожній картці. Без підкладки:
   виділяє контраст — біле велике число під золотим лідом, одиниця дрібна й
   приглушена, щоб не сперечалась із числом. Геометрію ( праву колонку )
   задає батько через .kv-hero__price — сам блок margin не ставить. */
.kv-price {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    margin:         0;
}
.kv-price__label {
    color:          var(--text-muted);
    font-size:      13px;
    font-weight:    600;
    line-height:    18px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.kv-price__value {
    color:          var(--text-primary);
    font-size:      40px;
    font-weight:    700;
    line-height:    48px;
    letter-spacing: -.4px;
    white-space:    nowrap;
}
.kv-price__unit {
    color:          var(--text-muted);
    font-size:      18px;
    font-weight:    500;
    line-height:    1; /* надрядковий «²» інакше розсуває рядок */
    letter-spacing: 0;
}

/* Шапка черги: текст ліворуч, ціна праворуч, обидва по нижньому краю —
   число стоїть на одній лінії з лідом «N планувань на вибір», а не висить
   біля заголовка. Контейнер .phero--flat і так на всю ширину, тож колонки
   розводить space-between без сітки.
   Нижче 768 ціна повертається під текст: заміряно, що на 700→320 колонка
   заголовка стискається з 449 до 86px, і «ПЛАНУВАННЯ — ПЕРША ЧЕРГА»
   розпадається на 4–6 рядків. На 769–1150 заголовок іде у два рядки —
   це прийнятно, колонка ще ~500px і лід уміщається в рядок. */
.kv-hero__inner {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             40px;
}
.kv-hero__price {
    flex:        0 0 auto;
    align-items: flex-end;
    text-align:  right;
}

/* ── Черги ──────────────────────────────────────────────────────────────── */
.kv-queues {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.kv-queues__list {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   30px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.kv-queues__item { display: flex; }

/* Невеликий градієнт знизу вгору — м'яко зводить фото банера до суцільної
   панелі з текстом під ним, без різкого шва. Мікс-клас поверх спільного
   .entry-card__media (ui.css), не чіпаємо сам компонент: на картках
   «Державних програм» такого шва немає, там це не потрібно. Набагато
   легший за колишній скрим .pcard — лише нижні ~30% і до половинної
   темряви, банер і його напис лишаються повністю читабельними. */
.kv-queues__media::after {
    content:    "";
    position:   absolute;
    inset:      auto 0 0 0;
    height:     30%;
    background: linear-gradient(180deg, rgba(1, 21, 44, 0) 0%, rgba(1, 21, 44, .5) 100%);
    pointer-events: none;
}

/* ── Фільтри і сітка планувань ──────────────────────────────────────────── */
.kv-items {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
/* Схожі планування (pages/kvartiri/similar.php) — окремий блок під
   карткою планування, з відбивкою лінією замість власного фону.
   overflow: hidden — доріжка Slick навмисно ширша за контейнер
   (від'ємний margin-right нижче), і без обрізання предком її «хвіст»
   давав +4px горизонтального скролу на всьому діапазоні 320–1280. */
.kv-items--similar {
    padding:    0 0 var(--section-gap);
    background: none;
    overflow:   hidden;
}
.kv-items--similar > .container {
    padding-top: 46px;
    border-top:  1px solid var(--border-subtle);
}
.kv-items__head {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             20px;
    margin-bottom:   28px;
}
.kv-items__title {
    margin:         0;
    font-size:      32px;
    font-weight:    600;
    line-height:    40px;
    letter-spacing: .64px;
    text-transform: uppercase;
    color:          var(--text-primary);
}
.kv-items__all {
    flex:            0 0 auto;
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    color:           var(--gold-text);
    font-size:       15px;
    font-weight:     600;
    text-decoration: none;
    transition:      gap var(--transition);
}
.kv-items__all::after {
    content:      "";
    width:        7px;
    height:       7px;
    border-top:   2px solid currentColor;
    border-right: 2px solid currentColor;
    transform:    rotate(45deg);
}
.kv-items__all:hover { gap: 16px; }

/* ── Форма фільтрів ─────────────────────────────────────────────────────── */
/* <form method="get"> без кнопки — js/pages/kvartiri.js фетчить сітку на
   зміну select'а ( wp_ajax_kvartiri_filter ) і підміняє #kv-results. */
.kv-filters {
    display:       flex;
    flex-wrap:     wrap;
    align-items:   flex-end;
    gap:           16px;
    margin-bottom: 36px;
}
.kv-filters__field {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex:           1 1 0;
}
.kv-filters__label {
    font-size:      13px;
    font-weight:    600;
    letter-spacing: .65px;
    text-transform: uppercase;
    color:          var(--text-muted);
}
/* Нативна стрілка select'а вимикається — своя, той самий прийом (border
   rotate 45deg), що й на .pcard__link/.kv-items__all поруч. */
.kv-filters__select {
    -webkit-appearance: none;
    appearance:          none;
    background-image:    none;
}
/* 26px від низу поля = вертикальний центр 60px select'а (.field), що
   стоїть останнім дитям у стовпчику label+select. */
.kv-filters__field::after {
    content:       "";
    position:      absolute;
    right:         22px;
    bottom:        26px;
    width:         8px;
    height:        8px;
    border-right:  2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform:     rotate(45deg);
    pointer-events: none;
}

.kv-results { transition: opacity var(--transition); }
.kv-results[aria-busy="true"] { opacity: .5; pointer-events: none; }

.kv-empty {
    margin:    0;
    font-size: 17px;
    color:     var(--text-secondary);
}

/* Сітка планувань (items.php) — фіксована кількість на сторінку
   (posts_per_page у inc/kvartiri.php), тому звичайна grid, не flex:
   рахунок карток сторінки завжди повний, крім останньої. Відступ до
   пагінації дає сама .pagination (margin-top, ui.css) — тут не дублюємо. */
.kv-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

/* До ініціалізації Slick (і коли карток мало) — звичайна сітка по 3.
   Використовується лише в «Схожих плануваннях» (similar.php, максимум
   3 картки) — items.php більше не гортає слайдером. */
.kv-slider {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
/* Проміжок віддаємо правому краю слайда, а доріжку розширюємо праворуч:
   так перша картка стоїть рівно по лівому краю контейнера. */
.kv-slider.slick-initialized {
    display: block;
    margin:  0 -24px 0 0;
}
.kv-slider .slick-slide {
    height:  auto;
    padding: 0 24px 0 0;
}
/* Slick робить слайди інлайновими — вирівнюємо картки по висоті ряду */
.kv-slider .slick-track {
    display:     flex;
    align-items: stretch;
}

/* ── Картка планування ──────────────────────────────────────────────────── */
/* Одна клітинка сітки на двох: посилання картки й кнопка 3D-туру лежать
   одне на одному. Кнопка — сусід посилання, а не дитина (<a> в <a>
   невалідне), тож absolute від li не годиться: у слайдері Slick li має
   правий padding під проміжок, і кнопка з'їжджала б у нього. Клітинка
   grid рахується без padding. Підйом на hover — теж на всій картці,
   інакше кнопка лишалась би на місці, а картка під нею їхала б угору. */
.kv-card {
    display:               grid;
    grid-template-columns: minmax(0, 1fr);
    transition:            transform var(--transition);
}
.kv-card:hover,
.kv-card:focus-within { transform: translateY(-4px); }
.kv-card__link {
    grid-area:       1 / 1;
    display:         flex;
    flex-direction:  column;
    width:           100%;
    overflow:        hidden;
    color:           var(--text-primary);
    text-decoration: none;
    background:      var(--bg-elevated);
    border:          1px solid var(--border-field);
    border-radius:   var(--radius);
    transition:      border-color var(--transition);
}
.kv-card__link:hover,
.kv-card__link:focus-visible { border-color: var(--gold-line); }

/* 3D-тур — кругла плашка з нашого ж робочого сайту ( eurolipki.com.ua,
   .btn-3d-tour ): людина, що вже бачила її там, упізнає без підпису.
   Файл той самий, лише коло перефарбоване з #1A313E у --bg-canvas, щоб у
   палітрі не з'явився сторонній бірюзовий. Підключено <img>, а не inline:
   у SVG є <mask id>, і вісім inline-копій на сторінці дали б дублікати id.
   52px — вище за поріг тач-цілі, розширювати псевдоелементом не треба.
   Hover — золоте кільце тінню: розкладку не зсуває, а outline тут
   глушить глобальне правило фокусу. */
.kv-card__tour {
    z-index:        1;
    grid-area:      1 / 1;
    align-self:     start;
    justify-self:   end;
    display:        block;
    width:          52px;
    height:         52px;
    margin:         12px;
    border-radius:  50%;
    box-shadow:     0 0 0 0 var(--gold-solid), var(--shadow);
    transition:     box-shadow var(--transition), transform var(--transition);
    animation:      kv-tour-blink 2.8s cubic-bezier(.37, 0, .63, 1) infinite;
}
/* Під курсором і у фокусі мерехтіння зупиняється: ціль, у яку цілишся,
   має стояти чітко, а золоте кільце — не згасати разом із нею. */
.kv-card__tour:hover,
.kv-card__tour:focus-visible {
    box-shadow: 0 0 0 2px var(--gold-solid), var(--shadow);
    transform:  scale(1.06);
    animation:  none;
}

/* Мерехтіння — за мотивом .btn-3d-tour на eurolipki.com.ua, але м'якше:
   там 1 → .2 → 1 за 1.2s, і на білому кресленні це читалось як блимання.
   Тут цикл 2.8s, провал лише до .45 і синусоїдна крива (easeInOutSine) —
   без різкого розвороту на краях, плашка «дихає», а не мигає.
   Анімується вся кнопка, а не <img>: інакше тінь лишалась би на місці
   порожнім колом, поки сама плашка згасає. */
@keyframes kv-tour-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
    .kv-card__tour { animation: none; }
}
.kv-card__tour-icon {
    display: block;
    width:   100%;
    height:  100%;
}

/* Креслення — на світлому тлі, тому підкладка біла, а не темна */
.kv-card__media {
    position:   relative;
    display:    block;
    aspect-ratio: 4 / 3;
    overflow:   hidden;
    background: var(--white);
}
.kv-card__image {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: contain;
    padding:    14px;
    transition: transform 400ms ease-out;
}
.kv-card__link:hover .kv-card__image { transform: scale(1.03); }

.kv-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1 1 auto;
    gap:            14px;
    padding:        22px 24px;
}
.kv-card__title {
    font-size:   20px;
    font-weight: 600;
    line-height: 26px;
}
.kv-card__meta {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex:           1 1 auto;
}
.kv-card__meta-item {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             12px;
    font-size:       15px;
}
.kv-card__meta-label { color: var(--text-muted); }
.kv-card__meta-value { font-weight: 600; white-space: nowrap; }
.kv-card__more {
    display:     inline-flex;
    align-items: center;
    gap:         10px;
    color:       var(--gold-text);
    font-size:   15px;
    font-weight: 600;
    transition:  gap var(--transition);
}
.kv-card__more::after {
    content:      "";
    width:        7px;
    height:       7px;
    border-top:   2px solid currentColor;
    border-right: 2px solid currentColor;
    transform:    rotate(45deg);
}
.kv-card__link:hover .kv-card__more { gap: 16px; }

/* Стрілки слайдера «Схожих планувань» — той самий вигляд, що й у решті
   слайдерів теми (css/pages/building-single.css). */
.kv-items .slick-arrow {
    position:      absolute;
    top:           50%;
    z-index:       2;
    display:       grid;
    place-items:   center;
    width:         48px;
    height:        48px;
    padding:       0;
    transform:     translateY(-50%);
    background:    rgba(1, 21, 44, .55);
    border:        1px solid var(--border-field-hover);
    border-radius: 50%;
    color:         transparent;
    font-size:     0;
    cursor:        pointer;
    transition:    background-color var(--transition), border-color var(--transition);
}
.kv-items .slick-arrow:hover {
    background:   var(--gold-solid);
    border-color: var(--gold-solid);
}
.kv-items .slick-arrow.slick-disabled { opacity: .35; cursor: default; }
.kv-items .slick-prev { left:  4px; }
.kv-items .slick-next { right: 4px; }
.kv-items .slick-arrow::before {
    content:      "";
    position:     absolute;
    top:          50%;
    left:         50%;
    width:        11px;
    height:       11px;
    border-top:   2px solid var(--text-primary);
    border-right: 2px solid var(--text-primary);
    opacity:      1;
}
.kv-items .slick-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.kv-items .slick-next::before { transform: translate(-70%, -50%) rotate(45deg); }

/* ── Адаптація ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kv-queues { padding: 80px 0; }
    .kv-queues__list { gap: 20px; }

    .kv-items          { padding: 80px 0; }
    .kv-items--similar { padding: 0 0 80px; }
    .kv-items--similar > .container { padding-top: 36px; }
    .kv-items__head    { margin-bottom: 22px; }
    .kv-items__title   { font-size: 26px; line-height: 34px; }

    .kv-grid,
    .kv-slider { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .kv-card__body  { padding: 18px 20px; }
    .kv-card__title { font-size: 18px; line-height: 24px; }
}

@media (max-width: 768px) {
    .kv-hero__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
    .kv-hero__price { align-items: flex-start; text-align: left; }
    .kv-price__value { font-size: 34px; line-height: 42px; }
    .kv-price__unit  { font-size: 16px; }
    .kv-queues { padding: 64px 0; }
    .kv-queues__list { grid-template-columns: 1fr; gap: 14px; }

    .kv-items          { padding: 64px 0; }
    .kv-items--similar { padding: 0 0 64px; }
    .kv-items--similar > .container { padding-top: 28px; }
    .kv-items__head  { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; }
    .kv-items__title { font-size: 22px; line-height: 28px; }

    .kv-filters { gap: 12px; margin-bottom: 24px; }
    .kv-filters__field { flex-basis: 100%; }

    .kv-grid,
    .kv-slider { grid-template-columns: 1fr; gap: 14px; }
    .kv-card__title { font-size: 18px; line-height: 24px; }
}

@media (max-width: 480px) {
    .kv-price__value { font-size: 30px; line-height: 38px; }
    .kv-queues { padding: 48px 0; }
    .kv-items          { padding: 48px 0; }
    .kv-items--similar { padding: 0 0 48px; }
}