/* Tanzania Wildlife Guide
   A self-contained editorial layer for wildlife.php. Public navbar dimensions
   and typography follow the rest of Splendor Safari; all page furniture uses
   a wg- prefix so it cannot alter another section of the site. */

.wg-page {
  --wg-forest-950: #0b2d25;
  --wg-forest-900: #123f33;
  --wg-forest-800: #1a5643;
  --wg-forest-700: #267257;
  --wg-leaf: #3f8f66;
  --wg-sand-500: #c88a45;
  --wg-sand-300: #e5bd82;
  --wg-cream: #f7f3eb;
  --wg-cream-deep: #eee6d7;
  --wg-paper: #fffdf9;
  --wg-white: #fff;
  --wg-ink: #1d2c27;
  --wg-muted: #66716c;
  --wg-line: #dfe5df;
  --wg-radius-sm: 12px;
  --wg-radius: 20px;
  --wg-radius-lg: 30px;
  --wg-shadow: 0 12px 36px rgba(11, 45, 37, .09);
  --wg-shadow-lift: 0 22px 55px rgba(11, 45, 37, .16);
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  color: var(--wg-ink);
  background: var(--wg-cream);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wg-page *,
.wg-page *::before,
.wg-page *::after { box-sizing: border-box; }

.wg-page img { max-width: 100%; }
.wg-page a { color: inherit; }
.wg-page [hidden] { display: none !important; }
.wg-page button,
.wg-page input { font: inherit; }

.wg-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.wg-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wg-skip-link {
  position: fixed;
  left: 12px;
  top: 10px;
  z-index: 1000;
  padding: 11px 16px;
  border-radius: 9px;
  color: #fff;
  background: var(--wg-forest-900);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .16s ease;
}

.wg-skip-link:focus { transform: translateY(0); }

.wg-page :focus-visible {
  outline: 3px solid #e3a95d;
  outline-offset: 3px;
}

/* Shared public navigation, scoped to this page. */
.wg-page .wg-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(18px, 4vw, 64px);
  border-bottom: 1px solid rgba(23, 79, 56, .1);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 25px rgba(18, 52, 39, .06);
  backdrop-filter: blur(14px);
}

.wg-page .wg-navbar .brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--wg-ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.wg-page .wg-navbar .brand img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: contain;
}

.wg-page .wg-navbar .links {
  display: flex;
  align-items: center;
  gap: 1px;
}

.wg-page .wg-navbar .links a {
  position: relative;
  padding: 10px 9px;
  color: #30453d;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.wg-page .wg-navbar .links a::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: var(--wg-forest-700);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.wg-page .wg-navbar .links a:hover::after,
.wg-page .wg-navbar .links a[aria-current="page"]::after { transform: scaleX(1); }
.wg-page .wg-navbar .links a[aria-current="page"] { color: var(--wg-forest-900); }

.wg-page .wg-navbar .nav-toggle {
  width: 44px;
  height: 44px;
  display: none;
  flex: 0 0 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--wg-ink);
  background: transparent;
  cursor: pointer;
}

.wg-page .wg-navbar .bar {
  width: 23px;
  height: 2px;
  display: block;
  margin: 5px auto;
  border-radius: 999px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}

/* Shared text and controls. */
.wg-eyebrow {
  margin: 0 0 10px;
  color: var(--wg-sand-500);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.wg-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.wg-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 21px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.wg-button:hover { transform: translateY(-2px); }
.wg-button-primary { color: #fff; background: var(--wg-forest-900); }
.wg-button-primary:hover { background: var(--wg-forest-800); box-shadow: 0 10px 24px rgba(18, 63, 51, .24); }
.wg-button-secondary { color: var(--wg-forest-900); border-color: rgba(18, 63, 51, .28); background: transparent; }
.wg-button-secondary:hover { background: rgba(18, 63, 51, .06); }
.wg-button-light { color: var(--wg-forest-950); background: #fff; }
.wg-button-light:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
.wg-button-outline-light { color: #fff; border-color: rgba(255, 255, 255, .62); background: rgba(255, 255, 255, .06); }
.wg-button-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

.wg-breadcrumbs {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(44px, 8vh, 86px);
  color: rgba(255, 255, 255, .82);
  font-size: .8rem;
  font-weight: 500;
}

.wg-breadcrumbs a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-underline-offset: 3px;
}

.wg-breadcrumbs a:hover { text-decoration-color: #fff; }

/* Guide masthead. */
.wg-guide-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(490px, 67vh, 680px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 24%, rgba(200, 138, 69, .3), transparent 28%),
    linear-gradient(135deg, #174d3e 0%, #09271f 78%);
}

.wg-guide-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -7vw;
  bottom: -14vw;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(255, 255, 255, .03), 0 0 0 116px rgba(255, 255, 255, .025);
}

.wg-guide-hero-image,
.wg-guide-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.wg-guide-hero-image { object-fit: cover; object-position: center 38%; }

.wg-guide-hero-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 29, 23, .91) 0%, rgba(8, 36, 29, .76) 48%, rgba(8, 32, 26, .36) 100%),
    linear-gradient(0deg, rgba(6, 29, 24, .38), transparent 55%);
}

.wg-guide-hero:not(.wg-has-image) .wg-guide-hero-scrim { display: none; }

.wg-guide-hero-inner {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 28px 52px;
}

.wg-guide-hero .wg-eyebrow { color: #f0bf79; }

.wg-guide-hero h1 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(3.1rem, 7.8vw, 6.9rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: .94;
  text-wrap: balance;
}

.wg-guide-lede {
  max-width: 720px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1rem, 2vw, 1.14rem);
  line-height: 1.75;
}

.wg-guide-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: clamp(32px, 6vh, 55px) 0 0;
}

.wg-guide-stats > div {
  min-width: 155px;
  padding: 3px 28px;
  border-left: 1px solid rgba(255, 255, 255, .28);
}

.wg-guide-stats > div:first-child { padding-left: 0; border-left: 0; }
.wg-guide-stats dt { font-family: "DM Serif Display", Georgia, serif; font-size: 2rem; line-height: 1; }
.wg-guide-stats dd { margin: 7px 0 0; color: rgba(255, 255, 255, .7); font-size: .74rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

/* Search and dynamic type filters. */
.wg-tools {
  position: relative;
  z-index: 10;
  padding: clamp(46px, 6vw, 70px) 0 24px;
  background: var(--wg-paper);
  border-bottom: 1px solid rgba(18, 63, 51, .08);
}

.wg-tools-heading,
.wg-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.wg-tools-heading h2,
.wg-section-heading h2 {
  margin: 0;
  color: var(--wg-forest-950);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(2rem, 4.1vw, 3.2rem);
  font-weight: 400;
  line-height: 1.08;
}

.wg-result-count {
  flex: 0 0 auto;
  margin: 0 0 5px;
  padding: 7px 13px;
  border: 1px solid var(--wg-line);
  border-radius: 999px;
  color: var(--wg-muted);
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
}

.wg-search-row { margin-top: 28px; }

.wg-search {
  position: relative;
  width: min(720px, 100%);
  display: block;
}

.wg-search > i {
  position: absolute;
  left: 19px;
  top: 50%;
  z-index: 1;
  color: var(--wg-forest-700);
  transform: translateY(-50%);
  pointer-events: none;
}

.wg-search input {
  width: 100%;
  min-height: 54px;
  padding: 13px 52px 13px 50px;
  border: 1.5px solid #d8dfda;
  border-radius: 999px;
  color: var(--wg-ink);
  background: #fff;
  box-shadow: 0 8px 25px rgba(18, 63, 51, .06);
  font-size: .94rem;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.wg-search input::placeholder { color: #929d97; }
.wg-search input:focus { border-color: var(--wg-leaf); box-shadow: 0 0 0 4px rgba(63, 143, 102, .14), 0 8px 25px rgba(18, 63, 51, .06); }

.wg-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--wg-muted);
  background: #eef2ef;
  cursor: pointer;
  transform: translateY(-50%);
}

.wg-search-clear:hover { color: var(--wg-forest-950); background: #e2e9e4; }

.wg-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 18px;
}

.wg-filter {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid #dce3de;
  border-radius: 999px;
  color: #405049;
  background: #fff;
  font-size: .81rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}

.wg-filter span {
  min-width: 25px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--wg-muted);
  background: #eef1ef;
  font-size: .7rem;
  text-align: center;
}

.wg-filter:hover { border-color: var(--wg-leaf); transform: translateY(-1px); }
.wg-filter.is-active { border-color: var(--wg-forest-900); color: #fff; background: var(--wg-forest-900); }
.wg-filter.is-active span { color: var(--wg-forest-950); background: #f2d4a8; }

.wg-filter i { font-size: .78rem; opacity: .78; }
.wg-filter.is-active i { opacity: 1; }

/* The group chips outnumber what fits on one line at small widths, so they
   live in their own scroller and the strip is free to overflow. */
.wg-filter-scroller { position: relative; }

/* Secondary refinements. Type and park narrow a group further; both are
   selects rather than chips because either could add a dozen more controls
   to a toolbar that is already dense on a phone. */
.wg-refine {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.wg-refine-field {
  min-width: 0;
  flex: 1 1 220px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wg-refine-field > span {
  color: var(--wg-muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wg-refine-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 38px 10px 15px;
  border: 1.5px solid #d8dfda;
  border-radius: 999px;
  color: var(--wg-ink);
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366716c'%3E%3Cpath d='M8 11.2 3.2 6.4l1.1-1.1L8 9l3.7-3.7 1.1 1.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  font-size: .87rem;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.wg-refine-field select:focus {
  border-color: var(--wg-leaf);
  box-shadow: 0 0 0 4px rgba(63, 143, 102, .14);
  outline: none;
}

.wg-refine-clear {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #dce3de;
  border-radius: 999px;
  color: var(--wg-forest-800);
  background: #fff;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.wg-refine-clear:hover { border-color: var(--wg-leaf); background: #f2f7f3; }

/* Staged reveal. The button is hidden in the markup and shown by script, so
   a visitor without JavaScript simply gets the whole catalogue at once. */
.wg-more-row { display: flex; justify-content: center; margin-top: 38px; }

.wg-more {
  gap: 10px;
  padding-inline: 30px;
}

.wg-more i { font-size: .75rem; }


/* Group directory — the crawlable index of the ten /wildlife/<group> pages,
   and the first thing a visitor who would rather browse than filter reaches. */
.wg-group-directory {
  padding: clamp(30px, 5vw, 58px) 0 clamp(46px, 6vw, 76px);
  background: var(--wg-paper);
  border-top: 1px solid rgba(18, 63, 51, .08);
}

.wg-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 15px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.wg-group-card {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  border: 1px solid rgba(20, 64, 51, .1);
  border-radius: var(--wg-radius-sm);
  color: var(--wg-ink);
  background: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wg-group-card:hover {
  border-color: rgba(38, 114, 87, .32);
  box-shadow: var(--wg-shadow);
  transform: translateY(-3px);
}

.wg-group-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #fff;
  background: var(--wg-forest-800);
  font-size: 1.02rem;
}

/* Same palette as the card badges, so a group reads as one colour throughout. */
.wg-group-card[data-group="predators"] .wg-group-card-icon { background: #78211a; }
.wg-group-card[data-group="large-herbivores"] .wg-group-card-icon { background: #603e12; }
.wg-group-card[data-group="antelopes-gazelles"] .wg-group-card-icon { background: #805815; }
.wg-group-card[data-group="primates"] .wg-group-card-icon { background: #3e2761; }
.wg-group-card[data-group="birds-of-prey"] .wg-group-card-icon { background: #1c3c69; }
.wg-group-card[data-group="water-birds"] .wg-group-card-icon { background: #0e5464; }
.wg-group-card[data-group="savanna-woodland-birds"] .wg-group-card-icon { background: #14553c; }
.wg-group-card[data-group="forest-birds"] .wg-group-card-icon { background: #16442b; }
.wg-group-card[data-group="reptiles"] .wg-group-card-icon { background: #4a5416; }
.wg-group-card[data-group="aquatic-life"] .wg-group-card-icon { background: #114a5c; }

.wg-group-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wg-group-card-body strong { color: var(--wg-forest-950); font-size: .95rem; font-weight: 700; line-height: 1.25; }
.wg-group-card-body small { color: var(--wg-muted); font-size: .76rem; line-height: 1.45; }

.wg-group-card-count {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--wg-forest-800);
  background: #eef4f0;
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

/* On a group landing page the strip is a row of links, not toggle buttons. */
.wg-filter-strip a.wg-filter { text-decoration: none; }
.wg-filter-strip a.wg-filter.is-active { color: #fff; background: var(--wg-forest-900); border-color: var(--wg-forest-900); }
.wg-guide-hero .wg-eyebrow i { margin-right: 7px; }

/* Catalogue cards. */
.wg-catalogue {
  min-height: 420px;
  padding: clamp(34px, 5vw, 62px) 0 clamp(65px, 8vw, 100px);
  background:
    radial-gradient(circle at 8% 8%, rgba(200, 138, 69, .08), transparent 24%),
    var(--wg-cream);
}

.wg-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
}

.wg-card-item { min-width: 0; }

.wg-card {
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 64, 51, .09);
  border-radius: var(--wg-radius);
  color: var(--wg-ink);
  background: var(--wg-paper);
  box-shadow: var(--wg-shadow);
  text-decoration: none;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.wg-card:hover {
  border-color: rgba(38, 114, 87, .34);
  box-shadow: var(--wg-shadow-lift);
  transform: translateY(-7px);
}

.wg-card-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, #d8e1d7, #9eae9f);
}

.wg-card-media::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(transparent, rgba(6, 27, 22, .46));
  pointer-events: none;
}

.wg-card-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.wg-card:hover .wg-card-media img { transform: scale(1.055); }

.wg-image-fallback,
.wg-gallery-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(15, 63, 49, .7);
  background:
    radial-gradient(circle at 72% 26%, rgba(255, 255, 255, .44), transparent 22%),
    linear-gradient(145deg, #e6ddca, #b8c8b7);
}

.wg-image-fallback i { font-size: 2rem; }
.wg-image-fallback strong { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wg-image-fallback small { color: rgba(15, 63, 49, .58); font-size: .68rem; font-weight: 600; letter-spacing: .015em; }
.wg-card-media.is-broken img { display: none; }
/* The fallback stacks three lines now, so tighten the gap the shared rule sets. */
.wg-card-media .wg-image-fallback { gap: 7px; padding: 12px; text-align: center; }

/* "Photograph coming soon".
   Most of the guide is written before it is photographed, so this state is the
   norm for now rather than an edge case — it is designed, not apologised for.
   Warm sand tones so a card without a picture still reads as part of the set
   instead of looking like a failed image load. */
.wg-photo-pending {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 22px;
  margin-top: clamp(24px, 4vw, 40px);
  padding: clamp(22px, 3.4vw, 34px);
  border: 1px dashed rgba(200, 138, 69, .45);
  border-radius: var(--wg-radius);
  background:
    radial-gradient(circle at 88% 12%, rgba(229, 189, 130, .2), transparent 42%),
    var(--wg-paper);
}

.wg-photo-pending-icon {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #7a4f14;
  background: #f6e6cd;
  font-size: 1.4rem;
}

.wg-photo-pending h2 {
  margin: 0;
  color: var(--wg-forest-950);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 400;
  line-height: 1.15;
}

.wg-photo-pending p:not(.wg-eyebrow) {
  max-width: 62ch;
  margin: 11px 0 0;
  color: #58645e;
  font-size: .9rem;
  line-height: 1.72;
}


.wg-card-type,
.wg-card-featured {
  position: absolute;
  z-index: 4;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.wg-card-type { left: 14px; color: #fff; background: rgba(10, 47, 37, .82); }
.wg-card-featured { right: 14px; color: #583b14; background: rgba(246, 211, 160, .93); }
.wg-card-featured i { font-size: .72rem; }

/* Group colour coding.
   Every tint is dark enough to keep white type legible over a photograph, so
   the badge reads the same on a bright savanna frame and a shaded forest one.
   The keys match ANIMAL_GROUP_LIST in includes/animal_groups.php. */
.wg-card-type i { font-size: .72rem; }
.wg-card-type[data-group="predators"] { background: rgba(120, 33, 26, .84); }
.wg-card-type[data-group="large-herbivores"] { background: rgba(96, 62, 18, .84); }
.wg-card-type[data-group="antelopes-gazelles"] { background: rgba(128, 88, 21, .84); }
.wg-card-type[data-group="primates"] { background: rgba(62, 39, 97, .84); }
.wg-card-type[data-group="birds-of-prey"] { background: rgba(28, 60, 105, .84); }
.wg-card-type[data-group="water-birds"] { background: rgba(14, 84, 100, .84); }
.wg-card-type[data-group="savanna-woodland-birds"] { background: rgba(20, 85, 60, .84); }
.wg-card-type[data-group="forest-birds"] { background: rgba(22, 68, 43, .84); }
.wg-card-type[data-group="reptiles"] { background: rgba(74, 84, 22, .84); }
.wg-card-type[data-group="aquatic-life"] { background: rgba(17, 74, 92, .84); }

.wg-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 23px 23px 21px;
}

.wg-card-body h2,
.wg-card-body h3 {
  margin: 0;
  color: var(--wg-forest-950);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 1.63rem;
  font-weight: 400;
  line-height: 1.12;
}

.wg-card-body h3 { font-size: 1.45rem; }

.wg-card-scientific {
  min-height: 1.2em;
  margin: 5px 0 0;
  color: #7b837e;
  font-family: Georgia, serif;
  font-size: .83rem;
}

/* Kiswahili name. Guides use it all day and clients pick it up on the first
   game drive, so it sits beside the Latin binomial rather than buried in the
   facts panel — visually distinct from it, since one is a field name and the
   other a taxonomic one. */
.wg-swahili {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--wg-forest-800);
  background: #edf4ef;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
}

.wg-card-scientific em + .wg-swahili { margin-left: 7px; }

.wg-swahili-hero {
  color: #f4e2c4;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
}

.wg-card-copy {
  margin: 15px 0 0;
  color: #58645e;
  font-size: .85rem;
  line-height: 1.7;
}

.wg-card-meta {
  display: grid;
  gap: 7px;
  margin-top: 17px;
}

.wg-card-meta span {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #69746e;
  font-size: .73rem;
  line-height: 1.45;
}

.wg-card-meta i { width: 13px; flex: 0 0 13px; margin-top: 3px; color: var(--wg-sand-500); text-align: center; }

.wg-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 19px;
  color: var(--wg-forest-800);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .025em;
}

.wg-card-action i { font-size: .72rem; transition: transform .18s ease; }
.wg-card:hover .wg-card-action i { transform: translateX(4px); }

.wg-no-results,
.wg-empty-guide {
  max-width: 670px;
  margin: 25px auto 0;
  padding: clamp(34px, 7vw, 65px);
  border: 1px dashed #cbd6cd;
  border-radius: var(--wg-radius-lg);
  text-align: center;
  background: rgba(255, 253, 249, .8);
}

.wg-no-results > span,
.wg-empty-guide > span {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--wg-forest-800);
  background: #e1ebe3;
  font-size: 1.7rem;
}

.wg-no-results h2,
.wg-empty-guide h2 {
  margin: 20px 0 8px;
  color: var(--wg-forest-950);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 400;
}

.wg-no-results p,
.wg-empty-guide p { margin: 0 auto 24px; max-width: 55ch; color: var(--wg-muted); line-height: 1.7; }
.wg-empty-guide .wg-button-row { justify-content: center; }

/* Safaris matched to this species.
   The strongest call to action on a profile page, so it sits above the generic
   planning banner rather than below the related-species list. */
.wg-tour-match { padding-top: clamp(46px, 6vw, 74px); }

.wg-tour-match-note {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--wg-muted);
  font-size: .85rem;
  line-height: 1.65;
}

.wg-tour-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.wg-tour-card { min-width: 0; }

.wg-tour-card > a {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(20, 64, 51, .1);
  border-radius: var(--wg-radius);
  color: var(--wg-ink);
  background: var(--wg-paper);
  box-shadow: var(--wg-shadow);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.wg-tour-card > a:hover {
  border-color: rgba(38, 114, 87, .32);
  box-shadow: var(--wg-shadow-lift);
  transform: translateY(-5px);
}

.wg-tour-media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(145deg, #d8e1d7, #9eae9f);
}

.wg-tour-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.wg-tour-card > a:hover .wg-tour-media img { transform: scale(1.05); }
.wg-tour-media.is-broken img { display: none; }

.wg-tour-duration {
  position: absolute;
  z-index: 4;
  left: 13px;
  bottom: 13px;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(10, 47, 37, .84);
  backdrop-filter: blur(8px);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wg-tour-body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 18px; }

.wg-tour-body h3 {
  margin: 0;
  color: var(--wg-forest-950);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.22;
}

.wg-tour-parks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.wg-tour-parks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #69746e;
  font-size: .73rem;
  line-height: 1.4;
}

.wg-tour-parks i { color: var(--wg-sand-500); font-size: .7rem; }

.wg-tour-price {
  margin: 15px 0 0;
  color: var(--wg-forest-900);
  font-size: 1.22rem;
  font-weight: 800;
}

.wg-tour-price span,
.wg-tour-price small {
  color: var(--wg-muted);
  font-size: .74rem;
  font-weight: 700;
}

.wg-tour-card .wg-card-action { margin-top: auto; padding-top: 16px; }

.wg-guide-cta,
.wg-planning-cta {
  color: #fff;
  background:
    radial-gradient(circle at 88% 15%, rgba(229, 189, 130, .24), transparent 26%),
    linear-gradient(135deg, var(--wg-forest-900), var(--wg-forest-950));
}

.wg-guide-cta-inner,
.wg-planning-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 46px;
}

.wg-guide-cta-inner { padding-block: clamp(55px, 7vw, 86px); }
.wg-guide-cta h2,
.wg-planning-cta h2 { margin: 0; max-width: 720px; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.15rem, 4.7vw, 3.7rem); font-weight: 400; line-height: 1.06; }
.wg-guide-cta p:not(.wg-eyebrow),
.wg-planning-cta p:not(.wg-eyebrow) { max-width: 680px; margin: 15px 0 0; color: rgba(255, 255, 255, .75); line-height: 1.7; }
.wg-guide-cta .wg-button-row,
.wg-planning-cta .wg-button-row { flex: 0 0 auto; justify-content: flex-end; }

/* Individual wildlife hero. */
.wg-detail { background: var(--wg-paper); }

.wg-detail-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(550px, 72vh, 760px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 26%, rgba(200, 138, 69, .22), transparent 25%),
    linear-gradient(135deg, #174d3e, #08251e);
}

.wg-detail-hero-media,
.wg-detail-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.wg-detail-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.wg-detail-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(5, 26, 21, .91) 0%, rgba(7, 30, 24, .74) 52%, rgba(7, 30, 24, .22) 100%),
    linear-gradient(0deg, rgba(4, 21, 17, .58), transparent 58%);
}

.wg-detail-hero:not(.wg-has-image) .wg-detail-scrim { background: linear-gradient(120deg, rgba(0, 0, 0, .08), rgba(255, 255, 255, .02)); }

.wg-detail-hero-inner {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  padding-block: 30px 50px;
}

.wg-detail-heading { max-width: 830px; margin-top: auto; }

.wg-label-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.wg-type-badge,
.wg-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 35, 27, .48);
  backdrop-filter: blur(10px);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wg-status-badge { color: #f8dfb8; }

/* The group badge on a profile hero is a link back to that group's slice of
   the guide, so it gets the type badge's shape plus an affordance on hover. */
.wg-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  color: #fff;
  background: rgba(6, 35, 27, .55);
  backdrop-filter: blur(10px);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.wg-group-badge:hover { border-color: rgba(255, 255, 255, .6); transform: translateY(-1px); }
.wg-group-badge[data-group="predators"] { background: rgba(120, 33, 26, .74); }
.wg-group-badge[data-group="large-herbivores"] { background: rgba(96, 62, 18, .74); }
.wg-group-badge[data-group="antelopes-gazelles"] { background: rgba(128, 88, 21, .74); }
.wg-group-badge[data-group="primates"] { background: rgba(62, 39, 97, .74); }
.wg-group-badge[data-group="birds-of-prey"] { background: rgba(28, 60, 105, .74); }
.wg-group-badge[data-group="water-birds"] { background: rgba(14, 84, 100, .74); }
.wg-group-badge[data-group="savanna-woodland-birds"] { background: rgba(20, 85, 60, .74); }
.wg-group-badge[data-group="forest-birds"] { background: rgba(22, 68, 43, .74); }
.wg-group-badge[data-group="reptiles"] { background: rgba(74, 84, 22, .74); }
.wg-group-badge[data-group="aquatic-life"] { background: rgba(17, 74, 92, .74); }

/* "Where to see it" — the parks named in this profile's locations, each a
   shortcut into the guide filtered to that destination. */
.wg-park-note { margin: 15px 0 0; color: var(--wg-muted); font-size: .8rem; line-height: 1.55; }

.wg-park-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.wg-park-chips a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid #dfe6e0;
  border-radius: 999px;
  color: var(--wg-forest-800);
  background: #f4f8f5;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.wg-park-chips a:hover {
  border-color: var(--wg-leaf);
  background: #e8f1ea;
  transform: translateY(-1px);
}

.wg-park-chips i { color: var(--wg-sand-500); font-size: .72rem; }

.wg-detail-heading h1 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(3.5rem, 9vw, 7.7rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: .9;
  text-wrap: balance;
}

.wg-scientific-name { margin: 13px 0 0; color: #f3d9b2; font-family: Georgia, serif; font-size: clamp(1rem, 2.3vw, 1.28rem); }
.wg-detail-lede { max-width: 730px; margin: 18px 0 0; color: rgba(255, 255, 255, .86); font-size: clamp(.98rem, 2vw, 1.08rem); line-height: 1.72; }

.wg-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(30px, 5vh, 48px) 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.wg-hero-facts > div { min-width: 0; padding: 0 24px; border-left: 1px solid rgba(255, 255, 255, .2); }
.wg-hero-facts > div:first-child { padding-left: 0; border-left: 0; }
.wg-hero-facts dt { display: flex; align-items: center; gap: 7px; color: #efc78e; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wg-hero-facts dd { margin: 7px 0 0; color: rgba(255, 255, 255, .88); font-size: .84rem; line-height: 1.5; }

.wg-detail-shell { padding-top: 25px; padding-bottom: clamp(70px, 9vw, 110px); }

.wg-back-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 7px 0 34px;
  color: var(--wg-forest-800);
  font-size: .79rem;
  font-weight: 800;
  text-decoration: none;
}

.wg-back-link i { font-size: .72rem; transition: transform .16s ease; }
.wg-back-link:hover i { transform: translateX(-4px); }

/* Photo gallery. */
.wg-gallery-section { padding: clamp(35px, 5vw, 58px) 0 clamp(56px, 8vw, 88px); }
.wg-section-heading > span,
.wg-section-heading > a { margin-bottom: 5px; color: var(--wg-muted); font-size: .78rem; font-weight: 700; text-decoration: none; }
.wg-section-heading > a { color: var(--wg-forest-700); }
.wg-section-heading > a i { margin-left: 6px; font-size: .68rem; }

.wg-gallery {
  margin-top: 25px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-rows: auto auto;
  gap: 14px;
}

.wg-gallery-main {
  position: relative;
  grid-row: 1;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--wg-radius);
  color: inherit;
  background: #dce4dc;
  box-shadow: var(--wg-shadow);
}

.wg-gallery-main > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .16s ease, transform .35s ease;
}

.wg-gallery-main:hover > img { transform: scale(1.015); }
.wg-gallery-main > img.is-switching { opacity: .35; }
.wg-gallery-main.is-broken > img { display: none; }
.wg-gallery-fallback { color: var(--wg-forest-700); font-size: 2rem; }

.wg-gallery-thumbs {
  grid-column: 2;
  grid-row: 1;
  max-height: min(62vw, 664px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 3px 5px 3px 3px;
  scrollbar-width: thin;
  scrollbar-color: #b5c2b8 transparent;
}

.wg-gallery-thumb {
  position: relative;
  flex: 0 0 78px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 11px;
  opacity: .72;
  background: #e1e7e2;
  transition: opacity .16s ease, border-color .16s ease, transform .16s ease;
}

.wg-gallery-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.wg-gallery-thumb:hover { opacity: 1; transform: translateX(-2px); }
.wg-gallery-thumb.is-current { border-color: var(--wg-sand-500); opacity: 1; }
.wg-gallery-thumb.is-broken img { opacity: 0; }

.wg-gallery-caption {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--wg-muted);
  font-size: .78rem;
  font-style: italic;
  line-height: 1.55;
}

/* Long-form profile and fact panels. */
.wg-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
  align-items: start;
  gap: clamp(42px, 7vw, 90px);
  padding: clamp(50px, 7vw, 80px) 0;
  border-top: 1px solid var(--wg-line);
}

.wg-content-section + .wg-content-section { margin-top: clamp(50px, 7vw, 76px); }
.wg-content-section h2 { margin: 0 0 22px; color: var(--wg-forest-950); font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.1rem, 4.5vw, 3.45rem); font-weight: 400; line-height: 1.05; }
.wg-content-section h3 { margin: 28px 0 8px; color: var(--wg-forest-800); font-size: .85rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wg-content-section p:not(.wg-eyebrow) { margin: 0; color: #4e5c55; font-size: .98rem; line-height: 1.88; }
.wg-content-section p:not(.wg-eyebrow) + p:not(.wg-eyebrow) { margin-top: 18px; }

.wg-feature-section {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 20px;
  padding: 27px;
  border: 1px solid #e0d5c2;
  border-radius: var(--wg-radius);
  background: #fbf5e9;
}

.wg-feature-section h2 { font-size: clamp(1.8rem, 3.5vw, 2.55rem); }
.wg-feature-icon { width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: var(--wg-sand-500); font-size: 1.35rem; }

.wg-facts-column {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}

.wg-fact-panel {
  overflow: hidden;
  padding: 23px;
  border: 1px solid #dfe5df;
  border-radius: var(--wg-radius);
  background: #fff;
  box-shadow: 0 10px 32px rgba(18, 63, 51, .065);
}

.wg-fact-panel-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid #e7ebe8; }
.wg-fact-panel-heading i { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--wg-forest-800); background: #e6f0e9; }
.wg-fact-panel-heading h2 { margin: 0; color: var(--wg-forest-950); font-family: "DM Serif Display", Georgia, serif; font-size: 1.42rem; font-weight: 400; }

.wg-fact-list { margin: 0; }
.wg-fact-list > div { display: grid; grid-template-columns: minmax(86px, .72fr) minmax(0, 1.28fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid #edf0ee; }
.wg-fact-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.wg-fact-list dt { color: #77817c; font-size: .69rem; font-weight: 800; letter-spacing: .035em; line-height: 1.45; text-transform: uppercase; }
.wg-fact-list dd { min-width: 0; margin: 0; color: #34463e; font-size: .79rem; line-height: 1.58; overflow-wrap: anywhere; }

.wg-population-panel { border-color: #dac6a7; background: linear-gradient(145deg, #fffdf8, #f8f0e3); }
.wg-population-number { margin: 21px 0 0; color: var(--wg-forest-900); font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1; overflow-wrap: anywhere; }
.wg-population-label { margin: 7px 0 0; color: #727b76; font-size: .7rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.wg-population-period { margin: 6px 0 15px; color: #69736e; font-size: .7rem; line-height: 1.5; }
.wg-source-note { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e6dccd; color: #737b77; font-size: .7rem; line-height: 1.55; }
.wg-source-note a { color: var(--wg-forest-700); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.wg-planning-cta {
  padding: clamp(40px, 6vw, 66px);
  border-radius: var(--wg-radius-lg);
}

.wg-planning-cta h2 { font-size: clamp(2rem, 4.3vw, 3.35rem); }

.wg-related { padding-top: clamp(64px, 8vw, 96px); }
.wg-related-grid { margin-top: 26px; }

/* Error and temporary-unavailable states. */
.wg-state-page {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 60px 20px;
  background:
    radial-gradient(circle at 15% 15%, rgba(200, 138, 69, .16), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(38, 114, 87, .13), transparent 30%),
    var(--wg-cream);
}

.wg-state-card {
  width: min(680px, 100%);
  padding: clamp(38px, 8vw, 76px);
  border: 1px solid rgba(18, 63, 51, .1);
  border-radius: var(--wg-radius-lg);
  text-align: center;
  background: rgba(255, 253, 249, .94);
  box-shadow: var(--wg-shadow);
}

.wg-state-icon { width: 76px; height: 76px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 50%; color: var(--wg-forest-800); background: #e0ebe3; font-size: 1.65rem; }
.wg-state-code { display: block; color: #dcc29d; font-family: "DM Serif Display", Georgia, serif; font-size: clamp(4rem, 14vw, 7.5rem); line-height: .8; }
.wg-state-card .wg-eyebrow { margin-top: 24px; }
.wg-state-card h1 { margin: 0; color: var(--wg-forest-950); font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 400; line-height: 1.02; }
.wg-state-card > p:not(.wg-eyebrow) { max-width: 530px; margin: 18px auto 27px; color: var(--wg-muted); line-height: 1.75; }
.wg-state-card .wg-button-row { justify-content: center; }

/* Footer. */
.wg-footer { padding: 34px 0; color: rgba(255, 255, 255, .72); background: #08271f; }
.wg-footer-shell { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 25px 40px; }
.wg-footer-brand { display: flex; align-items: center; gap: 13px; }
.wg-footer-brand img { width: 52px; height: 52px; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; }
.wg-footer-brand div { display: grid; }
.wg-footer-brand strong { color: #fff; font-size: .95rem; }
.wg-footer-brand span { color: rgba(255, 255, 255, .58); font-size: .7rem; }
.wg-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; }
.wg-footer-links a { color: rgba(255, 255, 255, .76); font-size: .73rem; font-weight: 600; text-decoration: none; }
.wg-footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wg-footer-shell > p { grid-column: 1 / -1; margin: 0; padding-top: 21px; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .55); font-size: .68rem; text-align: center; }

@media (max-width: 1080px) {
  .wg-page .wg-navbar .nav-toggle { display: block; }

  .wg-page .wg-navbar .links {
    position: absolute;
    left: 0;
    right: 0;
    top: 72px;
    max-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    visibility: hidden;
    padding: 0 max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(23, 79, 56, .1);
    background: #fff;
    box-shadow: 0 12px 24px rgba(18, 52, 39, .1);
    transition: max-height .24s ease, padding .24s ease, visibility .24s;
  }

  .wg-page .wg-navbar.open .links {
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    visibility: visible;
    padding-top: 8px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .wg-page .wg-navbar .links a { min-height: 47px; display: flex; align-items: center; padding: 12px 6px; border-bottom: 1px solid #f0f3f1; }
  .wg-page .wg-navbar .links a:last-child { border-bottom: 0; }
  .wg-page .wg-navbar .links a::after { display: none; }
  .wg-page .wg-navbar.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .wg-page .wg-navbar.open .bar:nth-child(2) { opacity: 0; }
  .wg-page .wg-navbar.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .wg-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-guide-cta-inner,
  .wg-planning-cta { align-items: flex-start; flex-direction: column; }
  .wg-guide-cta .wg-button-row,
  .wg-planning-cta .wg-button-row { justify-content: flex-start; }
}

@media (max-width: 850px) {
  .wg-detail-grid { grid-template-columns: 1fr; gap: 55px; }
  .wg-facts-column { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wg-population-panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .wg-gallery { grid-template-columns: 1fr; }
  .wg-gallery-thumbs { grid-column: 1; grid-row: 2; max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 3px 3px 7px; }
  .wg-gallery-thumb { flex-basis: 105px; height: 72px; }
  .wg-gallery-thumb:hover { transform: translateY(-2px); }
  .wg-gallery-caption { grid-row: 3; }
}

@media (max-width: 680px) {
  .wg-shell { width: min(100% - 28px, 1180px); }

  .wg-page .wg-navbar {
    height: 64px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }

  .wg-page .wg-navbar .brand { gap: 8px; font-size: .92rem; }
  .wg-page .wg-navbar .brand img { width: 39px; height: 39px; flex-basis: 39px; }
  .wg-page .wg-navbar .links { top: 64px; }
  .wg-page .wg-navbar.open .links { max-height: calc(100dvh - 64px); }

  .wg-guide-hero { min-height: max(555px, calc(100svh - 64px)); }
  .wg-guide-hero-inner { padding-block: 24px 40px; }
  .wg-breadcrumbs { margin-bottom: 42px; font-size: .72rem; }
  .wg-guide-hero h1 { font-size: clamp(3.25rem, 16vw, 5.3rem); }
  .wg-guide-lede { margin-top: 20px; font-size: .94rem; line-height: 1.65; }
  .wg-guide-stats { gap: 17px 0; margin-top: 31px; }
  .wg-guide-stats > div { min-width: 50%; padding: 0 15px; }
  .wg-guide-stats > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .wg-guide-stats dt { font-size: 1.7rem; }

  .wg-tools-heading,
  .wg-section-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .wg-result-count { margin: 0; }
  .wg-filter-strip { flex-wrap: nowrap; margin-inline: -14px; padding: 2px 14px 8px; overflow-x: auto; scrollbar-width: none; }
  .wg-filter-strip::-webkit-scrollbar { display: none; }
  .wg-filter { flex: 0 0 auto; }
  .wg-refine { gap: 10px; }
  .wg-refine-field { flex: 1 1 100%; max-width: none; }
  .wg-refine-clear { width: 100%; justify-content: center; }
  .wg-more-row { margin-top: 28px; }
  .wg-more { width: 100%; justify-content: center; }
  .wg-group-cards { grid-template-columns: 1fr; gap: 12px; }
  .wg-group-directory { padding-top: 28px; }

  .wg-card-grid { grid-template-columns: 1fr; gap: 19px; }
  .wg-tour-grid { grid-template-columns: 1fr; gap: 17px; }
  .wg-photo-pending { grid-template-columns: 1fr; gap: 15px; }
  .wg-tour-match { padding-top: 40px; }
  .wg-card-body { padding: 21px 20px 19px; }
  .wg-card:hover { transform: translateY(-3px); }

  .wg-guide-cta-inner,
  .wg-planning-cta { gap: 28px; }
  .wg-button-row { width: 100%; }
  .wg-guide-cta .wg-button,
  .wg-planning-cta .wg-button { width: 100%; }

  .wg-detail-hero { min-height: max(610px, calc(100svh - 64px)); }
  .wg-detail-hero-inner { padding-block: 25px 34px; }
  .wg-detail-heading h1 { font-size: clamp(3.5rem, 18vw, 5.6rem); }
  .wg-hero-facts { grid-template-columns: 1fr; gap: 13px; padding-top: 19px; }
  .wg-hero-facts > div { padding: 0; border-left: 0; }
  .wg-hero-facts dd { margin-top: 3px; }
  .wg-detail-shell { padding-top: 18px; }
  .wg-gallery-section { padding-top: 24px; }
  .wg-gallery-main { aspect-ratio: 4 / 3; border-radius: 15px; }
  .wg-detail-grid { padding-top: 48px; }
  .wg-facts-column { grid-template-columns: 1fr; }
  .wg-population-panel:last-child:nth-child(odd) { grid-column: auto; }
  .wg-feature-section { grid-template-columns: 1fr; padding: 23px; }
  .wg-feature-icon { width: 52px; height: 52px; }
  .wg-planning-cta { padding: 31px 22px; border-radius: 20px; }

  .wg-footer-shell { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wg-footer-links { justify-content: center; }
}

@media (max-width: 410px) {
  .wg-page .wg-navbar .brand span { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wg-guide-stats > div { min-width: 100%; padding-left: 0; border-left: 0; }
  .wg-search input { font-size: .85rem; }
  .wg-fact-list > div { grid-template-columns: 1fr; gap: 5px; }
  .wg-gallery-thumb { flex-basis: 88px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .wg-page *,
  .wg-page *::before,
  .wg-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .wg-page .wg-navbar,
  .wg-tools,
  .wg-guide-cta,
  .wg-planning-cta,
  .wg-footer,
  .wg-back-link { display: none !important; }
  .wg-page { color: #111; background: #fff; }
  .wg-detail-hero { min-height: 0; color: #111; background: #fff; }
  .wg-detail-hero-media,
  .wg-detail-scrim { display: none; }
  .wg-detail-hero-inner { min-height: 0; padding: 30px 0; }
  .wg-breadcrumbs { display: none; }
  .wg-detail-heading { margin: 0; }
  .wg-detail-heading h1,
  .wg-scientific-name,
  .wg-detail-lede,
  .wg-hero-facts dt,
  .wg-hero-facts dd { color: #111; }
  .wg-hero-facts { border-top-color: #aaa; }
  .wg-detail-grid { grid-template-columns: 1fr; }
  .wg-facts-column { position: static; grid-template-columns: repeat(2, 1fr); }
  .wg-card { break-inside: avoid; box-shadow: none; }
}