/* =========================================================
   HERO CAROUSEL (Base Sports) — /assets/css/hero.css
   - Layout general del héroe
   - Overlay
   - Indicadores "barritas"
   - Controles (flechas)
   - Ajustes responsivos (más margen lateral y mínima reducción de texto)
   ========================================================= */

/* Wrapper base */
.bs-hero {
  position: relative;
  min-height: var(--hero-min-height, 60vh);
  isolation: isolate; /* asegura que el overlay no afecte otros z-index */
  /* Zona segura lateral para que el texto no choque con las flechas */
  --bs-hero-safe-edge: 24px; /* desktop por defecto */
}

/* Aseguramos que el carrusel ocupe toda la altura */
.bs-hero .carousel,
.bs-hero .carousel-inner,
.bs-hero .carousel-item {
  height: 100%;
}

/* Imagen de fondo dentro de cada slide */
.bs-hero .carousel-item picture,
.bs-hero .carousel-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Overlay global del héroe (enable/disable desde el include) */
.bs-hero .hero-overlay {
  pointer-events: none; /* el overlay nunca bloquea clics */
  z-index: 1;
}

/* Contenido textual del héroe por encima del overlay */
.bs-hero .container {
  position: relative;
  z-index: 2; /* por debajo de las flechas, pero con zona segura lateral */
  padding-left: calc(1.5rem + var(--bs-hero-safe-edge));
  padding-right: calc(1.5rem + var(--bs-hero-safe-edge));
}

/* -----------------------------
   Indicadores - variante "bars"
   ----------------------------- */

.bs-hero .carousel-indicators {
  margin: 0;
  gap: .5rem;
  padding: 0 1rem;
  bottom: 1.25rem; /* ligeramente más arriba para no pisar el borde */
}

.bs-hero .carousel-indicators[data-variant="bars"] button {
  width: 60px;
  height: 6px;
  border: 0;
  margin: 0;
  background-color: rgba(255, 255, 255, .45);
  opacity: 1; /* controlamos el estado por color, no por opacity bootstrap */
  border-radius: 999px;
  transition: background-color .25s ease, transform .25s ease;
  position: relative;
  overflow: hidden; /* para la barrita de progreso */
}

/* Estado activo: barra llena */
.bs-hero .carousel-indicators[data-variant="bars"] button.active {
  background-color: rgba(255, 255, 255, .95);
}

/* Accesibilidad: hover/focus visibles */
.bs-hero .carousel-indicators[data-variant="bars"] button:hover,
.bs-hero .carousel-indicators[data-variant="bars"] button:focus-visible {
  background-color: rgba(255, 255, 255, .8);
  outline: none;
  transform: translateY(-1px);
}

/* Preparado para "progreso" (lo activamos con JS agregando .is-progress) */
.bs-hero .carousel-indicators[data-variant="bars"] button::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background-color: #fff;
  border-radius: inherit;
  transform-origin: left center;
}

/* Animación de progreso (el JS setea la duración para que coincida con el interval) */
@keyframes bs-hero-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Cuando el botón activo tenga la clase .is-progress, corre la animación */
.bs-hero .carousel-indicators[data-variant="bars"] button.active.is-progress::after {
  animation: bs-hero-progress var(--bs-hero-interval, 5s) linear forwards;
}

/* Variante "dots" (por si la usás en otra página) */
.bs-hero .carousel-indicators[data-variant="dots"] button {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background-color: rgba(255,255,255,.6);
}
.bs-hero .carousel-indicators[data-variant="dots"] button.active {
  background-color: #fff;
}

/* -----------------------------
   Controles (flechas)
   ----------------------------- */

.bs-hero .carousel-control-prev,
.bs-hero .carousel-control-next {
  width: auto;
  padding: 0 .6rem;
  opacity: .95;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3; /* sobre overlay y por delante de la imagen */
}

.bs-hero .carousel-control-prev { left: 12px; }
.bs-hero .carousel-control-next { right: 12px; }

/* Mejor legibilidad de los íconos sobre fondos claros/variados */
.bs-hero .carousel-control-prev-icon,
.bs-hero .carousel-control-next-icon {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  width: 2rem;
  height: 2rem;
}

/* Estados de foco accesibles */
.bs-hero .carousel-control-prev:focus-visible,
.bs-hero .carousel-control-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* -----------------------------
   Ajustes tipográficos
   ----------------------------- */

.bs-hero h1,
.bs-hero .display-5 {
  text-wrap: balance;
}

.bs-hero p,
.bs-hero .lead {
  opacity: .95;
  text-wrap: pretty;
}

/* -----------------------------
   Responsivo
   ----------------------------- */

/* Laptops y tablets: un poco más de zona segura */
@media (max-width: 1199.98px) {
  .bs-hero { --bs-hero-safe-edge: 32px; }
  .bs-hero .carousel-indicators { bottom: 1rem; }
}

/* Tablets y phones: mucha zona segura y ajuste mínimo de tipografías */
@media (max-width: 767.98px) {
  .bs-hero { --bs-hero-safe-edge: 32px; } /* MÁS margen entre flechas y texto */

  /* Tipos apenas más chicos, sin clamp */
  .bs-hero h1,
  .bs-hero .display-5 {
    font-size: 2.5rem;      /* antes: ~2.25–2.5rem */
    line-height: 1.2;
  }
  .bs-hero .lead {
    font-size: 1.4rem; /* ~17px */
    line-height: 1.5;
  }

  /* Botones grandes un poco más compactos (sin achicar demasiado) */
  .bs-hero .btn-lg {
    padding: .6rem 1.1rem;
    font-size: 1.0625rem; /* ~17px */
    line-height: 1.2;
  }

  /* Flechas un toque más cerca del borde (más espacio al texto igualmente) */
  .bs-hero .carousel-control-prev { left: 4px; }
  .bs-hero .carousel-control-next { right: 4px; }
}

/* XS (teléfonos angostos) */
@media (max-width: 575.98px) {
  .bs-hero { --bs-hero-safe-edge: 32px; } /* todavía más margen entre flechas y contenido */

  .bs-hero .carousel-indicators[data-variant="bars"] button {
    width: 42px;
    height: 4px;
  }

  /* Si hace falta, se puede reducir apenas más el título */
  .bs-hero h1,
  .bs-hero .display-5 {
    font-size: 2.0rem;
  }
  .bs-hero .lead {
    font-size: 1.4rem;
  }

  .bs-hero .carousel-control-prev { left: 4px; }
  .bs-hero .carousel-control-next { right: 4px; }
}

/* Ultra-compacto (p. ej., 320–360px) */
@media (max-width: 360px) {
  .bs-hero h1,
  .bs-hero .display-5 { font-size: 1.8125rem; } /* ajuste muy leve */
  .bs-hero .lead { font-size: .9875rem; }
}