/* ==========================================================================
   Lockace — Mise en avant du jeu phare
   Le bloc de l'accueil, et la carte pleine largeur du catalogue (`spotlight`
   dans games.json). Chargée par ces deux pages seulement.

   Le bleu distingue ce bloc du « Jeu du jour », qui porte le halo rose : les
   deux se suivent à l'accueil et ne doivent pas se lire comme un seul panneau.
   ========================================================================== */

.spotlight-section {
  /* Enchaîne le hero, comme le jeu du jour : moins d'air en haut. */
  padding-block: var(--space-7) 0;
}

.spotlight {
  display: grid;
  /* Le visuel prend le pas sur le texte : il porte le logo du jeu. La hauteur
     du bloc est celle du texte, et c'est elle qui rogne le logo : élargir cette
     colonne aggrave le rognage en allongeant le texte. Gardez celui-ci court. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(34rem 20rem at 100% 0%, rgb(71 134 236 / 0.2), transparent),
    var(--color-surface);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 44px rgb(71 134 236 / 0.18);
}

.spotlight-media {
  position: relative;
  display: block;
  min-height: 18rem;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.spotlight-media picture {
  display: contents;
}

.spotlight-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-fast);
}

.spotlight-media:hover img {
  transform: scale(1.03);
}

.spotlight-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 3vw, var(--space-6));
}

.spotlight-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  color: var(--color-secondary-soft);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
}

.spotlight-title {
  margin: 0;
  font-size: var(--text-h2);
}

.spotlight-lede {
  margin: 0;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.spotlight-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.spotlight-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

/* Posée pour tous, révélée hors connexion : il serait trop tard pour l'ajouter
   au moment où le réseau manque (cf. `.game-card-offline`). */
.spotlight-offline {
  display: none;
  margin: 0;
  color: var(--color-warning);
  font-size: var(--text-sm);
}

html[data-offline="true"] .spotlight-offline {
  display: block;
}

/* En deçà, deux colonnes rogneraient le logo : le visuel passe au-dessus, à son
   format d'origine. */
@media (max-width: 64rem) {
  .spotlight {
    grid-template-columns: minmax(0, 1fr);
  }

  .spotlight-media {
    min-height: 0;
    aspect-ratio: 1200 / 630;
  }
}

@media (max-width: 30rem) {
  .spotlight-actions,
  .spotlight-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

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

  .spotlight-media:hover img {
    transform: none;
  }
}

/* Carte du catalogue
   -------------------------------------------------------------------------- */

/* Limité à la grille du catalogue : la même carte reste ordinaire dans les
   favoris du carnet, où elle n'a rien à disputer aux autres. */
[data-games-grid] .game-card.is-spotlight {
  border-color: var(--color-secondary);
  box-shadow: 0 10px 34px rgb(71 134 236 / 0.16);
}

@media (min-width: 48rem) {
  [data-games-grid] .game-card.is-spotlight {
    /* Toute la rangée, quel que soit le nombre de colonnes : la grille est en
       `auto-fill`, et un `span 2` laisserait un trou à droite sur trois colonnes. */
    grid-column: 1 / -1;
    flex-direction: row;
  }

  [data-games-grid] .game-card.is-spotlight .game-card-media {
    flex: 0 0 55%;
    aspect-ratio: 1200 / 630;
  }

  [data-games-grid] .game-card.is-spotlight .game-card-body {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
}