/* ================================================================
   galeria.css — Estilos del carrusel de galería (sección #videos)
   Cargado por lib_landing.php, sobreescribe videos-grid de styles.css
   ================================================================ */

/* ── Wrapper del carrusel ── */
.videos-carousel {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  margin-top: -130px;
  overflow: hidden;
}

/* ── Botones de navegación ── */
.videos-carousel__btn {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s, opacity .2s;
  color: #1a1a1a;
}
.videos-carousel__btn:hover {
  background: #5CC032;
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}
.videos-carousel__btn svg { pointer-events: none; }
.videos-carousel__btn:disabled { opacity: .25; cursor: default; pointer-events: none; }
.videos-carousel__btn--prev { left: 10px; }
.videos-carousel__btn--next { right: 10px; }

/* ── Track (sobreescribe el grid de styles.css) ── */
.videos-grid {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 22px;
  padding: 0 40px;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
  /* quita el posicionamiento full-width que ya maneja .videos-carousel */
  width: auto !important;
  position: static !important;
  left: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

/* ── Tarjeta: ancho fijo según breakpoint ── */
.video-card {
  flex: 0 0 calc((100vw - 146px) / 4); /* 4 visibles | 80px padding + 3×22px gap */
  min-width: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .videos-carousel { margin-top: -100px; }
  .video-card { flex: 0 0 calc((100vw - 102px) / 2); } /* 2 visibles */
}

@media (max-width: 768px) {
  .videos-carousel { margin-top: -70px; }
  .videos-grid { gap: 14px; padding: 0 20px; }
  .video-card { flex: 0 0 calc((100vw - 54px) / 2); } /* 2 visibles | 40px padding + 14px gap */
}

@media (max-width: 480px) {
  .video-card { flex: 0 0 calc(100vw - 40px); } /* 1 visible */
}