/* ════════════════════════════════════════════════════════════════════════════
 * patch-10.1-tech.css — страница «Требования к макетам» (/trebovaniya-k-maketam/).
 *
 * Скелет (хедер/sticky-чипы/чередующиеся блоки/CTA) переиспользуется из
 * patch-10.0-faq.css (классы .kp-faqp-*) — страница носит обе обёртки
 * .kp-faqp .kp-trp. Здесь — только tech-контент: списки с жёлтыми маркерами,
 * чек-листы, сетка карточек методов, блок шаблонов. Жёлтый — акцент (маркеры,
 * полосы), без подложки за текстом. Скоуп body.kp-body .kp-trp.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Список «термин — пояснение» с жёлтым маркером-точкой ──────────────────── */
body.kp-body .kp-trp .kp-trp-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 18px;
}
body.kp-body .kp-trp .kp-trp-list li { position: relative; padding-left: 28px; }
body.kp-body .kp-trp .kp-trp-list li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 9px; height: 9px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-list li strong {
    display: block; font-size: 16px; font-weight: 700; color: var(--ink, #0a0a0a); margin-bottom: 3px;
}
body.kp-body .kp-trp .kp-trp-list li span {
    display: block; font-size: 15px; line-height: 1.55; color: var(--ink-2, #4a4a4a);
}

/* ── Чек-лист с жёлтым кружком и тёмной галочкой ───────────────────────────── */
body.kp-body .kp-trp .kp-trp-checklist {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 14px;
}
body.kp-body .kp-trp .kp-trp-checklist li {
    position: relative; padding-left: 32px;
    font-size: 16px; line-height: 1.55; color: var(--ink-2, #4a4a4a);
}
body.kp-body .kp-trp .kp-trp-checklist li::before {
    content: ""; position: absolute; left: 0; top: 2px;
    width: 19px; height: 19px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-checklist li::after {
    content: ""; position: absolute; left: 6px; top: 6px;
    width: 5px; height: 9px; border: solid var(--ink, #0a0a0a); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── Правая колонка двухколоночных блоков (без flex-gap аккордеона) ────────── */
body.kp-body .kp-trp .kp-faq-list-col { align-self: start; }

/* ── Методы: полноширинный заголовок + сетка карточек ─────────────────────── */
body.kp-body .kp-trp .kp-trp-head { max-width: 760px; margin: 0 0 36px; }
body.kp-body .kp-trp .kp-trp-methods {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
body.kp-body .kp-trp .kp-trp-card {
    background: var(--fog, #f7f7f7);           /* на белом бэнде — fog для контраста */
    border: 1px solid var(--line, #ececec);
    border-radius: 14px;
    padding: 22px 22px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
/* на fog-бэнде — белые карточки */
body.kp-body .kp-faqp-band--alt .kp-trp-card { background: var(--paper, #fff); }

body.kp-body .kp-trp .kp-trp-card-name { font-size: 17px; font-weight: 700; color: var(--ink, #0a0a0a); margin: 0; }
body.kp-body .kp-trp .kp-trp-specs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
body.kp-body .kp-trp .kp-trp-specs li {
    position: relative; padding-left: 15px;
    font-size: 14px; line-height: 1.4; color: var(--ink-2, #4a4a4a);
}
body.kp-body .kp-trp .kp-trp-specs li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--yellow, #FECE15);
}
body.kp-body .kp-trp .kp-trp-card-use {
    margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--line, #ececec);
    font-size: 13px; line-height: 1.4; color: var(--ink-3, #9a9a9a);
}

/* ── Блок «Шаблоны макетов» ───────────────────────────────────────────────── */
body.kp-body .kp-trp .kp-trp-download-note { font-size: 16px; line-height: 1.55; color: var(--ink-2, #4a4a4a); margin: 0 0 20px; }
body.kp-body .kp-trp .kp-trp-download-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.kp-body .kp-trp .kp-trp-download-mail { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink, #0a0a0a); text-decoration: none; }
body.kp-body .kp-trp .kp-trp-download-mail svg { stroke: var(--yellow, #FECE15); }
body.kp-body .kp-trp .kp-trp-download-soon { margin: 18px 0 0; font-size: 13px; color: var(--ink-3, #9a9a9a); }

/* ── Адаптив сетки методов ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    body.kp-body .kp-trp .kp-trp-head { margin-bottom: 26px; }
}
@media (max-width: 480px) {
    body.kp-body .kp-trp .kp-trp-methods { grid-template-columns: 1fr; }
}