/* KinoHint — лёгкая СВЕТЛАЯ кино-тема + правый сайдбар. Mobile-first, ноль фреймворков. */
:root{
  --bg:#f5f6f8; --card:#ffffff; --hair:#e6e8ec; --hair2:#eef0f3;
  --tx:#15181d; --mut:#6b7280; --accent:#ff6a00; --accent2:#f59e0b;
  --good:#2faa53; --mid:#c98a17; --low:#cf4b4b;
  --wrap:1240px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 14px;}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);}
.hdr-in{display:flex;align-items:center;gap:18px;padding:11px 14px;}
.logo{font-size:22px;font-weight:800;letter-spacing:-.02em;flex-shrink:0;}
.logo b{color:var(--accent);}
.gnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;}
.gnav::-webkit-scrollbar{display:none;}
.gnav a{flex-shrink:0;font-size:13px;font-weight:600;color:var(--mut);padding:6px 9px;border-radius:8px;white-space:nowrap;}
.gnav a:hover{color:var(--accent);background:var(--hair2);}

/* layout: контент + правый сайдбар */
.layout{display:block;padding:18px 0 40px;}
.content{min-width:0;}
.side{margin-top:30px;}
.ptitle{font-size:23px;font-weight:800;letter-spacing:-.01em;margin:2px 0 4px;}
.psub{color:var(--mut);margin:0 0 16px;font-size:14px;}
.crumbs{font-size:13px;color:var(--mut);margin:2px 0 12px;}
.crumbs a:hover{color:var(--accent);}

/* sidebar widgets */
.swidget{background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:14px;margin-bottom:18px;}
.swidget h3{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:0 0 10px;}
.ad-slot{background:var(--card);border:1px dashed var(--hair);border-radius:14px;min-height:250px;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;}
.ad-slot.tall{min-height:600px;}
.glist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.glist a{font-size:13px;font-weight:600;color:var(--tx);background:var(--hair2);padding:6px 11px;border-radius:8px;}
.glist a:hover{background:var(--accent);color:#fff;}
.toplist{list-style:none;margin:0;padding:0;}
.toplist li{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--hair2);}
.toplist li:first-child{border-top:none;}
.toplist .tp{width:42px;height:60px;border-radius:7px;object-fit:cover;background:var(--hair2);flex-shrink:0;}
.toplist h4{font-size:13.5px;font-weight:600;margin:0;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.toplist li:hover h4{color:var(--accent);}
.toplist .ty{font-size:12px;color:var(--mut);}

/* grid of poster cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.mcard{display:block;}
.poster{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--hair);box-shadow:0 2px 8px rgba(20,24,30,.05);}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.mcard:hover .poster img{transform:scale(1.04);}
.noposter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:var(--mut);}
.rate{position:absolute;top:8px;left:8px;font-size:12.5px;font-weight:800;padding:3px 7px;border-radius:7px;color:#fff;}
.rate.good{background:var(--good);} .rate.mid{background:var(--mid);} .rate.low{background:var(--low);}
.mt{padding:8px 2px 0;}
.mt h3{font-size:14px;font-weight:600;line-height:1.25;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mcard:hover .mt h3{color:var(--accent);}
.my{font-size:12px;color:var(--mut);}

/* pager */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:28px 0 6px;}
.pager a,.pager span{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0 10px;border-radius:9px;font-weight:700;font-size:14px;border:1px solid var(--hair);background:var(--card);}
.pager a:hover{border-color:var(--accent);color:var(--accent);}
.pager .cur{background:var(--accent);border-color:var(--accent);color:#fff;}
.pager .dots{border:none;background:none;}

/* movie page */
.movie{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px;}
.m-head{display:grid;grid-template-columns:1fr;gap:18px;}
.m-poster{width:170px;border-radius:14px;overflow:hidden;background:var(--hair2);border:1px solid var(--hair);aspect-ratio:2/3;}
.m-poster img{width:100%;height:100%;object-fit:cover;}
.m-info h1{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;line-height:1.15;}
.m-info h1 .yr{color:var(--mut);font-weight:700;}
.orig{color:var(--mut);margin:0 0 6px;font-size:14px;}
.slogan{font-style:italic;color:var(--mut);margin:0 0 12px;}
.rates{display:flex;gap:10px;margin:10px 0 14px;}
.rb{display:flex;flex-direction:column;align-items:center;background:var(--bg);border:1px solid var(--hair);border-radius:10px;padding:7px 14px;}
.rb b{font-size:20px;font-weight:800;}
.rb small{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;}
.rb.good b{color:var(--good);} .rb.mid b{color:var(--mid);} .rb.low b{color:var(--low);}
.facts{border-collapse:collapse;width:100%;max-width:520px;font-size:14.5px;}
.facts th{text-align:left;color:var(--mut);font-weight:500;padding:6px 14px 6px 0;vertical-align:top;white-space:nowrap;width:1%;}
.facts td{padding:6px 0;}
.facts a{color:var(--accent);}
.watch{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;}
.wbtn{background:var(--accent);color:#fff;font-weight:700;padding:10px 18px;border-radius:10px;font-size:14px;}
.wbtn:hover{background:var(--accent2);}
.m-sec{margin-top:30px;}
.m-sec h2{font-size:19px;font-weight:800;margin:0 0 14px;}
.trailer{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;}
.trailer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.desc{font-size:16px;line-height:1.7;color:#2a2e35;}
.cast{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.actor{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;font-size:12.5px;color:var(--mut);}
.actor img,.actor .ava{width:70px;height:70px;border-radius:50%;object-fit:cover;background:var(--hair2);border:1px solid var(--hair);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:var(--mut);}

/* footer */
.ftr{border-top:1px solid var(--hair);background:var(--card);margin-top:40px;padding:26px 0;}
.fnav{display:flex;flex-wrap:wrap;gap:5px 4px;margin-bottom:14px;}
.fnav a{font-size:13px;color:var(--mut);padding:5px 10px;border-radius:7px;}
.fnav a:hover{color:var(--accent);}
.copy{color:var(--mut);font-size:12.5px;margin:0;}

@media(min-width:560px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .cast{grid-template-columns:repeat(5,1fr);}
}
@media(min-width:900px){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;}
  .side{margin-top:0;position:sticky;top:74px;align-self:start;}
  .grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  .ptitle{font-size:27px;}
  .m-head{grid-template-columns:210px 1fr;gap:26px;}
  .m-poster{width:210px;}
  .m-info h1{font-size:30px;}
  .cast{grid-template-columns:repeat(5,1fr);}
}
@media(min-width:1140px){
  .grid{grid-template-columns:repeat(4,1fr);}
}

/* ---- богатый футер карточки + MPSU-слоты ---- */
.mt{padding:9px 3px 2px;}
.mrow{display:flex;gap:12px;font-size:12px;color:var(--mut);margin-top:4px;}
.mrow span{white-space:nowrap;}
.mg{font-size:12px;color:var(--mut);margin-top:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.mc{font-size:12px;color:var(--mut);margin-top:3px;display:flex;flex-wrap:wrap;gap:3px 9px;}
.mrate{display:flex;gap:14px;margin-top:7px;}
.mrate span{display:flex;align-items:center;gap:5px;}
.mrate i{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);}
.mrate b{font-weight:800;font-size:13.5px;}
.mrate b.good{color:var(--good);} .mrate b.mid{color:var(--mid);} .mrate b.low{color:var(--low);}

.ad-lead{margin:14px 0 2px;display:flex;justify-content:center;}
.ad-lead:empty{display:none;}
.ad-side{margin-bottom:18px;min-height:0;}

/* ==== данные ОВЕРЛЕЕМ на постер (как в оригинале) ==== */
.grid{grid-template-columns:repeat(2,1fr);}
.mcard{position:relative;display:block;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#191c22;box-shadow:0 2px 10px rgba(20,24,30,.10);}
.mcard .pimg{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.mcard:hover .pimg{transform:scale(1.06);}
.mcard .noposter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:rgba(255,255,255,.25);}
.ov{position:absolute;left:0;right:0;bottom:0;padding:26px 11px 11px;color:#fff;background:linear-gradient(to top,rgba(8,10,14,.97) 0%,rgba(8,10,14,.9) 42%,rgba(8,10,14,.5) 76%,transparent 100%);}
.ov h3{font-size:14px;font-weight:700;line-height:1.2;margin:0 0 5px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mcard:hover .ov h3{color:#ffb877;}
.ovm{display:flex;gap:10px;font-size:11.5px;color:rgba(255,255,255,.74);margin-bottom:4px;}
.ovg{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.ovc{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:11.5px;color:rgba(255,255,255,.74);margin-bottom:6px;}
.ovr{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:rgba(255,255,255,.66);}
.ovr b{font-weight:800;font-size:13px;margin-left:3px;}
.ovr b.good{color:#5fd97a;} .ovr b.mid{color:#ffcf5a;} .ovr b.low{color:#ff8a8a;}
@media(min-width:560px){ .grid{grid-template-columns:repeat(3,1fr);} }
@media(min-width:900px){ .grid{grid-template-columns:repeat(4,1fr);} }
@media(min-width:1140px){ .grid{grid-template-columns:repeat(4,1fr);} }