/* ============================================================
   Prime - games.css
   Prime Games: the page that lists the games. Laid out like
   games.amazon.com (hero, a list of picture and words rows, a
   split band, a white wayfinder footer), measured from it and
   rebranded: Base blue for Twitch purple, Prime navy for the dark,
   Inter 800 standing in for Amazon Ember Display.
   ============================================================ */

/* Inter-800-900.woff2 is the full variable font (wght 100 to 900), so it also
   serves 300, the light weight Amazon sets its body copy in. */
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-700.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-800-900.woff2') format('woff2'); font-weight:800 900; font-display:swap; }

:root {
  --blue:#0052FF; --blue-deep:#003ECC; --blue-light:#7FA8FF; --blue-light-2:#A9C4FF;
  --nav:#0A1024; --mist:#F2F2F2; --paper:#FFFFFF;
  --ink:#0F1111; --ink-2:#565959; --hair:#E7E7E7; --bar:#949494;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --ease:ease;
}
*, *::before, *::after { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--mist); color:var(--ink); font:400 16px/1.15 var(--sans); -webkit-font-smoothing:antialiased; }
h1, h2, h3, p { margin:0; }
a { color:inherit; }
img, svg { display:block; }

/* Display type: Amazon Ember Display 700 is a tight, heavy grotesk; Inter
   800 with negative tracking reads the same at size. */
.hero h1, .list h2, .copy h3, .band h2, .band-sub, .btn { font-family:var(--sans); letter-spacing:-.025em; }

/* ---------- The button: 48px pill, 12px 30px, 22px bold ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; min-width:160px;
  padding:12px 30px; border-radius:48px; background:var(--blue); color:#fff;
  font-weight:800; font-size:1.375rem; line-height:1; text-decoration:none; text-align:center;
  transition:background-color .35s var(--ease);
}
@media (hover:hover) { .btn:hover { background:var(--blue-deep); } }
.btn:active { background:var(--blue-deep); }
.btn:focus-visible { outline:2px solid var(--blue-deep); outline-offset:2px; }
@media (max-width:1200px) { .btn { font-size:calc(1.075rem + .4vw); } }

/* ---------- Hero: 720px of photo, mark and one line, centred ---------- */
.hero { position:relative; display:flex; align-items:center; justify-content:center; min-height:720px; overflow:hidden; background:var(--nav); color:#F2F2F2; }
.hero-bg {
  position:absolute; inset:0; max-width:1920px; margin:0 auto;
  background:
    linear-gradient(180deg, rgba(10,16,36,.30) 0%, rgba(10,16,36,.55) 55%, rgba(10,16,36,.80) 100%),
    url('../assets/img/bg-street.webp') 50% 70% / cover no-repeat;
}
.hero-in { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:min(1200px, 100%); padding:60px; text-align:center; }
.hero-logo { width:140px; height:auto; aspect-ratio:1283/672; margin-bottom:24px; color:#fff; --logo-s:#3D7BFF; }
.hero h1 { font-weight:800; font-size:7.25rem; line-height:1; text-shadow:0 2px 24px rgba(10,16,36,.35); text-wrap:balance; }
@media (max-width:1200px) { .hero h1 { font-size:calc(2.25rem + 6.66667vw); } }
@media (max-width:991.98px) { .hero { min-height:580px; } }
@media (max-width:767.98px) { .hero { min-height:520px; } .hero-in { padding:45px; } .hero-logo { width:112px; margin-bottom:18px; } }
@media (max-width:419.98px) { .hero-in { padding:25px; } }

/* ---------- The list ---------- */
.list { display:flex; flex-direction:column; align-items:center; max-width:1920px; margin:0 auto; padding:72px 48px 64px; }
.list h2 { margin:0 0 72px; padding:0 2em; font-weight:800; font-size:3.25rem; line-height:1; text-align:center; }
@media (max-width:1200px) { .list h2 { font-size:calc(1.45rem + 2.4vw); } }

.row { display:grid; grid-template-columns:540px 460px; column-gap:42px; align-items:start; width:min(1042px, 100%); margin-bottom:82px; }
.row:last-child { margin-bottom:0; }
.tile { display:block; aspect-ratio:540/252; overflow:hidden; border-radius:10px; background:#1B2A6B; }
.tile img { width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.pos-van { object-position:50% 62%; }
.tile-brand { display:flex; align-items:center; justify-content:center; background:var(--blue); color:#fff; --logo-s:#fff; }
.tile-brand svg { width:34%; height:auto; aspect-ratio:1283/672; transition:transform .35s var(--ease); }
@media (hover:hover) {
  .row:hover .tile img, .row:hover .tile-brand svg { transform:scale(1.05); }
}

.copy h3 { font-weight:800; font-size:3.25rem; line-height:1; }
@media (max-width:1200px) { .copy h3 { font-size:calc(1.45rem + 2.4vw); } }
.copy p { margin-top:14px; font-weight:300; font-size:1.1875rem; line-height:28px; color:var(--ink); max-width:460px; }
.copy .btn { margin-top:18px; }

@media (max-width:1150px) {
  .row { grid-template-columns:1fr 1fr; column-gap:4vw; }
}
@media (max-width:767.98px) {
  .list { padding:56px 24px 56px; }
  .list h2 { margin-bottom:56px; padding:0; }
  .row { grid-template-columns:1fr; row-gap:24px; margin-bottom:64px; }
  .copy p { font-size:1.125rem; line-height:1.5; }
}
@media (max-width:419.98px) { .list { padding-left:16px; padding-right:16px; } }

/* ---------- The split band: navy left, photo right ---------- */
.band { position:relative; display:flex; align-items:center; min-height:580px; overflow:hidden; background:var(--nav); color:#F2F2F2; }
.band-bg {
  position:absolute; top:0; right:0; bottom:0; width:50%;
  background:url('../assets/img/hero-throw.webp') 50% 30% / cover no-repeat;
}
.band-in { position:relative; z-index:1; width:50%; padding:90px 24px 90px 13%; }
.band-sub { font-weight:400; font-size:3.75rem; line-height:1; margin-bottom:10px; letter-spacing:-.03em; }
.band h2 { font-weight:800; font-size:5rem; line-height:1; }
.band .btn { margin-top:20px; }
.band-links { margin-top:20px; font-weight:300; font-size:.75rem; line-height:1.4167; letter-spacing:.0075em; }
.band-links a { color:var(--blue-light); text-decoration:none; transition:color .25s var(--ease); }
.band-links span { margin:0 2px; }
@media (hover:hover) { .band-links a:hover { color:var(--blue-light-2); text-decoration:underline; } }
@media (max-width:1200px) {
  .band-sub { font-size:calc(1.55rem + 2.93333vw); }
  .band h2 { font-size:calc(1.8rem + 4.26667vw); }
  .band-in { padding:52px 40px 52px 8%; }
}
@media (max-width:767.98px) {
  .band { flex-direction:column; align-items:stretch; min-height:0; }
  .band-bg { position:relative; width:100%; aspect-ratio:4/3; order:-1; }
  .band-in { width:100%; padding:44px 24px 56px; }
}
@media (max-width:419.98px) { .band-in { padding:30px 16px 48px; } }

/* ---------- Footer: white wayfinder, logo right, legal bar ---------- */
.foot { background:var(--paper); padding:28px 48px 0; }
.foot-main { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; max-width:1920px; margin:30px auto 0; }
.foot-nav { display:flex; flex-flow:row wrap; max-width:660px; }
.ent { flex-basis:220px; padding:0 20px 20px 0; }
.ent-link, .ent-sub { text-decoration:none; }
.ent-link { display:block; }
.ent-name { display:block; color:var(--blue); font-weight:500; font-size:1rem; line-height:1; transition:color .35s ease-in-out; }
.ent-desc { display:block; margin:3px 0 6px; color:var(--ink-2); font-size:.75rem; line-height:1.3; }
.ent-sub { display:block; color:var(--ink); font-weight:500; font-size:.75rem; line-height:1.3; }
@media (hover:hover) {
  .ent-link:hover .ent-name, .ent-link:hover .ent-desc, .ent-sub:hover { color:var(--blue-deep); text-decoration:underline; }
}
.foot-logo { flex:0 0 auto; color:var(--ink); --logo-s:var(--blue); }
.foot-logo svg { width:84px; height:auto; aspect-ratio:1283/672; }

.foot-sub { max-width:1920px; margin:28px auto 0; padding:30px 0 50px; border-top:1px solid var(--hair); text-align:center; font-size:14px; line-height:22px; }
.foot-links a { text-decoration:none; }
.foot-links span { margin:0 6px; color:var(--bar); }
@media (hover:hover) { .foot-links a:hover { color:var(--blue-deep); text-decoration:underline; } }
.foot-legal { color:var(--ink-2); }

@media (max-width:767.98px) {
  .foot { padding:28px 24px 0; }
  .foot-main { flex-direction:column; }
  .foot-logo { align-self:center; margin-top:40px; }
}
@media (max-width:575.98px) { .foot { padding:28px 16px 0; } }

@media (prefers-reduced-motion:reduce) {
  .btn, .tile img, .tile-brand svg { transition:none; }
  .row:hover .tile img, .row:hover .tile-brand svg { transform:none; }
}