/*
=====================================================================
 Кинотеатр: данные Кинопоиска, плашки рейтинга, актёры, трейлеры,
 похожие фильмы. Подключается автоматически (движок подхватывает
 все файлы из /style/css/).
=====================================================================
*/

/* ---------- плашка «рейтинг + год» на постере ---------- */
.kp-poster-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.kp-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}

.kp-badge .kp-r { color: #7ee081; }
.kp-badge .kp-y { color: #e6e6e6; font-weight: 600; }

/* ---------- рейтинг и основные данные на странице фильма ---------- */
.kp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}

.kp-score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 10px;
  background: #1c1c1c;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
}

.kp-score .kp-r { color: #7ee081; }
.kp-score small { color: #b9b9b9; font-size: 11px; font-weight: 500; }

.kp-facts { color: #6d7783; font-size: 13px; line-height: 1.6; }
.kp-facts b { color: #2b3440; }

.kp-tags { margin: 8px 0; }
.kp-tag {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 3px 10px;
  border-radius: 13px;
  background: #F4F6FB;
  border: 1px solid #E3E8F2;
  color: #476E9A;
  font-size: 12px;
}

.kp-opis { color: #2b3440; font-size: 14px; line-height: 1.65; }

/* ---------- актёры с фото ---------- */
.kp-actors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.kp-actor {
  text-align: center;
  font-size: 11px;
  color: #6d7783;
  line-height: 1.35;
}

.kp-actor img {
  width: 100%;
  max-width: 118px;
  height: 140px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  background: #F4F6FB;
  display: block;
  margin: 0 auto 5px;
}

.kp-actor b { display: block; color: #2b3440; font-size: 12px; }

/* ---------- трейлеры ---------- */
.kp-trailers { display: grid; gap: 10px; margin: 10px 0; }
.kp-trailer iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; display: block; }
.kp-trailer-name { font-size: 12px; color: #6d7783; margin: 4px 0 0; }

/* ---------- похожие фильмы ---------- */
.kp-similar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.kp-sim-card { text-align: center; text-decoration: none; display: block; }

.kp-sim-card img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: 8px;
  background: #F4F6FB;
  display: block;
}

.kp-sim-name {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.35;
  color: #2b3440;
}

/* ---------- «показать всех» у актёров и трейлер по клику ---------- */
.kp-actors-all {
  display: inline-block;
  margin: 2px 0 10px;
  padding: 5px 12px;
  border-radius: 14px;
  background: #F4F6FB;
  border: 1px solid #E3E8F2;
  color: #476E9A;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.kp-actors-all:hover { background: #EBEFFA; }

.kp-trailer-link {
  display: inline-block;
  margin: 6px 0 8px;
  padding: 7px 16px;
  border-radius: 18px;
  background: linear-gradient(90deg, #FF53A1, #FF5353);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.kp-trailer-link:hover { opacity: .9; }

.kp-trailer-box { margin-top: 8px; }

/* ---------- адаптив ---------- */
@media (min-width: 700px) {
  .kp-similar { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .kp-sim-card img { height: 214px; }
  .kp-actors { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .kp-actor img { height: 160px; }
  .kp-score { font-size: 20px; }
}

@media (max-width: 420px) {
  .kp-similar { grid-template-columns: repeat(2, 1fr); }
  .kp-sim-card img { height: 158px; }
  .kp-actor img { max-width: 100px; height: 118px; }
}