/* Match of the day — hero del home desktop. Replaces hero-carousel.css
 * after the Sprint 1.5 alignment with Claude Design Home-Remix.
 *
 * Layout: dos teams (escudo + nombre) a izq/der, VS + kickoff en el
 * centro. Backdrop split-gradient con team colors injected via inline
 * CSS custom properties (--home-c1/--home-c2/--away-c1/--away-c2).
 *
 * Static SSR — no Stimulus controller. Cualquier interacción (CTA)
 * navega a la match-detail page.
 */

@layer components {
  .match-of-day {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    max-height: var(--hero-carousel-height);
    overflow: hidden;
    border-radius: var(--hero-carousel-radius);
    background: var(--color-surface);
    isolation: isolate;
  }

  /* Cinematic team-color backdrop: dos radial-glows (uno por equipo)
     que se desvanecen hacia el centro oscuro. Reemplaza el viejo
     split-gradient diagonal — más sutil, más cinematográfico (estilo
     Claude Design Home-C). El centro queda oscuro como un "scrim"
     natural sobre el que el texto se lee perfecto.

     `--home-c1` / `--away-c1` se inyectan vía inline style desde el
     partial (team primary colors). Los stops y radio están tuneados
     para que dos colores muy distintos no choquen feo en el centro. */
  .match-of-day__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(
        ellipse 55% 90% at 20% 50%,
        var(--home-c1, var(--color-surface)) 0%,
        transparent 50%
      ),
      radial-gradient(
        ellipse 55% 90% at 80% 50%,
        var(--away-c1, var(--color-surface)) 0%,
        transparent 50%
      ),
      var(--color-bg);
  }

  /* Soft team color mix overlay — multiplica los glows con un velo
     oscuro adicional para que los colores brillantes (rojo Sevilla,
     amarillo dorado, etc.) no quemen el ojo. Subtle pero importa. */
  .match-of-day__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 25%);
  }

  .match-of-day__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 15%) 100%);
    pointer-events: none;
  }

  .match-of-day__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-5) var(--space-6);
    color: var(--color-text);
  }

  .match-of-day__meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .match-of-day__league {
    color: var(--color-accent);
    font-weight: 700;
  }

  .match-of-day__live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--color-live);
    color: var(--color-on-live);
    font-weight: 700;
    font-size: 10px;
  }

  .match-of-day__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentcolor;
    animation: match-of-day-pulse 1.6s ease-in-out infinite;
  }

  @keyframes match-of-day-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.4;
    }
  }

  /* Kickoff arriba del VS (patrón Home-Remix). Tipografía grande con
     letterspacing, color blanco suave para que no robe protagonismo
     al match-of-day en sí pero quede como un "headline temporal". */
  .match-of-day__kickoff-top {
    text-align: center;
    margin: var(--space-2) 0 var(--space-3);
    font-family: var(--font-title);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    text-shadow: 0 2px 12px rgb(0 0 0 / 60%);
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .match-of-day__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
    flex: 1;
  }

  .match-of-day__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  .match-of-day__team--home {
    align-items: flex-end;
    text-align: right;
  }

  .match-of-day__team--away {
    align-items: flex-start;
    text-align: left;
  }

  .match-of-day__crest {
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgb(0 0 0 / 50%));
  }

  .match-of-day__crest--placeholder {
    background: var(--color-surface-sunken);
    border-radius: var(--radius-md);
  }

  /* Team name en Title Case (patrón Home-Remix — más elegante que el
     UPPERCASE puro). Tipografía Oswald 700 garantiza presencia. */
  .match-of-day__team-name {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.5px;
    margin: 0;
    color: var(--color-text);
    text-shadow: 0 4px 16px rgb(0 0 0 / 80%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .match-of-day__team-venue {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgb(255 255 255 / 65%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--space-1);
  }

  .match-of-day__vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
  }

  .match-of-day__vs-label {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 700;
    color: rgb(255 255 255 / 50%);
    letter-spacing: 3px;
  }

  .match-of-day__score {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-title);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text);
    text-shadow: 0 2px 12px rgb(0 0 0 / 70%);
    font-variant-numeric: tabular-nums;
  }

  .match-of-day__score-sep {
    color: var(--color-text-muted);
  }

  /* Decorative corner constellation (UCL Champions League treatment).
     Cada esquina lleva 3 estrellas a diferentes opacidades + tamaños
     formando un pequeño campo de estrellas — mucho más cinematográfico
     que la única estrella central. SVG vía mask-image para crisp en
     cualquier resolución. */
  .match-of-day__deco {
    position: absolute;
    z-index: 1;
    width: 140px;
    height: 100px;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 100'><g fill='%23ffffff'><polygon points='20,15 23.5,26 35,26 25.5,33 29,44 20,37 11,44 14.5,33 5,26 16.5,26' opacity='0.18'/><polygon points='80,40 82,46 88,46 83.2,50 85.2,56 80,52.5 74.8,56 76.8,50 72,46 78,46' opacity='0.10'/><polygon points='115,18 116.5,23 122,23 117.5,26 119,31 115,28 111,31 112.5,26 108,23 113.5,23' opacity='0.14'/><polygon points='45,60 47,65 52,65 47.5,68.5 49,73.5 45,70.5 41,73.5 42.5,68.5 38,65 43,65' opacity='0.08'/></g></svg>");
    background-repeat: no-repeat;
    background-size: contain;
  }

  .match-of-day__deco--tl {
    top: 8px;
    left: 8px;
  }

  .match-of-day__deco--tr {
    top: 8px;
    right: 8px;
    transform: scaleX(-1);
  }

  .match-of-day__deco--bl {
    bottom: 8px;
    left: 8px;
    transform: scaleY(-1);
    width: 100px;
    height: 70px;
  }

  .match-of-day__deco--br {
    bottom: 8px;
    right: 8px;
    transform: scale(-1, -1);
    width: 100px;
    height: 70px;
  }

  /* CTA estilo Claude Design Home-C: fondo blanco, texto oscuro.
     Contrast AA garantizado sobre cualquier gradient backdrop. */
  .match-of-day__cta {
    align-self: center;
    margin-top: auto;
    padding: 12px 28px;
    border-radius: var(--radius-full);
    background: #fff;
    color: #0a0a0b;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
    transition:
      transform var(--duration-fast) var(--easing-default),
      box-shadow var(--duration-fast) var(--easing-default);
  }

  @media (hover: hover) {
    .match-of-day__cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgb(0 0 0 / 40%);
    }
  }

  .match-of-day__cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  /* Desktop ≥1200px: bigger crests, bigger names, more padding */
  @media (width >= 1200px) {
    .match-of-day__content {
      padding: var(--space-6) var(--space-10);
    }

    .match-of-day__crest {
      width: 96px;
      height: 96px;
    }

    .match-of-day__team-name {
      font-size: 32px;
    }

    .match-of-day__vs-label {
      font-size: 24px;
    }

    .match-of-day__score {
      font-size: 48px;
    }

    .match-of-day__kickoff {
      font-size: 14px;
    }
  }

  @media (width >= 1600px) {
    .match-of-day__crest {
      width: 120px;
      height: 120px;
    }

    .match-of-day__team-name {
      font-size: var(--text-hero-title-desktop);
    }

    .match-of-day__score {
      font-size: var(--text-hero-score-desktop);
    }

    /* En pantallas anchas el glow se debe diluir aún más para que el
       hero no parezca un poster — el texto debe seguir cinemático pero
       el color del equipo es solo una insinuación. */
    .match-of-day__bg {
      background:
        radial-gradient(
          ellipse 60% 80% at 22% 50%,
          var(--home-c1, var(--color-surface)) 0%,
          transparent 55%
        ),
        radial-gradient(
          ellipse 60% 80% at 78% 50%,
          var(--away-c1, var(--color-surface)) 0%,
          transparent 55%
        ),
        var(--color-bg);
    }

    .match-of-day__overlay {
      background: radial-gradient(ellipse at center, rgb(0 0 0 / 65%) 0%, rgb(0 0 0 / 25%) 100%);
    }
  }
}