/* =====================================================================
   style.css — consolidated GTA V Wiki stylesheet
   Generated by consolidate_css.py — see /css/legacy/ for source files.
   ===================================================================== */


/* ===================================================================
   style.css
   =================================================================== */
/* =====================================================================
   GTA V Wiki — global stylesheet (light theme on LS sunset background)
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  --card:        #ffffff;
  --card-2:      #f6f8fa;
  --card-3:      #eef1f5;
  --border:      #e3e7ed;
  --border-2:    #cdd4de;

  --text:        #1d2330;
  --text-dim:    #4b5563;
  --text-faint:  #6b7280;

  --accent:      #6ba32f;          /* primary green */
  --accent-hi:   #7fb539;          /* brighter green for links / hover */
  --accent-dim:  #4d7e1f;
  --accent-soft: #ecf4dc;

  --gold:        #d49e1a;          /* used sparingly for highlights */

  --radius:      8px;
  --radius-sm:   5px;
  --shadow-card: 0 8px 32px rgba(20, 28, 50, .12);
  --shadow-soft: 0 2px 10px rgba(20, 28, 50, .06);

  --font-display: 'Oswald', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background-color: #2a1d28;
  background-image: url('/images/los_santos_bg-scaled.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--accent-hi); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: .005em;
}

::selection { background: var(--accent-soft); color: var(--text); }

/* ---------- Layout helpers ---------- */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* The main white "page" card that hosts wiki content */
.page-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 38px 44px 44px;
  margin: 26px 0 36px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.site-logo:hover { text-decoration: none; opacity: .88; }
.site-logo__img {
  height: auto;
  max-height: 45px;
  width: auto;
  display: block;
}

.main-nav {
  display: flex;
  gap: 24px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.main-nav a {
  color: var(--text-dim);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.main-nav a:hover,
.main-nav a.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 13px;
  color: var(--text-faint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
}
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-hi); text-decoration: underline; }
.breadcrumb__sep { opacity: .6; }
.breadcrumb__current { color: var(--text); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--border);
  margin-top: 50px;
  padding: 36px 0 28px;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer__brand { max-width: 320px; }
.site-footer__brand p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
  margin: 8px 0 0;
}
.site-footer__col h4 {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 12px;
  font-weight: 600;
}
.site-footer ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.site-footer ul a { color: var(--text-dim); font-size: 14px; text-decoration: none; }
.site-footer ul a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__bottom {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  line-height: 1.65;
}
.site-footer__legal-nav {
  margin-bottom: 10px;
  font-size: 13px;
}
.site-footer__legal-nav a {
  color: var(--text-dim);
  text-decoration: none;
}
.site-footer__legal-nav a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__legal-sep {
  color: var(--text-faint);
  margin: 0 8px;
  opacity: 0.6;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 6px;
  cursor: pointer;
}
.nav-toggle svg { width: 24px; height: 24px; }

/* =====================================================================
   MEGA MENU — used on pages that opt in by replacing .main-nav with
   the .mega-menu structure. The dropdown panel is absolutely positioned
   below the trigger and shows all top-level categories in 3 columns.
   ===================================================================== */
.mega-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.mega-menu__trigger {
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  transition: color .12s ease, background-color .12s ease;
}
.mega-menu__trigger:hover,
.mega-menu.is-open .mega-menu__trigger {
  color: var(--text);
  background: var(--card-2);
}
.mega-menu__chevron {
  width: 12px;
  height: 12px;
  transition: transform .2s ease;
}
.mega-menu.is-open .mega-menu__chevron {
  transform: rotate(180deg);
}

.mega-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 26px 30px;
  min-width: 640px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.mega-menu.is-open .mega-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .15s ease, transform .15s ease, visibility 0s;
}

.mega-menu__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 40px;
}
.mega-menu__col-title {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 10px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.mega-menu__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mega-menu__col li + li {
  margin-top: 2px;
}
.mega-menu__col a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 0 -8px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color .12s ease, background-color .12s ease;
}
.mega-menu__col a:hover {
  color: var(--text);
  background: var(--card-2);
  text-decoration: none;
}
.mega-menu__col a.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}
.mega-menu__icon {
  font-size: 16px;
  line-height: 1;
  flex: 0 0 18px;
  text-align: center;
}

/* ---------- Primary nav (Option D — direct links + Browse All) ----------
   Holds the 4 always-visible top-level links AND the .mega-menu wrapper.
   Gives the header proper visual weight without burying everything in a
   single dropdown. */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.primary-nav__link {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color .12s ease, background-color .12s ease;
}
.primary-nav__link:hover {
  color: var(--text);
  background: var(--card-2);
  text-decoration: none;
}
.primary-nav__link.is-active {
  color: var(--text);
}
/* Thin vertical separator between the direct links and "Browse All" */
.primary-nav__sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 8px;
}

/* ---------- Mega menu — mobile ---------- */
@media (max-width: 780px) {
  /* Hide the direct-link nav on mobile — hamburger handles everything */
  .primary-nav__link,
  .primary-nav__sep {
    display: none;
  }

  /* Drop the .mega-menu's positioning context so the panel below anchors
     to the .site-header (which is sticky/positioned) — gives the panel
     full header width instead of the tiny trigger-button width. */
  .mega-menu {
    position: static;
  }

  /* Hide the "Browse" trigger on mobile — hamburger drives the menu */
  .mega-menu__trigger {
    display: none;
  }

  /* Panel now spans the full width of the sticky header */
  .mega-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    margin-top: 0;
    padding: 18px 20px 22px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(20, 28, 50, .12);
  }
  .mega-menu__columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .mega-menu__col-title {
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
  /* Slightly bigger tap targets on mobile */
  .mega-menu__col a {
    padding: 10px 8px;
    font-size: 15px;
  }
}

@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; }
  .page-card { padding: 24px 20px; }

  .site-header__inner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 6px 20px 12px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
  }
  .main-nav.is-open { display: flex; }
  .main-nav a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border);
    border-bottom-color: var(--border);
  }
  .main-nav a:last-child { border-bottom: none; }
  .main-nav a.is-active { border-bottom-color: var(--accent); }
}

@media (max-width: 600px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* ===================================================================
   home.css
   =================================================================== */
/* =====================================================================
   Homepage styles — GTA V Wiki
   Extends style.css. Hero banner, category grid, protagonist showcase,
   quick-picks block.
   ===================================================================== */

/* ---------- HERO ---------- */
.home-hero {
  position: relative;
  margin: 26px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-color: #1a1620;
  background-image:
    linear-gradient(135deg, rgba(15, 12, 22, .82) 0%, rgba(36, 24, 38, .65) 100%),
    url('/images/gta_banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #ffffff;
}
.home-hero__inner {
  padding: 64px 48px 60px;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.home-hero__eyebrow {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d0e3a8;
  font-weight: 600;
  margin-bottom: 18px;
}
.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #ffffff;
  margin: 0 0 16px;
  text-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.home-hero__title em {
  font-style: normal;
  color: #9bc861;
}
.home-hero__tagline {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.55;
  color: #e6e2d5;
  margin: 0 0 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.home-hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary {
  background: var(--accent);
  color: #ffffff;
}
.btn--primary:hover {
  background: var(--accent-hi);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(107, 163, 47, .35);
}
.btn--secondary {
  background: rgba(255,255,255,.08);
  color: #ffffff;
  border-color: rgba(255,255,255,.22);
}
.btn--secondary:hover {
  background: rgba(255,255,255,.14);
  color: #ffffff;
}

.home-hero__stats {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.12);
  flex-wrap: wrap;
}
.home-hero__stat {
  text-align: center;
  min-width: 80px;
}
.home-hero__stat-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #9bc861;
  line-height: 1;
}
.home-hero__stat-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}

/* ---------- SECTION CARD ---------- */
/* Each .home-section is its own white card so titles + subtitles sit
   on a proper background (instead of floating over the body image). */
.home-section {
  margin: 22px 0 0;
  padding: 30px 36px 34px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.home-section__title {
  font-size: clamp(22px, 3vw, 28px);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.home-section__title::before {
  content: "";
  width: 5px;
  height: 26px;
  background: var(--accent);
  border-radius: 3px;
}
.home-section__sub {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
}
.home-section__link {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.home-section__link:hover { color: var(--accent-hi); text-decoration: underline; }

/* ---------- CATEGORY GRID ---------- */
.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.home-cat-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: transform .14s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-soft);
}
.home-cat-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.home-cat-card__icon {
  font-size: 32px;
  line-height: 1;
  margin: 0 0 12px;
}
/* SVG icon variant — inline stroke icon that picks up the accent green
   via currentColor. Used on weapon / vehicle / category hub cards. */
.home-cat-card__icon--svg {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin: 0 0 14px;
  transition: color .15s ease, transform .15s ease;
}
.home-cat-card__icon--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.home-cat-card:hover .home-cat-card__icon--svg {
  color: var(--accent-hi);
  transform: scale(1.05);
}

/* GTA-style icon variant — shows the silhouette PNG as-is (original
   black). Pass the icon URL via the --cat-icon CSS variable on the
   element. Icons vary in aspect ratio (2:1 to 6:1) so we use a fixed
   container with contain-fit; left-aligned with the title beneath. */
.home-cat-card__icon--gta {
  width: 130px;
  height: 40px;
  margin: 0 0 14px;
  background-image: var(--cat-icon);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  transition: transform .15s ease;
}
.home-cat-card:hover .home-cat-card__icon--gta {
  transform: scale(1.04);
  transform-origin: left center;
}

/* Label-chip variant — use INSTEAD of an icon when the category doesn't
   have a sensible icon (Missions, etc.). Renders a small uppercase
   accent-colored pill at the top of the card. */
.home-cat-card__label {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 11px;
  background: var(--accent-soft);
  border: 1px solid #c4dba0;
  border-radius: 99px;
  color: var(--accent-dim);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 14px;
}
/* When a card uses --no-icon, bump the title size since there's no icon
   competing for visual weight. */
.home-cat-card--no-icon .home-cat-card__title {
  font-size: 22px;
  margin-bottom: 8px;
}
.home-cat-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.home-cat-card__desc {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}
.home-cat-card__count {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- PROTAGONIST SHOWCASE ---------- */
.home-prot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 820px) {
  .home-prot-grid { grid-template-columns: 1fr; }
}
.home-prot-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: transform .14s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-soft);
}
.home-prot-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.home-prot-card__img {
  aspect-ratio: 1 / 1;
  background: var(--card-3);
  overflow: hidden;
}
.home-prot-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-prot-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.home-prot-card__chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  border: 1px solid #c4dba0;
  border-radius: 99px;
  color: var(--accent-dim);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  align-self: flex-start;
  margin-bottom: 10px;
}
.home-prot-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
}
.home-prot-card__role {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0 0 12px;
}
.home-prot-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
  flex: 1;
}

/* ---------- QUICK PICKS — multi-column link blocks ---------- */
.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 36px;
}
.home-quick-col h3 {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.home-quick-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-quick-col li {
  margin: 0;
}
.home-quick-col a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color .12s ease, padding .12s ease;
}
.home-quick-col a:hover {
  color: var(--accent);
  padding-left: 4px;
  text-decoration: none;
}

/* ---------- ABOUT block ---------- */
.home-about p {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
}
.home-about p:last-child { margin-bottom: 0; }
.home-about strong { color: var(--text); }

/* Two-column variant: text 70% / GTA V logo 30%. Stacks on mobile. */
.home-about--with-logo {
  display: flex;
  align-items: center;
  gap: 32px;
}
.home-about__text {
  flex: 0 0 70%;
  min-width: 0;
}
.home-about__logo {
  flex: 0 0 calc(30% - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-about__logo img {
  width: 100%;
  height: auto;
  max-width: 280px;
  display: block;
}
@media (max-width: 720px) {
  .home-about--with-logo {
    flex-direction: column;
    gap: 22px;
  }
  .home-about__text,
  .home-about__logo {
    flex: 1 1 100%;
  }
  .home-about__logo img { max-width: 200px; }
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 600px) {
  .home-hero__inner { padding: 44px 22px 40px; }
  .home-hero__stats { gap: 18px; }
  .home-section {
    margin-top: 18px;
    padding: 22px 18px 26px;
  }
}


/* ===================================================================
   category.css
   =================================================================== */
/* =====================================================================
   Category index pages — GTA V Wiki
   Extends style.css. Used for parent hubs (/weapons/, /vehicles/) and
   child hubs (/weapons/handguns/, /vehicles/cars/).
   ===================================================================== */

/* ---------- Category hero (top of each hub) ---------- */
.cat-hero {
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--accent-soft);
}
.cat-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cat-hero__chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  border: 1px solid #c4dba0;
  border-radius: 99px;
  color: var(--accent-dim);
  font-weight: 600;
}
.cat-hero h1 {
  font-size: clamp(32px, 4.6vw, 46px);
  margin: 0 0 8px;
  letter-spacing: -.005em;
}
.cat-hero__tagline {
  font-size: 16px;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 760px;
  margin: 0;
}

/* ---------- Stat strip (reuse pattern from char-stats) ---------- */
.cat-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 32px;
}
.cat-stats__item {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.cat-stats__item:last-child { border-right: none; }
.cat-stats__label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.cat-stats__value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-top: 3px;
}
@media (max-width: 720px) {
  .cat-stats { grid-template-columns: repeat(2, 1fr); }
  .cat-stats__item {
    border-bottom: 1px solid var(--border);
  }
  .cat-stats__item:nth-child(2n) { border-right: none; }
}

/* ---------- Section header inside a hub ---------- */
.cat-section { margin: 0 0 36px; }
.cat-section:last-child { margin-bottom: 0; }
.cat-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.cat-section__title {
  font-size: 22px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.cat-section__title::before {
  content: "";
  width: 4px;
  height: 22px;
  background: var(--accent);
  border-radius: 2px;
}
.cat-section__count {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

/* ---------- Subcategory grid (parent hub — links to child hubs) ---------- */
/* Reuses .home-cat-card / .home-cat-grid from home.css so the cards look
   identical to the homepage category cards. */

/* ---------- Item grid (child hub — links to individual pages) ---------- */
.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.item-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  transition: transform .14s ease, border-color .15s ease, box-shadow .15s ease;
}
.item-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}
.item-card__img {
  aspect-ratio: 16 / 9;
  background: var(--card-3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.item-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* If no image — show a generic icon placeholder */
.item-card__img--placeholder::after {
  content: attr(data-icon);
  font-size: 44px;
  color: var(--text-faint);
  opacity: .55;
}
.item-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}
.item-card__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  line-height: 1.25;
}
.item-card__meta {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--accent);
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0;
}
.item-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-dim);
}
.item-card__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.item-card__stat-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.item-card__stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
}

/* ---------- About / context block at the bottom of a hub ---------- */
.cat-about {
  padding: 22px 26px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.cat-about p {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
}
.cat-about p:last-child { margin-bottom: 0; }
.cat-about strong { color: var(--text); }


/* ===================================================================
   character.css
   =================================================================== */
/* =====================================================================
   Character page — GTA V Wiki (light theme)
   ===================================================================== */

/* ---------- Page header (the H1 + role + tagline area) ---------- */
.char-head {
  margin: 0;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--accent-soft);
}
.char-head__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.char-head__chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  border: 1px solid #c4dba0;
  border-radius: 99px;
  color: var(--accent-dim);
  font-weight: 600;
}
.char-head h1 {
  font-size: clamp(32px, 4.6vw, 46px);
  margin: 0 0 6px;
  letter-spacing: -.005em;
}
.char-head__role {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--accent);
  letter-spacing: .03em;
  margin: 0 0 12px;
}
.char-head__tagline {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 720px;
  margin: 0;
  line-height: 1.6;
}

/* ---------- Quick-fact strip ---------- */
.char-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
.char-stats__item {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.char-stats__item:last-child { border-right: none; }
.char-stats__label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}
.char-stats__value {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-top: 3px;
}

/* ---------- Two-column layout (head + stats + article + infobox) ---------- */
.char-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "head    aside"
    "stats   aside"
    "content aside";
  column-gap: 36px;
  row-gap: 28px;
  align-items: start;
}
.char-layout > .char-head    { grid-area: head; }
.char-layout > .char-stats   { grid-area: stats; }
.char-layout > .char-content { grid-area: content; }
.char-layout > .char-aside   { grid-area: aside; align-self: start; }

/* ---------- Quote callout ---------- */
.char-quote {
  position: relative;
  margin: 0 0 28px;
  padding: 22px 26px 22px 58px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}
.char-quote::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: 4px;
  font-family: var(--font-display);
  font-size: 60px;
  color: var(--accent);
  line-height: 1;
  opacity: .55;
}
.char-quote__attr {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-style: normal;
  font-family: var(--font-display);
  letter-spacing: .04em;
  color: var(--accent-dim);
}

/* ---------- TOC ---------- */
.char-toc {
  margin: 0 0 30px;
  padding: 16px 20px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
}
.char-toc__title {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 10px;
}
.char-toc ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 18px;
  counter-reset: toc;
}
.char-toc ol li::before {
  counter-increment: toc;
  content: counter(toc) ".";
  color: var(--accent);
  font-weight: 600;
  margin-right: 8px;
}
.char-toc a { color: var(--text-dim); text-decoration: none; }
.char-toc a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- Article sections ---------- */
.char-content > section { margin-bottom: 30px; }
.char-content > section > h2 {
  font-size: 24px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 11px;
}
.char-content > section > h2::before {
  content: "";
  width: 4px; height: 20px;
  background: var(--accent);
  border-radius: 2px;
  display: inline-block;
}
.char-content h3 {
  font-size: 18px;
  margin: 22px 0 8px;
  color: var(--text);
}
.char-content p {
  color: var(--text);
  margin: 0 0 12px;
}
.char-content p:last-child { margin-bottom: 0; }

/* ---------- Trivia ---------- */
.trivia-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0; padding: 0;
}
.trivia-grid li {
  position: relative;
  padding: 12px 14px 12px 38px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
}
.trivia-grid li::before {
  content: "\2022";
  position: absolute;
  left: 16px; top: 10px;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}
.trivia-grid strong { color: var(--text); font-weight: 600; }
.trivia-grid + p { margin-top: 16px; }

/* ---------- Appearances ---------- */
.appearances-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.appearances-list li {
  padding: 14px 16px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.appearances-list li strong { color: var(--text); font-weight: 600; }
.appearances-list li span {
  display: block;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 2px;
}

/* ---------- Info-box (sidebar) ---------- */
.infobox {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.infobox__portrait {
  position: relative;
  background: var(--card-3);
  overflow: hidden;
}
.infobox__portrait img {
  width: 100%;
  height: auto;
  display: block;
}
.infobox__title {
  padding: 14px 18px 4px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  margin: 0;
}
.infobox__subtitle {
  padding: 0 18px 12px;
  font-size: 12px;
  color: var(--accent);
  font-family: var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.infobox__list {
  list-style: none;
  margin: 0; padding: 0;
}
.infobox__list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}
.infobox__list li:last-child { border-bottom: none; }
.infobox__list dt {
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 1px 0 0;
}
.infobox__list dd { margin: 0; color: var(--text); }
.infobox__list dd a { color: var(--accent); text-decoration: none; }
.infobox__list dd a:hover { color: var(--accent-hi); text-decoration: underline; }

/* ---------- Related characters ---------- */
.related-chars { margin-top: 44px; }
.related-chars__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.related-chars__head h2 {
  font-size: 20px;
  margin: 0;
  display: flex; align-items: center; gap: 11px;
}
.related-chars__head h2::before {
  content: "";
  width: 4px; height: 18px;
  background: var(--accent);
  border-radius: 2px;
}
.related-chars__head a { font-size: 13px; color: var(--accent); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
a.related-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
}
a.related-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.related-card__img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: var(--card-3);
  overflow: hidden;
}
.related-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card__body { min-width: 0; }
.related-card__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--text);
}
.related-card__role {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--accent);
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .char-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "aside"
      "stats"
      "content";
    row-gap: 24px;
  }
  .infobox { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .char-stats { grid-template-columns: repeat(2, 1fr); }
  .char-stats__item { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .char-stats__item:nth-child(2n) { border-right: none; }
  .char-stats__item:last-child { border-bottom: none; }
  .char-quote { padding: 18px 18px 18px 48px; font-size: 15px; }
  .char-quote::before { font-size: 48px; }
  .char-toc ol { grid-template-columns: 1fr; }
  .trivia-grid { grid-template-columns: 1fr; }
  .infobox__list li { grid-template-columns: 85px 1fr; gap: 8px; }
}


/* ===================================================================
   weapon.css
   =================================================================== */
/* =====================================================================
   Weapon page — GTA V Wiki
   Extends character.css. Only weapon-specific overrides live here.
   ===================================================================== */

/* ---------- Infobox image — landscape (16:9) for weapon renders ---------- */
/* ---------- Weapon stat bars ---------- */
.weapon-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.weapon-stat {
  display: grid;
  grid-template-columns: 110px 1fr 44px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.weapon-stat__label {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
}
.weapon-stat__bar {
  height: 10px;
  background: var(--card-3);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.weapon-stat__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 99px 0 0 99px;
}
.weapon-stat__value {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Attachment / tint chips ---------- */
.weapon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.weapon-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 13px;
  color: var(--text);
}
.weapon-chip__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.18);
  flex: 0 0 12px;
}

.weapon-subsection {
  margin: 0 0 18px;
}
.weapon-subsection:last-child {
  margin-bottom: 0;
}
.weapon-subsection h3 {
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: .02em;
}


/* ===================================================================
   vehicle.css
   =================================================================== */
/* =====================================================================
   Vehicle page — GTA V Wiki
   Extends character.css + weapon.css (shares .weapon-stats / .weapon-chip
   for performance bars and modification chips).
   ===================================================================== */

/* ---------- Infobox image — landscape (16:9) for vehicle renders ---------- */
/* ---------- Customization sub-grid ---------- */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  list-style: none;
  padding: 0;
}
.mod-grid li {
  padding: 10px 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}


/* ===================================================================
   mission.css
   =================================================================== */
/* =====================================================================
   Mission page — GTA V Wiki
   Extends character.css. Only mission-specific overrides live here.
   ===================================================================== */

/* ---------- Infobox image — landscape (16:9) variant for mission screenshots ---------- */
/* ---------- Walkthrough numbered steps ---------- */
.walkthrough-step {
  margin: 0 0 16px;
  padding: 14px 18px 16px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
}
.walkthrough-step:last-child { margin-bottom: 0; }

.walkthrough-step__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}
.walkthrough-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1;
}

.walkthrough-step__list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
}
.walkthrough-step__list li {
  margin-bottom: 6px;
}
.walkthrough-step__list li:last-child {
  margin-bottom: 0;
}
.walkthrough-step__list strong {
  color: var(--text);
  font-weight: 600;
}
.walkthrough-step__list code {
  background: var(--card-3);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* ===================================================================
   places.css
   =================================================================== */
/* =====================================================================
   Places (Locations / Landmarks / Neighborhoods) page — GTA V Wiki
   Extends character.css. Location-screenshot specific styles.
   ===================================================================== */

/* ---------- Infobox image — landscape (16:9) screenshot ---------- */
/* Real in-game photo — fill the frame, don't letterbox like a render */
/* ---------- Address block ---------- */
.address-block {
  margin: 0 0 14px;
  padding: 12px 16px;
  background: var(--card-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.address-block strong {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 4px;
}


/* ===================================================================
   business.css
   =================================================================== */
/* =====================================================================
   Business page — GTA V Wiki
   Extends character.css. Manufacturer / shop / business-specific styles.
   ===================================================================== */

/* ---------- Infobox image — fills full infobox width ---------- */
/* Used by businesses, organizations, and any page where the image
   might be either a square logo OR a wider scene photo. Renders at
   16:9 like weapon pages: image fills full width, uses `contain` so
   square logos letterbox cleanly against the card-3 background and
   wide photos sit edge-to-edge without cropping. */
/* ---------- Vehicle / product list for manufacturer pages ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}
.product-grid li {
  padding: 12px 14px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.product-grid li strong {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.product-grid li span {
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: .03em;
  font-family: var(--font-display);
  text-transform: uppercase;
}


/* ===================================================================
   cheats.css
   =================================================================== */
/* =====================================================================
   Cheats page — GTA V Wiki
   Extends character.css. Adds per-platform cheat-code card components
   and an infobox badge variant for cheat pages.
   ===================================================================== */

/* ---------- Infobox badge — replaces image with a stylized cheat icon ---------- */
.cheat-badge {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #2b2b2b, #0e0e0e);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  position: relative;
}
.cheat-badge__icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.cheat-badge__label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.cheat-badge__type {
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  font-size: 11px;
  font-family: var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

/* ---------- Cheat codes grid — one card per row ---------- */
.cheat-codes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 16px;
}

/* ---------- Individual cheat code card ---------- */
.cheat-code-card {
  position: relative;
  padding: 16px 18px 18px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cheat-code-card__platform {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.cheat-code-card__icon {
  font-size: 18px;
  line-height: 1;
}
.cheat-code-card__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  word-spacing: 3px;
  line-height: 1.5;
  letter-spacing: .02em;
  user-select: all;
}
.cheat-code-card__code--phone {
  font-size: 20px;
  letter-spacing: .06em;
  font-weight: 700;
}
.cheat-code-card__hint {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Variant: per-platform accent on the platform label ---------- */
.cheat-code-card--phone   .cheat-code-card__platform { color: #6ba32f; }
.cheat-code-card--pc      .cheat-code-card__platform { color: #2c7dd6; }
.cheat-code-card--xbox    .cheat-code-card__platform { color: #107c10; }
.cheat-code-card--ps      .cheat-code-card__platform { color: #0e72ce; }

/* ---------- Related-card image swap — dark gradient with emoji centered ---------- */
.related-card__img--cheat {
  background: linear-gradient(135deg, #2b2b2b, #0e0e0e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
}


/* ===================================================================
   achievements.css
   =================================================================== */
/* =====================================================================
   Achievements page — GTA V Wiki
   Extends character.css. Stylized trophy badge for the infobox + small
   visual components for points, trophy types, secret indicators.
   ===================================================================== */

/* ---------- Trophy badge — replaces the infobox portrait image ---------- */
/* Square gradient badge with Gamerscore + trophy-type label.
   Modifier classes pick the badge color from the trophy type. */
.achievement-badge {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  position: relative;
}
.achievement-badge--bronze {
  background: linear-gradient(135deg, #c48142, #7d4d22);
}
.achievement-badge--silver {
  background: linear-gradient(135deg, #cfd0d3, #898b91);
}
.achievement-badge--gold {
  background: linear-gradient(135deg, #e2bb3f, #9c7a16);
}
.achievement-badge--platinum {
  background: linear-gradient(135deg, #aac6ec, #4e7ab3);
}

.achievement-badge__icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 6px;
  opacity: .92;
}
.achievement-badge__points {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.achievement-badge__points-label {
  font-size: 11px;
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: .9;
}
.achievement-badge__type {
  margin-top: 10px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, .22);
  border-radius: 99px;
  font-size: 11px;
  font-family: var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Inline trophy/points chips (used in TOC, related cards) ---------- */
.achievement-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
}
.achievement-pill--bronze   { background: #a06832; }
.achievement-pill--silver   { background: #8d8f95; color: #fff; }
.achievement-pill--gold     { background: #b6921d; }
.achievement-pill--platinum { background: #6285b4; }

/* ---------- Related-card trophy-color image swap ---------- */
/* Replaces the <img> in .related-card__img with a colored gradient block
   containing the Gamerscore. Used by the generated achievement pages. */
.related-card__img--trophy {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
}
.related-card__img--bronze   { background: linear-gradient(135deg, #c48142, #7d4d22); }
.related-card__img--silver   { background: linear-gradient(135deg, #cfd0d3, #898b91); }
.related-card__img--gold     { background: linear-gradient(135deg, #e2bb3f, #9c7a16); }
.related-card__img--platinum { background: linear-gradient(135deg, #aac6ec, #4e7ab3); }

/* ---------- "Secret achievement" reveal block ---------- */
/* Story-spoiler achievements use this. Pages can include this block to
   blur their description text until clicked. */
.spoiler-block {
  position: relative;
  padding: 14px 16px;
  background: var(--card-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin: 0 0 14px;
}
.spoiler-block[data-hidden="true"] {
  filter: blur(6px);
  cursor: pointer;
  user-select: none;
}


/* ===================================================================
   collectibles.css
   =================================================================== */
/* =====================================================================
   Collectibles page — GTA V Wiki
   Extends character.css. Themed badge per collectible type + a
   numbered-location grid component.
   ===================================================================== */

/* ---------- Infobox badge — themed gradient + icon + count ---------- */
.collectible-badge {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #3d3d3d, #161616);  /* default dark */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.collectible-badge__icon {
  font-size: 50px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.collectible-badge__count {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.collectible-badge__count-label {
  font-size: 11px;
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: .9;
}
.collectible-badge__type {
  margin-top: 10px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, .26);
  border-radius: 99px;
  font-size: 11px;
  font-family: var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ---------- Per-collectible-type gradient themes ---------- */
.collectible-badge--space    { background: linear-gradient(135deg, #5b35c4, #1b0e4a); }   /* Spaceship Parts — purple/violet */
.collectible-badge--paper    { background: linear-gradient(135deg, #b8924a, #5a3f17); }   /* Letter Scraps — tan/amber */
.collectible-badge--water    { background: linear-gradient(135deg, #2a7494, #0d3346); }   /* Submarine Pieces — teal/navy */
.collectible-badge--jungle   { background: linear-gradient(135deg, #5da027, #1f4710); }   /* Monkey Mosaics — green */
.collectible-badge--plant    { background: linear-gradient(135deg, #4ca64c, #1a4d1a); }   /* Peyote — bright green */
.collectible-badge--toy      { background: linear-gradient(135deg, #d04a3a, #6a1f15); }   /* Action Figures — red */
.collectible-badge--film     { background: linear-gradient(135deg, #d4a418, #594213); }   /* Movie Props — gold */
.collectible-badge--treasure { background: linear-gradient(135deg, #b97a1a, #4a2d05); }   /* Treasure Hunts — bronze */

/* ---------- Related-card image swap — same gradient + emoji ---------- */
.related-card__img--collectible {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
}

/* ---------- Locations grid — numbered entries per region ---------- */
.locations-region {
  margin: 0 0 24px;
}
.locations-region:last-child {
  margin-bottom: 0;
}
.locations-region h3 {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.locations-region__count {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}