/* assets/css/coberturas.css */

/* ====== WRAPPER + CONTROLES ====== */

.rrtv-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rrtv-slide-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 900;
  font-size: 1.6rem;
  cursor: pointer;
  user-select: none;
}

.rrtv-slide-btn:hover {
  background: rgba(255, 255, 255, .10);
}

.rrtv-hint {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: .9rem;
}

/* ====== SLIDER: 1 FLYER POR VISTA ======
   (el scroll horizontal existe para cambiar de flyer,
    pero NO hay scroll interno dentro del flyer/iframe)
*/

.rrtv-slider {
  flex: 1;
  display: flex;
  gap: 0;
  /* 1 por vista, sin gaps que corten */
  overflow-x: auto;
  overflow-y: visible;
  /* CRITICO: Permitir crecer en movil 9:16 */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border-radius: 16px;
}

/* Ocultar scrollbar visual (sigue siendo scrollable) */
.rrtv-slider::-webkit-scrollbar {
  height: 0;
}

.rrtv-slider {
  scrollbar-width: none;
}

.rrtv-slider::-webkit-scrollbar-thumb {
  background: transparent;
}

.rrtv-slider-loading {
  color: #777;
  padding: 22px;
}

/* Cada ítem ocupa el 100% del viewport del slider */
.rrtv-slider>.rrtv-flyer,
.rrtv-slider>.rrtv-flyer-no-style {
  flex: 0 0 100%;
  scroll-snap-align: center;
  box-sizing: border-box;
  padding: 0;
}

/* ====== FLYER (CARD) ======
   El flyer es la “card”. Siempre 16:9.
*/

.rrtv-flyer {
  width: 100%;
  max-width: 1100px;
  /* centrado y prolijo en desktop */
  margin: 0 auto;

  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  /* clave para evitar barras/overflow */
  position: relative;
}

.rrtv-flyer-no-style {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

/* ====== MODO IMAGEN (hero_image) ====== */

.rrtv-flyer-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* medida única */
  background: #0e0e0e center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

.rrtv-flyer-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 214, 100, .18), transparent 55%),
    linear-gradient(to top, rgba(18, 18, 18, .92), rgba(18, 18, 18, .20));
}

/* ====== MODO HTML (flyer_html) ======
   Contenedor fluido + iframe (desktop 16:9, movil 9:16)
*/

.rrtv-flyer-html {
  width: 100%;
  background: #0e0e0e;
  overflow: hidden;
  position: relative;
}

.rrtv-flyer-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  overflow: hidden;
  /* por si el navegador lo respeta */
}

/* ====== INFO (si la dejás debajo) ====== */

.rrtv-flyer-body {
  padding: 14px 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rrtv-flyer-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: -0.3px;
  line-height: 1.15;
  margin: 0;
}

.rrtv-flyer-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-secondary);
  font-size: .9rem;
}

.rrtv-flyer-desc {
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  line-height: 1.45;
  margin: 0;
}

.rrtv-links {
  margin-top: auto;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.rrtv-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-weight: 900;
  font-size: .92rem;
  text-decoration: none;
}

.rrtv-link:hover {
  background: rgba(255, 255, 255, .10);
}

.rrtv-link.photos:hover {
  color: #1877F2;
  border-color: rgba(24, 119, 242, .45);
}

.rrtv-link.videos:hover {
  color: #FF0000;
  border-color: rgba(255, 0, 0, .35);
}

/* ====== THEMES (solo afectan overlay del modo imagen) ====== */

.rrtv-flyer[data-theme="clean"] .rrtv-flyer-hero::after {
  background: linear-gradient(to top, rgba(18, 18, 18, .92), rgba(18, 18, 18, .10));
}

.rrtv-flyer[data-theme="sport"] .rrtv-flyer-hero::after {
  background:
    radial-gradient(circle at 70% 30%, rgba(0, 242, 255, .14), transparent 55%),
    linear-gradient(to top, rgba(18, 18, 18, .92), rgba(18, 18, 18, .18));
}

/* ====== MOBILE ====== */

@media (max-width: 520px) {
  .rrtv-slide-btn {
    display: none;
  }

  .rrtv-flyer {
    max-width: 100%;
    border-radius: 14px;
  }
}