/*
 * pages.css - оформление типовых участков страницы. Заготовка фабрики:
 * skeleton/assets/css/pages.css. ВСЕ правила mobile-first.
 * Правило З1: короткие разделы → row карточек, не стек заголовков.
 * Именованные callout-врезки (композиция §2). Ноль max-width на прозе.
 */

/* ---- hero ----
 * Было 64/48: на 360 это две трети экрана пустоты до первой строки и ещё дыра
 * под ней. Мобильный базовый слой - 32/32, широкий экран получает своё на 768. */
.hero { padding-block: var(--s-6); position: relative; }
.hero__eyebrow { color: var(--brand); }
.hero h1 { font-size: clamp(1.9rem, 7vw, 3rem); }
.hero__lede { color: var(--text-dim); font-size: calc(var(--t-body) * 1.1); margin-bottom: var(--s-5); }
.hero__cta { display: flex; flex-direction: column; gap: var(--s-3); }

/* ---- stat-strip: бейджи фактов, row (не стек) ---- */
.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-block: var(--s-5); }
.stat { background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); padding: var(--s-4); }
.stat__v { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); color: var(--text); display: block; }
.stat__k { font-size: var(--t-small); color: var(--text-mute); }

/* ---- card-row: правило З1, короткие разделы становятся карточками ---- */
.card-row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-block: var(--s-5); }
.card {
  background: var(--surface); border: var(--hairline); border-radius: var(--r-lg);
  padding: var(--s-5); box-shadow: var(--shadow-card);
}
.card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); border-radius: var(--r-md); color: var(--brand); font-size: 22px; margin-bottom: var(--s-3); }
.card h3 { font-size: var(--t-h4); margin: 0 0 var(--s-2); }
.card p { color: var(--text-dim); margin: 0; font-size: var(--t-body); }

/* ---- coins-grid: принятые криптовалюты ---- */
.coins { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-block: var(--s-5); }
.coin { display: flex; align-items: center; gap: var(--s-2); background: var(--surface); border: var(--hairline);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.coin__sym { font-family: var(--font-mono, monospace); font-weight: var(--fw-bold); color: var(--brand); }
.coin__name { color: var(--text-mute); font-size: var(--t-small); }

/* ---- callout: именованные врезки (композиция §2) ---- */
.callout { background: var(--surface); border-left: 4px solid var(--brand); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5); margin-block: var(--s-4); }
.callout__label { font-weight: var(--fw-bold); font-size: var(--t-small); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--s-2); display: block; }
.callout p:last-child { margin-bottom: 0; }
.callout--note      { border-left-color: var(--info); }
.callout--note .callout__label { color: var(--info); }
.callout--tip       { border-left-color: var(--brand); }
.callout--tip .callout__label { color: var(--brand); }
.callout--warning   { border-left-color: var(--warning); }
.callout--warning .callout__label { color: var(--warning); }
.callout--example   { border-left-color: var(--success); }
.callout--example .callout__label { color: var(--success); }
.callout--important { border-left-color: var(--danger); }
.callout--important .callout__label { color: var(--danger); }

/* ---- eyebrow-раздел + jump-links ---- */
.section__head { margin-bottom: var(--s-4); }

/* ---- tldr «Кратко» (выжимка вверху страницы) ---- */
.tldr { background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--r-lg); padding: var(--s-5); margin-block: var(--s-5); }
.tldr__label { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--brand); font-size: var(--t-h4); margin-bottom: var(--s-3); }
.tldr ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); }
.tldr li { color: var(--text-dim); }
.tldr li strong { color: var(--text); }

/* ---- jump-links (оглавление-якоря) ---- */
.jump-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-4) var(--s-6); }
/* min-height 44, а не 40: гейт мерил 40px на всех якорных ссылках всех страниц
 * (R20, порог 44). Четыре пикселя - единственное, чего им не хватало. */
.jump-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); color: var(--text-dim); font-size: var(--t-small); font-weight: var(--fw-medium); }
.jump-links a:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
section[id], h2[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---- data-table (касса / VIP) - mobile-first, скролл в рельсе ---- */
.data-table table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 480px; }
.data-table caption { text-align: left; color: var(--text-mute); font-size: var(--t-small); padding-bottom: var(--s-3); }
.data-table thead th { background: var(--surface-3); color: var(--text-dim); text-align: left; padding: var(--s-3) var(--s-4); font-weight: var(--fw-semi); white-space: nowrap; }
.data-table td { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--rule); color: var(--text-dim); }
.data-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-mono, monospace); color: var(--text); white-space: nowrap; }
.data-table .lvl { font-weight: var(--fw-bold); color: var(--brand); white-space: nowrap; }

/* ---- FAQ (details/summary, без JS) ---- */
.faq { display: grid; gap: var(--s-3); margin-block: var(--s-5); }
.faq details { background: var(--surface); border: var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: var(--fw-semi); color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 22px; line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: var(--hairline); }
.faq__body { padding: var(--s-4) var(--s-5); color: var(--text-dim); }
.faq__body p:first-child { margin-top: 0; }
.faq__body p:last-child { margin-bottom: 0; }

/* ---- proof-gallery (скрины кабинета - траст) ---- */
.proof { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-block: var(--s-5); }
.proof figure { margin: 0; background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.proof img { display: block; width: 100%; height: auto; }
.proof figcaption { padding: var(--s-3) var(--s-4); font-size: var(--t-small); color: var(--text-mute); border-top: var(--hairline); }

/* ---- pros-cons ---- */
.pros-cons { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-block: var(--s-5); }
.pc { background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); padding: var(--s-5); }
.pc h3 { font-size: var(--t-h4); margin: 0 0 var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.pc--pro h3 { color: var(--success); }
.pc--con h3 { color: var(--danger); }
.pc ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); color: var(--text-dim); }

/* ---- брейкпоинты ---- */
@media (min-width: 480px) {
  .stat-strip { grid-template-columns: repeat(4, 1fr); }
  .coins { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .hero { padding-block: var(--s-8) var(--s-7); }
  .card-row { grid-template-columns: repeat(3, 1fr); }
  /* Ровно четыре карточки в трёх колонках дают ряд 3+1 - сироту (R15, замер на
   * 768: по рядам [3,1]). Четвёрка раскладывается 2+2 и ряд закрывается. */
  .card-row:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .coins { grid-template-columns: repeat(4, 1fr); }
  .hero__cta { flex-direction: row; }
  .hero h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
  .proof { grid-template-columns: repeat(2, 1fr); }
  .pros-cons { grid-template-columns: 1fr 1fr; }
}