/*
 * Одне планування
 *
 * Зібрана з готового: .split (ui.css, двоколонка з липкою медіа-колонкою —
 * той самий компонент, що на сторінці програми й звіті «Ходу
 * будівництва»), .stats (ui.css, числа — та сама мова, що в герої
 * головної), .chip (контекст: кімнатність, черга, будинок, секція),
 * .eyebrow, .btn, .cta__form (main.css — форма та сама, що в CTA,
 * стилі полів переюзані міксом, не дублюємо). Своє тут —
 * креслення+галерея й блок переваг будинку.
 */

/* Шапка сторінки — глобальний .phero--flat (main.css), як на решті
   внутрішніх сторінок: він же тримає відступ під прозору шапку й крихти,
   тому .kvs — звичайна секція зі звичайним ритмом. */
.kvs {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}

/* Контекст планування (кімнатність, черга, будинок, секція) — чипами під
   заголовком героя, а не рядками в списку характеристик: це навігація й
   мітки, а не числа. Окремий блок, не елемент .kvs: живе всередині
   .phero__headline, і відступ згори дає його gap — свого margin блок не
   ставить. */
.kvs-meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    margin:     0;
    padding:    0;
    list-style: none;
}

/* ── Креслення ──────────────────────────────────────────────────────────── */
/* Золота грань зверху прив'язує білий прямокутник до палітри сторінки:
   без неї це єдина біла пляма на сайті, що висить у полотні.
   У картці лежать усі креслення квартири ( мініатюра + kv_gallery ), але
   видиме одне: решта перемикається мініатюрами під карткою. Так велике
   креслення лишається читабельним, а колонка не росте на кожне фото. */
.kvs__plan {
    margin:        0;
    padding:       28px;
    background:    var(--white);
    border-top:    2px solid var(--gold-solid);
    border-radius: var(--radius);
    box-shadow:    var(--shadow);
}
/* Обгортка-кнопка: збільшення — дія, тому <button>, а не картинка з
   onclick. Власного вигляду в неї немає, лише курсор.
   Серверний рендер ставить --current на перше креслення, тому без JS
   видно саме його, а не порожню картку. */
.kvs__plan-zoom {
    display:    none;
    width:      100%;
    padding:    0;
    background: none;
    border:     0;
    cursor:     zoom-in;
}
.kvs__plan-zoom--current { display: block; }

/* 62vh — і на десктопі, і в стовпчику: коли .split згортається, картка
   стає на всю ширину контейнера, і вертикальне креслення 768×1087
   виростає до ~980px, вихлюпуючись за екран. Повний розмір дивляться
   в лайтбоксі. */
.kvs__plan-image {
    display:    block;
    width:      100%;
    height:     auto;
    max-height: 62vh;
    object-fit: contain;
    margin:     0 auto;
}

/* ── Мініатюри ──────────────────────────────────────────────────────────── */
/* Підкладка біла, як у великої картки, і object-fit: contain, а не cover:
   вертикальне креслення з шапкою й площами при обрізанні по 4/3 не
   читалось зовсім. Ціль 96px — вище за поріг тач-цілі 44px. */
.kvs__gallery {
    display:    flex;
    flex-wrap:  wrap;
    gap:        12px;
    margin:     12px 0 0;
    padding:    0;
    list-style: none;
}
.kvs__gallery-item { display: flex; }
/* Неактивну мініатюру не приглушуємо прозорістю: креслення бувають світлі
   (гола схема на білому), і на білій підкладці вони просто зникали в пляму.
   Активність показує рамка, а outline не зсуває вміст, на відміну від
   потовщення border. */
.kvs__gallery-btn {
    display:       block;
    width:         96px;
    padding:       8px;
    background:    var(--white);
    border:        1px solid var(--border-field);
    border-radius: var(--radius);
    cursor:        pointer;
    transition:    border-color var(--transition), outline-color var(--transition);
    outline:       2px solid transparent;
    outline-offset: -2px;
}
.kvs__gallery-btn:hover,
.kvs__gallery-btn:focus-visible { border-color: var(--gold-line); }
.kvs__gallery-btn--current { outline-color: var(--gold-solid); }
.kvs__gallery-image {
    display:      block;
    width:        100%;
    aspect-ratio: 3 / 4;
    object-fit:   contain;
}

/* ── Характеристики ─────────────────────────────────────────────────────── */
/* Числа — .stats (ui.css), той самий компонент, що тримає показники в
   герої головної: у рядку списку 29,98 м² важило рівно стільки ж, скільки
   довідкове «Тип планування 1», і головне не читалось.
   Сітка 2×2 замість ряду: чотири показники в колонці ~480px не вміщаються
   в рядок, і флекс переносив четвертий окремо — сирота, що читається як
   випадковість, а не як блок. */
.kvs__stats {
    display:               grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:                   26px 32px;
}

/* 58ch (~70 знаків) — той самий кеп, що в .prose і на «Кредитуванні».
   Потрібен не на десктопі, а після згортання .split на 900px: там колонка
   стає на всю ширину контейнера, і рядок виростає до 98 знаків — довший,
   ніж був на 1440. */
.kvs__text {
    margin:      32px 0 0;
    max-width:   58ch;
    color:       var(--text-secondary);
    font-size:   17px;
    line-height: 28px;
}
.kvs__text > *     { margin: 0; }
.kvs__text > * + * { margin-top: 14px; }

/* Характеристики будинку — спільні для всіх планувань (Theme Options),
   довідковий блок. Без картки-коробки: у колонці має бути одна «важка»
   поверхня — форма, — інакше три однакові сірі бокси поспіль читаються
   як список коробок, а не як ієрархія. Відбивка — золота волосяна лінія. */
.kvs__house {
    margin-top:  32px;
    padding-top: 28px;
    border-top:  1px solid var(--gold-line-soft);
}
.kvs__house-title {
    margin:         0 0 18px;
    color:          var(--gold-text);
    font-size:      13px;
    font-weight:    600;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.kvs__features {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   12px 24px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
.kvs__feature {
    position:     relative;
    display:      flex;
    align-items:  flex-start;
    gap:          10px;
    padding-left: 24px;
    font-size:    15px;
    line-height:  22px;
    color:        var(--text-secondary);
}
/* Галочка замість маркера */
.kvs__feature::before {
    content:       "";
    position:      absolute;
    left:          2px;
    top:           6px;
    width:         10px;
    height:        6px;
    border-left:   2px solid var(--gold-solid);
    border-bottom: 2px solid var(--gold-solid);
    transform:     rotate(-45deg);
}
.kvs__feature-icon {
    flex:       0 0 auto;
    width:      22px;
    height:     22px;
    object-fit: contain;
}
/* З іконкою галочка не потрібна */
.kvs__feature:has(.kvs__feature-icon) { padding-left: 0; }
.kvs__feature:has(.kvs__feature-icon)::before { display: none; }

/* Кнопка туру стоїть під кресленням, а не серед тексту: це дія над самим
   кресленням («подивитись те саме в 3D»), і ліва колонка перестає
   обриватись вище за праву. */
.kvs__tour { margin-top: 16px; }

/* ── Форма ──────────────────────────────────────────────────────────────── */
/* Сама форма — .cta__form (main.css), той самий компонент, що в CTA;
   тут лише обгортка-картка й заголовок над нею. Єдина «важка» поверхня
   в колонці + золота грань зверху: це головна дія сторінки. */
.kvs__form {
    margin-top:    36px;
    padding:       32px;
    background:    var(--bg-elevated);
    border:        1px solid var(--border-field);
    border-top:    2px solid var(--gold-solid);
    border-radius: var(--radius);
}
.kvs__form-title {
    margin:      0 0 20px;
    font-size:   24px;
    font-weight: 500;
    line-height: 32px;
    color:       var(--text-primary);
}

/* ── Адаптація ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .kvs          { padding: 80px 0; }
    .kvs__plan    { padding: 18px; }
    .kvs__stats   { gap: 22px 28px; }
    .kvs__text    { font-size: 16px; line-height: 26px; margin-top: 26px; }
    .kvs__house   { margin-top: 26px; padding-top: 24px; }
    .kvs__features { grid-template-columns: 1fr; gap: 10px; }
    .kvs__form    { padding: 24px; margin-top: 30px; }
    .kvs__form-title { font-size: 21px; line-height: 28px; }
}

@media (max-width: 768px) {
    .kvs        { padding: 64px 0; }
    .kvs-meta   { gap: 8px; }
    .kvs__gallery-btn { width: 76px; }
    .kvs__stats      { gap: 20px 24px; }
    .kvs__house      { margin-top: 22px; padding-top: 20px; }
    .kvs__features   { grid-template-columns: 1fr; }
    .kvs__form       { padding: 22px; }
    .kvs__form-title { font-size: 19px; line-height: 26px; }
}

@media (max-width: 480px) {
    .kvs { padding: 48px 0; }
    /* Крихти цієї сторінки довші за типові («Головна › Квартири › Секція N ›
       назва планування») і нижче 480 лягають у два рядки — 64px замість 37.
       Глобального відступу .phero--flat лишалось на це рівно 4px повітря;
       мікс-клас додає 24px, не чіпаючи решту сторінок. Третього рядка не
       буває: останній крихт обрізається через ellipsis. */
    .kvs-hero { padding-top: calc(var(--header-height) + 92px); }
    /* Один стовпчик — як і сам .stats нижче 480 (ui.css): 36px число
       у півколонки 155px не влазить, а nowrap виносить його за край. */
    .kvs__stats { grid-template-columns: 1fr; gap: 18px; }
}