/* Porra — rail de banners promocionales del home.
 *
 * Rail horizontal scrollable al principio del feed del home (mobile-first;
 * también en la columna central de escritorio). Cada tarjeta es tappable y
 * abre su pestaña de la Porra. Sin dismiss: el servidor deja de renderizar el
 * rail entero pasada la fecha de campaña (ver _porra_banner.html.twig).
 *
 *   .promo-rail            contenedor scrollable — en `promo-rail.css`, compartido
 *   .porra-banner          la tarjeta: icono + título + subtítulo + flecha
 *   .porra-banner--albiceleste   variante celeste (sorteo camiseta firmada)
 *
 * Chrome de campaña: el gradiente magenta→púrpura→cian y el dorado son la
 * identidad de la Porra; el albiceleste es el del sorteo de la camiseta
 * (tokens --color-porra-*). Todo lo genérico (cards, pills, tabs) reutiliza los
 * primitivos v2 — este fichero solo posee la superficie del banner.
 */

@layer components {
  /* El rail horizontal que envuelve estas tarjetas vive en `promo-rail.css`: lo
     comparte con los banners de sorteo de partido. Aquí solo la tarjeta. */

  .porra-banner {
    /* Medidas de la tarjeta en un sitio: la rejilla de `__inner` las consume,
       así que ajustar el icono no obliga a tocar `grid-template-columns`.
       El icono baja de 50px a 44px: ocupaba el 66% del alto de la tarjeta y
       comía el aire del bloque de texto. */
    --porra-banner-icon: 44px;
    --porra-banner-arrow: 28px;

    position: relative;
    height: 100%;
    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%
    );

    /* Más contenida que la original (0 12px 32px): con dos tarjetas juntas en
       el rail, dos sombras grandes se solapaban y ensuciaban el hueco. */
    box-shadow: 0 6px 18px rgb(74 14 143 / 32%);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
  }

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

  /* Feedback táctil al pulsar. Solo `transform` (compositor, 60fps); nunca
     width/height/top. */
  .porra-banner:active {
    transform: scale(0.985);
  }

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

    .porra-banner:active {
      transform: none;
    }
  }

  /* ─── Variante albiceleste (sorteo camiseta firmada) ───
   * Celeste argentino, pero el texto es BLANCO y eso manda sobre la estética:
   * blanco sobre el celeste claro da 2,46:1 (falla AA), sobre el profundo
   * 5,65:1 (pasa AA). Por eso el claro se queda solo en el arranque —donde va
   * el disco del icono, sin texto— y a la altura en que empieza el bloque de
   * texto (~28% del eje) el degradado ya es profundo y se mantiene. Así el
   * banner sigue leyéndose albiceleste sin dejar el copy sobre fondo claro. */
  .porra-banner--albiceleste {
    background: linear-gradient(
      115deg,
      var(--color-porra-celeste) 0%,
      var(--color-porra-celeste-deep) 28%,
      var(--color-porra-celeste-deep) 100%
    );
    box-shadow: 0 6px 18px rgb(28 107 168 / 32%);
  }

  /* 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;

    /* Columnas atadas a los tamaños reales del icono y la flecha (abajo), para
       que cambiar uno no descuadre la rejilla. */
    grid-template-columns: var(--porra-banner-icon) 1fr var(--porra-banner-arrow);
    align-items: center;

    /* Gap fluido: en un S8+ (360px) la columna de texto se quedaba en ~169px y
       el subtítulo se recortaba a mitad del gancho ("…y viaje a Nueva York").
       Cerrando el gap se recuperan ~8px de texto sin tocar icono ni flecha. */
    gap: clamp(var(--space-2), 2.4vw, var(--space-3));

    /* Simétrico: el 8px de la izquierda venía del layout viejo y dejaba el
       icono descentrado respecto al margen derecho. */
    padding: var(--space-3);
    min-height: 100%;
  }

  /* El ring de foco del reset global se dibuja FUERA del <a>, y la tarjeta
     recorta con overflow:hidden → con teclado no se veía el foco. Se dibuja
     hacia dentro con offset negativo. */
  .porra-banner__inner:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
    border-radius: var(--radius-lg);
  }

  /* ─── Layout de la tarjeta ─── */
  .porra-banner__icon {
    width: var(--porra-banner-icon);
    height: var(--porra-banner-icon);
    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%);
  }

  /* ~57% del disco: deja aro visible alrededor del glifo en vez de tocarlo. */
  .porra-banner__icon svg {
    width: 22px;
    height: 25px;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 40%));
  }

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

  /* Título — el copy va en caja natural en los YAML y lo pone en versales el
     CSS, así cada idioma acentúa bien y el estilo se controla en un sitio. */
  .porra-banner__title {
    font-family: var(--font-title);
    font-weight: var(--weight-bold);

    /* Fluida en vez de un @media max-width: el cuerpo escala solo entre un
       S8+ (~360px) y el resto, así que desaparece la única query max-width del
       fichero (regla mobile-first) y no hay salto brusco en el medio. */
    font-size: clamp(var(--text-sm), 3.9vw, var(--text-base));
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin: 0;
    color: #fff;
  }

  /* Gancho dorado — resalta el premio dentro del título si el copy lo marca. */
  .porra-banner__title b {
    color: var(--color-porra-gold);
    font-weight: inherit;
  }

  .porra-banner--albiceleste .porra-banner__title b {
    color: #fff;
  }

  /* Subtítulo — la llamada a la acción ("consulta los ganadores…"). Dos líneas
     como máximo: a la tercera el banner crece y descuadra el rail, así que se
     recorta con ellipsis en vez de empujar. */

  /* 3 líneas, no 2: el clamp es una red de seguridad contra una traducción
     desbocada, NO un recorte de diseño. A 2 el gancho se cortaba en móviles
     estrechos y en fr/pt (que son más largos que el castellano). Las tarjetas
     del rail estiran a la más alta (align-items:stretch), así que una línea
     extra no descuadra la fila. */
  .porra-banner__subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* 6px en vez de 4: con dos bloques en versales y tracking, 4px los pegaba
       y se leían como un solo párrafo. */
    margin: 6px 0 0;
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: clamp(0.6875rem, 2.9vw, var(--text-xs));
    line-height: 1.3;

    /* Menos tracking que el título: en dos líneas, 0.6px ya empujaba la
       segunda a recortarse en móviles estrechos. */
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgb(255 255 255 / 88%);
  }

  /* Afordancia, no botón: el enlace es la tarjeta entera (76px de alto, muy por
     encima de los 44px de touch target), así que el disco puede ser discreto. */
  .porra-banner__arrow {
    width: var(--porra-banner-arrow);
    height: var(--porra-banner-arrow);
    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: 13px;
    height: 13px;
  }

  /* Va DESPUÉS de la regla base de la flecha para no romper la especificidad
     ascendente que exige stylelint (no-descending-specificity). */
  .porra-banner--albiceleste .porra-banner__arrow {
    color: var(--color-porra-celeste-deep);
  }

}