/* content.css — контентные страницы (База знаний, гайды) + блайнд-таймер.
   Наследует переменные Red Luxe из styles.css (:root). */

/* --- Хлебные крошки --- */
.crumbs{ border-bottom:1px solid var(--line); padding:14px 0; font-size:13px; }
.crumbs .container{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumbs a{ color:var(--ink-2); text-decoration:none; }
.crumbs a:hover{ color:var(--ink-1); }
.crumbs__sep{ color:var(--ink-4); }
.crumbs__cur{ color:var(--ink-3); }

/* --- Шапка статьи --- */
.arthead{ padding:56px 0 8px; }
.arthead .h1{ max-width:20ch; }
.arthead__lead{ margin-top:16px; max-width:62ch; }
.artmeta{ margin-top:18px; display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); }
.artmeta span{ display:inline-flex; align-items:center; gap:6px; }

/* --- Проза статьи --- */
.prose{ max-width:72ch; margin-inline:auto; }
.prose > *{ margin-block:0; }
.prose > * + *{ margin-top:18px; }
.prose h2{ font-size:clamp(22px,3.4vw,30px); line-height:1.2; letter-spacing:-.01em; color:var(--ink); margin-top:44px; scroll-margin-top:90px; }
.prose h3{ font-size:clamp(18px,2.6vw,22px); color:var(--ink); margin-top:30px; }
.prose p, .prose li{ color:var(--ink-1); line-height:1.7; font-size:17px; }
.prose ul, .prose ol{ padding-left:22px; display:flex; flex-direction:column; gap:10px; }
.prose li::marker{ color:var(--red-ink); }
.prose a{ color:var(--red-ink); text-underline-offset:3px; }
.prose strong{ color:var(--ink); }
.prose .lead{ font-size:19px; color:var(--ink-1); }

/* Оглавление */
.toc{ border:1px solid var(--line-strong); border-radius:var(--r-lg,16px); background:var(--surface); padding:20px 22px; margin:28px auto; max-width:72ch; }
.toc__h{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.toc ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.toc a{ color:var(--ink-1); text-decoration:none; }
.toc a:hover{ color:var(--red-ink); }

/* Врезка/предупреждение */
.callout{ border:1px solid var(--line-strong); border-left:3px solid var(--red); background:var(--surface); border-radius:12px; padding:18px 20px; }
.callout__h{ font-weight:700; color:var(--ink); margin-bottom:6px; }
.callout p{ color:var(--ink-1); line-height:1.6; }
.callout--ok{ border-left-color:#2ec26b; }
.callout--soft{ border-left-color:var(--ink-4); }

/* Ключевой ответ (для GEO — короткий факт наверху) */
.keyanswer{ border:1px solid var(--line-strong); background:linear-gradient(180deg,var(--surface-2),var(--surface)); border-radius:16px; padding:22px 24px; max-width:72ch; margin:8px auto 4px; }
.keyanswer b{ color:var(--red-ink); }
.keyanswer p{ font-size:18px; line-height:1.6; color:var(--ink); margin:0; }

/* Таблицы структур */
.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px; }
table.tbl{ width:100%; border-collapse:collapse; min-width:420px; font-variant-numeric:tabular-nums; }
table.tbl th, table.tbl td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:15px; }
table.tbl thead th{ color:var(--ink-3); font-size:12px; letter-spacing:.06em; text-transform:uppercase; background:var(--surface); }
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl td:first-child{ color:var(--red-ink); font-weight:700; }
table.tbl .is-break td{ color:var(--ink-3); font-style:italic; background:rgba(255,255,255,.02); }

/* --- Хаб «База знаний» --- */
.hubgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.hubcard{ display:block; text-decoration:none; border:1px solid var(--line-strong); background:var(--surface); border-radius:16px; padding:22px; transition:border-color .2s, transform .2s; }
.hubcard:hover{ border-color:var(--red-deep); transform:translateY(-2px); }
.hubcard__k{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--red-ink); }
.hubcard__t{ font-size:19px; color:var(--ink); margin:10px 0 8px; line-height:1.25; }
.hubcard__d{ color:var(--ink-2); font-size:15px; line-height:1.55; }
.hubcard__go{ margin-top:14px; color:var(--ink-3); font-size:14px; }

/* --- Читайте также --- */
.related{ max-width:72ch; margin:44px auto 0; }
.related__h{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.related__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.related__card{ display:block; text-decoration:none; border:1px solid var(--line-strong); background:var(--surface); border-radius:12px; padding:14px 16px; transition:.15s; }
.related__card:hover{ border-color:var(--red-deep); transform:translateY(-1px); }
.related__k{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--red-ink); }
.related__t{ display:block; color:var(--ink-1); font-size:15px; margin-top:5px; line-height:1.35; }

/* --- Возрастная пометка 18+ --- */
.age-mark{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:2px 8px; border:1px solid var(--line-strong); border-radius:999px; font-size:12px; font-weight:700; color:var(--ink-1); letter-spacing:.02em; }

/* --- Группы хаба --- */
.hubsec{ margin-top:40px; }
.hubsec:first-of-type{ margin-top:0; }
.hubsec__h{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid var(--line); }

/* --- Финальный CTA-блок --- */
.ps-cta{ border:1px solid var(--line-strong); background:linear-gradient(135deg,var(--surface-2),var(--bg-1)); border-radius:22px; padding:40px 32px; text-align:center; }
.ps-cta .lead{ max-width:60ch; margin:14px auto 0; }
.ps-cta__actions{ margin-top:24px; display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }
.ps-cta__handle{ color:var(--ink-3); font-size:14px; }

/* ============ БЛАЙНД-ТАЙМЕР ============ */
.bt{ border:1px solid var(--line-strong); background:linear-gradient(180deg,var(--surface),var(--bg-1)); border-radius:22px; padding:26px; }
.bt__presets{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:22px; }
.bt-preset{ appearance:none; cursor:pointer; border:1px solid var(--line-strong); background:rgba(255,255,255,.03); color:var(--ink-1); border-radius:999px; padding:9px 16px; font:inherit; font-size:14px; font-weight:600; transition:.15s; }
.bt-preset:hover{ border-color:var(--red-deep); }
.bt-preset.is-active{ background:var(--red-grad); border-color:transparent; color:#fff; }

.bt__stage{ text-align:center; padding:14px 0 6px; }
.bt__lvl{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.bt__clock{ font-size:clamp(64px,16vw,132px); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; margin:6px 0; }
.bt__clock.is-warn{ color:var(--red-ink); }
.bt__blinds{ font-size:clamp(22px,5vw,34px); font-weight:700; color:var(--ink-1); }
.bt__blinds b{ color:var(--red-ink); }
.bt__ante{ color:var(--ink-2); font-size:16px; margin-top:4px; }
.bt__next{ color:var(--ink-3); font-size:14px; margin-top:12px; min-height:1.2em; }
.bt__break{ color:#2ec26b; }

.bt__controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
.bt-btn{ appearance:none; cursor:pointer; font:inherit; font-weight:700; border-radius:12px; padding:12px 20px; border:1px solid var(--line-strong); background:rgba(255,255,255,.04); color:var(--ink-1); transition:.15s; display:inline-flex; align-items:center; gap:8px; }
.bt-btn:hover{ border-color:var(--red-deep); }
.bt-btn--primary{ background:var(--red-grad); border-color:transparent; color:#fff; min-width:132px; justify-content:center; }
.bt-btn svg{ width:18px; height:18px; }

.bt__foot{ margin-top:18px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-size:13px; color:var(--ink-3); }
.bt-toggle{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; color:var(--ink-2); }
.bt-toggle input{ accent-color:var(--red); width:16px; height:16px; }

.bt__list{ margin-top:22px; }
.bt__list .tblwrap{ max-height:280px; overflow-y:auto; }
table.tbl tr.is-current td{ background:var(--red-soft); color:var(--ink); }
table.tbl tr.is-current td:first-child{ color:var(--red-ink); }

/* Фуллскрин-режим таймера (для ТВ) */
.bt.is-fs{ position:fixed; inset:0; z-index:9999; border-radius:0; display:flex; flex-direction:column; justify-content:center; padding:24px; }
.bt.is-fs .bt__list, .bt.is-fs .bt__presets{ display:none; }
.bt.is-fs .bt__clock{ font-size:clamp(90px,24vw,300px); }

@media (max-width:560px){
  .bt{ padding:18px; }
  .ps-cta{ padding:30px 20px; }
}