/*
 * Архів «Державні програми»
 *
 * Зібраний з готового: .phero (main.css), .entry-card, .link-arrow,
 * .pagination (ui.css) і глобальна CTA. Своє тут — тільки сітка й ритм.
 *
 * Чергування фонів: фото/flat (subtle) → canvas → CTA elevated. Полотно, а
 * не subtle: без фото герой лишається на --bg-subtle, і дві однакові
 * поверхні поспіль зливались би в одну смугу.
 */

.dp-items {
    padding:    var(--section-gap) 0;
    background: var(--bg-canvas);
}

.dp-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   28px;
    margin:                0;
    padding:               0;
    list-style:            none;
}
/* Елемент сітки — flex, щоб картка тягнулась на всю висоту рядка й
   нижні краї карток у рядку були на одній лінії. */
.dp-grid__item { display: flex; }

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

/* 1146px — виміряний поріг, не кругле число. Банери програм — готові
   креативи 406×267 із власною типографікою; підпис під назвою («Програма
   доступного кредитування житла») читається, поки картинка не менша за
   ~350px, тобто ~86% натуральної ширини. У трьох колонках 350px припадає
   рівно на 1146px viewport: (W − 40 відступи − 56 проміжки) / 3. Нижче
   банер стискався до 272px на 901px, і підпис ставав нечитабельним. */
@media (max-width: 1146px) {
    .dp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .dp-items { padding: 64px 0; }
    .dp-grid  { gap: 16px; }
}

/* 760px — та сама межа читабельності банера, порахована для двох колонок:
   (W − 40 − 20) / 2 = 350px. Нижче банер знову стискався (291px на 641),
   тому в один стовпчик переходимо тут, а не на круглих 640. */
@media (max-width: 760px) {
    .dp-grid { grid-template-columns: 1fr; }
}

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