/* ============================================================================
   The landing's WHAT'S NEW section + the "make your own" band
   (landing/partial/whats_new.html). The cards are the shared gallery card
   (game_grid.css + tv_card.css) and the heading is the gallery's section head
   (gallery.css); this file only lays them out: the newest game big on the
   left, four smaller beside it, the band underneath.
   ============================================================================ */

/* The landing's .page-main has no padding (the hero runs edge to edge), so the section brings its
   own gutters and caps itself at the site's usual width. */
.whats-new {
  max-width: 1140px;
  margin: 0 auto;
  padding: 80px 22px 96px;
}

/* The heading on the left, SEE ALL GAMES on the right. */
.whats-new-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}

/* The big newest game beside a 2×2 of the next four — the two halves come out about the same height. */
.whats-new-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.whats-new-more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 20px;
}
/* Title + maker flush left under each screen, as on Browse & Play; the big one's read bigger. */
.whats-new .game-name,
.whats-new .game-maker { text-align: left; padding-inline: 4px; }
.whats-new-more .game-name { font-size: 19px; }
.whats-new-feature .game-name { margin-top: 12px; font-size: 28px; }
.whats-new-feature .game-maker { font-size: 20px; }

/* ---- the band: the call to make your own ---- */
.whats-new-make {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 64px;
  padding: 30px 34px;
  background: var(--color-panel);
  border: 3px solid var(--color-line);
  box-shadow: 0 6px 0 var(--color-well);
}
.whats-new-make-text { flex: 1 1 420px; min-width: 0; }
.whats-new-make-kicker {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--color-pink-light);
}
.whats-new-make-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-title-yellow);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .5);
}
.whats-new-make-line {
  margin: 0;
  font-size: 22px;
  color: var(--color-text-dim);
}

/* Phones: the big game on top, the four in a 2×2 under it; the band stacks with its button full width. */
@media (max-width: 760px) {
  .whats-new { padding: 56px 16px 72px; }
  .whats-new-grid { grid-template-columns: minmax(0, 1fr); }
  .whats-new-feature .game-name { font-size: 22px; }
  .whats-new-more .game-name { font-size: 18px; }
  .whats-new-make { padding: 24px 20px; }
  .whats-new-make-title { font-size: 15px; }
  .whats-new-make-line { font-size: 20px; }
  .whats-new-make .btn { width: 100%; justify-content: center; }
}