/* WC2026 banner — Mundial 2026 promo card del sidebar derecho desktop.
 *
 * Hero card con gradient cyberpunk (rojo → púrpura → cyan), grid SVG
 * overlay, countdown grande (días al kickoff), host countries (USA·CAN·MX)
 * con flags de las 32 selecciones clasificadas + count placeholder,
 * carrusel horizontal de grupos (top 3 cada uno) y CTA al hub.
 *
 * Visibility: scoped a `.has-desktop-shell` + `@media (width >= 1200px)`.
 * Mobile intact — el partial igualmente está incluido sólo en el bloque
 * `sidebar_right` de home.html.twig, que está oculto en mobile via
 * `.app__sidebar { display: none }`.
 *
 * Patrón canónico: sigue el chrome decorado de `.feature-shelf__widget
 * --decorated` (overflow hidden + isolation isolate + decoration absolute)
 * pero con su propia clase porque el bg + content stack es muy distinto
 * de un widget normal (gradient + grid pattern + countdown XL).
 *
 * Data wiring: el partial trae valores stub SSR para no FOUC; el
 * Stimulus controller wc2026-banner reemplaza countdown al tick y
 * carga grupos reales vía /api/v1/leagues/732/standings.
 */

@layer components {
  .wc2026-banner {
    display: none;
  }

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

  @media (width >= 1200px) {
    .has-desktop-shell .wc2026-banner {
      position: relative;
      display: block;
      overflow: hidden;
      isolation: isolate;
      border-radius: var(--radius-lg);
      color: rgb(255 255 255);
      padding: var(--space-5) var(--space-4) var(--space-4);
    }

    .has-desktop-shell .wc2026-banner[hidden] {
      display: none;
    }

    .has-desktop-shell .wc2026-banner__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(
        160deg,
        rgb(255 46 99) 0%,
        rgb(59 14 117) 50%,
        rgb(0 212 255) 100%
      );
    }

    .has-desktop-shell .wc2026-banner__bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse at top right,
        rgb(0 0 0 / 0%) 0%,
        rgb(0 0 0 / 30%) 100%
      );
    }

    .has-desktop-shell .wc2026-banner__grid-pattern {
      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='.6' fill='none'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 18px 18px;
      pointer-events: none;
    }

    .has-desktop-shell .wc2026-banner__content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .has-desktop-shell .wc2026-banner__eyebrow {
      font-family: var(--font-title);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2.4px;
      text-transform: uppercase;
      opacity: 0.85;
      margin: 0;
    }

    .has-desktop-shell .wc2026-banner__title {
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 38px;
      line-height: 0.95;
      letter-spacing: -1px;
      margin: 4px 0 0;
      text-transform: uppercase;
      display: flex;
      flex-direction: column;
    }

    .has-desktop-shell .wc2026-banner__title-line1 {
      display: block;
    }

    .has-desktop-shell .wc2026-banner__title-line2 {
      display: block;
      color: transparent;
      -webkit-text-stroke: 2px rgb(255 255 255);
    }

    /* ─── Meta block: countdown (días + hh-mm) + hosts ───────────────
     *
     * Layout: grid 2-col `auto 1fr`, gap 16px, align-items: end.
     * Columna izq = countdown (cifra Oswald grande + "días" inline,
     * hh-mm debajo). Columna der = hosts chip + flags row (text-align
     * derecha). Ref del user (mensaje 2026-05-22).
     */

    .has-desktop-shell .wc2026-banner__meta {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: end;
      padding-bottom: var(--space-3);
      border-bottom: 1px solid rgb(255 255 255 / 20%);
      margin-top: var(--space-2);
    }

    .has-desktop-shell .wc2026-banner__countdown {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      text-align: left;
    }

    .has-desktop-shell .wc2026-banner__days-row {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 8px;
    }

    .has-desktop-shell .wc2026-banner__days-row[hidden] {
      display: none;
    }

    .has-desktop-shell .wc2026-banner__days {
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 56px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -1.5px;
    }

    .has-desktop-shell .wc2026-banner__days-label {
      font-family: var(--font-title);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0;
      text-transform: none;
      opacity: 0.85;
    }

    /* hh-mm row: siempre visible bajo la cifra. Muestra horas/minutos
     * restantes del último día parcial. Si days===0 el controller pone
     * un placeholder textual y oculta el row de días. */

    .has-desktop-shell .wc2026-banner__hours-minutes {
      font-family: var(--font-title);
      font-weight: 600;
      font-size: 13px;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.5px;
      opacity: 0.75;
    }

    .has-desktop-shell .wc2026-banner__hours-minutes[hidden] {
      display: none;
    }

    .has-desktop-shell .wc2026-banner__started {
      grid-column: 1 / -1;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 18px;
      line-height: 1.2;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-align: center;
      padding: 12px 0;
    }

    .has-desktop-shell .wc2026-banner__started[hidden] {
      display: none;
    }

    .has-desktop-shell .wc2026-banner__hosts {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: flex-end;
      text-align: right;
    }

    .has-desktop-shell .wc2026-banner__hosts-chip {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 4px;
      background: rgb(0 0 0 / 30%);
      font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
      font-size: 11px;
      opacity: 0.9;
      letter-spacing: 0.5px;
    }

    .has-desktop-shell .wc2026-banner__flags {
      display: flex;
      gap: 3px;
      align-items: center;
      justify-content: flex-end;
    }

    .has-desktop-shell .wc2026-banner__flag {
      width: 18px;
      height: 13px;
      border-radius: 1px;
      object-fit: cover;
      flex-shrink: 0;
    }

    .has-desktop-shell .wc2026-banner__flags-remaining {
      font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
      font-size: 11px;
      opacity: 0.75;
      margin-left: 4px;
    }

    /* ─── Groups carousel ─────────────────────────────────────────── */

    .has-desktop-shell .wc2026-banner__groups {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: var(--space-2);
    }

    .has-desktop-shell .wc2026-banner__groups[hidden] {
      display: none;
    }

    .has-desktop-shell .wc2026-banner__groups-header {
      display: grid;
      grid-template-columns: 24px 1fr 24px;
      align-items: center;
      gap: 8px;
    }

    .has-desktop-shell .wc2026-banner__groups-title {
      font-family: var(--font-title);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      text-align: center;
      opacity: 0.9;
      font-variant-numeric: tabular-nums;
    }

    .has-desktop-shell .wc2026-banner__groups-nav {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 50%;
      background: rgb(255 255 255 / 12%);
      color: rgb(255 255 255);
      cursor: pointer;
      padding: 0;
      transition:
        background var(--duration-fast) var(--easing-default),
        opacity var(--duration-fast) var(--easing-default);
    }

    .has-desktop-shell .wc2026-banner__groups-nav:disabled {
      opacity: 0.3;
      cursor: default;
    }

    @media (hover: hover) {
      .has-desktop-shell .wc2026-banner__groups-nav:not(:disabled):hover {
        background: rgb(255 255 255 / 22%);
      }
    }

    .has-desktop-shell .wc2026-banner__groups-nav:focus-visible {
      outline: 2px solid rgb(255 255 255);
      outline-offset: 2px;
    }

    .has-desktop-shell .wc2026-banner__groups-viewport {
      overflow: hidden;
      width: 100%;
    }

    .has-desktop-shell .wc2026-banner__groups-track {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      transition: transform var(--duration-base, 240ms) var(--easing-default);
    }

    .has-desktop-shell .wc2026-banner__group {
      flex: 0 0 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .has-desktop-shell .wc2026-banner__group-row {
      display: grid;
      grid-template-columns: 14px 22px 1fr auto auto;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      padding: 6px 8px;
      background: transparent;
      border-radius: 6px;
    }

    .has-desktop-shell .wc2026-banner__group-row--leader {
      background: rgb(255 255 255 / 12%);
    }

    .has-desktop-shell .wc2026-banner__group-pos {
      font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
      font-size: 11px;
      opacity: 0.65;
      text-align: center;
    }

    .has-desktop-shell .wc2026-banner__group-flag {
      width: 20px;
      height: 14px;
      border-radius: 1px;
      object-fit: cover;
    }

    .has-desktop-shell .wc2026-banner__group-team {
      font-family: var(--font-body);
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .has-desktop-shell .wc2026-banner__group-pj {
      font-family: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
      font-size: 10px;
      opacity: 0.6;
      font-variant-numeric: tabular-nums;
    }

    .has-desktop-shell .wc2026-banner__group-pts {
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 14px;
      font-variant-numeric: tabular-nums;
    }

    .has-desktop-shell .wc2026-banner__groups-dots {
      display: flex;
      gap: 4px;
      justify-content: center;
      margin-top: 4px;
    }

    .has-desktop-shell .wc2026-banner__groups-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgb(255 255 255 / 30%);
      border: 0;
      padding: 0;
      cursor: pointer;
      transition: background var(--duration-fast) var(--easing-default);
    }

    .has-desktop-shell .wc2026-banner__groups-dot.is-active {
      background: rgb(255 255 255 / 90%);
    }

    .has-desktop-shell .wc2026-banner__groups-dot:focus-visible {
      outline: 2px solid rgb(255 255 255);
      outline-offset: 2px;
    }

    /* ─── CTA ─────────────────────────────────────────────────────── */

    .has-desktop-shell .wc2026-banner__cta {
      margin-top: var(--space-3);
      width: 100%;
      padding: 11px 12px;
      border-radius: 9999px;
      background: rgb(255 255 255);
      color: rgb(10 10 11);
      border: 0;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition:
        background var(--duration-fast) var(--easing-default),
        transform var(--duration-fast) var(--easing-default);
    }

    @media (hover: hover) {
      .has-desktop-shell .wc2026-banner__cta:hover {
        background: rgb(255 255 255 / 92%);
        transform: translateY(-1px);
      }
    }

    .has-desktop-shell .wc2026-banner__cta:focus-visible {
      outline: 2px solid rgb(255 255 255);
      outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
      .has-desktop-shell .wc2026-banner__groups-track {
        transition: none;
      }

      .has-desktop-shell .wc2026-banner__cta {
        transition: none;
      }

      .has-desktop-shell .wc2026-banner__cta:hover {
        transform: none;
      }
    }
  }
}