/*
 * Сторінка «Готові об'єкти»
 *
 * Зібрана з готового: .phero (main.css), .media-row, .section-head--left,
 * .eyebrow, .feature-list, .callout, .chip--static, .btn (ui.css) і
 * глобальна CTA. Своє тут — тільки ритм секцій, чергування фонів і дрібні
 * поправки під цю сторінку.
 *
 * Чергування фонів: фото → canvas → subtle → canvas → CTA elevated.
 */

/* ── Герой ──────────────────────────────────────────────────────────────── */
/* Контенту менше, ніж на «Кредитуванні»/«Розтермінуванні» (без .stats-рядка
   чи другого абзацу) — той самий відступ .phero--flat, який там виправданий
   обсягом, тут читається як порожнеча. Пробував заповнювати праву половину
   новим блоком (рахунок пропозицій, .stats) — забраковано: сама ідея
   додаткового блоку там не пасує. Стискаємо сам блок: менший відступ і
   тісніший ритм усередині. Тільки десктоп: нижче 1024 сторінка й так
   переходить на свою драбину (main.css), тому min-width, щоб не дублювати
   її. */
@media (min-width: 1025px) {
    .ro-hero          { padding: calc(var(--header-height-top) + 64px) 0 40px; }
    .ro-hero__headline { gap: 20px; }
}

/* Кнопка — праворуч від тексту, а не під ним: використовуємо вже наявний
   елемент замість нового блоку (той самий, що й забраковано вище). На
   ≥1025 .phero__headline не розтягується на всю ширину сам (у main.css він
   flex-column без flex-grow), тому досить `justify-content: space-between`
   на рядку — жодного додаткового обмеження ширини не треба. */
@media (min-width: 1025px) {
    .ro-hero__inner {
        display:         flex;
        align-items:     flex-end;
        justify-content: space-between;
        gap:             40px;
    }
    /* 6px з main.css розрахований на відступ від ліда всередині колонки;
       тут кнопка — окремий елемент рядка, і власний відступ зверху вже
       не потрібен. */
    .ro-hero__actions { margin-top: 0; }
}
/* Нижче 1024 колонки немає — кнопка падає під текст блоком. Такий самий
   відступ, який раніше давав gap самого .phero__headline, поки кнопка була
   його дитиною. */
@media (max-width: 1024px) {
    .ro-hero__actions { margin-top: 26px; }
}

.ro-item {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
/* Парні блоки — темніша підкладка, щоб три однакові за структурою
   пропозиції поспіль не читались як одна довга смуга. */
.ro-item--alt { background: var(--bg-subtle); }

/* Заголовок пропозиції — не заголовок секції: він конкурує з H1 сторінки
   і повторюється тричі поспіль, тому на крок менший за .section-head__title. */
.ro-item__title {
    font-size:      34px;
    line-height:    44px;
    letter-spacing: .68px;
}

.ro-item__terms {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.ro-item__actions { margin: 0; }

/* ── Адаптація ──────────────────────────────────────────────────────────── */
/* Драбина головної; переходи двох колонок у стовпчик робить .media-row (900). */

/* 1245px — виміряний поріг, не кругле число. Найдовша назва пропозиції
   («Однокімнатна квартира 43 м² у ЖК «Європейські Липки»») тримається у два
   рядки, поки текстова коробка ≥ 594px, а 594px — це рівно її ширина на
   34px. Нижче заголовок розпадався на три рядки, лишаючись десктопного
   розміру, тож крок шрифту стоїть тут, а не на 1024: проміжного розміру не
   заводимо — на 27px найдовший рядок 472px, і двох рядків вистачає аж до
   ~1010px, де двоколонкова розкладка й так на межі. */
@media (max-width: 1245px) {
    .ro-item__title { font-size: 27px; line-height: 36px; }
}

@media (max-width: 1024px) {
    .ro-item { padding: 80px 0; }
}

@media (max-width: 768px) {
    .ro-item        { padding: 64px 0; }
    .ro-item__title { font-size: 23px; line-height: 30px; }
    .ro-item__terms { gap: 8px; }
}

@media (max-width: 480px) {
    .ro-item        { padding: 48px 0; }
}

/* 360px: у 300px колонки найдовша назва пропозиції розпадається на чотири
   рядки (виміряно: 320 → 4ln). Крок шрифту повертає її до трьох. */
@media (max-width: 360px) {
    .ro-item__title { font-size: 21px; line-height: 28px; }
}