/* Rail horizontal de banners de promo.
 *
 * El contenedor, NO las tarjetas: qué se mete dentro lo decide cada superficie
 * (las de la Porra en `porra-banner.css`, las de un sorteo de partido en
 * `promo-banner.css`). Por eso vive aparte — nació dentro del fichero de la
 * Porra y el nombre mentía en cuanto lo usó algo que no era la Porra, que es lo
 * que pasó al convivir dos sorteos de partido en la home.
 *
 *   .promo-rail            contenedor scrollable (patrón `.mh-rail`)
 *   .promo-rail__item      slot de una tarjeta (peek del siguiente si hay 2+)
 *   .promo-rail--single    un único banner → ancho completo, sin peek
 */

@layer components {
  /* ─── Rail horizontal ───
   * Mismo patrón que `.mh-rail` (resúmenes de YouTube en la vista competición):
   * flex + scroll-snap + scrollbar oculta. Con un solo banner ocupa el ancho
   * completo; a partir del segundo el item se queda corto para que asome el
   * siguiente y se lea como carrusel, sin flechas ni JS de scroll. */
  .promo-rail {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-3) var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;

    /* Sin esto el item snapeado se pega al borde del viewport del scroller y
       se come el padding lateral: el snap tiene que alinear con el MISMO
       margen que respira el resto del feed. */
    scroll-padding-inline: var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* El rail se desplaza en horizontal dentro de una página que scrollea en
       vertical: declararlo evita que el navegador tenga que esperar al JS para
       decidir la dirección del gesto. */
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
  }

  .promo-rail::-webkit-scrollbar {
    display: none;
  }

  /* `display:flex` gana al `[hidden]` del UA, así que hay que fijarlo (mismo
     gotcha que .match-list-empty[hidden]). El rail nace [hidden] y lo revela
     el controller porra-banner on connect (solo el rail de la Porra). */
  .promo-rail[hidden] {
    display: none;
  }

  /* 86% deja ~45px del siguiente a 390px: suficiente para que se lea "hay más"
     de un vistazo (a 88% se quedaba en 32px, más ambiguo que invitador). */
  .promo-rail__item {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  /* Un único banner → sin peek, ancho completo (como antes del rail). */
  .promo-rail--single .promo-rail__item {
    flex-basis: 100%;
  }

  /* Tablet: la tarjeta ya no necesita casi todo el ancho, pero mantener peek
     evita que el segundo banner quede escondido sin pista alguna. */
  @media (width >= 600px) {
    .promo-rail__item {
      flex-basis: 58%;
    }
  }

  /* Escritorio: dos tarjetas completas en la columna central, sin scroll. */
  @media (width >= 900px) {
    .promo-rail__item {
      flex-basis: calc(50% - var(--space-3) / 2);
    }
  }
}