/* ۲۵۰ فیلم / سریال برتر IMDb – طرح لیستی */

.kzt-chart {
  --kzt-accent: var(--primaryColor, #eb8307);
  --kzt-line: color-mix(in srgb, var(--text, #fff) 18%, transparent);
  /* قالب رنگ متن را روی body نمی‌گذارد و هر بخش خودش var(--text) می‌گیرد؛ بدون این خط متن‌ها تیره (رنگ پیش‌فرض بوت‌استرپ) می‌شوند */
  color: var(--text, #fff);
}
.kzt-chart a { color: inherit; text-decoration: none; }
.kzt-chart h1, .kzt-chart h2, .kzt-chart p, .kzt-chart strong, .kzt-chart small { color: inherit; }

.kzt-chart__head { display: flex; flex-direction: column; align-items: center; margin: 40px 0; }
.kzt-chart__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 56px;
  text-align: center;
  border-bottom: 4px solid var(--kzt-accent);
}
.kzt-chart__updated { margin-top: 10px; font-size: 12px; opacity: .65; }

/* ردیف هر فیلم */
.kzt-item { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }

.kzt-item__cover { position: relative; flex: 0 0 210px; width: 210px; }
.kzt-item__cover img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--bg2, #1c1c23); }

/* دایره‌ی رتبه (بالای پوستر، با برش هم‌رنگ پس‌زمینه) */
.kzt-item__rank { position: absolute; top: 0; right: 0; width: 100%; display: flex; justify-content: center; z-index: 2; pointer-events: none; }
.kzt-item__rank > span {
  width: 60px; height: 60px; margin-top: -30px;
  border: 10px solid var(--bg, #000);
  border-radius: 50%;
  background: var(--kzt-accent);
  color: #fff;
  font-size: 24px; font-weight: 700; line-height: 40px; text-align: center;
}

.kzt-item__meta { flex: 1; min-width: 0; }

.kzt-item__titlebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.kzt-item__title { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.5; direction: ltr; text-align: left; }
.kzt-item__title a { transition: color .2s ease-in-out; }
.kzt-item__title a:hover { color: var(--kzt-accent); }
.kzt-item__title a span { font-weight: 400; opacity: .7; }

.kzt-item__genres { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.kzt-item__genres > span { margin-left: 4px; }
.kzt-item__genres a {
  border: 1px solid var(--kzt-line); border-radius: 12px; padding: 5px 10px;
  transition: .3s ease-in-out;
}
.kzt-item__genres a:hover { border-color: var(--kzt-accent); color: var(--kzt-accent); }

.kzt-item__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.kzt-item__imdb { display: flex; align-items: center; direction: ltr; gap: 6px; }
.kzt-item__imdb-logo {
  display: inline-block; background: #f5c518; color: #000;
  font-weight: 900; font-size: 15px; line-height: 1; letter-spacing: -.5px;
  padding: 5px 6px; border-radius: 4px;
}
.kzt-item__imdb strong { font-size: 40px; font-weight: 700; line-height: 1; }
.kzt-item__imdb small { font-size: 22px; font-weight: 500; opacity: .85; }

.kzt-item__votes { border: 1px solid var(--kzt-line); border-radius: 12px; padding: 5px 10px; font-size: 13px; }

/* جابه‌جایی رتبه نسبت به بروزرسانی قبل */
.kzt-item__move { border-radius: 12px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; }
.kzt-item__move.is-up   { background: rgba(45, 205, 112, .15); color: #2dcd70; }
.kzt-item__move.is-down { background: rgba(231, 76, 60, .15);  color: #e74c3c; }
.kzt-item__move.is-new  { background: color-mix(in srgb, var(--kzt-accent) 18%, transparent); color: var(--kzt-accent); }

.kzt-item__plot { margin: 12px 0 0; font-size: 16px; line-height: 28px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.kzt-chart__pagination { justify-content: center; margin: 10px 0 40px; }

/* تبلت */
@media (max-width: 991.98px) {
  .kzt-item__title { font-size: 20px; }
  .kzt-item__imdb strong { font-size: 32px; }
}

/* موبایل: همان رفتار نمونه – خلاصه داستان مخفی، اندازه‌ها کوچک‌تر */
@media (max-width: 767.98px) {
  .kzt-chart__head { margin: 28px 0; }
  .kzt-chart__title { font-size: 22px; line-height: 44px; }
  .kzt-item { gap: 14px; margin-bottom: 34px; align-items: flex-start; }
  .kzt-item__cover { flex-basis: 120px; width: 120px; }
  .kzt-item__rank > span { width: 30px; height: 30px; margin-top: -15px; border-width: 3px; font-size: 16px; line-height: 24px; }
  .kzt-item__title { font-size: 16px; }
  .kzt-item__titlebar { flex-direction: column; align-items: stretch; gap: 12px; }
  .kzt-item__genres { font-size: 12px; }
  .kzt-item__imdb strong { font-size: 23px; }
  .kzt-item__imdb small { font-size: 13px; }
  .kzt-item__imdb-logo { font-size: 12px; padding: 3px 5px; }
  .kzt-item__votes { font-size: 12px; padding: 4px 7px; }
  .kzt-item__plot { display: none; }
}