/* Biwenger banner — promo de la Liga oficial Feeberse Score en Biwenger Fantasy.
 *
 * Tarjeta-enlace del home (columna principal), independiente del rail de la
 * Porra (que caduca por campaña). Rojo/blanco de Biwenger + copa dorada +
 * título/subtítulo. Enlace EXTERNO (abre Biwenger en pestaña nueva).
 *
 * Ships [hidden]; el controller `biwenger-banner` importa esta hoja (vía JS,
 * AssetMapper) y revela on connect para evitar el flash sin estilo.
 */
@layer components {
  .biwenger-banner {
    --biw-icon: 44px;
    --biw-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;
    /* Rojo Biwenger con un lavado BLANCO en degradado desde la esquina inferior
       derecha — lejos del icono (arriba-izq) y del bloque de texto, para que el
       blanco del copy siga pasando AA. El brillo se apaga al 58% del radio. */
    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%);
    text-decoration: none;
    font-family: var(--font-body);
  }

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

  /* Textura de rejilla diagonal (decorativa), igual idioma que el banner Porra. */
  .biwenger-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;
  }

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

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

  .biwenger-banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--biw-icon) 1fr var(--biw-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. */
  .biwenger-banner__icon {
    inline-size: var(--biw-icon);
    block-size: var(--biw-icon);
    border-radius: 50%;
    background: rgb(255 255 255 / 16%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }

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

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

  .biwenger-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;
  }

  .biwenger-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;
  }

  .biwenger-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. */
  .biwenger-banner__arrow {
    inline-size: var(--biw-arrow);
    block-size: var(--biw-arrow);
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #e2001a;
    box-shadow: 0 2px 6px rgb(120 0 14 / 28%);
  }

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

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