/* ============================================================
   САМОТЛОР · Patterns (большие переиспользуемые блоки)
   ────────────────────────────────────────────────────────────
   В отличие от components.css (атомы: кнопки, чипы, карточки),
   тут — крупные паттерны, повторяющиеся в нескольких экранах.
   Все читают только токены — реагируют на data-theme/mode/density.
   ============================================================ */

/* =====================================================
   1 · SECTION HEADERS · три стиля для трёх вариантов сайта
   ===================================================== */

/* 1.1 — display (Bold variant: большой Bebas-заголовок) */
.sh-display {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--space-6) var(--pad-x) var(--space-3);
}
.sh-display .title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.sh-display .more {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* 1.2 — editorial (магазинный курсивный заголовок с № секции) */
.sh-editorial {
  padding: var(--space-7) var(--pad-x) var(--space-3);
  display: flex; align-items: baseline; justify-content: space-between;
}
.sh-editorial .num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  color: var(--fg-muted); text-transform: uppercase;
}
.sh-editorial .ttl {
  font-family: "Fraunces", "Times New Roman", serif;
  font-style: italic; font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: -.02em;
  margin-top: 8px;
}
.sh-editorial .ttl .accent { color: var(--accent); }
.sh-editorial .more {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-muted);
}

/* 1.3 — brutal (моноширинный с ▍-маркером, для Scoreboard) */
.sh-brutal {
  border-top: 1px solid var(--line);
  padding: 10px var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
}
.sh-brutal .ttl {
  font-family: var(--font-mono); font-weight: 800; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}
.sh-brutal .ttl::before { content: "▍"; color: var(--accent); margin-right: 4px; }
.sh-brutal .more {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .65;
}
.sh-brutal .more::after { content: "  ›"; opacity: .8; }

/* =====================================================
   2 · STATS-STRIP · сетка «значение + подпись»
   ====================================================
   Используется на 5+ страницах: матч, игрок, история,
   новость, лента десктопа. Темы цвета задаются модификатором.
*/
.stats-strip {
  display: grid; grid-auto-columns: 1fr; grid-auto-flow: column;
  gap: 0; padding: 14px 0;
}
.stats-strip > div {
  text-align: center; padding: 0 8px;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px; align-items: center;
}
.stats-strip > div:first-child { border-left: 0; }
.stats-strip .v {
  font-family: var(--font-display); font-size: var(--text-xl);
  line-height: 1; letter-spacing: .03em;
}
.stats-strip .k {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-muted);
}
/* Модификатор: тёмный фон (карточка над <article>) */
.stats-strip.dark {
  background: var(--surface-3); color: var(--on-surface-3);
  padding: 18px 0;
}
.stats-strip.dark > div { border-left-color: color-mix(in srgb, var(--on-surface-3) 16%, transparent); }
.stats-strip.dark .v { font-size: var(--text-3xl); color: var(--accent); }
.stats-strip.dark .k { color: var(--on-surface-3); opacity: .7; }
/* Модификатор: акцентный фон (жёлтый «итог сезона») */
.stats-strip.accent {
  background: var(--accent); color: var(--accent-fg);
  padding: 22px 16px;
}
.stats-strip.accent > div { border-left-color: color-mix(in srgb, var(--accent-fg) 30%, transparent); }
.stats-strip.accent .v { font-size: var(--text-3xl); color: var(--accent-fg); }
.stats-strip.accent .k { color: var(--accent-fg); opacity: .75; }

/* =====================================================
   3 · COUNTDOWN · «до начала матча»
   ===================================================== */
.countdown {
  display: inline-flex; gap: 6px; align-items: baseline; justify-content: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.countdown .seg { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.countdown .seg b {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400; line-height: 1;
  color: var(--accent);
}
.countdown .seg small {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .6; margin-top: 4px; display: block;
}
.countdown .sep {
  font-family: var(--font-display); font-size: var(--text-3xl);
  color: var(--accent); opacity: .4;
}

/* =====================================================
   4 · H-SCROLL · горизонтальный скролл-ряд
   ===================================================== */
.h-scroll {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-3); overflow-x: auto;
  padding: 0 var(--pad-x);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }
.h-scroll.tight { grid-auto-columns: 92px; }
.h-scroll.half  { grid-auto-columns: 50%; }

/* =====================================================
   5 · PULL-QUOTE · цитата
   ===================================================== */
.pull-quote {
  margin: 0 var(--pad-x); padding: 22px 0;
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--line);
}
.pull-quote q {
  font-family: "Fraunces", "Times New Roman", serif;
  font-style: italic; font-weight: 700;
  font-size: 26px; line-height: 1.15; quotes: '«' '»';
}
.pull-quote q::before { content: open-quote; color: var(--accent); margin-right: 4px; }
.pull-quote q::after  { content: close-quote; color: var(--accent); margin-left:  4px; }
.pull-quote .who {
  margin-top: 14px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}

/* =====================================================
   6 · PLACEHOLDER images (CSS abstractions)
   ===================================================== */
.ph-block {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--accent) 35%, transparent) 0 22%, transparent 24%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--fg) 8%, transparent) 0 8px, transparent 8px 16px),
    var(--surface-2);
}
.ph-block.dark {
  background:
    radial-gradient(circle at 30% 80%, color-mix(in srgb, var(--accent) 50%, transparent) 0 28%, transparent 30%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    var(--surface-3);
}
.ph-block.editorial {
  background:
    radial-gradient(circle at 70% 35%, color-mix(in srgb, var(--accent) 65%, transparent) 0 28%, transparent 30%),
    repeating-linear-gradient(120deg, rgba(0,0,0,.05) 0 8px, transparent 8px 16px),
    var(--surface-2);
}
.ph-block .corner-label {
  position: absolute; bottom: 8px; left: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 60%, transparent);
}