/* /lol-rank-boost — the two places where the page's own .nx-seo rules and the
   shared assets/css/pages/games.css meet.

   This page is the only SEO landing page that also pulls in games.css (for the
   game section bar and the artwork hero). Before V109 the landing styles were
   unscoped, so `.hero` and `.nxg-arthero` both scored one class and games.css —
   loaded second — won every property they shared. Scoping the landing styles to
   `.nx-seo` raised them to two classes, which would have silently taken the art
   hero's background sizing and the section bar's gutter back off games.css.

   These rules hand both back, at a specificity that stays above .nx-seo's.
   They are restatements of games.css, not new design — keep them in step with
   `.nxg-hero-art, .nxg-arthero` and `.nxg-sectionbar-wrap` there.
   Load order matters: this file must come after seo-landing.css. */

/* V120 — the shared crop, restated. `.nx-seo .hero` sets `background:` as a
   SHORTHAND, which resets background-image to none; without this the artwork
   custom property would never be read on this page at all. Every value is the
   one games.css uses, including the focal point, so this hero shows the same
   slice of the same picture as the game's other three pages. */
.nx-seo .hero.nxg-arthero {
  background-color: #05070b;
  background-image: var(--nxg-hero-art, none);
  background-size: cover;
  background-position: var(--nxg-focus-x, 58%) var(--nxg-focus-y, 38%);
  background-repeat: no-repeat;
  background-origin: border-box;
  min-height: var(--nxg-hero-h, max(380px, 23vw));
}
/* This hero's height comes from its copy, not from a floor: an eyebrow, a
   heading, a lead paragraph, two buttons and four badges. At 375px that block
   plus the landing page's own 90px/70px padding made a 681px hero, and a 600px
   tall banner stretched to fill 681px is upscaled 1.13x — the one place on the
   site where the artwork was being enlarged past its own resolution. Trimming
   the padding to the same figures the other three heroes use brings the band
   back under the source height, and brings this page's proportions into line
   with them at the same time. Nothing about the copy changes. */
@media (max-width: 560px) {
  .nx-seo .hero.nxg-arthero { padding: 40px 0 34px; }
}
.nx-seo .nxg-sectionbar-wrap { margin-bottom: 4px; text-align: center; }