/* Club Sud América — Home Mobile Polish
   - Spotlight copy/CTA support
   - Hide redundant quick-access cards on mobile
   - Horizontal snap carousel for home sports widgets on mobile
*/

@media (max-width: 768px) {
  /* La bottom nav ya cubre estos accesos en mobile. */
  .clubHub__utility {
    display: none !important;
  }

  /* Carrusel deportivo mobile */
  .sportsWidgets {
    width: auto !important;

    display: flex !important;
    grid-template-columns: none !important;

    gap: 12px !important;

    margin: 16px -16px 28px !important;
    padding: 0 16px 6px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }

  .sportsWidgets::-webkit-scrollbar {
    display: none;
  }

  /* Cada card deja ver una parte de la siguiente */
  .sportsWidget,
  .sportsWidget--today {
    flex: 0 0 78vw !important;
    width: 78vw !important;
    max-width: 310px !important;
    min-width: 0 !important;

    margin: 0 !important;

    scroll-snap-align: start;
    scroll-snap-stop: normal;

    align-self: stretch;
  }

  /* En mobile no necesitamos animación hover */
  .sportsWidget:hover,
  .sportsWidget--today:hover {
    transform: none;
  }

  /* Orden mobile:
     1. Hoy en Sud América
     2. Últimos resultados
     3. Próximos partidos
  */
  .sportsWidgets > .sportsWidget--today {
    order: 1;
  }

  .sportsWidgets > .sportsWidget:nth-child(1) {
    order: 2;
  }

  .sportsWidgets > .sportsWidget:nth-child(2) {
    order: 3;

    /* Esta sí es la última card VISUAL del carrusel */
    margin-right: 16px !important;
  }
}

@media (max-width: 390px) {
  .sportsWidget,
  .sportsWidget--today {
    flex-basis: 78vw !important;
    width: 78vw !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sportsWidgets {
    scroll-behavior: auto;
  }
}

/* =========================================================
   SPORTS CAROUSEL · MOBILE REVEAL FIX
   ---------------------------------------------------------
   Las sportsWidget forman un carrusel horizontal en mobile.
   ui2-motion.js las observa individualmente y las cards que
   arrancan fuera del viewport pueden permanecer ocultas hasta
   que ocurre un scroll vertical.

   En mobile forzamos su estado visible desde el primer render.
   Desktop conserva el reveal original.
   ========================================================= */

@media (max-width: 768px) {
  .ui2-motion-enabled .sportsWidgets .sportsWidget,
  .ui2-motion-enabled .sportsWidgets .sportsWidget.ui2-reveal,
  .ui2-motion-enabled .sportsWidgets .sportsWidget.ui2-reveal.is-visible,
  .ui2-motion-enabled .sportsWidgets .sportsWidget--today,
  .ui2-motion-enabled .sportsWidgets .sportsWidget--today.ui2-reveal,
  .ui2-motion-enabled .sportsWidgets .sportsWidget--today.ui2-reveal.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition-delay: 0ms !important;
  }
}