/* KidShelf — детская зона. Mobile-first (Android, вертикальный телефон, 02 §0).
   Крупные тач-цели (≥56px), горизонтальные ленты (scroll-snap), нижний таб-бар.
   Тема: семейная медиатека — тёплые мягкие цвета, минимализм, без резких контрастов. */

:root {
  --bg: #f8f3ea;          /* тёплый фон страницы */
  --bg-soft: #fffdf8;     /* верхняя панель / таб-бар — приподнятая поверхность */
  --bg-card: #fffdf8;     /* карточки */
  --card-border: #efe7db; /* граница карточек */
  --fg: #4a3b2f;          /* основной текст */
  --muted: #8a7c6f;       /* вторичный текст */
  --accent: #7a9b75;      /* спокойный зелёный акцент */
  --accent-2: #7a9b75;    /* кнопки-акценты */
  --on-accent: #fffdf8;   /* текст на акцентной заливке */
  --ok: #8db27e;          /* прогресс / просмотрено */
  --progress: #8db27e;    /* заливка прогресса просмотра */
  --shadow: 0 2px 10px rgba(74, 59, 47, .07);
  --radius: 20px;         /* мягкие крупные скругления */
  --radius-sm: 14px;
  --tabbar-h: 66px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
code { color: var(--accent); font-size: .9em; }
.muted { color: var(--muted); }
.warn { color: #c08a5a; }

/* ── Верхняя панель ───────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--card-border);
}
.brand { font-size: 22px; font-weight: 800; letter-spacing: .3px; color: var(--accent); }
.topbar-search { font-size: 22px; padding: 8px; }

/* Шапка детской зоны (ЦЕЛЬ 3). Все правила scoped к body.has-tabbar, чтобы не
   влиять на админку (отдельный base_admin) и будущий родительский кабинет.
   base.html не редактируется — подзаголовок добавлен декоративно через ::after. */
body.has-tabbar .brand { line-height: 1.05; }
body.has-tabbar .brand::after {
  content: "Домашняя медиатека";
  display: block; margin-top: 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--muted);
}

/* ── Контент ──────────────────────────────────────────────────── */
.content { padding: 8px 0 calc(var(--tabbar-h) + 16px); }
body.has-tabbar { padding-bottom: 0; }

.subhead {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.subhead h1 { font-size: 20px; margin: 0; flex: 1; }
.back, .back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; font-size: 26px; color: var(--fg);
}
.play-all {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: 22px;
}

/* ── Ленты (горизонтальный скролл) ────────────────────────────── */
.rail { margin: 22px 0; }
/* Иерархия секций строится средствами CSS (акцентная полоса + размер/отступы),
   без эмодзи в заголовках. */
.rail-title {
  font-size: 18px; font-weight: 700; margin: 0 16px 12px;
  display: flex; align-items: center; gap: 10px;
}
.rail-title::before {
  content: ""; flex: 0 0 auto;
  width: 4px; height: 1.05em; border-radius: 2px; background: var(--accent);
}
.rail-title a { color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }
.rail-title a::after { content: "›"; color: var(--muted); font-weight: 700; }
.rail-track {
  display: flex; gap: 12px; padding: 0 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > .card { scroll-snap-align: start; }

/* ── «Продолжить смотреть» — выделенный блок (hero) ────────────────
   Тёплая подложка-панель + акцентный заголовок + чуть крупнее карточки,
   чтобы блок читался как главный, не выбиваясь из тёплой палитры. */
.rail--continue {
  margin: 12px 0 26px;
  padding: 16px 0 18px;
  background: linear-gradient(180deg, #f6eedd, #f1e6d2);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
.rail-title--continue { color: var(--accent); }
.rail-title--continue::before { height: 1.2em; width: 5px; }
.rail--continue .card--video,
.rail--continue .rail-track .card--video { width: 184px; flex: 0 0 184px; }
.rail--continue .card-title { font-size: 15px; }

/* ── Иерархия секций (очень лёгкая, без отдельных цветовых тем) ─────
   Лестница важности: «Продолжить» (hero, выше) → «Недавно» (акцент) →
   каталожные browse → «Все видео» (самый спокойный, замыкает страницу).
   Интерфейс остаётся цельным: меняются только вес заголовка и разделители. */
.rail--feature .rail-title::before { height: 1.15em; }   /* «свежий» средний уровень */
.rail--all {
  margin-top: 10px; padding-top: 18px;
  border-top: 1px solid var(--card-border);
}
.rail--all .rail-title { color: var(--muted); font-weight: 600; }
.rail--all .rail-title::before { background: var(--card-border); }

/* Группировка каталожных секций — на мобиле обычный стек (без изменений). */
.browse-grid { display: block; }

/* ── Сетка (адаптивная: auto-fill, без фикс. числа колонок) ───────
   На телефоне minmax→2 колонки (эталон), дальше колонки добавляются
   сами по мере роста ширины (@media только подстраивает gap/min). */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px; padding: 12px 16px;
}
.grid--seasons { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ── Карточки ─────────────────────────────────────────────────── */
.card { display: flex; flex-direction: column; min-width: 0; }
.card--video { width: 160px; }
.rail-track .card--video { flex: 0 0 160px; }
.card--poster { width: 130px; }
.rail-track .card--poster { flex: 0 0 130px; }
.grid .card { width: auto; }

.thumb {
  position: relative; display: block; width: 100%;
  background: var(--bg-card); border: 1px solid var(--card-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.thumb--wide { aspect-ratio: 16 / 9; }
.thumb--poster { aspect-ratio: 2 / 3; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-ph {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 40px; opacity: .6;
}
/* Плейсхолдер обложки (нет картинки): спокойная карточка, близкая к будущей
   реальной обложке — крупная буква названия + маленький эмодзи-тип в углу.
   Без узоров и ярких слоёв (фон — тёплый градиент из .card--poster ниже). */
.thumb-ph--cover { opacity: 1; }
.ph-letter {
  font-size: 52px; font-weight: 800; line-height: 1; color: var(--on-accent);
  text-shadow: 0 1px 3px rgba(74, 59, 47, .22);
}
.ph-emoji {
  position: absolute; right: 9px; bottom: 9px; font-size: 17px;
  filter: drop-shadow(0 1px 1px rgba(74, 59, 47, .18));
}
/* Спокойный тёплый фон для пустых видео-карточек (без обложки). */
.card--video .thumb-ph { background: linear-gradient(160deg, #f1e7d6, #e8dbc4); }

/* Тёплые тинты для карточек-плейсхолдеров (без обложки) — мягкое разнообразие.
   Палитра целиком тёплая: янтарь · терракота · песок · мокко · розовый персик
   (никаких холодных/«кислотных» фиолетового и синего). Мягкий вертикальный
   градиент добавляет глубины без резких контрастов. */
.card--poster:nth-of-type(5n+1) .thumb-ph { background: linear-gradient(160deg, #f2c891, #e7ad74); }
.card--poster:nth-of-type(5n+2) .thumb-ph { background: linear-gradient(160deg, #e8b196, #d8957a); }
.card--poster:nth-of-type(5n+3) .thumb-ph { background: linear-gradient(160deg, #ddc79a, #ccb07f); }
.card--poster:nth-of-type(5n+4) .thumb-ph { background: linear-gradient(160deg, #cdb29c, #b8997f); }
.card--poster:nth-of-type(5n+5) .thumb-ph { background: linear-gradient(160deg, #ecbfa6, #dfa284); }

.card-title {
  margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--fg);
  line-height: 1.3; max-height: 2.6em; overflow: hidden;
}
.card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

.badge-watched {
  position: absolute; top: 8px; right: 8px;
  background: var(--ok); color: var(--on-accent); font-weight: 800;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: rgba(74, 59, 47, .12);
}
.progress-fill { display: block; height: 100%; background: var(--progress); }
.progress--inline { position: static; width: 56px; height: 6px; border-radius: 3px; overflow: hidden; }

/* ── Плитка сезона ────────────────────────────────────────────── */
.card--season {
  background: var(--bg-card); border: 1px solid var(--card-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 16px; min-height: 84px; justify-content: center;
}
.season-no { font-size: 17px; font-weight: 700; color: var(--fg); }

/* ── Сериал: шапка ────────────────────────────────────────────── */
.series-head { display: flex; gap: 14px; padding: 4px 16px 12px; }
.series-poster { width: 110px; flex: 0 0 110px; }
.series-meta { font-size: 14px; }

/* ── Упорядоченный список (серии/плейлист) ────────────────────── */
.tracklist { padding: 4px 12px; }
.track {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; min-height: 56px;
  border-bottom: 1px solid var(--card-border);
}
.track-no { min-width: 36px; font-weight: 700; color: var(--muted); text-align: center; }
.track-thumb {
  position: relative; flex: 0 0 64px; width: 64px; aspect-ratio: 16/9;
  background: var(--bg-card); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); overflow: hidden;
}
.track-thumb img { width: 100%; height: 100%; object-fit: cover; }
.track-thumb .thumb-ph { font-size: 22px; }
.track-title { flex: 1; font-size: 15px; font-weight: 600; color: var(--fg); }
.track-state { flex: 0 0 auto; }

/* ── Пагинация ────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px; }
.pager-btn { background: var(--bg-card); border: 1px solid var(--card-border); box-shadow: var(--shadow); padding: 10px 16px; border-radius: var(--radius-sm); min-height: 44px; display: inline-flex; align-items: center; }
.pager-info { color: var(--muted); }

/* ── Пустые состояния / заглушки ──────────────────────────────── */
.empty { color: var(--muted); padding: 24px 16px; text-align: center; }
.stub { text-align: center; padding: 48px 16px; color: var(--muted); }
.stub-emoji { font-size: 56px; }

.back-btn { display: inline-block; margin-top: 12px; background: var(--accent-2); color: #fff; padding: 10px 18px; border-radius: 12px; }

/* ── Плеер (Фаза 4) ───────────────────────────────────────────── */
body.is-player { background: #000; }
body.is-player .content { padding: 0; }
body.is-player .topbar, body.is-player .tabbar { display: none; }
.player { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; }
.player-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-back {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff; background: rgba(0,0,0,.45); border-radius: 50%;
}
.player-empty { text-align: center; color: #fffdf8; padding: 40px 16px; }
.player-empty-emoji { font-size: 56px; }

.player-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.7); padding: 16px;
}
.player-overlay[hidden] { display: none; }
.overlay-card { background: var(--bg-soft); border-radius: 20px; padding: 22px; max-width: 420px; width: 100%; text-align: center; }
.overlay-kicker { color: var(--muted); font-size: 13px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .06em; }
.overlay-next { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 18px; }
.overlay-thumb { flex: 0 0 96px; aspect-ratio: 16 / 9; background: var(--bg-card); border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.overlay-thumb img { width: 100%; height: 100%; object-fit: cover; }
.overlay-title { font-weight: 700; line-height: 1.4; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; }
.ov-btn { min-height: 48px; padding: 0 20px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; border: 0; cursor: pointer; }
.ov-btn--go { background: var(--accent); color: var(--on-accent); }
.ov-btn--ghost { background: var(--bg-card); color: var(--fg); }

/* ── Нижний таб-бар (ADR-006) ─────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: var(--tabbar-h);
  display: flex; background: var(--bg-soft);
  border-top: 1px solid var(--card-border);
  box-shadow: 0 -2px 10px rgba(74, 59, 47, .05);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--muted); font-size: 12px;
}
.tab-ico { font-size: 22px; }
.tab.is-active { color: var(--accent); }

/* ── Адаптив: планшет и десктоп (mobile-first, только надстройки) ──
   Мобильная вёрстка выше — эталон; ниже только улучшения для широких
   экранов: центрирование контента (борьба с пустыми полями), больше
   воздуха и более выраженная типографика секций. */

/* Планшет */
@media (min-width: 700px) {
  .content { max-width: 760px; margin-inline: auto; }
  .grid { gap: 20px; padding: 16px 24px; }
  .rail-title, .subhead h1 { font-size: 20px; }
  .rail-track { padding: 0 24px; }
  .rail { margin: 28px 0; }
}

/* Десктоп */
@media (min-width: 1024px) {
  .content { max-width: 1180px; }
  .grid { gap: 24px; }
  .rail { margin: 36px 0; }
  .rail-title, .subhead h1 { font-size: 22px; }
  .rail--continue { border-radius: var(--radius); margin-inline: 24px; }
  .rail--continue .card--video,
  .rail--continue .rail-track .card--video { width: 220px; flex: 0 0 220px; }

  /* ЦЕЛЬ 1: каталожные секции встают в 2–3 колонки → меньше высота страницы.
     align-items:start — колонки НЕ растягиваются по высоте соседей
     (секция с одной карточкой не вытягивается). */
  .browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    column-gap: 28px; align-items: start;
  }
  .browse-grid .rail--browse { margin: 14px 0; }

  /* ЦЕЛЬ 3: содержимое шапки выравнивается по центрированному .content
     (бордюр снизу остаётся во всю ширину — меняется только padding). */
  body.has-tabbar .topbar { padding-inline: max(16px, calc((100% - 1180px) / 2)); }
}

/* Указательные устройства (мышь) — лёгкая вторичная подсветка карточек.
   НЕ основной приём: вся иерархия и выразительность работают и без hover,
   интерфейс рассчитан на тач. */
@media (hover: hover) and (pointer: fine) {
  .card .thumb { transition: box-shadow .15s ease, transform .15s ease; }
  .card:hover .thumb { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(74, 59, 47, .14); }
}