/* ===== Página: Filme (Cine Super K) =====
   Paleta puxada do style principal:
   --bg, --bg-soft, --card, --text, --muted, --brand, --brand-2, --line, --radius, --shadow
*/
:root{
  --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent),
          0 0 0 6px color-mix(in srgb, var(--brand-2) 35%, transparent);
  --glass: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

/* ===== Layout geral ===== */
.filme-hero{
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  color:var(--text);
  padding:40px 0 66px;
  position:relative;
  overflow:hidden;
}
.filme-hero .container{
  /* container mais largo para o trailer grande */
  width:min(1520px, 94%);
  margin:0 auto;
}

/* ===== Topo: imagem + descrição (duas colunas no desktop) ===== */
.filme-top{ margin-top:12px; position:relative; z-index:1; }
@media (min-width: 992px){
  .filme-top{
    display:grid;
    grid-template-columns: 300px 1fr;   /* poster menor, conteúdo ganha espaço */
    gap:28px;
    align-items:start;
  }
}

/* Poster (menor) com glow da paleta */
.filme-poster{
  width:100%;
  max-width:300px;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:var(--radius);
  display:block;
  margin-inline:auto;
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255,255,255,.06);
  position:relative;
  isolation:isolate;
}
.filme-poster::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:calc(var(--radius) + 4px);
  background:
    radial-gradient(40% 60% at 25% 10%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 60%),
    radial-gradient(55% 75% at 80% 85%, color-mix(in srgb, var(--brand-2) 28%, transparent), transparent 65%);
  filter: blur(16px);
  z-index:-1;
}

/* Card do conteúdo com vidro + borda degradê (brand → brand-2) */
.info-card{
  position:relative;
  background:var(--glass);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 26px 22px;
  color:var(--text);
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.05);
}
.info-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:calc(var(--radius) + 2px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 65%, transparent), color-mix(in srgb, var(--brand-2) 65%, transparent));
  z-index:-1;
  filter: blur(10px);
  opacity:.22;
}

/* Título com glow na paleta */
.filme-titulo{
  font-weight:900;
  margin:0 0 .8rem 0;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2.2rem);
  text-shadow:
    0 0 14px color-mix(in srgb, var(--brand) 38%, transparent),
    0 0 6px  color-mix(in srgb, var(--brand-2) 30%, transparent);
}

/* Metadados em micro-pills */
.meta-list{
  list-style:none; padding:0; margin:0 0 .95rem 0; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:10px 16px;
}
.meta-list li{
  display:flex; align-items:center; gap:8px; margin:.15rem 0;
  padding:.35rem .65rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:999px;
}
.meta-list i{ opacity:.95; }
.meta-list strong{ color:#fff; font-weight:800; letter-spacing:.2px; }

/* ===== Classificação indicativa: cores oficiais (escopo só no chip) ===== */
.classificacao{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 .55rem; border-radius:10px;
  font-weight:800; letter-spacing:.2px; border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Livre (L) – verde */
.classificacao.bg-success{
  background:#39B54A;   /* verde “Livre” */
  color:#0b0d12;        /* texto escuro p/ contraste */
}

/* 10 – azul */
.classificacao.bg-info{
  background:#29B6F6;   /* azul 10 */
  color:#0b0d12;
}

/* 12 – amarelo */
.classificacao.bg-warning{
  background:#FFD600;   /* amarelo 12 */
  color:#0b0d12;
}

/* 14 – laranja */
.classificacao.bg-orange{
  background:#FF9800;   /* laranja 14 */
  color:#0b0d12;
}

/* 16 – vermelho */
.classificacao.bg-danger{
  background:#E53935;   /* vermelho 16 */
  color:#fff;
}

/* 18 – preto */
.classificacao.bg-dark{
  background:#000000;   /* preto 18 */
  color:#fff;
}

/* fallback (quando vier bg-secondary) */
.classificacao.bg-secondary{
  background:#6b7280;  /* cinza neutro */
  color:#fff;
}

/* fallback, se necessário */
.bg-orange{ background:#ffb55e!important; color:#0b0d12!important; }

/* Sinopse com separador sutil */
.sinopse-bloco{ margin-top:.65rem; }
.sinopse-titulo{
  font-weight:900; margin:0 0 .28rem 0; color:#fff; letter-spacing:.3px;
  text-shadow:0 0 8px color-mix(in srgb, var(--brand) 28%, transparent);
}
.sinopse-texto{
  color:var(--text); line-height:1.65;
  border-top:1px dashed var(--line); padding-top:.65rem;
}

/* ===== Seções (Dias, Sessões, Trailer) ===== */
.secao{ margin-top:36px; text-align:center; position:relative; z-index:1; }
.secao-titulo{
  display:inline-block; font-weight:900; color:#fff; margin-bottom:14px;
  letter-spacing:.5px; font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.5rem);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--brand) 40%, transparent),
    0 0 6px  color-mix(in srgb, var(--brand-2) 30%, transparent);
}

/* ===== Dias ===== */
.btns-dias{
  display:flex; gap:12px; overflow:auto; padding:8px 0 10px;
  justify-content:center; scroll-snap-type:x mandatory;
}
.btn-dia{
  scroll-snap-align:start;
  border-radius:999px;
  padding:.65rem 1.1rem;
  background:var(--bg-soft);
  color:var(--text);
  border:1px solid var(--line);
  white-space:nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-dia:hover{ transform: translateY(-1px); box-shadow: var(--ring); }
.btn-dia.ativo{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#0b0d12;
  border-color:transparent;
  box-shadow: var(--ring);
}

/* Aviso pill */
.pill-alert{
  display:inline-block; padding:.6rem 1.05rem; border-radius:999px;
  font-weight:800; margin-top:8px; background:linear-gradient(90deg,#ff7b93,#ff5876);
  color:#100f14; box-shadow:0 10px 26px rgba(0,0,0,.32);
}

/* ===== Sessões (pills premium) ===== */
.sessoes-container{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px;
}
.btn-sessao{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; padding:.7rem 1.15rem;
  background:linear-gradient(180deg, #0f121a, #0c0f16);
  color:var(--text); text-decoration:none;
  border:1px solid var(--line);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.btn-sessao:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow: 0 14px 30px rgba(0,0,0,.35), var(--ring);
  background:linear-gradient(180deg, #111624, #0e1422);
}
.btn-sessao .dot,.btn-sessao .sep{ opacity:.6; }

/* ===== Trailer no padrão YouTube (16:9) com altura de player ===== */

/* largura grande no desktop */
.trailer-container{
  width: 100%;
  max-width: 1720px;        /* aumente para 1800/1920 se quiser mais largo */
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}

/* mantém 16:9, mas dá ALTURA real no desktop */
.trailer-container.ratio{
  --bs-aspect-ratio: 56.25%;        /* 16:9 (padrão YouTube) */
  height: clamp(420px, 62vh, 720px); /* ↑ altura real: até 720p */
}

/* garante que o iframe ocupe 100% do box */
.trailer-container.ratio > iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* intermediários ainda altos */
@media (max-width: 1399.98px){
  .trailer-container{ max-width: 1400px; }
  .trailer-container.ratio{ height: clamp(380px, 58vh, 640px); } /* ~480–640p */
}

@media (max-width: 1199.98px){
  .trailer-container{ max-width: 1200px; }
  .trailer-container.ratio{ height: clamp(360px, 54vh, 560px); }
}

/* no mobile: 16:9 fluido ocupando a largura toda */
@media (max-width: 991.98px){
  .trailer-container{ max-width: 100%; }
  .trailer-container.ratio{
    height: auto;              /* volta a depender do 16:9 */
    --bs-aspect-ratio: 56.25%; /* mantém o formato do YouTube */
  }
}







/* ===== Responsivo ===== */
@media (max-width:1399.98px){
  .filme-hero .container{ width:min(1400px, 94%); }
  .trailer-box{ max-width:1480px; }
}
@media (max-width:1199.98px){
  .filme-hero .container{ width:min(1280px, 94%); }
  .trailer-box{ max-width:1280px; }
}
@media (max-width:991.98px){
  .filme-hero{ padding-top:24px; }
  .info-card{ padding:22px; }
  .filme-poster{ max-width:240px; }   /* poster menor no mobile */
  .trailer-box{ max-width:100%; }     /* ocupa toda a largura no mobile */
}



/* ===== Tarja "Lançamento" no poster ===== */
.poster-wrap{
  position: relative;
  display: inline-block;
}
.poster-wrap .filme-poster{ display:block; }

/* pill no canto superior esquerdo */
.badge-lancamento{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  padding:8px 14px;
  border-radius:999px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:.82rem;
  color:#0b0d12; /* contraste com o degradê */
  background:
    linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:
    0 8px 22px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

/* sutil brilho ao redor para destacar no poster */
.badge-lancamento::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius:999px;
  background:
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 60%),
    radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 70%);
  filter: blur(10px);
  z-index:-1;
}

/* ajuste em telas menores */
@media (max-width: 991.98px){
  .badge-lancamento{ top:10px; left:10px; padding:7px 12px; font-size:.78rem; }
}



/* =========================
   AJUSTES MOBILE (≤ 991.98px)
   ========================= */
@media (max-width: 991.98px){

  /* 1) Poster centralizado e levemente maior */
  .poster-wrap{
    display:grid;
    place-items:center;           /* garante centralização */
  }
  .filme-poster{
    max-width: 300px;             /* antes era 240px: +visível no celular */
    margin: 0 auto;
  }

  /* 2) Lista de dias: sem “corte” do 1º botão e rolagem suave */
  .btns-dias{
    padding: 8px 12px 10px;       /* padding lateral pra não cortar o 1º/último */
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 12px;    /* onde a rolagem “encaixa” o 1º item */
  }
  .btns-dias::-webkit-scrollbar{ height: 0 } /* oculta trilha no iOS/Android */
  .btns-dias::before,
  .btns-dias::after{
    content:"";
    flex:0 0 2px;                 /* micro-espacers pra garantir respiro */
  }
  .btns-dias .btn-dia{
    scroll-snap-align: start;
    flex: 0 0 auto;               /* impede compressão do botão */
    max-width: max-content;
  }

  /* 3) Trailer mais ALTO no mobile */
  /* Em vez de deixar "auto", aumentamos o aspect e forçamos uma altura mínima */
  .trailer-container{ max-width: 100%; }
  .trailer-container.ratio{
    --bs-aspect-ratio: 70%;       /* mais alto que 16:9 (56.25%) */
    min-height: 320px;            /* garante altura confortável em telas pequenas */
    height: clamp(340px, 48vh, 460px);
  }
  .trailer-container.ratio > iframe{
    width:100%; height:100%;
  }
}

/* Opcional: devices bem pequenos (≤ 380px) ganham um ajuste fino extra */
@media (max-width: 380px){
  .filme-poster{ max-width: 280px; }
  .trailer-container.ratio{
    --bs-aspect-ratio: 75%;
    min-height: 300px;
  }
}


/* =========================
   DIAS (AJUSTE MOBILE)
   ========================= */
@media (max-width: 991.98px){
  /* garante espaço interno nas laterais e rolagem suave */
  .btns-dias{
    box-sizing: content-box;                 /* padding conta no scroll */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 10px;
    padding: 8px 16px 10px;                  /* ↑ padding lateral evita cortar o 1º/último */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;               /* onde o snap “encaixa” o 1º */
    scroll-padding-right: 16px;
  }

  /* se tiver aqueles pseudo-spacers, desativa no mobile (podem empurrar o 1º botão) */
  .btns-dias::before,
  .btns-dias::after{ content: none !important; }

  /* impede qualquer margem herdada entre .btns */
  .btns-dias .btn-dia{
    flex: 0 0 auto;                          /* não comprimir */
    margin: 0 !important;                    /* zera margens herdadas (ex.: .btn + .btn do Bootstrap) */
    scroll-snap-align: start;
  }
  .btns-dias .btn-dia:first-child{
    margin-left: 0 !important;               /* garantia extra pro 1º botão */
  }
}


@media (max-width: 991.98px){
  /* Poster centralizado e levemente maior */
  .poster-wrap{ display:grid; place-items:center; }
  .filme-poster{ max-width: 300px; margin: 0 auto; }

  /* Trailer mais alto no celular */
  .trailer-container{ max-width: 100%; }
  .trailer-container.ratio{
    --bs-aspect-ratio: 70%;
    min-height: 320px;
    height: clamp(340px, 48vh, 460px);
  }
  .trailer-container.ratio > iframe{ width:100%; height:100%; }
}

/* Devices muito pequenos */
@media (max-width: 380px){
  .filme-poster{ max-width: 280px; }
  .trailer-container.ratio{
    --bs-aspect-ratio: 75%;
    min-height: 300px;
  }
}


/* =========================
   CORREÇÃO DIAS (apenas mobile)
   ========================= */
@media (max-width: 991.98px){
  /* força alinhar à ESQUERDA mesmo com .justify-content-center do Bootstrap */
  #listaDias.btns-dias{ 
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;

    /* não deixa o primeiro/último cortar */
    padding: 8px 16px 10px;
    margin: 0;
    
    /* desativa snap (era o que jogava pro meio) */
    scroll-snap-type: none;
  }

  /* cada botão é item fixo, sem comprimir e sem margens herdadas */
  #listaDias .btn-dia{
    flex: 0 0 auto;
    margin: 0 !important;
  }

  /* se houver pseudo-spacers anteriores, anulamos */
  #listaDias::before,
  #listaDias::after{
    content: none !important;
  }
}