/* =========================================================
   fullstory_film.css — CLEAN (ONLY актуальное)
   Namespace: .filmx-
   Цвета ТОЛЬКО из palette.css.php:
   --bg0 --bg1 --card --card2 --text --accent --accent2
   RGB helpers:
   --accentRgb3 --accent2Rgb3 --textRgb3 --cardRgb3 --card2Rgb3 --bg0Rgb3 --bg1Rgb3
   + --line --muted --shadow --wrap --hFont
========================================================= */

/* ---------- Safety / anti-break ---------- */
.filmx-wrap,
.filmx-wrap *{ box-sizing:border-box; }

.filmx-wrap{
  max-width: var(--wrap, 1160px);
  margin: 0 auto;
  padding: 18px 14px;
  color: var(--text);
  overflow-x: clip;
}
@supports not (overflow: clip){
  .filmx-wrap{ overflow-x:hidden; }
}

/* на всякий случай: убираем влияние чужого .wrap внутри */
.filmx-wrap .wrap{
  max-width:100%;
  padding:0;
}

/* =========================================================
   HERO
========================================================= */
.filmx-hero{
  border-radius:24px;
  border:1px solid rgb(var(--accentRgb3) / .20);
  background:
    radial-gradient(1200px 500px at 20% 10%, rgb(var(--accentRgb3) / .18), transparent 55%),
    radial-gradient(900px 420px at 85% 20%,  rgb(var(--accent2Rgb3) / .10), transparent 55%),
    linear-gradient(180deg, rgb(var(--cardRgb3) / 1), rgb(var(--card2Rgb3) / 1));
  box-shadow:var(--shadow);
  overflow:hidden;
}

.filmx-hero__inner{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  padding:18px;
  align-items:center;
  min-width:0;
}

@media (max-width:900px){
  .filmx-hero__inner{ grid-template-columns:1fr; }
}

.filmx-crumb{
  display:inline-flex;
  gap:8px;
  align-items:center;
  text-decoration:none;
  color:rgb(var(--accentRgb3) / .92);
  border-bottom:1px dashed rgb(var(--accentRgb3) / .40);
  padding-bottom:2px;
  margin-bottom:10px;
}

.filmx-kicker{
  font-weight:800;
  letter-spacing:.2px;
  margin:6px 0 10px;
  color: rgb(var(--textRgb3) / .82);
}

.filmx-title{
  margin:0 0 10px;
  font-family:var(--hFont, serif);
  font-size:clamp(26px, 3vw, 42px);
  line-height:1.08;
  letter-spacing:.2px;
  color:rgb(var(--textRgb3) / 1);
}

.filmx-sub{
  margin:0 0 12px;
  color:rgb(var(--textRgb3) / .80);
  line-height:1.55;
}

.filmx-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 12px;
}

.filmx-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgb(var(--accentRgb3) / .18);
  background:rgb(var(--accentRgb3) / .08);
  color:rgb(var(--textRgb3) / 1);
  font-size:13px;
  line-height:1;
}

.filmx-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.filmx-seo-line{
  margin-top:10px;
  line-height:1.5;
  color: rgb(var(--textRgb3) / .82);
}

/* =========================================================
   Buttons
========================================================= */
.filmx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  text-decoration:none;

  color:rgb(var(--textRgb3) / 1);
  border:1px solid rgb(var(--accentRgb3) / .35);
  background:rgb(var(--accentRgb3) / .16);

  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.filmx-btn:hover{
  border-color:rgb(var(--accentRgb3) / .55);
  background:rgb(var(--accentRgb3) / .22);
  box-shadow:0 12px 26px rgb(var(--accentRgb3) / .12);
}
.filmx-btn:active{ transform:translateY(1px); }

.filmx-btn--ghost{
  border-color:rgb(var(--accentRgb3) / .22);
  background:rgb(var(--accentRgb3) / .08);
}
.filmx-btn--ghost:hover{
  border-color:rgb(var(--accentRgb3) / .40);
  background:rgb(var(--accentRgb3) / .14);
}

/* focus */
.filmx-btn:focus-visible,
.filmx-crumb:focus-visible{
  outline:2px solid rgb(var(--accentRgb3) / .55);
  outline-offset:2px;
}

/* =========================================================
   Poster
========================================================= */
.filmx-poster{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgb(var(--accentRgb3) / .22);
  background:rgb(var(--accentRgb3) / .06);
}
.filmx-poster__link{ position:relative; display:block; }
.filmx-poster img{ display:block; width:100%; height:auto; }
.filmx-poster__empty{ padding:16px; color:rgb(var(--textRgb3) / .75); }

/* ratings on poster */
.filmx-ratings{
  position:absolute;
  left:10px;
  bottom:10px;
  display:flex;
  gap:8px;
  z-index:2;
}
.filmx-rate{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgb(var(--accentRgb3) / .28);
  background:rgb(var(--cardRgb3) / .75);
  backdrop-filter:blur(10px);
  color:rgb(var(--textRgb3) / 1);
  box-shadow:0 10px 22px rgb(0 0 0 / .25);
}
.filmx-rate__k{ font-weight:900; font-size:12px; letter-spacing:.2px; opacity:.9; }
.filmx-rate__v{ font-weight:900; font-size:13px; }

.filmx-rate--imdb{
  border-color:rgb(var(--accent2Rgb3) / .34);
  box-shadow:0 10px 22px rgb(var(--accent2Rgb3) / .10);
}
.filmx-rate--kp{
  border-color:rgb(var(--accentRgb3) / .34);
  box-shadow:0 10px 22px rgb(var(--accentRgb3) / .10);
}

/* =========================================================
   Main Grid
========================================================= */
.filmx-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:16px;
  align-items:start;
  min-width:0;
}
.filmx-page{ min-width:0; }
@media (max-width:980px){
  .filmx-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   Cards
========================================================= */
.filmx-card{
  border-radius:22px;
  border:1px solid rgb(var(--accentRgb3) / .18);
  background:
    radial-gradient(900px 300px at 20% 0%, rgb(var(--accentRgb3) / .12), transparent 60%),
    linear-gradient(180deg, rgb(var(--cardRgb3) / 1), rgb(var(--card2Rgb3) / 1));
  box-shadow:var(--shadow);
  overflow:hidden;
  min-width:0;
}

.filmx-card__head{
  padding:14px 16px;
  border-bottom:1px solid rgb(var(--accentRgb3) / .14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}

.filmx-card__ttl{
  font-family:var(--hFont, serif);
  font-size:18px;
  margin:0;
  letter-spacing:.2px;
  color:rgb(var(--textRgb3) / 1);
}

.filmx-card__subttl{
  margin:0;
  font-size:13px;
  color:rgb(var(--textRgb3) / .72);
}

.filmx-card__more{
  font-weight:800;
  font-size:13px;
  color:rgb(var(--textRgb3) / .78);
  text-decoration:none;
  border-bottom:1px dashed rgb(var(--accentRgb3) / .35);
  padding-bottom:2px;
  white-space:nowrap;
}
.filmx-card__more:hover{
  color:rgb(var(--accentRgb3) / .95);
  border-bottom-color:rgb(var(--accentRgb3) / .55);
}

/* =========================================================
   Player
========================================================= */
.filmx-player{ padding:12px; }

/* VideoHub wrapper */
.filmx-vh{
  width:100%;
  height:520px;
  border-radius:16px;
  overflow:hidden;
  background:rgb(var(--cardRgb3) / 1);
  outline:1px solid rgb(var(--accentRgb3) / .18);
}
@media (max-width:980px){ .filmx-vh{ height:420px; } }
@media (max-width:768px){ .filmx-vh{ height:100%; } }
@media (max-width:425px){ .filmx-vh{ height:220px; } }

.filmx-vh video-player{
  display:block;
  width:100%;
  height:100%;
}

/* Note / warning */
.filmx-note{
  margin:12px 12px 0;
  padding:12px;
  border-radius:16px;

  border:1px solid rgb(var(--accentRgb3) / .22);
  background:rgb(var(--accentRgb3) / .12);
  color:rgb(var(--textRgb3) / .92);

  font-size:13px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.filmx-note__icon{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgb(var(--accentRgb3) / .16);
  border:1px solid rgb(var(--accentRgb3) / .25);
  color:rgb(var(--textRgb3) / 1);
}
.filmx-muted{ color:rgb(var(--textRgb3) / .72); }

/* =========================================================
   Rich text (description)
========================================================= */
.filmx-text{
  padding:12px 16px 16px;
  line-height:1.7;
  color:rgb(var(--textRgb3) / .92);
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.filmx-text > *:first-child{ margin-top:0; }
.filmx-text > *:last-child{ margin-bottom:0; }

.filmx-text h2,
.filmx-text h3{
  font-family:var(--hFont, serif);
  line-height:1.2;
  margin:16px 0 10px;
  color:rgb(var(--textRgb3) / 1);
}

.filmx-text a{
  color:rgb(var(--accentRgb3) / .95);
  text-decoration:underline;
  text-underline-offset:3px;
}
.filmx-text a:hover{ color:rgb(var(--accent2Rgb3) / .95); }

.filmx-text img,
.filmx-text iframe,
.filmx-text video{
  max-width:100%;
  border-radius:14px;
  outline:1px solid rgb(var(--accentRgb3) / .20);
}

.filmx-text hr{
  border:0;
  height:1px;
  background:var(--line);
  margin:14px 0;
}

.filmx-text blockquote{
  margin:14px 0;
  padding:12px 14px;
  border-radius:16px;
  border-left:3px solid rgb(var(--accentRgb3) / .70);
  background:rgb(var(--accentRgb3) / .08);
  color:rgb(var(--textRgb3) / .90);
}

/* lists */
.filmx-text ul, .filmx-text ol{ padding-left:20px; }
.filmx-text li{ margin:6px 0; }

/* tables */
.filmx-text table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  outline:1px solid rgb(var(--accentRgb3) / .18);
}
.filmx-text th, .filmx-text td{
  padding:10px 12px;
  border-bottom:1px solid rgb(var(--accentRgb3) / .12);
  color:rgb(var(--textRgb3) / .92);
}
.filmx-text th{
  background:rgb(var(--accentRgb3) / .10);
  text-align:left;
  color:rgb(var(--textRgb3) / 1);
}
.filmx-text tr:last-child td{ border-bottom:0; }

/* =========================================================
   Sections / blocks
========================================================= */
.filmx-section{ margin-top:16px; margin-bottom:18px; }

.filmx-block{
  padding:12px 16px 16px;
  color:rgb(var(--textRgb3) / .92);
  line-height:1.7;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.filmx-block a{
  color:rgb(var(--accentRgb3) / .95);
  text-decoration:underline;
  text-underline-offset:3px;
}
.filmx-block a:hover{ color:rgb(var(--accent2Rgb3) / .95); }

/* Trailer embed */
.filmx-embed{
  border-radius:16px;
  overflow:hidden;
  outline:1px solid rgb(var(--accentRgb3) / .18);
  background:rgb(var(--accentRgb3) / .06);
}
.filmx-embed iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
}

/* =========================================================
   Specs (right)
========================================================= */
.filmx-specs{ padding:12px 16px 16px; }

.filmx-spec{
  padding:8px 0;
  border-bottom:1px dashed rgb(var(--accentRgb3) / .18);

  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:baseline;
  min-width:0;
}
.filmx-spec:last-child{ border-bottom:0; }

.filmx-spec span{
  color:rgb(var(--textRgb3) / .78);
  font-size:13px;
}

.filmx-spec b{
  color:rgb(var(--textRgb3) / 1);
  font-weight:800;
  text-align:right;

  max-width:60%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.filmx-spec--wrap b{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-width:70%;
}

/* =========================================================
   CAST slider (ONE version)
========================================================= */
.filmx-cast{
  padding:12px 16px 16px;
  overflow:hidden;
}

.filmx-cast__track{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;

  padding-bottom:6px;
  margin:0;
  min-width:0;
}

.filmx-cast__track::-webkit-scrollbar{ height:8px; }
.filmx-cast__track::-webkit-scrollbar-thumb{
  background:rgb(var(--accentRgb3) / .22);
  border-radius:999px;
}
.filmx-cast__track::-webkit-scrollbar-track{
  background:rgb(var(--accentRgb3) / .08);
  border-radius:999px;
}

.filmx-cast__item{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:150px;

  border-radius:18px;
  border:1px solid rgb(var(--accentRgb3) / .18);
  background:
    radial-gradient(220px 120px at 30% 10%, rgb(var(--accentRgb3) / .12), transparent 55%),
    linear-gradient(180deg, rgb(var(--cardRgb3) / 1), rgb(var(--card2Rgb3) / 1));

  padding:10px;
  text-decoration:none;
  color:rgb(var(--textRgb3) / 1);

  box-shadow:0 10px 26px rgb(0 0 0 / .25);
  transition:transform .12s ease, border-color .12s ease;
}
.filmx-cast__item:hover{
  transform:translateY(-1px);
  border-color:rgb(var(--accentRgb3) / .38);
}

.filmx-cast__img{
  display:block;
  border-radius:14px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:rgb(var(--accentRgb3) / .10);
  outline:1px solid rgb(var(--accentRgb3) / .14);
}
.filmx-cast__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.filmx-cast__name{
  display:block;
  font-weight:900;
  font-size:13px;
  margin-top:9px;
  line-height:1.2;
}
.filmx-cast__role{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:rgb(var(--textRgb3) / .72);
  line-height:1.2;
}

.filmx-cast__ctrl{
  display:flex;
  gap:8px;
  flex:0 0 auto;
}
.filmx-cast__btn{
  width:36px;
  height:32px;
  border-radius:12px;
  border:1px solid rgb(var(--accentRgb3) / .22);
  background:rgb(var(--accentRgb3) / .10);
  color:rgb(var(--textRgb3) / .92);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.filmx-cast__btn:hover{
  border-color:rgb(var(--accentRgb3) / .40);
  background:rgb(var(--accentRgb3) / .16);
}

@media (max-width:520px){
  .filmx-cast__item{ width:135px; }
}

/* =========================================================
   Comments
========================================================= */
.filmx-comments{ margin-top:16px; }

/* на мобилке переносим aside вверх */
@media (max-width:980px){
  .filmx-page{ order:2; }
  .filmx-grid > aside{ order:1; }
}

/* =========================================================
   Collapsible specs — ONLY MOBILE
========================================================= */
.filmx-specs--collapsible > .filmx-spec{ display:flex; }
.filmx-specs__more{ display:none; }

@media (max-width:980px){
  .filmx-specs--collapsible > .filmx-spec{ display:none; }
  .filmx-specs--collapsible > .filmx-spec:nth-of-type(-n + 6){ display:flex; }
  .filmx-specs__toggle:checked ~ .filmx-specs--collapsible > .filmx-spec{ display:flex; }

  .filmx-specs__more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:6px 16px 16px;
    cursor:pointer;
    user-select:none;
    font-size:13px;
    color:rgb(var(--textRgb3) / .78);
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .filmx-specs__more:hover{ color:rgb(var(--accentRgb3) / .95); }

  .filmx-specs__more-close{ display:none; }
  .filmx-specs__toggle:checked ~ .filmx-specs__more .filmx-specs__more-open{ display:none; }
  .filmx-specs__toggle:checked ~ .filmx-specs__more .filmx-specs__more-close{ display:inline; }
}

/* =========================================================
   FRANCHISE (Другие части) — id="franchise"
   ALWAYS: 2.5 карточки + горизонтальный скролл + snap
   Hover (ПК): dim siblings + highlight hovered + show play
========================================================= */

#franchise.filmx-franchise{
  padding:10px 12px 16px;
}

/* track */
#franchise.filmx-franchise .da-track{
  display:flex !important;
  gap:14px !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;

  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-left:16px;

  padding:12px 16px 16px !important;
  margin:0 !important;

  /* чтобы свайп точно работал */
  touch-action: pan-x;

  scrollbar-width: thin;
  scrollbar-color: rgb(var(--accentRgb3) / .25) rgb(var(--accentRgb3) / .10);
}

#franchise.filmx-franchise .da-track::-webkit-scrollbar{ height:8px; }
#franchise.filmx-franchise .da-track::-webkit-scrollbar-thumb{
  background: rgb(var(--accentRgb3) / .25);
  border-radius:999px;
}
#franchise.filmx-franchise .da-track::-webkit-scrollbar-track{
  background: rgb(var(--accentRgb3) / .10);
  border-radius:999px;
}

/* items: 2.5 на ПК */
#franchise.filmx-franchise .da-track > .da-ep{
  flex:0 0 40% !important;     /* 40% = 2.5 карточки */
  scroll-snap-align:start;

  min-width:260px;
  max-width:520px;
  position:relative;
}

/* mobile: крупнее (примерно 1.2 карточки) */
@media (max-width:720px){
  #franchise.filmx-franchise{ padding:10px 10px 14px; }

  #franchise.filmx-franchise .da-track{
    padding:10px 10px 14px !important;
    scroll-padding-left:10px;
  }

  #franchise.filmx-franchise .da-track > .da-ep{
    flex:0 0 78% !important;
    min-width:260px;
    max-width:none;
  }
}

/* card base */
#franchise.filmx-franchise .da-ep{
  cursor:pointer;
  user-select:none;
  border-radius:18px;
  transition: transform .18s ease, filter .18s ease;
  will-change: transform;
}

/* media */
#franchise.filmx-franchise .da-ep__media{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:18px;

  border:1px solid rgb(var(--accentRgb3) / .18);
  background: linear-gradient(180deg, rgb(var(--cardRgb3)/1), rgb(var(--card2Rgb3)/1));
  box-shadow:0 18px 45px rgb(0 0 0 / .38);

  aspect-ratio:16/9;

  transition: box-shadow .18s ease, border-color .18s ease;
}

#franchise.filmx-franchise .da-ep__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition: transform .30s ease;
}

#franchise.filmx-franchise .da-ep__media::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(70% 70% at 50% 35%, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / .55) 78%);
  pointer-events:none;
}

/* play (появляется на ПК при hover) */
#franchise.filmx-franchise .da-ep__play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.98);

  width:56px;
  height:56px;
  border-radius:999px;

  background: rgb(0 0 0 / .28);
  border:1px solid rgb(255 255 255 / .18);
  backdrop-filter: blur(8px);

  opacity:0;
  transition: opacity .18s ease, transform .18s ease, background .18s ease, border-color .18s ease;
  z-index:2;
  pointer-events:none;
}

#franchise.filmx-franchise .da-ep__play::before{
  content:"";
  position:absolute;
  left:23px;
  top:18px;
  width:0;height:0;
  border-left:16px solid rgb(255 255 255 / .92);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

/* hover effects (ПК) */
@media (hover:hover) and (pointer:fine){
  #franchise.filmx-franchise .da-track:hover .da-ep{
    filter:saturate(.92) brightness(.86);
  }
  #franchise.filmx-franchise .da-track:hover .da-ep:hover{
    filter:saturate(1.08) brightness(1.03);
    transform:translateY(-4px);
    z-index:3;
  }

  #franchise.filmx-franchise .da-ep:hover .da-ep__img{
    transform:scale(1.06);
  }

  #franchise.filmx-franchise .da-ep:hover .da-ep__media{
    border-color: rgb(var(--accentRgb3) / .42);
    box-shadow:
      0 22px 60px rgb(0 0 0 / .55),
      0 0 0 1px rgb(var(--accentRgb3) / .14);
  }

  #franchise.filmx-franchise .da-ep:hover .da-ep__play{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.04);
    background: rgb(var(--accentRgb3) / .18);
    border-color: rgb(var(--accentRgb3) / .32);
  }
}

/* подпись */
#franchise.filmx-franchise .da-ep__cap{
  padding-top:12px;
  text-align:left;
}
#franchise.filmx-franchise .da-ep__cap-num{
  font-size:15px;
  line-height:1.2;
  font-weight:900;
  color: rgb(var(--textRgb3) / 1);
}
#franchise.filmx-franchise .da-ep__cap-title{
  margin-top:4px;
  font-size:12px;
  color: var(--muted);
}