/* 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).
 *
 *   .porra-rail            contenedor scrollable (patrón `.mh-rail`)
 *   .porra-rail__item      slot de una tarjeta (peek del siguiente si hay 2+)
 *   .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 {
  /* ─── 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. */
  .porra-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;
  }

  .porra-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. */
  .porra-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). */
  .porra-rail__item {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  /* Un único banner → sin peek, ancho completo (como antes del rail). */
  .porra-rail--single .porra-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) {
    .porra-rail__item {
      flex-basis: 58%;
    }
  }

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

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

}