/* Home grid layout — no sliders */
/* Section spacing */
.section{padding: 14px 0 8px;}
.section .container{max-width:1300px;margin:0 auto;padding:0 16px;}
.section h2{margin:0 0 12px;font-size:clamp(16px, 3.8vw, 22px);font-weight:700;color:#cfd3d8;}

/* Top 10 horizontal scroller (no autoplay, no slider lib) */
.top10-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
.top10{display:flex; gap:12px; padding:4px 2px 8px; list-style:none; margin:0;}
.top10 li{position:relative; flex:0 0 auto; width: clamp(220px, 75vw, 320px); height: clamp(120px, 36vw, 160px); border-radius:18px; overflow:hidden; background:#0e1014; box-shadow:0 10px 30px rgba(0,0,0,.45);}
.top10 li a{display:block; width:100%; height:100%;}
.top10 img{width:100%; height:100%; object-fit:cover; display:block; border-radius:18px;}
.top10 .rank{position:absolute; left:10px; top:50%; transform:translateY(-50%); font-weight:900; font-size: clamp(54px, 28vw, 110px); color:rgba(255,255,255,.06); line-height:1; pointer-events:none;}

/* Poster grid (Lançamentos/Novidades) */
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;}
@media (min-width:700px){ .grid{grid-template-columns: repeat(4, 1fr);} }
@media (min-width:1024px){ .grid{grid-template-columns: repeat(6, 1fr);} }
.card{position:relative; background:#0e1014; border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.45);}
.card a{display:block;}
.card img{width:100%; height:100%; display:block; aspect-ratio: 2/3; object-fit:cover;}
.card .shadow{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%);}
.card > a > .title{position:absolute; left:10px; bottom:10px; right:10px; font-size:12px; color:#f5f7fa; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* "Ver todos" inline link */
.section .row-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.section .more{font-size:13px; color:#9aa3ab; text-decoration:none;}
.section .more:hover{color:#cfd3d8;}

body{background:#0b0e12;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;}



/* === OVERRIDE: Row-head styled like OneFlix (grey plate + blue button) === */
.section .row-head{
  background:#1f1f1f;
  border:1px solid #2a2a2a;
  border-radius:10px;
  padding:12px 14px;
  margin:18px 0 12px;
}
.section .row-head h2{
  margin:0; padding-left:14px; position:relative; color:#fff;
  font-weight:800; font-size:clamp(18px, 4vw, 22px);
}
.section .row-head h2::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:6px;
  background:#3b82f6 !important; border-radius:3px;
}
.section .more{
  background:#3b82f6 !important; color:#fff !important; font-weight:800;
  text-transform:uppercase; letter-spacing:.2px;
  font-size:.78rem; line-height:1; padding:.5rem .85rem;
  border-radius:8px; display:inline-flex; align-items:center; gap:.45rem;
  box-shadow:0 2px 6px rgba(0,0,0,.25); text-decoration:none !important;
}
.section .more:hover{ filter:brightness(1.05); }


/* === Card info bar (nome + nota + ano) abaixo da imagem === */
.card .card-info{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 12px 12px;
  background:#0f1217;
  border-top:1px solid rgba(255,255,255,.05);
}
.card .card-info .ci-title{position:static;font-weight:800;color:#fff;font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.card .card-info .meta-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#cfd3d8;flex-wrap:wrap;}
.card .card-info .badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; border-radius:999px; background:#1b1f2a; color:#fff; font-weight:800;
}
.card .card-info .badge::before{ content:"★"; font-weight:900; }
.card .card-info .year{opacity:.9}

/* === Card info bar (nome + nota + ano) abaixo da imagem === */
.card .card-info{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 12px 12px;
  background:#0f1217;
  border-top:1px solid rgba(255,255,255,.05);
}
.card .card-info .ci-title{position:static;font-weight:800;color:#fff;font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.card .card-info .meta-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#cfd3d8;flex-wrap:wrap;}
.card .card-info .rating-pill{position:static;display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;background:#1b1f2a;color:#fff;font-weight:800;line-height:1;}
.card .card-info .rating-pill::before{ content:"★"; font-weight:900; }
.card .card-info .year{opacity:.9}

@media (max-width:520px){.card .card-info .ci-title{font-size:12px}}

@media (max-width:520px){.grid{gap:10px}}