/* Thematic hubs. Reuses the catalogue's tokens so a hub page reads as part of the
   same site rather than a bolted-on section. */

/* Introduction above a hub's grid. This text is what keeps the page off the thin
   side of the line, so it gets real reading measure and spacing. */
.hub-lead {
  max-width: 820px;
  margin: 0 0 34px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.hub-lead p { margin: 0 0 14px; }
.hub-lead p:last-child { margin-bottom: 0; }

/* Index of every hub on the domain. */
.hub-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.hub-index-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.hub-index-card:hover,
.hub-index-card:focus-visible {
  border-color: var(--brand);
  background: var(--surface-2);
  transform: translateY(-2px);
}

.hub-index-card h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -.3px;
}
.hub-index-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.hub-index-count {
  margin-top: auto;
  padding-top: 8px;
  color: var(--brand-text, var(--brand));
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .06em;
}

/* Sideways navigation at the foot of a hub, and the same pattern on a film page. */
.hub-siblings { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line); }
.hub-sibling-links,
.movie-hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hub-sibling-links a,
.movie-hub-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}
.hub-sibling-links a:hover,
.hub-sibling-links a:focus-visible,
.movie-hub-links a:hover,
.movie-hub-links a:focus-visible {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.movie-hubs { margin-top: 44px; }
.movie-hubs h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.8px;
}

@media (max-width: 620px) {
  .hub-index-grid { grid-template-columns: 1fr; }
  .hub-lead { font-size: 13.5px; line-height: 1.85; }
}

/* Вопросы и ответы на странице фильма: типографика — от .entry-content, здесь только отступы. */
.movie-faq { margin-top: 44px; }
.movie-faq .faq-body h3 { margin: 22px 0 6px; font-size: 19px; }
.movie-faq .faq-body h3:first-child { margin-top: 14px; }
.movie-faq .faq-body p { margin: 0; }

/* Серии: список на странице сериала и навигация на странице серии. Типографика — от темы. */
.movie-episodes { margin-top: 44px; }
.movie-episodes .muted-note { color: var(--muted); margin: 6px 0 14px; }
.episode-season { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 0 16px; margin-bottom: 10px; }
.episode-season summary { cursor: pointer; padding: 14px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.episode-season summary::-webkit-details-marker { display: none; }
.episode-season summary span { color: var(--muted); font-weight: 400; font-size: 13px; }
.episode-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.episode-list li a { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); text-decoration: none; color: inherit; }
.episode-list li a:hover { background: rgba(255,255,255,.08); }
.episode-list li.is-current a { outline: 1px solid var(--brand, #9be15d); }
.episode-list li a b { font-weight: 650; }
.episode-list li a span { color: var(--muted); font-size: 13px; }
.episode-list li a small { color: var(--muted); font-size: 12px; margin-left: auto; }
.episode-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Подборки на главной: чипы в стиле блока «Входит в подборки» на странице фильма. */
.home-hubs { padding-block: 34px 0; }
.home-hub-links { display: flex; flex-wrap: wrap; gap: 10px; }
.home-hub-links a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color .18s ease, background .18s ease; }
.home-hub-links a:hover, .home-hub-links a:focus-visible { border-color: var(--brand); background: var(--surface-2); }
.home-hub-links a b { font-size: 11px; font-weight: 750; color: var(--brand-text, var(--brand)); }
@media (max-width: 620px) { .home-hubs { padding-block: 24px 0; } .home-hub-links a { padding: 9px 13px; font-size: 13px; } }

.episode-list--text { grid-template-columns: 1fr; }
.episode-list--text li { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); }
.episode-list--text li div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.episode-list--text li span { color: var(--muted); font-size: 13px; }
.episode-list--text li small { color: var(--muted); font-size: 12px; margin-left: auto; }
.episode-list--text li p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Curated short lists fill a balanced row; the final row stays centred. */
html body.lfn-v72 .catalog-section .movie-grid--curated {
  --hub-columns:var(--hub-max-columns);--hub-gap:18px;
  display:flex!important;flex-wrap:wrap;justify-content:center;gap:30px var(--hub-gap);
}
html body.lfn-v72 .catalog-section .movie-grid--curated>.movie-card {
  flex:0 0 calc((100% - (var(--hub-columns) - 1)*var(--hub-gap))/var(--hub-columns));
  max-width:320px!important;min-width:0;
}
@media(max-width:1100px) {.movie-grid--curated {--hub-columns:min(4,var(--hub-max-columns))!important}}
@media(max-width:900px) {.movie-grid--curated {--hub-columns:min(3,var(--hub-max-columns))!important}}
@media(max-width:680px) {.movie-grid--curated {--hub-columns:min(2,var(--hub-max-columns))!important;--hub-gap:12px!important;row-gap:24px!important}}