/* wgf-wallpapers.css - /wallpapers/ (wallpapers_app.py) game-chrome dress.
   Warband restyle 2026-08-05: the gallery reads as a panel of the same in-game
   screen the account section wears - a gold-trimmed inset well holding dark
   plate cards with carved caption strips and the client red download button
   (the .wgf-btn-red--sm kit variant, real atlas slices, styled in
   wgf-chrome.css). Loads AFTER wgf-account.css on this page so equal-specificity
   overrides here win the cascade; only this page links it, so nothing leaks to
   /account/ or /tracked/. Tokens come from static/css/_tokens.css with literal
   fallbacks. No hand-drawn art: trims and washes are flat color only. */

/* The gold-trimmed well the grid sits in (markup hook in wallpapers_app.py). */
.wgf-wall-well {
  border-color: var(--wgf-gold-dark, #5a4410);
  padding: 12px;
}

.wgf-wallpage .wgf-wallgrid { gap: 12px; }

/* One wallpaper = one dark warband plate: squared corners, thin neutral trim
   that lifts gold on hover, the same row language as the character list. */
.wgf-wallpage .wgf-wallcard {
  border: 1px solid var(--wgf-border-neutral, #453824);
  border-radius: 0;
  background: linear-gradient(180deg, #0d0a06, var(--wgf-bg-base, #16110a));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
  transition: border-color 120ms ease;
}
.wgf-wallpage .wgf-wallcard:hover,
.wgf-wallpage .wgf-wallcard:focus-within {
  border-color: var(--wgf-gold-dark, #5a4410);
}

.wgf-wallpage .wgf-wallcard img {
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
}

/* The caption strip is a carved plate seam, not a flat web bar: a dark wash
   over the warm panel tone with a faint top bevel, the window-header idiom. */
.wgf-wallpage .wgf-wallcard figcaption {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.30)),
    var(--wgf-panel, #221b11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.wgf-wallpage .wgf-wallcard__name {
  font-family: var(--font-game, serif);
  font-size: 13px;
  color: var(--wgf-text, #ece7dd);
  text-shadow: var(--text-ink-outline, 0 1px 2px rgba(0, 0, 0, 0.92));
}

/* The pixel-size badge: honest numbers in gold Friz on a dark chip. */
.wgf-wallpage .wgf-wallcard__badge {
  font-family: var(--font-game, serif);
  font-variant-numeric: tabular-nums;
  color: var(--wgf-gold, #f0c040);
  border: 1px solid var(--wgf-gold-dark, #5a4410);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* The download link is the kit's small client red button; only its seat in the
   caption row needs stating here. */
.wgf-wallpage .wgf-wallcard__dl { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .wgf-wallpage .wgf-wallcard { transition: none; }
}

/* -- Accuracy/perf lane 2026-08-05: tier headers, click-to-view, mobile fit -- */

/* Aspect-ratio section headers over each grid (16:9 / 2:1 / square). */
.wgf-wallpage .wgf-walltier {
  margin: 18px 0 10px;
  font-family: var(--font-game, serif);
  font-size: 1.05em;
  font-variant: small-caps;
  color: var(--wgf-gold, #f0c040);
  text-shadow: var(--text-ink-outline, 0 1px 2px rgba(0, 0, 0, 0.92));
}
.wgf-wallpage .wgf-walltier:first-child { margin-top: 4px; }
.wgf-wallpage .wgf-walltier__n {
  font-size: 0.78em;
  font-variant: normal;
  color: var(--wgf-muted, #a99d8a);
}

/* The image itself opens the full-resolution file in a new tab. */
.wgf-wallcard__view { display: block; cursor: zoom-in; }

/* At 375px the window body is ~291px wide; the account sheet's 150px minimum
   can never fit two columns there, so phones fell to ONE column and a ~25k px
   scroll. 136px minimums put two real columns on an iPhone. */
@media (max-width: 700px) {
  .wgf-wallpage .wgf-wallgrid {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 10px;
  }
}