/* Promo banner — la tarjeta-enlace de promoción del home (y de la previa del
 * partido para los sorteos): icono + antetítulo + título + subtítulo, con una
 * identidad por VARIANTE:
 *   · `--biwenger`  Liga oficial Feeberse Score en Biwenger (rojo, copa, enlace externo)
 *   · `--ucl`       Champions League Premium (azul noche, abre el modal del código)
 *   · `--raffle`    sorteo de partido (components/raffle/_match_raffle_banner),
 *                    con un selector por sorteo para sus colores (`--sud26-boca-…`,
 *                    `--lpf26-river-…`)
 * La base solo pone la caja; los colores son de cada variante. Nació como banner
 * de Biwenger y se renombró el 2026-09-14 al ganar la segunda y tercera identidad.
 * CSS global (app.js) → sin FOUC.
 */
@layer components {
  .promo-banner {
    --promo-icon: 44px;
    --promo-arrow: 28px;

    position: relative;
    display: block;
    /* Mismo gutter horizontal que respira el feed y el rail de la Porra
       (`--space-3` a cada lado): sin él la tarjeta llega a los bordes de la
       pantalla mientras el resto del contenido va inset ("se sale por los
       lados"). Bloque → el margen recorta el ancho, no hay overflow. */
    margin: var(--space-1) var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    /* Fondo neutro de respaldo: la identidad (degradado, sombra) la pone cada
       variante (`--biwenger`, `--ucl`, `--raffle`). */
    background: var(--color-surface);
    text-decoration: none;
    font-family: var(--font-body);
  }

  .promo-banner[hidden] { display: none; }

  /* Textura de rejilla diagonal (decorativa), igual idioma que el banner Porra. */
  .promo-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 18L18 0' stroke='%23fff' stroke-width='.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 18px 18px;
    pointer-events: none;
  }

  .promo-banner:active { transform: scale(0.985); }

  @media (prefers-reduced-motion: reduce) {
    .promo-banner:active { transform: none; }
  }

  .promo-banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--promo-icon) 1fr var(--promo-arrow);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }

  /* Disco del icono: blanco translúcido, para que la copa dorada respire sobre
     el rojo sin tocar el fondo directamente. */
  .promo-banner__icon {
    inline-size: var(--promo-icon);
    block-size: var(--promo-icon);
    border-radius: 50%;
    background: rgb(255 255 255 / 16%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

  .promo-banner__icon svg { inline-size: 26px; block-size: 26px; }

  .promo-banner__text { min-width: 0; }

  .promo-banner__eyebrow {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 82%);
    margin-block-end: 2px;
  }

  .promo-banner__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .promo-banner__subtitle {
    margin: 2px 0 0;
    font-size: 0.78rem;
    line-height: 1.2;
    color: rgb(255 255 255 / 90%);
  }

  /* Disco BLANCO sólido + chevron rojo: se lee tanto sobre el rojo como sobre el
     lavado blanco de la esquina, y remata el juego rojo/blanco. */
  .promo-banner__arrow {
    inline-size: var(--promo-arrow);
    block-size: var(--promo-arrow);
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: var(--color-surface);
  }

  .promo-banner__arrow svg { inline-size: 15px; block-size: 15px; }

  @media (hover: hover) {
    .promo-banner:hover .promo-banner__arrow { transform: translateX(1px); }
  }

  /* Variante Biwenger — rojo Biwenger con un lavado BLANCO en degradado desde la
     esquina inferior derecha, lejos del icono y del texto, para que el blanco del
     copy siga pasando AA. El brillo se apaga al 58% del radio. */
  .promo-banner--biwenger {
    background:
      radial-gradient(135% 135% at 100% 100%, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0%) 58%),
      linear-gradient(115deg, #e2001a 0%, #c30016 45%, #9c0012 100%);
    box-shadow: 0 6px 18px rgb(156 0 18 / 32%);
  }

  /* Disco BLANCO + chevron rojo: se lee tanto sobre el rojo como sobre el lavado. */
  .promo-banner--biwenger .promo-banner__arrow {
    color: #e2001a;
    box-shadow: 0 2px 6px rgb(120 0 14 / 28%);
  }

  @media (hover: hover) {
    .promo-banner--biwenger:hover { box-shadow: 0 8px 22px rgb(156 0 18 / 42%); }
  }
}

@layer components {
  /* Variante Champions League Premium — misma caja, otra identidad.
   *
   * Los colores viven AQUÍ y no en `tokens.css` a propósito: ese fichero es
   * GENERADO por `bin/sync-design-tokens` desde DESIGN.md, y hoy tiene 33 líneas
   * añadidas a mano que el puente no conoce (weight-extrabold, la paleta
   * Albiceleste, bottom-nav-clearance, z-sticky, focus-ring…). Regenerarlo las
   * borra. La paleta `ucl-` SÍ está declarada en DESIGN.md y el bridge ya la
   * emite, así que el día que se reconcilie esa deriva basta sustituir estos
   * tres literales por `var(--color-ucl-*)` y borrar el bloque.
   *
   * Azul noche de la competición en vez del rojo Biwenger: la promo es de la
   * Champions y tiene que leerse como tal antes de leer una palabra.
   */
  .promo-banner--ucl {
    --ucl-navy: #0a1a4f;
    --ucl-blue: #123a94;
    --ucl-star: #7cc0ff;

    /* El lavado va desde la esquina inferior derecha, lejos del icono y del
       bloque de texto, para que el copy blanco siga pasando AA sobre el azul.
       Mismo criterio que el rojo original. */
    background:
      radial-gradient(135% 135% at 100% 100%, rgb(124 192 255 / 34%) 0%, rgb(124 192 255 / 0%) 60%),
      linear-gradient(115deg, var(--ucl-blue) 0%, var(--ucl-navy) 55%, #050f30 100%);
    box-shadow: 0 6px 18px rgb(10 26 79 / 42%);

    /* `<button>` y no `<a>`: la promo no lleva a ningún sitio, levanta el modal.
       Hay que devolverle la caja que el user-agent le quita.

       El ancho NO puede ser `auto`: un botón hace shrink-to-fit aunque se le
       ponga `display: block`, así que se encogía al ancho de su texto — y cuanto
       más corto el copy, más estrecha la tarjeta. La base lo daba por hecho
       porque era un `<a>`, que sí se estira. `calc()` sobre el 100% del
       contenedor, descontando los dos márgenes laterales que hereda de la base,
       reproduce exactamente la caja del enlace original. */
    box-sizing: border-box;
    inline-size: calc(100% - (2 * var(--space-3)));
    border: 0;
    padding: 0;
    text-align: start;
    font: inherit;
    cursor: pointer;
    appearance: none;
  }

  /* El escudo llega como PNG del proveedor, no como SVG inline: el disco lo
     recorta y el contenedor le da el aire. Sin `border-radius` propio — es un
     escudo de competición, y esos nunca van redondeados. */
  .promo-banner--ucl .promo-banner__icon {
    background: rgb(255 255 255 / 92%);
  }

  .promo-banner--ucl .promo-banner__icon img {
    inline-size: 28px;
    block-size: 28px;
    object-fit: contain;
  }

  /* El chevron y su sombra en azul. Cuando la base ERA el banner de Biwenger su
     rojo vivía en reglas sin modificador y aquí se repintaba; desde que el rojo
     es de `--biwenger` la base es neutra, pero la variante sigue fijando los
     suyos para no depender del color por defecto. */
  .promo-banner--ucl .promo-banner__arrow {
    color: var(--ucl-blue);
    box-shadow: 0 2px 6px rgb(10 26 79 / 30%);
  }

  @media (hover: hover) {
    .promo-banner--ucl:hover { box-shadow: 0 8px 22px rgb(10 26 79 / 52%); }
  }
}

@layer components {
  /* Variante SORTEO DE PARTIDO (components/raffle/_match_raffle_banner) — la misma
   * caja, SIN chevron ni botón (PO, 2026-09-14): el subtítulo tiene que caber en
   * una línea a 360 px, y con botón caía en dos o tres. Toda la tarjeta es el
   * enlace a la grada.
   *
   * Los colores van por sorteo en tres variables y NADA más: el club manda el
   * fondo (`--raffle-main`/`--raffle-dark`) y su color secundario el brillo de la
   * esquina (`--raffle-accent`). El default es el de Boca, que fue el primero.
   * Un sorteo nuevo son tres líneas en su propio selector: mientras el acento
   * estuvo cosido al gradiente, cambiar de club obligaba a reescribirlo entero.
   *
   * Para el fondo va SIEMPRE el color oscuro del club, aunque su camiseta sea
   * clara: el texto del banner es blanco y sobre el blanco de River no se leería.
   * El color claro se lleva al icono, que es donde se reconoce la camiseta.
   */
  .promo-banner--raffle {
    --raffle-dark: #062a6b;
    --raffle-main: #0b3b8f;
    --raffle-accent: 246 197 43;

    background:
      radial-gradient(135% 135% at 100% 100%, rgb(var(--raffle-accent) / 30%) 0%, rgb(var(--raffle-accent) / 0%) 58%),
      linear-gradient(115deg, var(--raffle-main) 0%, var(--raffle-dark) 60%, #041a45 100%);
    box-shadow: 0 6px 18px rgb(6 42 107 / 40%);
  }

  /* River: rojo de la banda al fondo y blanco al brillo — el reverso de Boca, que
     lleva el azul al fondo y el oro al brillo. */
  .promo-banner--lpf26-river-camiseta {
    --raffle-dark: #7d0a1d;
    --raffle-main: #c8102e;
    --raffle-accent: 255 255 255;

    background:
      radial-gradient(135% 135% at 100% 100%, rgb(var(--raffle-accent) / 26%) 0%, rgb(var(--raffle-accent) / 0%) 58%),
      linear-gradient(115deg, var(--raffle-main) 0%, var(--raffle-dark) 60%, #4d0512 100%);
    box-shadow: 0 6px 18px rgb(125 10 29 / 42%);
  }

  /* Icono + texto: sin tercera columna, el texto gana el ancho del chevron. Icono,
     relleno y hueco algo más prietos que la base: el subtítulo («Comentá en el San
     Pablo–Boca y participás») pide 250 px y a 360 px la tarjeta de la previa le
     dejaba 244 — caía en dos líneas, y en la home cabía sin un píxel de margen. */
  .promo-banner--raffle {
    --promo-icon: 40px;
  }

  .promo-banner--raffle .promo-banner__inner {
    grid-template-columns: var(--promo-icon) 1fr;
    gap: 10px;
    padding-inline: 10px;
  }

  /* Dentro del rail la tarjeta ya no ocupa el ancho entero (deja asomar la
     siguiente), y el subtítulo perdía ~55 px: a 360 px se quedaba en 195 y caía en
     dos líneas incluso el corto. Medido, no estimado. Se recuperan apretando lo
     que no es texto —icono, hueco y relleno—, que es lo único que sobra en una
     tarjeta de una sola línea. */
  .promo-rail__item .promo-banner--raffle {
    --promo-icon: 32px;
  }

  .promo-rail__item .promo-banner--raffle .promo-banner__inner {
    gap: 8px;
    padding-inline: 8px;
  }

  .promo-rail__item .promo-banner--raffle .promo-banner__icon svg {
    inline-size: 24px;
    block-size: 24px;
  }

  .promo-banner--raffle .promo-banner__icon svg {
    inline-size: 28px;
    block-size: 28px;
  }

  @media (hover: hover) {
    .promo-banner--raffle:hover { box-shadow: 0 8px 22px rgb(6 42 107 / 52%); }
    .promo-banner--lpf26-river-camiseta:hover { box-shadow: 0 8px 22px rgb(125 10 29 / 54%); }
  }

  /* Dentro de la previa del partido el contenedor ya pone el aire lateral: sin
     márgenes horizontales propios y con la misma separación que las tarjetas. */
  .promo-banner--in-match {
    margin: 0 0 var(--card-gap);
  }
}