/* ==================================================================================================
   ZEPPELINI | VIDEOTECA E PODCAST
   Folha de estilo exclusiva do template page-videoteca.php
   Depende dos tokens (--bg, --fg, --primary, --line, --ff-display) definidos em zeppelini.css
   ================================================================================================== */

/* ---------- Hero / cabecalho da pagina ---------- */
.vt-hero .sec-head{ align-items:end; }
.vt-hero .desc{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }

.vt-spotify{
  display:inline-flex; align-items:center; gap:.7rem;
  background:#0a0708; color:#ffffff;
  border:1px solid #0a0708; border-radius:999px;
  padding:.9rem 1.5rem;
  font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.vt-spotify i{ font-size:20px; color:#1db954; transition:color .2s ease; }
.vt-spotify:hover{ background:#1db954; border-color:#1db954; color:#0a0708; transform:translateY(-1px); }
.vt-spotify:hover i{ color:#0a0708; }

/* ---------- Estrutura de duas colunas ---------- */
.vt-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(30px,3.6vw,60px);
  align-items:start;
}
@media (max-width:992px){
  .vt-layout{ grid-template-columns:1fr; gap:48px; }
}

/* ---------- Rotulos e datas ---------- */
.vt-label{
  font-family:var(--ff-body);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-3);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.vt-label .tag{ color:var(--primary); }
.vt-label .dotsep{ width:4px; height:4px; border-radius:50%; background:var(--fg-3); display:inline-block; }

/* ---------- Capa + botoes sobre a capa ---------- */
.vt-cover{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-2);
}
.vt-cover img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.vt-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.34) 100%);
  pointer-events:none;
}

.vt-actions{
  position:absolute; inset:0;
  display:grid; place-items:center;
  z-index:2;
}
.vt-pill{
  display:inline-flex; align-items:stretch;
  background:var(--primary);
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  transition:transform .15s ease;
}
.vt-pill:hover{ transform:translateY(-1px); }
.vt-pill > *{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:15px 26px;
  border:0; background:transparent;
  color:#0a0708; text-decoration:none;
  font-family:var(--ff-body);
  font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer;
  transition:background .18s ease;
}
.vt-pill > * + *{ box-shadow:inset 1px 0 0 rgba(0,0,0,.16); }
.vt-pill i{ font-size:20px; line-height:1; }
.vt-pill > *:hover{ background:var(--primary-2); color:#0a0708; }

/* ---------- Destaques (coluna da esquerda) ---------- */
.vt-feature + .vt-feature{ margin-top:clamp(34px,3.6vw,58px); }

.vt-feature .vt-tit{
  font-family:var(--ff-display) !important;
  text-transform:none !important;
  font-weight:600;
  letter-spacing:0;
  line-height:1.1;
  font-size:clamp(21px,1.8vw,28px);
  color:var(--fg);
  margin:18px 0 0;
  cursor:pointer;
  transition:color .18s ease;
  max-width:34ch;
}
.vt-feature .vt-tit:hover{ color:var(--primary); }
.vt-feature .vt-label{ margin-top:12px; }

/* ---------- Coluna da direita ---------- */
.vt-side{
  border-left:1px solid var(--line);
  padding-left:clamp(20px,2.2vw,34px);
}
@media (max-width:992px){
  .vt-side{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:34px; }
}
.vt-side-head{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-3);
  padding-bottom:18px; margin-bottom:26px;
  border-bottom:1px solid var(--line);
}

.vt-item{
  display:grid; grid-template-columns:132px minmax(0,1fr); gap:16px;
  align-items:start;
}
.vt-item + .vt-item{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line-soft); }

.vt-thumb{
  aspect-ratio:16/9;
  border-radius:8px; overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-2);
  cursor:pointer;
}
.vt-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.vt-item .vt-tit,
.vt-card .vt-tit{
  font-family:var(--ff-display) !important;
  text-transform:none !important;
  font-weight:600; letter-spacing:0; line-height:1.15;
  font-size:16.5px;
  color:var(--fg);
  margin:0 0 8px;
  cursor:pointer;
  transition:color .18s ease;
}
.vt-item .vt-tit:hover,
.vt-card .vt-tit:hover{ color:var(--primary); }

/* ---------- Links de acao (miniaturas) ---------- */
.vt-links{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:12px;
}
.vt-links a,
.vt-links button{
  display:inline-flex; align-items:center; gap:7px;
  border:0; background:transparent; padding:0;
  color:var(--fg-2); text-decoration:none;
  font-family:var(--ff-body);
  font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer;
  transition:color .18s ease;
}
.vt-links i{ color:var(--primary); font-size:14px; transition:color .18s ease; }
.vt-links a:hover, .vt-links button:hover{ color:var(--primary); }
.vt-links .sep{ width:1px; height:13px; background:var(--line); display:inline-block; }

/* ---------- Secao "todos os videos" ---------- */
.vt-all-head{
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:16px; text-align:center;
}
.vt-toggle{
  display:inline-flex; align-items:center; gap:.7rem;
  background:transparent; color:var(--fg);
  border:1px solid var(--line); border-radius:999px;
  padding:.85rem 1.6rem;
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s ease, border-color .2s ease, color .2s ease;
}
.vt-toggle:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
.vt-toggle .chev{ display:inline-block; transition:transform .2s ease; }
.vt-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.vt-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.2vw,32px);
  margin-top:clamp(40px,4vw,64px);
}
@media (max-width:1100px){ .vt-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){  .vt-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){  .vt-grid{ grid-template-columns:1fr; } }

.vt-card .vt-thumb{ margin-bottom:16px; }
.vt-card .vt-label{ margin-bottom:10px; }

.vt-collapse[hidden]{ display:none; }

/* ---------- Modal do player ---------- */
.vt-modal .modal-content{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.vt-modal .modal-header{
  border-bottom:1px solid var(--line);
  padding:18px 24px;
  align-items:flex-start; gap:18px;
}
.vt-modal .modal-title{
  font-family:var(--ff-display) !important;
  text-transform:none !important;
  font-weight:600; letter-spacing:0; line-height:1.15;
  font-size:clamp(18px,1.5vw,24px);
  color:var(--fg);
  margin:0;
}
.vt-modal .vt-modal-label{
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:6px;
}
.vt-modal .btn-close{
  filter:invert(1) grayscale(1) brightness(2.2);
  opacity:.75; margin:0;
}
.vt-modal .btn-close:hover{ opacity:1; }
.vt-modal .modal-body{ padding:24px; }
.vt-modal .vt-player{
  border-radius:10px; overflow:hidden; background:#000;
  border:1px solid var(--line);
}
.vt-modal .vt-player iframe{ border:0; width:100%; height:100%; }
.vt-modal .modal-footer{
  border-top:1px solid var(--line);
  padding:16px 24px;
  justify-content:flex-start;
}