/* ===== Shortcode Vídeos Colon – svc-styles.css ===== */

/* CONTÊINER PRINCIPAL (grid + carrossel) */
.videos-shortcode{
  width:100%;
  max-width:1100px;               /* limite no desktop */
  margin:0 auto;
  position:relative;
  box-sizing:border-box;
}

/* ─────────────────── CARROSSEL SWIPER ─────────────────── */
/* DESKTOP / TABLET ≥ 768 px */
@media (min-width:768px){
  .swiper{
    width:100%;
    margin:0 auto;
    padding:0 120px;              /* 120 px (60 px a cada lado) → setas */
    box-sizing:border-box;
    overflow:hidden;              /* corta slide seguinte                */
  }
}
/* MOBILE / TABLET < 768 px */
@media (max-width:767px){
  .swiper{
    width:92%;
    margin:0 auto;
    padding:0 48px;               /* 48 px (24 px a cada lado) p/ setas  */
    box-sizing:border-box;
    overflow:hidden;
  }
}

.swiper-wrapper{ box-sizing:border-box; }

/* SLIDE – flex para centrar o card */
.swiper-slide{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:transparent;
  margin:0;                       /* gap = spaceBetween no JS           */
}

/* ──────────── CARD / VÍDEO ──────────── */
@media (min-width:768px){         /* desktop */
  .video-item{
    max-width:250px;              /* vídeo mais estreito */
    width:auto;
    margin:0 auto;
  }
}
@media (max-width:767px){         /* mobile */
  .video-item{
    max-width:90%;                /* ocupa 90 % do slide, centralizado  */
    margin:0 auto;
  }
}

.video-item h3{
  margin:10px 0 8px;
  font-size:1.05rem;
  font-weight:600;
  color:#4F3284;
}
.video-frame{
  position:relative;
  padding:160% 0 0 0;             /* 9:16 mais baixo */
  border-radius:10px;
  overflow:hidden;
}
.video-frame iframe{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  border:0;background:#000;border-radius:10px;
}

/* BOTÃO */
.video-btn{
  display:inline-block;
  margin:14px auto 0;
  padding:10px 22px;
  background:#4F3284;
  color:#fff;
  border-radius:4px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:.9rem;
  transition:background .2s;
}
.video-btn:hover{ background:#22143b; }

/* ──────────── SETAS Swiper ──────────── */
.swiper-button-prev,
.swiper-button-next{
  position:absolute;
  top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:#ffb6b6;color:#6f53a4;font-size:1.4rem;
  border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
  opacity:.9;transition:opacity .15s;
}
/* Desktop / tablet largo */
@media (min-width:768px){
  .swiper-button-prev{ left:24px; }
  .swiper-button-next{ right:24px; }
}
/* Mobile / tablet pequeno */
@media (max-width:767px){
  .swiper-button-prev{ left:0; }
  .swiper-button-next{ right:0; }
}
.swiper-button-prev:hover,
.swiper-button-next:hover{ opacity:1;background:#f7a09d; }
.swiper-button-prev:after,
.swiper-button-next:after{ font-size:1.4rem;color:#000; }
.swiper-button-disabled{ opacity:0!important;pointer-events:none; }

/* ─────────────────── GRID (sem carrossel) ────────────────── */
.videos-shortcode--grid{
  display:grid;
  gap:24px;
  justify-items:center;
}
@media (min-width:769px){
  .videos-shortcode--grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .videos-shortcode--grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:479px){
  .videos-shortcode--grid{ grid-template-columns:1fr; }
}