/* CSS | salve como: css-videos.css */
/* Escopo isolado: prefixo .vf- para não interferir no seu layout */
.vf-videos{max-width:1200px;margin:0 auto 40px;padding:0 16px;color:#e8eef9}
.vf-videos__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0}
.vf-videos__head h3{margin:0;font-size:clamp(18px,3vw,26px)}
.vf-videos__hint{margin:0;color:#90a0b7;font-size:14px}

.vf-videos__grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.vf-card{
  position:relative;border-radius:16px;overflow:hidden;background:#161a22;
  border:1px solid #1f2430;cursor:pointer;isolation:isolate;
}
.vf-card__thumb{
  width:100%;aspect-ratio:16/9;background:#0b0e13 center/cover no-repeat;
  transition:transform .2s ease;
}
.vf-card:hover .vf-card__thumb{transform:scale(1.02)}
.vf-card__title{padding:10px 12px;font-weight:600;font-size:14px;border-top:1px solid #1f2430}
.vf-card__badge{
  position:absolute;top:8px;left:8px;padding:4px 8px;font-size:12px;color:#fff;
  background:rgba(0,0,0,.5);border-radius:999px;backdrop-filter:blur(2px);
}
.vf-card__play{position:absolute;inset:0;display:grid;place-items:center}
.vf-card__play svg{width:60px;height:60px;opacity:.9;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.vf-card:focus-visible{outline:3px solid #3b82f6;outline-offset:2px}

/* Modal */
.vf-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:1000;padding:16px}
.vf-modal.open{display:flex}
.vf-modal__inner{
  width:min(90vw, 800px);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.6);position:relative;
}
.vf-modal__inner video{width:100%;height:100%;display:block;background:#000}
.vf-modal__close{
  position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;border:0;
  border-radius:10px;padding:8px 10px;cursor:pointer;font-size:14px;
}
.vf-modal__close:focus-visible{outline:3px solid #3b82f6}



/* ==== Cabeçalho da galeria de vídeos: centralizar e empilhar ==== */
.vf-videos__head{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 8px;
}

/* Título principal com emojis */
.vf-videos__head h1{
  margin: 10px 0 4px;
  color: yellow;
  font-weight: 700;
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* espaço entre texto e emojis */
}

/* Ajuste do tamanho dos emojis do título */
.vf-videos__head h1 img{
  height: 40px;
  margin: 6px 0 2px !important;    /* quase sem margem abaixo do h1 */
  line-height: 1.1;	
}

/* Subtítulo */
.vf-videos__head h2{
  margin: 0 0 10px !important;     /* encosta no h1, deixa só 0–10px abaixo */
  line-height: 1.1;
}