/* wgf-plate-link.css — THE PLATE LINK GRID (owner ruling 2026-07-30, re-raised
   2026-08-04: "these plain boring boxes that are not using blizzard assets and
   do not look good at all").
   ---------------------------------------------------------------------------
   `.wtd-related-links` is the site's most-repeated furniture — the "Related
   tools" / "Token Price by Region" / "Related pages" card grids on 47 surfaces.
   It used to be a 1px border over a flat wash, which is exactly the plainness
   the owner keeps flagging. It is now the client's OWN list plate:

     auctionhouse-nav-button.png            the resting plate
     auctionhouse-nav-button-highlight.png  the hover slice the client uses
     ui-frame-metal-corner*-2x.png          the frame joinery (ig-38 container
                                            standard: a plate has corner detail)

   All four already ship in assets/ui/ (sliced from the committed atlas sheets),
   so this adds ZERO new art and no new requests beyond this one small sheet.

   ONE HOME (Hard Rule 11). This component previously existed TWICE — in
   wgf-seo-pages.css and again in wow-token-dashboard.css, with different
   paddings, colours and grid minimums, so the same card looked different
   depending on which page you were on. Both copies are deleted; this file is
   the only definition. It is linked from the base SSR shell (seo_kit) so every
   dynamic page gets it, and explicitly from the five static token pages.

   Markup is UNCHANGED — no surface had to be edited:
     <nav class="wtd-related-links" aria-label="…">
       <a href="/wow-token/us/">WoW Token Price US
         <span>North America, Oceania, and Latin America</span></a>
       …
     </nav> */

.wtd-related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: var(--space-3);
}

.wtd-related-links a {
  position: relative;
  display: block;
  box-sizing: border-box;
  min-height: 66px;
  padding: 13px 16px 14px;

  /* The client's list-button plate. Pinned to the top and scaled 118% because
     the 272x64 slice carries its art in the top ~86% of the canvas with a
     transparent strip below — the same fix already proven on .wgf-navbtn in
     wgf-chrome.css. The plate colour under it guarantees a complete surface
     even before the texture paints. */
  background-image: url("/assets/ui/auctionhouse-nav-button.png");
  background-position: center top;
  background-size: 100% 118%;
  background-repeat: no-repeat;
  background-color: #171310;

  border: 1px solid var(--wgf-metal, #4a4036);
  border-radius: var(--radius-control);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.62);

  color: var(--wgf-gold-bright);
  font-family: var(--font-game, var(--font-display));
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-shadow: var(--text-ink-outline);
}

/* The frame joinery — both top corners drawn from the real metal-frame art in a
   single pseudo-element, so a card reads as a fitted plate rather than a div
   with a border. Decorative only. */
.wtd-related-links a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 18px;
  background-image:
    url("/assets/ui/ui-frame-metal-cornertopleft-2x.png"),
    url("/assets/ui/ui-frame-metal-cornertopright-2x.png");
  background-position: left top, right top;
  background-size: 15px 15px, 15px 15px;
  background-repeat: no-repeat, no-repeat;
  opacity: 0.55;                 /* joinery, not a badge — it should read as edge */
  pointer-events: none;
}

/* The sub-line: the quiet description under the destination. */
.wtd-related-links a span {
  display: block;
  margin-top: 5px;
  color: var(--wgf-muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-shadow: none;
}

/* Hover / focus = the client's own highlight slice. Never a colour swap or a
   lift (in-game reference §0.9b: "the highlight / white glow, subtle change"). */
.wtd-related-links a:hover,
.wtd-related-links a:focus-visible {
  background-image: url("/assets/ui/auctionhouse-nav-button-highlight.png");
  background-position: center;
  background-size: 100% 100%;
  border-color: var(--wgf-gold-dark, #5a4410);
  color: #fff0c4;
}

.wtd-related-links a:hover::before,
.wtd-related-links a:focus-visible::before { opacity: 1; }

.wtd-related-links a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.62), var(--focus-ring);
}

.wtd-related-links a:active {
  background-image: url("/assets/ui/auctionhouse-nav-button-select.png");
  background-position: center;
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .wtd-related-links a {
    transition: border-color var(--motion-fast, 120ms) var(--ease-standard, ease),
                color var(--motion-fast, 120ms) var(--ease-standard, ease);
  }
}

/* One column on a phone: a 240px minimum would otherwise force a sideways squeeze. */
@media (max-width: 520px) {
  .wtd-related-links { grid-template-columns: 1fr; }
}