/* === slides.css — контентные слайды: баннеры, карточки, сетки, компоненты разделов === */

/* ── Chapter banner ───────────────────────────────────── */
.ch-banner {
  padding: 28px 48px 26px; color: #fff;
  position: relative; overflow: hidden; flex-shrink: 0;
}
.ch-banner::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.07);
}
.ch-banner::after {
  content: ''; position: absolute; bottom: -60px; right: 80px;
  width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.05);
}
.ch-tag   { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.ch-title { font-size: 1.65rem; font-weight: 800; line-height: 1.2; position: relative; z-index: 1; }
.ch-desc  { font-size: .88rem; opacity: .8; margin-top: 8px; position: relative; z-index: 1; }

/* Единый тёплый scrim поверх фото — раньше у каждого раздела был свой цвет
   гредиента (16 разных оттенков), из-за чего пособие не читалось как единая
   система. Теперь тон один (в цветовой гамме --ink/--accent), разделы
   отличаются только фотографией и текстом.
   Само фото сюда НЕ зашито (в отличие от прошлой версии) — оно приходит через
   инлайн-переменную --banner-photo, которую lazy-media.js проставляет только
   для реально открытого слайда (см. data-banner на .ch-banner в HTML). Так
   браузер не тянет все 19 баннерных фото разом при открытии страницы. */
.ch-banner { background: var(--banner-scrim), var(--banner-photo, none) center/cover no-repeat; }

/* ── TOC return button ────────────────────────────────── */
.btn-toc {
  position: absolute; top: 16px; right: 20px; z-index: 10;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  color: #fff; padding: 11px 16px; border-radius: 20px;
  font-size: .74rem; font-weight: 600; cursor: pointer; letter-spacing: .4px;
  transition: background .2s; min-height: 44px; display: inline-flex; align-items: center;
}
.btn-toc:hover { background: rgba(255,255,255,.32); }

/* ── Section structure blocks ─────────────────────────── */
.section-sep { border: none; border-top: 2px dashed var(--border); margin: 24px 0; }
.card--control    { background: #F0F9FF; border-left: 4px solid #0369A1; }
.card--conclusion { background: #F0FDF4; border-left: 4px solid #16A34A; }

/* ── Concept illustrations ───────────────────────────── */
.concept-img {
  width: 100%; height: 220px; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 20px;
  box-shadow: var(--shadow-md); display: block;
  background: var(--surface-2); /* видно, пока data-src ещё не подставлен ленивой загрузкой */
}

/* ── Slide content ────────────────────────────────────── */
.sl-body { padding: 28px 48px 44px; }

p           { line-height: 1.68; color: var(--text); margin-bottom: 12px; font-size: 1rem; }
ul, ol      { padding-left: 22px; }
li          { margin-bottom: 7px; line-height: 1.55; font-size: 1rem; }
.sec-title  { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 16px; }
.sub-title  { font-size: 1rem; font-weight: 600; color: var(--indigo); margin-bottom: 10px; margin-top: 4px; }

/* ── Grids ────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mt-16  { margin-top: 16px; }
.mt-20  { margin-top: 20px; }
.mb-16  { margin-bottom: 16px; }

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 24px; box-shadow: var(--shadow);
}
.card--blue   { border-left: 4px solid var(--indigo); }
.card--gold   { border-left: 4px solid var(--gold); background: var(--gold-lt); }
.card--violet { background: var(--indigo-lt); border-left: 4px solid var(--indigo); }
.card--green  { background: #ECFDF5; border-left: 4px solid var(--green); }

.pull-quote {
  border-left: 4px solid var(--gold); padding: 14px 22px;
  background: var(--gold-lt); border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; font-size: .92rem; line-height: 1.65; margin: 16px 0;
}
.pull-quote cite { display: block; font-size: .78rem; opacity: .65; margin-top: 6px; font-style: normal; }

.fact-box {
  background: #FEF9C3; border: 1.5px solid #FDE68A;
  border-radius: var(--radius); padding: 14px 18px;
  font-size: .88rem; margin: 14px 0; line-height: 1.6;
}
.fact-box::before { content: '💡 Интересный факт: '; font-weight: 700; }

.task-card {
  background: #F5F3FF; border: 1.5px solid #DDD6FE;
  border-radius: var(--radius); padding: 16px 20px 16px 52px;
  margin-bottom: 12px; position: relative;
}
.task-num {
  position: absolute; left: 14px; top: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--indigo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}
.task-card h4 { font-size: .88rem; font-weight: 700; color: var(--indigo); margin-bottom: 5px; }
.task-card p  { font-size: .85rem; margin-bottom: 0; }

/* TOC переехал в styles/toc.css (порт эталона interactive-toc_3.html) —
   старые .toc-grid/.toc-card/.toc-n/.toc-label удалены вместе с прежней разметкой. */

/* ── Principles list ──────────────────────────────────── */
.principle-list { list-style: none; padding: 0; }
.principle-list li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .9rem;
}
.p-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: #065f46; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}

/* ── Diamanta ─────────────────────────────────────────── */
.diamanta-box {
  background: var(--surface); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow); text-align: center;
  font-family: Georgia, serif;
}
.d-line { display: block; font-size: .9rem; line-height: 2.1; }
.d-key  { font-weight: 800; font-size: 1.1rem; color: #78350f; }

/* ── RAFT table ───────────────────────────────────────── */
.raft-table { width: 100%; border-collapse: collapse; overflow: hidden; box-shadow: var(--shadow); border-radius: var(--radius); }
.raft-table th { background: #7c3aed; color: #fff; padding: 10px 14px; font-size: .84rem; text-align: left; }
.raft-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .84rem; background: var(--surface); vertical-align: top; }
.raft-table tr:last-child td { border-bottom: none; }
.raft-table tr:nth-child(even) td { background: #F5F3FF; }
.raft-letter {
  display: inline-flex; width: 30px; height: 30px; border-radius: 50%;
  background: #7c3aed; color: #fff;
  align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 800; margin-right: 8px;
}

/* ── Six hats ─────────────────────────────────────────── */
.hat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hat-card { border-radius: var(--radius); padding: 16px; color: #fff; }
.hat-card h3 { font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.hat-card p  { font-size: .8rem; opacity: .92; line-height: 1.45; margin: 0; }
.hat-icon    { font-size: 1.3rem; margin-bottom: 6px; display: block; }
.hat-white   { background: #6B7280; }
.hat-yellow  { background: #D97706; color: var(--ink); } /* белый текст здесь не проходил WCAG AA (3.2:1) */
.hat-black   { background: #374151; }
.hat-red     { background: #DC2626; }
.hat-green   { background: #047857; } /* затемнено с #059669 — было 3.8:1, стало 5.5:1 */
.hat-blue    { background: #2563EB; }

/* ── Style cards ──────────────────────────────────────── */
.style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.style-card { padding: 14px 16px; border-radius: 8px; font-size: .85rem; }
.style-card h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; opacity: .7; }
.style-card p  { margin: 0; font-style: italic; }
.st-1 { background: #FEF3C7; }
.st-2 { background: #EEF2FF; }
.st-3 { background: #F0FDF4; }
.st-4 { background: #FDF2F8; }

/* ── Index ────────────────────────────────────────────── */
.idx-cols { columns: 2; column-gap: 32px; }
.idx-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; border-bottom: 1px dotted var(--border);
  font-size: .86rem; break-inside: avoid;
}
.idx-page { color: var(--indigo); font-weight: 700; cursor: pointer; font-size: .82rem; white-space: nowrap; margin-left: 8px; padding: 10px 4px; }
.idx-page:hover { text-decoration: underline; }

/* ── Bib ──────────────────────────────────────────────── */
.bib-list { list-style: none; padding: 0; }
.bib-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .83rem; line-height: 1.5; }
.bib-list li::before { content: counter(bib) '. '; counter-increment: bib; color: var(--indigo); font-weight: 700; }
.bib-list { counter-reset: bib; }

/* ═══════════════════════════════════════════════════════
   РЕДИЗАЙН «Академ-культурный» — переопределения (v3)
   Антиква Literata для чтения/заголовков, Golos Text для UI;
   тёплая палитра, без боковых полос (баны impeccable).
   ═══════════════════════════════════════════════════════ */

/* — Типографика: чтение и заголовки — антиква — */
.cover-title, .ch-title, .sec-title, .sl-body h2, .sl-body h3 { font-family: var(--font-serif); }
.sl-body p, .sl-body li, .pull-quote, .fact-box, .mc-question__text { font-family: var(--font-serif); }
.sl-body p, .sl-body li { font-size: 1rem; line-height: 1.72; max-width: 72ch; }

/* — Баннеры разделов: убрать декоративные блобы, антиква-заголовок — */
.ch-banner::before, .ch-banner::after { display: none; }
/* Баннер стал «карточкой-обложкой раздела»: отступ от краёв слайда,
   скруглённые углы и мягкая тень поверх фотографии — вместо полосы во всю ширину. */
.ch-banner {
  padding: clamp(22px,4vw,34px) clamp(20px,5vw,48px);
  margin: 16px 20px 0;
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}
.ch-title  { font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.ch-tag    { font-family: var(--font-sans); font-weight: 600; letter-spacing: 2px; }
.ch-desc   { font-family: var(--font-serif); font-style: italic; opacity: .9; }

/* Стеклянная пилюля «К содержанию» */
.btn-toc {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px; font-family: var(--font-sans);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow);
  transition: background .32s var(--ease-glass), box-shadow .32s var(--ease-glass),
    transform .32s var(--ease-glass);
}
.btn-toc:hover {
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-lg);
  transform: scale(1.04);
}
.btn-toc:active { transform: scale(.97); }
.btn-toc:focus-visible {
  outline: none;
  box-shadow: var(--glass-shadow-lg), 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* — Секционные блоки: холодная тонкая линия вместо тёплой границы — */
.section-sep { border-top: 1px solid var(--glass-border-2); }

/* — Карточки: стекло. Цветовая идентичность вариантов — через тонированную
   обводку/левую полосу, а не сплошную заливку (иначе эффект стекла теряется). — */
.card {
  background:
    linear-gradient(170deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 32%, rgba(255,255,255,0) 60%),
    var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: none;
  border-radius: var(--glass-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
}
.card--control {
  border-left: 3px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.04),
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, var(--glass-border-2));
}
.card--conclusion {
  border-left: 3px solid color-mix(in srgb, var(--good) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.04),
    inset 0 0 0 1px color-mix(in srgb, var(--good) 36%, var(--glass-border-2));
}
.card--blue, .card--violet {
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.04),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--glass-border-2));
}
.card--gold {
  border-left: 3px solid color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.04),
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 36%, var(--glass-border-2));
}
.card--green {
  border-left: 3px solid color-mix(in srgb, var(--good) 50%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.04),
    inset 0 0 0 1px color-mix(in srgb, var(--good) 32%, var(--glass-border-2));
}
.sub-title { color: var(--accent); font-family: var(--font-sans); font-weight: 600; }

/* — Цитата и факт-бокс: стекло с янтарным тинтом вместо боковой полосы — */
.pull-quote {
  border: none;
  border-radius: var(--glass-radius);
  background:
    linear-gradient(170deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 32%, rgba(255,255,255,0) 60%),
    color-mix(in srgb, var(--gold) 14%, var(--glass-bg));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: 0 10px 30px rgba(0,0,0,.04),
    inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, var(--glass-border-2));
  padding: 18px 24px 18px 28px; position: relative;
}
.pull-quote::before {
  content: '“'; position: absolute; left: 8px; top: 2px;
  font-family: var(--font-serif); font-size: 2.4rem; color: var(--gold); opacity: .5; line-height: 1;
}
.fact-box {
  background: color-mix(in srgb, var(--gold) 14%, var(--glass-bg));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: none;
  border-radius: var(--glass-radius-sm);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 32%, var(--glass-border-2));
}

/* — Task-card, картинки: та же стеклянная система — */
.task-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: none;
  border-radius: var(--glass-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
}
.task-num  { background: var(--accent); }
.concept-img {
  border: none;
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

/* — Диаманта, RAFT-таблица, шесть шляп: единые радиусы/поверхности/тени — */
.diamanta-box {
  background:
    linear-gradient(170deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 32%, rgba(255,255,255,0) 60%),
    var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-radius: var(--glass-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
}
.raft-table {
  border-radius: var(--glass-radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.04), inset 0 0 0 1px var(--glass-border-2);
}
.raft-table th {
  background: color-mix(in srgb, var(--accent) 78%, var(--glass-bg-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
.raft-table td { background: var(--glass-bg-strong); }
.raft-table tr:nth-child(even) td { background: color-mix(in srgb, var(--accent) 10%, var(--glass-bg-strong)); }
.raft-letter { background: var(--accent); }
.hat-card {
  border-radius: var(--glass-radius-sm);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}
/* Смесь 88/12 вместо полной непрозрачности — лёгкий стеклянный блик, но
   контраст с белым текстом карточек сохранён (WCAG AA не проседает). */
.hat-white   { background: color-mix(in srgb, #6B7280 88%, var(--glass-bg-strong)); }
.hat-yellow  { background: color-mix(in srgb, #D97706 88%, var(--glass-bg-strong)); }
.hat-black   { background: color-mix(in srgb, #374151 88%, var(--glass-bg-strong)); }
.hat-red     { background: color-mix(in srgb, #DC2626 88%, var(--glass-bg-strong)); }
.hat-green   { background: color-mix(in srgb, #047857 88%, var(--glass-bg-strong)); }
.hat-blue    { background: color-mix(in srgb, #2563EB 88%, var(--glass-bg-strong)); }