/* wgf-pvp-venues.css - the /pvp/venues/ catalog.
   Cards are in-game kit windows (.wgf-window from wgf-chrome.css); this sheet only lays out the
   venue-specific parts inside them (art frame, icon emblem, fact chips) and the art-fit crop
   buckets. Vanilla CSS only, no framework. Scoped under .wgf-pvp-wrap. */

.wgf-venue-hero { text-align: center; padding: 2.4rem 1rem 1.4rem; }
.wgf-venue-eyebrow-top {
  margin: 0 0 .35rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: #c8a24a;
}
.wgf-venue-hero h1 { margin: 0 0 .5rem; font-size: 2rem; color: #f3e9d2; }
.wgf-venue-hero p { max-width: 46rem; margin: 0 auto; color: #c9bfa8; line-height: 1.55; }

.wgf-venue-zone { margin: 1.6rem 0 2.2rem; }
.wgf-venue-eyebrow {
  margin: 0 0 .9rem; font-size: 1.15rem; color: #e8c372; letter-spacing: .04em;
  border-bottom: 1px solid rgba(200, 162, 74, .28); padding-bottom: .4rem;
}

.wgf-venues-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.wgf-venues-grid--solo { grid-template-columns: minmax(280px, 460px); justify-content: center; }

/* The card IS a kit window (.wgf-window supplies the metal frame + charcoal plate). Here we only
   make it a click target and give it the hover lift. */
.wgf-venue-card {
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.wgf-venue-card:hover {
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
a.wgf-venue-card:focus-visible { outline: none; box-shadow: var(--focus-ring, 0 0 0 2px #e8c372); }

.wgf-venue-body { display: flex; flex-direction: column; gap: .7rem; }

/* The loading-screen art: a fixed 16:9 frame (Arathi Basin's native ratio - the owner's bar).
   Non-16:9 screens are cropped by object-fit: cover; the [data-fit] bucket set by the page's
   art-fit script biases object-position so the focal band survives instead of an awkward cut. */
.wgf-venue-art {
  display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 6px; border: 1px solid rgba(0, 0, 0, .6); background: #14110c;
}
.wgf-venue-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block;
}
.wgf-venue-art img[data-fit="wide"]     { object-position: center center; }
.wgf-venue-art img[data-fit="standard"] { object-position: center 32%; }
.wgf-venue-art img[data-fit="narrow"]   { object-position: center 42%; }
.wgf-venue-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 12, 8, .85));
}
.wgf-venue-art--none {
  background: radial-gradient(circle at 50% 40%, rgba(60, 48, 28, .5), #14110c 70%);
}

/* The venue icon rides the art as a small map emblem, bottom-left, above the vignette. */
.wgf-venue-icon {
  position: absolute; left: .5rem; bottom: .5rem; z-index: 2; width: 40px; height: 40px;
  border-radius: 8px; border: 1px solid rgba(200, 162, 74, .5); background: #0f0c08;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

.wgf-venue-desc { margin: 0; color: #c1b79f; font-size: .9rem; line-height: 1.5; }

.wgf-venue-facts { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .1rem; }
.wgf-venue-fact {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .35rem .6rem; border-radius: 8px;
  background: rgba(200, 162, 74, .08); border: 1px solid rgba(200, 162, 74, .18);
}
.wgf-venue-fact b { font-size: 1rem; color: #e8c372; line-height: 1; }
.wgf-venue-fact small {
  margin-top: .2rem; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  color: #9a8f7d;
}

.wgf-venue-empty { color: #9a8f7d; font-style: italic; padding: 1rem 0; }

/* Detail-page rated-brackets window: the leaderboard cross-links are kit red buttons. */
.wgf-venue-brackets { margin: 1.6rem auto 0; max-width: 640px; }
.wgf-venue-brackets p { margin: 0 0 .8rem; color: #c9bfa8; line-height: 1.5; }
.wgf-venue-bracket-nav { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 560px) {
  .wgf-venue-hero h1 { font-size: 1.6rem; }
  .wgf-venues-grid { grid-template-columns: 1fr; }
  .wgf-venues-grid--solo { grid-template-columns: 1fr; }
}