/* ===============================
  FUTURISTIC VIDRO THEME 2030
   =============================== */
:root {
  --bg: #0a0c10;
  --surface: rgba(20, 24, 32, 0.85);
  --text: #e8ecf1;
  --muted: #9da6b2;
  --accentA: #ff3366;
  --accentB: #ff4b2b;
  --radius: 20px;
  --gap: 18px;
  --glow: 0 0 18px rgba(255, 77, 122, 0.6);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
html, body { height:100%; background: var(--bg); color: var(--text); font-size:16px; line-height:1.4; -webkit-font-smoothing:antialiased; }

/* ===============================
   HERO
   =============================== */
.vidro-hero { padding:0px 0 0px; text-align:center; }
/* ===============================
   CAROUSEL
   =============================== */
.vidro-viewport {
    position: relative; width:100%;
    overflow:hidden; 
    padding-top: 0;
  }

#vidro-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* mobile momentum scroll */
}
.vidro-card {
  scroll-snap-align: center;
}


/* ===============================
   CARD
   =============================== */
.vidro-card {
  flex:0 0 auto;
  width:min(86vw,980px);
  scroll-snap-align:center;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,0.08);
  transition: transform .4s ease, box-shadow .4s ease;
  cursor:pointer; user-select:none;
}
.vidro-card:hover { transform: scale(1.03); box-shadow: var(--glow); }
@media(min-width:900px){ .vidro-card { width:min(68vw,1100px); } }
@media(min-width:1400px){ .vidro-card { width:1200px; } }

/* COVER */
.vidro-cover { position:relative; aspect-ratio:19/9; overflow:hidden; border-radius:var(--radius); }
.vidro-cover img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.9s ease, filter 0.4s ease;
}
.vidro-card:hover img { transform:scale(1.08); filter:brightness(1.15); }

/* ===============================
   META LAYER
   =============================== */
.vidro-meta { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; }
.vidro-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background: linear-gradient(135deg, rgba(0,240,255,0.9), rgba(255,0,255,0.9));
  box-shadow: 0 0 20px rgba(0,240,255,0.6), 0 0 30px rgba(255,0,255,0.4);
  opacity:0.9;
  transition: transform 0.22s ease, box-shadow 0.22s;
}


.vidro-play svg {
  width:24px;   /* reduced to match smaller button */
  height:24px;
  fill:#fff;
  transform:translateX(2px);
}

.vidro-name {
  position:absolute; bottom:14px; left:14px; right:14px;
  font-weight:900;
  font-size:clamp(15px,2vw,22px);
  color:#fff;
  background:linear-gradient(90deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  padding:8px 12px;
  border-radius:10px;
  text-overflow:ellipsis;
  white-space:nowrap; overflow:hidden;
  text-shadow:0 0 6px rgba(0,0,0,0.95);
}

@media (max-width: 900px) {
  .vidro-name {
    bottom: 12px;       /* default offset for small screens */
    transform: translateY(10px); /* push title down a bit */
  }
}

.vidro-rating {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 4px 12px;
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;       /* spacing between star+IMDb and number */
  color: #fff;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.2);
}

.vidro-rating::after {
  content: "IMDb";  /* star only */
  color: #ffcc00;
  margin-right: 4px; /* space between star and IMDb */
}

.vidro-rating::before {
  content: "\2605";    /* text after star */
  color: #ffcc00;    /* same color or change to white if preferred */
  margin-right: 4px; /* space between IMDb and rating number */
}

/* ===============================
   NAV ARROWS
   =============================== */
.vidro-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(20,20,25,0.65);
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  cursor:pointer; z-index:4;
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, transform 0.25s ease;
}
.vidro-arrow svg { width:20px; height:20px; fill:#fff; }
.vidro-arrow:hover { background:linear-gradient(135deg,var(--accentA),var(--accentB)); transform:scale(1.1); }
.vidro-arrow--left { left:14px; }
.vidro-arrow--right { right:14px; }