/*
 * Сторінка «Комерція»
 *
 * Зібрана з компонентів головної: .phero (main.css), .section-head,
 * .eyebrow, .feature-card--plain, .divider-gold, типографічні класи
 * (ui.css) і дві глобальні CTA. Тут лишається тільки те, чого немає
 * ніде більше: ритм секцій і сітки карток цієї сторінки.
 *
 * Розкладка двоколонкових секцій, перелік переваг і виносний блок переїхали
 * в ui.css (.media-row, .feature-list, .callout) — вони пішли на другу
 * сторінку, «Готові об'єкти». Показники — теж (.stats), вони знадобились
 * на «Розтермінуванні».
 *
 * Чергування фонів (правило «сусідні секції не зливаються»):
 * фото → subtle → canvas → CTA elevated → subtle → canvas → subtle → фото.
 */

/* ── Чому саме зараз ────────────────────────────────────────────────────── */
.cm-why {
    padding:    var(--section-gap) 0;
    background: var(--bg-subtle);
}
/* Розкладка — спільний .media-row (ui.css). Тут лише більша за типову
   мінімальна висота: колонка тексту коротка, і на 360px за замовчуванням
   фото виглядало приземкуватим поруч із високим переліком. */
.cm-why__media { min-height: 420px; }

/* ── Для якого бізнесу ──────────────────────────────────────────────────── */
.cm-business {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.cm-business__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            60px;
}
.cm-business__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   24px;
    width:                 100%;
    margin:                0;
    padding:               0;
    list-style:            none;
}

/* ── Площі ──────────────────────────────────────────────────────────────── */
.cm-areas {
    padding:    var(--section-gap) 0;
    background: var(--bg-subtle);
}
/* Селектор по тегу — свідомий виняток: розмітку абзаців генерує
   wpautop(), класи туди не додати. Так само в .phero__text (main.css)
   і .zabudovnyk__body на головній. */
.cm-areas__text       { color: var(--text-secondary); }
.cm-areas__text p     { margin: 0 0 14px; }
.cm-areas__text p:last-child { margin: 0; }

/* ── Умови придбання ────────────────────────────────────────────────────── */
.cm-payment {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}
.cm-payment__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            50px;
}
.cm-payment__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   24px;
    width:                 100%;
    margin:                0;
    padding:               0;
    list-style:            none;
}

/* ── Інвестуйте ─────────────────────────────────────────────────────────── */
.cm-invest {
    padding:    var(--section-gap) 0;
    background: var(--bg-subtle);
}
.cm-invest__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            40px;
}
.cm-invest__text {
    max-width:  880px;
    margin:     0;
    color:      var(--text-secondary);
    text-align: center;
}
/* Абзаци від wpautop() — див. коментар у .cm-areas__text */
.cm-invest__text p { margin: 0 0 14px; }
.cm-invest__text p:last-child { margin: 0; }
.cm-invest__divider { width: min(100%, 420px); }

/* ── Адаптація ──────────────────────────────────────────────────────────── */
/* Драбина головної: 1024 / 768 / 480 + власні пороги, порахованi від
   контенту: 900 — дві колонки тексту й фото, 640 — сітки карток. */
/* 1200px: у трьох колонках картка «Формати» дає текстову коробку 310px —
   рівно стільки, скільки треба найдовшій назві («Медичні та оздоровчі
   послуги», 309px) на два рядки. Нижче вона розпадається на три, і сітка
   читається як стовпчик обрізаних заголовків — тому 3 → 2 саме тут, а не
   на 1024 чи 900. Виміряно на стейджі: 1280 → 335px, 1100 → 275, 901 → 209. */
@media (max-width: 1200px) {
    .cm-business__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .cm-why, .cm-business, .cm-areas, .cm-payment, .cm-invest { padding: 80px 0; }
    .cm-why__media  { min-height: 360px; }
    .cm-business__inner { gap: 44px; }
    .cm-payment__inner  { gap: 36px; }
}

/* 900px: колонка тексту в двоколонковій секції стискається нижче ~400px
   і рядок ламається по 4–6 слів — той самий поріг, що на головній. */
@media (max-width: 900px) {
    .cm-why__media { min-height: 0; }
}

@media (max-width: 768px) {
    .cm-why, .cm-business, .cm-areas, .cm-payment, .cm-invest { padding: 64px 0; }
    .cm-business__inner { gap: 32px; }
    .cm-payment__inner, .cm-invest__inner { gap: 28px; }
}

/* 640px: дві колонки карток перестають вміщати назву без переносу
   посеред слова — той самий злам, що в «Формат життя» на головній. */
@media (max-width: 640px) {
    .cm-business__grid, .cm-payment__grid { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 480px) {
    .cm-why, .cm-business, .cm-areas, .cm-payment, .cm-invest { padding: 48px 0; }
}