/* ================================
   Hero carousel (portrait covers)
   ================================ */

.hero {
  --bg: #0b0f14;
  --panel: #111827;
  --text: #e5e7eb;
  --muted:#9aa4b2;
  --accent:#e11d48;
  --border: rgba(255,255,255,.08);
  --ring: rgba(241, 70, 104, .35);

  margin: 12px auto 18px;
  padding: 0 16px;
  max-width: 1280px;
  color: var(--text);
}
@media (min-width: 1440px) { .hero { max-width: 1440px; } }

.hero__head {
  display:flex; align-items:center; justify-content:space-between;
  margin: 6px 0 12px;
}
.hero__title {
  margin:0; font-size: clamp(18px, 2.5vw, 22px); font-weight: 800; letter-spacing: .2px;
}
.hero__actions { display:flex; gap:8px; }
.hero__btn {
  appearance: none; border:1px solid var(--border);
  background: #0f1722; color:#fff; border-radius: 10px;
  width: 36px; height: 36px; font-size: 18px; font-weight: 900;
  line-height: 1; cursor: pointer;
}
.hero__btn:hover { background:#1a2534; }

.hero__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px;
  gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
@media (min-width: 480px){ .hero__rail { grid-auto-columns: 170px; gap: 14px; } }
@media (min-width: 640px){ .hero__rail { grid-auto-columns: 180px; } }
@media (min-width: 768px){ .hero__rail { grid-auto-columns: 200px; gap: 16px; } }
@media (min-width: 1024px){ .hero__rail { grid-auto-columns: 220px; } }

.hero__rail::-webkit-scrollbar{ height: 10px; }
.hero__rail::-webkit-scrollbar-thumb{ background:#374151; border-radius:999px; }
.hero__rail::-webkit-scrollbar-track{ background:transparent; }
.hero__rail.is-dragging { cursor: grabbing; }

.hero__card {
  scroll-snap-align: start;
  display:flex; flex-direction:column; gap:8px;
  text-decoration: none; color: inherit;
}
.hero__imgwrap {
  position: relative;
  aspect-ratio: 2 / 3;          /* portrait */
  border-radius: 14px;
  overflow: hidden;
  background: #0a0f18;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.hero__img {
  width: 100%; height: 100%; object-fit: cover; display:block;
  transform: translateZ(0) scale(1.01);
  transition: transform .25s ease, filter .25s ease;
  filter: contrast(1.05) saturate(1.05);
}
.hero__card:hover .hero__img { transform: scale(1.04); }

.hero__meta { min-height: 34px; }
.hero__name {
  margin:0; font-size: 13px; line-height: 1.35; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.hero__badge {
  position:absolute; z-index:2;
  bottom: 8px; right: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 900; letter-spacing: .2px;
  color:#fff; background: rgba(0,0,0,.78);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
}
.hero__badge--dur { right: 8px; bottom: 8px; }
.hero__badge--premium { right: 8px; bottom: 36px; background: linear-gradient(135deg, #111, #000); }

.hero__empty {
  color: var(--muted);
  border:1px dashed var(--border);
  padding: 12px; border-radius: 12px;
  background: #0f1722;
}