/* 1kamas — TEST: the homepage at IGV's width. Content 1420px wide (was 1160px), header and footer
   aligned on it, and the four game cards wider than tall, like IGV's.
   Only on the homepages (rules start with html:has(.hp-hero)), so a client-side navigation to an
   inner page leaves it untouched.
   To undo: remove the <link data-1k-wide> tag from the 4 homepages (or restore
   ../_snapshot-avant-largeur-igv.tgz). */

/* Container: 1420px of content + 24px gutters */
html:has(.hp-hero) .container-1k { max-width: 1468px; }

/* Header controls positioned from the content edge (1k-header.css assumes 1160px) */
@media (min-width: 1024px) {
  html:has(.hp-hero) header .bg-header-plum .inline-flex.antialiased { right: calc(max(24px, (100% - 1420px) / 2) + 40px); }
  html:has(.hp-hero) header .bg-header-plum .sm\:flex > div.relative:has(> .theme-toggle-btn) { right: max(24px, calc((100% - 1420px) / 2)); }
}

/* Game cards, landscape like IGV's (from 1024px; below, they keep their 5:4 picture):
   a 16:9 picture area with the logo sized by height (66%) in its upper part, and the title and
   server line right under it, so a card is about 337 x 259px, wider than tall (was 337 x 370).
   With a mouse, the card reserves only the resting text (69px, was the full 117px): on hover the
   text block still rises 48px to show the button, over the darkened bottom of the picture, just
   under the logo. */
@media (min-width: 1024px) {
  html:has(.hp-hero) body .hp-aura .hp-lift > div:first-child {
    aspect-ratio: 16 / 9; background-size: auto 66%; background-position: center 30%;
  }
}
@media (hover: hover) and (min-width: 1024px) {
  html:root:has(.hp-hero) body .hp-aura .hp-lift { padding-bottom: 69px; }
}