/* Porra del Mundial 2026 — home capture banner.
 *
 * Compact promo inserted at the top of the home match feed (mobile-first; also
 * rides the desktop center column). Tappable → opens the Porra activity. No
 * dismiss: it stays for the whole campaign and the server stops rendering it
 * once the World Cup ends (see _porra_banner.html.twig).
 *
 *   .porra-banner--pill   ~110px  trophy blob + eyebrow + title + arrow
 *
 * Campaign-only chrome: the magenta→purple→cyan gradient + warmer gold are the
 * Porra brand identity (tokens --color-porra-*). Everything generic (cards,
 * pills, tabs elsewhere) reuses the shared v2 primitives — this file owns only
 * the banner surface.
 */

@layer components {
  .porra-banner {
    position: relative;
    margin: var(--space-1) var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: linear-gradient(
      115deg,
      var(--color-porra-magenta) 0%,
      var(--color-porra-purple) 58%,
      var(--color-porra-cyan) 112%
    );
    box-shadow: 0 12px 32px rgb(74 14 143 / 35%);
    cursor: pointer;
    text-align: left;
    width: calc(100% - 2 * var(--space-3));
    font-family: var(--font-body);
  }

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

  /* Diagonal grid texture overlay (decorative). */
  .porra-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;
  }

  .porra-banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 50px 1fr 32px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
  }

  /* ─── Eyebrow (kicker + pulse dot) ─── */
  .porra-banner__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 85%);
  }

  .porra-banner__dot {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--color-porra-gold);
    box-shadow: 0 0 6px var(--color-porra-gold);
    animation: porra-banner-pulse 1.6s var(--easing-default) infinite;
  }

  @keyframes porra-banner-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: 0.5;
      transform: scale(0.85);
    }
  }

  /* ─── Pill layout ─── */
  .porra-banner__icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgb(0 0 0 / 25%);
    border: 1px solid rgb(255 255 255 / 15%);
  }

  .porra-banner__icon svg {
    width: 28px;
    height: 32px;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%));
  }

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

  .porra-banner__title {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: 0.2px;
    margin: var(--space-1) 0 0;
    color: #fff;
  }

  /* Gancho dorado — el viaje + el importe destacan sobre el blanco. */
  .porra-banner__title b {
    color: var(--color-porra-gold);
    font-weight: inherit;
  }

  /* Pantallas muy estrechas (Samsung S8+ ~360px): bajamos el cuerpo del
     título un punto para que el premio quepa en 2 líneas y no salte a 3.
     Valores literales pedidos verbatim por producto — no tokenizar. */
  @media (max-width: 360px) {
    .porra-banner__title {
      font-family: var(--font-title);
      font-weight: var(--weight-bold);
      font-size: 14px;
      line-height: 1.15;
      letter-spacing: 0.2px;
      margin: var(--space-1) 0 0;
      color: #fff;
    }
  }

  .porra-banner__arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--color-porra-purple);
  }

  .porra-banner__arrow svg {
    width: 14px;
    height: 14px;
  }

  @media (prefers-reduced-motion: reduce) {
    .porra-banner__dot {
      animation: none;
    }
  }
}