/* Public Explore Tanzania — the destination guide at /explore_tanzania.php.
   Sits beside about.css, reviews.css and trip-insights.css: same Poppins/DM
   Serif pairing, same greens, same navbar. */

:root {
  --xt-green: #12433a;
  --xt-green-2: #1d6b41;
  --xt-green-3: #2f8a63;
  --xt-sand: #e8a33d;
  --xt-ink: #1f2937;
  --xt-muted: #6b7280;
  --xt-border: #e5e7eb;
  --xt-bg: #f7f8f7;
  --xt-card: #fff;
  --xt-radius: 16px;
  --xt-shadow: 0 10px 30px rgba(18, 67, 58, .08);
  --xt-shadow-lift: 0 18px 44px rgba(18, 67, 58, .14);
}

* { box-sizing: border-box; }

.xt-page {
  margin: 0;
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--xt-ink);
  background: var(--xt-bg);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
.xt-page img { max-width: 100%; }

.xt-wrap { width: min(1160px, 92vw); margin: 0 auto; }

.xt-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px; background: var(--xt-green); color: #fff;
  border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Public navbar ----------
   A deliberate copy of the rules in about.css, reviews.css and
   trip-insights.css: those styles live inside each public page's own
   stylesheet and this page loads none of them. Keep them in step. */
.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);
}
.navbar .brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--xt-ink); font-size: 1rem; font-weight: 700; text-decoration: none;
}
.navbar .brand img { width: 46px; height: 46px; object-fit: contain; }

.navbar .links { display: flex; align-items: center; gap: 2px; }
.navbar .links a {
  position: relative;
  padding: 10px 10px;
  color: #30453d;
  font-size: .88rem; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.navbar .links a::after {
  content: ""; position: absolute;
  left: 10px; right: 10px; bottom: 4px; height: 2px;
  border-radius: 2px; background: var(--xt-green-2);
  transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.navbar .links a:hover::after,
.navbar .links a[aria-current="page"]::after { transform: scaleX(1); }
.navbar .links a[aria-current="page"] { color: var(--xt-green); }

.navbar .nav-toggle {
  width: 44px; height: 44px; display: none;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.navbar .bar {
  width: 23px; height: 2px; display: block; margin: 5px auto;
  border-radius: 999px; background: var(--xt-ink);
  transition: transform .2s ease, opacity .2s ease;
}

@media (max-width: 1040px) {
  .navbar .nav-toggle { display: block; }
  .navbar .links {
    position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 18px 16px;
    background: #fff;
    border-bottom: 1px solid rgba(23, 79, 56, .1);
    box-shadow: 0 12px 24px rgba(18, 52, 39, .1);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .22s ease, visibility .22s;
  }
  .navbar.open .links { max-height: 460px; visibility: visible; }
  .navbar .links a { padding: 13px 6px; border-bottom: 1px solid #f0f3f1; }
  .navbar .links a:last-child { border-bottom: 0; }
  .navbar .links a::after { display: none; }
  .navbar.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar.open .bar:nth-child(2) { opacity: 0; }
  .navbar.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- Buttons ---------- */
.xt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-size: .92rem; font-weight: 700; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.xt-btn-primary { background: var(--xt-green); color: #fff; }
.xt-btn-primary:hover { background: var(--xt-green-2); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,67,58,.25); }
.xt-btn-ghost { background: transparent; color: var(--xt-green); border-color: rgba(18,67,58,.3); }
.xt-btn-ghost:hover { background: rgba(18,67,58,.06); transform: translateY(-2px); }

/* ---------- Region colours ----------
   One accent per region, carried by the rule, the card panel and the tag, so
   the eye learns the map without reading the headings. */
.xt-rule { width: 6px; height: 30px; border-radius: 999px; background: var(--xt-green-3); flex: none; }
.xt-rule-northern-circuit     { background: #1f7a5a; }
.xt-rule-northern-rift-valley { background: #9b2c5f; }
.xt-rule-kilimanjaro-region   { background: #0f766e; }
.xt-rule-southern-circuit     { background: #c05621; }
.xt-rule-western-circuit      { background: #7c5cbf; }
.xt-rule-indian-ocean         { background: #2b6cb0; }

.xt-media-northern-circuit     { background: linear-gradient(135deg, #2a9b73 0%, #14503c 100%); }
.xt-media-northern-rift-valley { background: linear-gradient(135deg, #c9538a 0%, #7a1f49 100%); }
.xt-media-kilimanjaro-region   { background: linear-gradient(135deg, #23a89b 0%, #0b5a54 100%); }
.xt-media-southern-circuit     { background: linear-gradient(135deg, #e08544 0%, #a24413 100%); }
.xt-media-western-circuit      { background: linear-gradient(135deg, #9b7fdb 0%, #5b3fa0 100%); }
.xt-media-indian-ocean         { background: linear-gradient(135deg, #4a90d9 0%, #1f4f85 100%); }

/* ---------- Intro ---------- */
.xt-intro {
  padding: clamp(46px, 7vw, 82px) 0 clamp(30px, 4vw, 44px);
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(47, 138, 99, .16), transparent 62%),
    radial-gradient(900px 340px at 92% 0%, rgba(232, 163, 61, .14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--xt-bg) 100%);
  border-bottom: 1px solid rgba(23, 79, 56, .08);
}
.xt-intro-inner { text-align: center; }

.xt-eyebrow {
  display: inline-block; margin-bottom: 14px;
  padding: 6px 15px; border-radius: 999px;
  background: rgba(18, 67, 58, .08); color: var(--xt-green);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.xt-intro h1 {
  margin: 0 0 14px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; line-height: 1.08;
  font-size: clamp(2.1rem, 6vw, 3.5rem);
  color: var(--xt-green);
}
.xt-intro-lede {
  margin: 0 auto; max-width: 68ch;
  color: #47545f; font-size: clamp(.96rem, 2.3vw, 1.08rem); line-height: 1.75;
}

.xt-search { position: relative; width: min(560px, 100%); margin: 28px auto 0; }
.xt-search > i {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  color: var(--xt-green-3); pointer-events: none;
}
.xt-search input {
  width: 100%; padding: 15px 48px 15px 50px;
  font: inherit; font-size: .96rem; color: var(--xt-ink);
  background: #fff; border: 1.5px solid var(--xt-border); border-radius: 999px;
  box-shadow: var(--xt-shadow);
}
.xt-search input::placeholder { color: #9aa5a0; }
.xt-search input:focus {
  outline: none; border-color: var(--xt-green-3);
  box-shadow: 0 0 0 4px rgba(47, 138, 99, .14);
}
.xt-search-clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: #eef2f0; color: var(--xt-muted); cursor: pointer;
}
.xt-search-clear:hover { background: #e2e8e5; color: var(--xt-ink); }

.xt-count { margin: 12px 0 0; color: var(--xt-muted); font-size: .82rem; font-weight: 600; }

/* ---------- Featured strip ---------- */
.xt-featured { padding: 26px 0 4px; }
.xt-featured-title {
  margin: 0 0 12px; text-align: center;
  font-size: .76rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--xt-muted);
}
.xt-chiprow { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.xt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--xt-border);
  color: var(--xt-ink); font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.xt-chip i { color: var(--xt-green-3); font-size: .9em; }
.xt-chip:hover {
  transform: translateY(-2px); border-color: var(--xt-green-3);
  box-shadow: 0 8px 20px rgba(18, 67, 58, .1);
}

/* ---------- Region filter ---------- */
.xt-filters {
  position: sticky; top: 72px; z-index: 40;
  margin-top: 24px;
  background: rgba(247, 248, 247, .95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(23, 79, 56, .07);
  border-bottom: 1px solid rgba(23, 79, 56, .07);
}
.xt-filters-inner {
  display: flex; gap: 8px; padding: 12px 0;
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.xt-filters-inner::-webkit-scrollbar { height: 4px; }
.xt-filters-inner::-webkit-scrollbar-thumb { background: #d5ddd9; border-radius: 999px; }

/* Wide enough to hold them all: wrap rather than hide one behind a scroll edge. */
@media (min-width: 900px) {
  .xt-filters-inner { flex-wrap: wrap; overflow: visible; justify-content: center; }
}

.xt-filter {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--xt-border);
  color: #3d4a44; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.xt-filter:hover { border-color: var(--xt-green-3); color: var(--xt-green); }
.xt-filter.is-on { background: var(--xt-green); border-color: var(--xt-green); color: #fff; }
.xt-filter-num {
  font-size: .74rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(18, 67, 58, .08); color: inherit;
}
.xt-filter.is-on .xt-filter-num { background: rgba(255, 255, 255, .22); }

/* ---------- Regions and destination cards ---------- */
.xt-regions { padding: clamp(30px, 5vw, 52px) 0 clamp(40px, 6vw, 66px); }
.xt-region { margin-bottom: clamp(34px, 5vw, 56px); scroll-margin-top: 140px; }
.xt-region[hidden] { display: none; }

.xt-region-head { margin-bottom: 20px; }
.xt-region-head h2 {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; font-size: clamp(1.4rem, 3.6vw, 1.9rem); color: var(--xt-green);
}
.xt-region-head p { margin: 0; color: var(--xt-muted); font-size: .93rem; }

.xt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
}

.xt-card-item {
  background: var(--xt-card);
  border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius);
  box-shadow: var(--xt-shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.xt-card-item[hidden] { display: none; }
.xt-card-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--xt-shadow-lift);
  border-color: rgba(47, 138, 99, .35);
}
.xt-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.xt-card-link:focus-visible { outline: 3px solid var(--xt-green-3); outline-offset: -3px; }

.xt-card-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  display: grid; place-items: center;
}
.xt-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.xt-card-item:hover .xt-card-media img { transform: scale(1.05); }

/* A destination with no photograph gets its region's colour, a fine diagonal
   weave and a large mark, so the panel reads as designed rather than empty. */
.xt-card-item.is-plain .xt-card-media::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.20), transparent 58%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 9px);
}
/* A picture that has not been taken yet is said out loud rather than left as a
   blank panel. The same block serves the grid card and the attraction card;
   .is-compact is the smaller of the two, on the grid. */
.xt-media-soon {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  max-width: 100%; padding: 0 16px; text-align: center;
}
.xt-media-soon i { font-size: 2.1rem; color: rgba(255, 255, 255, .58); }
.xt-media-soon strong {
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255, 255, 255, .94);
}
.xt-media-soon small {
  font-size: .74rem; line-height: 1.5; color: rgba(255, 255, 255, .78);
}
.xt-media-soon.is-compact { gap: 9px; }
.xt-media-soon.is-compact i { font-size: 2.4rem; }
.xt-media-soon.is-compact strong { font-size: .72rem; }

.xt-card-count {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .93); color: var(--xt-green);
  font-size: .7rem; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.xt-card-body { display: flex; flex-direction: column; flex: 1; padding: 15px 18px 19px; }
.xt-card-loc {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px;
  color: var(--xt-green-2); font-size: .74rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.xt-card-body h3 {
  margin: 0 0 8px;
  font-size: 1.08rem; font-weight: 700; line-height: 1.32; color: var(--xt-green);
}
.xt-card-body p { margin: 0 0 13px; color: #55616b; font-size: .87rem; line-height: 1.6; }

.xt-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 15px; padding: 0; list-style: none; }
.xt-card-tags li {
  padding: 3px 9px; border-radius: 999px;
  background: #eef4f1; color: #3d5a4e; font-size: .71rem; font-weight: 600;
}
.xt-card-tags li.is-more { background: transparent; color: var(--xt-muted); }

.xt-card-more {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--xt-green-2); font-size: .84rem; font-weight: 700;
}
.xt-card-more i { transition: transform .2s ease; }
.xt-card-item:hover .xt-card-more i { transform: translateX(4px); }

.xt-noresults { padding: 40px 20px; text-align: center; color: var(--xt-muted); font-size: .98rem; }
.xt-noresults button {
  border: 0; background: none; padding: 0;
  color: var(--xt-green-2); font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.xt-empty, .xt-notfound {
  margin: 34px auto; padding: 22px;
  background: #fff; border: 1px solid var(--xt-border); border-radius: var(--xt-radius);
  text-align: center; color: var(--xt-muted);
}
.xt-notfound { margin-bottom: 0; border-color: #f2dcb3; background: #fdf3e2; color: #8a5d0f; }

/* ---------- Closing call to action ---------- */
.xt-cta {
  padding: clamp(34px, 5vw, 56px) 0;
  background: linear-gradient(135deg, #12433a 0%, #1d6b41 100%);
  color: #fff;
}
.xt-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.xt-cta h2 {
  margin: 0 0 8px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.05rem);
}
.xt-cta p { margin: 0; max-width: 58ch; color: rgba(255,255,255,.86); line-height: 1.7; font-size: .95rem; }
.xt-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.xt-cta .xt-btn-primary { background: #fff; color: var(--xt-green); }
.xt-cta .xt-btn-primary:hover { background: #f2f7f4; }
.xt-cta .xt-btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.xt-cta .xt-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ================= One destination ================= */
.xt-hero {
  position: relative;
  padding: clamp(34px, 6vw, 62px) 0 clamp(26px, 4vw, 44px);
  background:
    radial-gradient(800px 300px at 10% 0%, rgba(47, 138, 99, .14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--xt-bg) 100%);
  border-bottom: 1px solid rgba(23, 79, 56, .08);
}
.xt-hero.has-image { border-bottom: 0; }
.xt-hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* The scrim is what keeps white type legible over an unpredictable photograph;
   without it a bright sky would swallow the heading. */
.xt-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 30, 24, .34) 0%, rgba(8, 30, 24, .72) 100%);
}
.xt-hero.has-image { padding: clamp(60px, 10vw, 130px) 0 clamp(30px, 5vw, 52px); }
.xt-hero-inner { position: relative; z-index: 1; }

.xt-hero.has-image .xt-hero-inner,
.xt-hero.has-image .xt-crumbs a,
.xt-hero.has-image .xt-crumbs [aria-current] { color: #fff; }
.xt-hero.has-image h1 { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,.34); }
.xt-hero.has-image .xt-region-tag { background: rgba(255,255,255,.92); }
.xt-hero.has-image .xt-hero-meta { color: rgba(255,255,255,.92); }

.xt-crumbs {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px;
  font-size: .8rem; color: var(--xt-muted);
}
.xt-crumbs a { color: inherit; text-decoration: none; }
.xt-crumbs a:hover { text-decoration: underline; }
.xt-crumbs [aria-current] { color: var(--xt-ink); font-weight: 600; }

.xt-region-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 15px; border-radius: 999px;
  background: rgba(18, 67, 58, .08); color: var(--xt-green);
  font-size: .76rem; font-weight: 700; letter-spacing: .03em;
}
.xt-region-northern-rift-valley { color: #7a1f49; }
.xt-region-southern-circuit     { color: #a24413; }
.xt-region-western-circuit      { color: #5b3fa0; }
.xt-region-indian-ocean         { color: #1f4f85; }
.xt-region-kilimanjaro-region   { color: #0b5a54; }

.xt-hero h1 {
  margin: 14px 0 12px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; line-height: 1.1;
  font-size: clamp(2rem, 5.6vw, 3.2rem);
  color: var(--xt-green);
}
.xt-hero-meta {
  display: flex; flex-wrap: wrap; gap: 18px; margin: 0;
  color: var(--xt-muted); font-size: .86rem; font-weight: 600;
}
.xt-hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.xt-hero-meta .xt-soon-chip {
  padding: 4px 12px; border-radius: 999px;
  background: rgba(18, 67, 58, .08); color: var(--xt-green);
  font-size: .78rem;
}
.xt-hero.has-image .xt-hero-meta .xt-soon-chip {
  background: rgba(255, 255, 255, .16); color: #fff;
}

.xt-detail-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(26px, 3.5vw, 48px);
  padding: clamp(30px, 5vw, 52px) 0 clamp(20px, 3vw, 34px);
  align-items: start;
}

.xt-main { min-width: 0; }
.xt-main h2 {
  margin: 0 0 10px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; font-size: clamp(1.35rem, 3.4vw, 1.75rem); color: var(--xt-green);
}
.xt-section-lede { margin: -4px 0 20px; color: var(--xt-muted); font-size: .92rem; }

.xt-prose p {
  margin: 0 0 1.25em;
  color: #37444d; font-size: clamp(.97rem, 2.3vw, 1.04rem); line-height: 1.85;
}
.xt-prose p:last-child { margin-bottom: 0; }
.xt-prose p:first-child { font-size: clamp(1.01rem, 2.5vw, 1.11rem); color: #2c3841; }

.xt-attractions { margin-top: clamp(30px, 4.5vw, 48px); }

/* A destination holds as many attractions as it deserves, so the list can run
   long. These chips are the index: one tap goes to the card. They wrap onto as
   many rows as they need and scroll nowhere, so nothing is hidden off-screen on
   a phone. */
.xt-att-jump {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 clamp(18px, 2.6vw, 26px);
  padding: clamp(12px, 1.8vw, 16px);
  background: #fff; border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius); box-shadow: var(--xt-shadow);
}
.xt-att-jump a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 7px; border-radius: 999px;
  background: var(--xt-bg); border: 1px solid var(--xt-border);
  color: var(--xt-green); text-decoration: none;
  font-size: .82rem; font-weight: 600; line-height: 1.25;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.xt-att-jump a:hover,
.xt-att-jump a:focus-visible {
  background: #fff; border-color: var(--xt-green-3); transform: translateY(-1px);
}
.xt-att-jump-num {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--xt-green); color: #fff;
  font-size: .7rem; font-weight: 800;
}

/* Anchored cards sit clear of the top of the window rather than under it. */
.xt-attraction { scroll-margin-top: clamp(16px, 6vw, 90px); }
.xt-attraction:target {
  border-color: var(--xt-green-3);
  box-shadow: 0 0 0 3px rgba(47, 138, 99, .16), var(--xt-shadow-lift);
}

/* The # beside a heading is the shareable link to that one attraction. It is
   quiet until the card is hovered or the link itself is focused. */
.xt-att-link {
  margin-left: 8px; color: var(--xt-green-3); text-decoration: none;
  font-size: .85em; opacity: 0; transition: opacity .16s ease;
}
.xt-attraction:hover .xt-att-link,
.xt-att-link:focus-visible { opacity: 1; }
@media (hover: none) { .xt-att-link { opacity: .5; } }

.xt-attraction-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 26px); }
.xt-attraction {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 24px); align-items: stretch;
  background: #fff; border: 1px solid var(--xt-border);
  border-radius: var(--xt-radius); box-shadow: var(--xt-shadow);
  overflow: hidden;
}
.xt-attraction-media { position: relative; min-height: 190px; display: grid; place-items: center; }
.xt-attraction-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xt-attraction.is-plain .xt-attraction-media::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,.20), transparent 58%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 1px, transparent 1px 9px);
}
.xt-attraction-num {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .93); color: var(--xt-green);
  font-size: .88rem; font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.xt-attraction-text { padding: 20px 22px 22px 0; }
.xt-attraction-text h3 {
  margin: 0 0 9px; font-size: 1.1rem; font-weight: 700; color: var(--xt-green);
}
.xt-attraction-text p { margin: 0 0 .9em; color: #4b5761; font-size: .91rem; line-height: 1.72; }
.xt-attraction-text p:last-child { margin-bottom: 0; }

/* ---------- Sidebar ---------- */
.xt-side { display: grid; gap: 16px; position: sticky; top: 92px; }
.xt-card {
  padding: 22px 22px 24px;
  background: #f7faf8; border: 1px solid #dfeae4; border-radius: 15px;
}
.xt-card h2 {
  margin: 0 0 14px;
  font-size: .78rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--xt-green);
}
.xt-activities ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.xt-activities li {
  display: flex; gap: 11px; align-items: flex-start;
  color: #3c4a53; font-size: .89rem; line-height: 1.6;
}
.xt-activities li i {
  flex: none; margin-top: 3px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(47, 138, 99, .16); color: var(--xt-green-2);
  font-size: .58rem;
}

.xt-cta-card { background: #fff; }
.xt-cta-card p { margin: 0 0 14px; color: #55616b; font-size: .88rem; line-height: 1.65; }
.xt-cta-card .xt-btn { width: 100%; margin-bottom: 8px; padding: 11px 18px; font-size: .88rem; }
.xt-side-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  color: var(--xt-green-2); font-size: .85rem; font-weight: 700; text-decoration: none;
}
.xt-side-link:hover { text-decoration: underline; }

/* ---------- Nearby ---------- */
.xt-related { padding-bottom: clamp(20px, 3vw, 30px); }
.xt-related h2 {
  margin: 0 0 16px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; font-size: clamp(1.3rem, 3.4vw, 1.7rem); color: var(--xt-green);
}
.xt-related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.xt-related-card {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 15px 12px 12px;
  background: #fff; border: 1px solid var(--xt-border); border-radius: 14px;
  color: inherit; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.xt-related-card:hover {
  transform: translateY(-3px); border-color: rgba(47, 138, 99, .4);
  box-shadow: 0 12px 28px rgba(18, 67, 58, .1);
}
.xt-related-media {
  flex: none; width: 62px; height: 62px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 1.15rem;
}
.xt-related-media img { width: 100%; height: 100%; object-fit: cover; }
.xt-related-text { display: grid; gap: 3px; min-width: 0; }
.xt-related-text strong { font-size: .93rem; color: var(--xt-green); }
.xt-related-text span { color: var(--xt-muted); font-size: .79rem; }

.xt-back { margin: 4px 0 clamp(34px, 5vw, 56px); }
.xt-back a {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--xt-green-2); font-weight: 700; font-size: .9rem; text-decoration: none;
}
.xt-back a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.xt-footer { padding: clamp(28px, 4vw, 44px) 0; background: #0f2f28; color: rgba(255,255,255,.8); }
.xt-footer-shell { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.xt-footer-brand { display: flex; align-items: center; gap: 13px; }
.xt-footer-brand img { width: 52px; height: 52px; object-fit: contain; }
.xt-footer-brand div { display: grid; gap: 2px; }
.xt-footer-brand strong { color: #fff; font-size: 1rem; }
.xt-footer-brand span { font-size: .82rem; }
.xt-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.xt-footer-links a { color: rgba(255,255,255,.82); font-size: .86rem; font-weight: 600; text-decoration: none; }
.xt-footer-links a:hover { color: #fff; text-decoration: underline; }
.xt-footer p { margin: 0; font-size: .8rem; }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  .xt-detail-body { grid-template-columns: minmax(0, 1fr); }
  /* A sticky column has nowhere to stick on a narrow screen, and the activity
     list is what a reader wants early. */
  .xt-side { position: static; order: -1; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .xt-wrap { width: min(1160px, 90vw); }

  .xt-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .xt-card-media { aspect-ratio: 16 / 9; }

  .xt-filters-inner { padding: 10px 0; }
  .xt-filter { padding: 8px 13px; font-size: .8rem; }

  .xt-hero.has-image { padding: clamp(46px, 14vw, 72px) 0 26px; }
  .xt-attraction { grid-template-columns: minmax(0, 1fr); }
  .xt-attraction-media { min-height: 0; aspect-ratio: 16 / 9; }
  .xt-attraction-text { padding: 0 18px 20px; }

  .xt-related-grid { grid-template-columns: minmax(0, 1fr); }

  .xt-cta-inner { flex-direction: column; align-items: flex-start; }
  .xt-cta-actions { width: 100%; }
  .xt-cta-actions .xt-btn { flex: 1; }

  .xt-footer-shell { flex-direction: column; text-align: center; }
  .xt-footer-links { justify-content: center; }
}

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .xt-page *, .xt-page *::before, .xt-page *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

@media print {
  .navbar, .xt-filters, .xt-search, .xt-cta, .xt-footer, .xt-back, .xt-related, .xt-cta-card { display: none !important; }
  .xt-page { background: #fff; }
  .xt-detail-body { grid-template-columns: 1fr; }
  .xt-attraction { break-inside: avoid; box-shadow: none; }
}

/* ============ Best time to visit ============
   Its own panel above the activities, because it is the single most common
   question a traveller has about a place. */
.xt-besttime p {
  display: flex; gap: 11px; align-items: flex-start; margin: 0;
  color: #3c4a53; font-size: .89rem; line-height: 1.65;
}
.xt-besttime p i {
  flex: none; margin-top: 2px;
  width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(232, 163, 61, .18); color: #8a5d0f;
  font-size: .62rem;
}

/* The month-by-month breakdown under the summary. A definition list because
   that is genuinely what it is: a season, and what that season is like. The
   rule down the left ties the rows together in a narrow column without
   needing a box around each one. */
.xt-season-list {
  margin: 13px 0 0;
  padding: 0 0 0 13px;
  border-left: 2px solid rgba(232, 163, 61, .3);
}
.xt-season-list dt {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #8a5d0f;
}
.xt-season-list dd {
  margin: 2px 0 0;
  font-size: .84rem;
  line-height: 1.55;
  color: #3c4a53;
}
.xt-season-list dd + dt { margin-top: 11px; }

/* Deliberately no two-column variant. The obvious idea is to put the label
   beside its season on a wide screen, but the panel lives in a sidebar around
   300px wide whatever the viewport is doing, so a media query on the viewport
   splits 300px into two useless columns and makes the panel far taller. Label
   above detail is the right answer at every width this card is ever shown at. */

/* ============ Safaris that visit this destination ============
   The link from "I want to see this" to something bookable. Deliberately
   one-way: tour pages carry no link back here. */
.xt-tours { padding-bottom: clamp(24px, 4vw, 40px); }

.xt-tours-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.xt-tours-head h2 {
  margin: 0 0 5px;
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400; font-size: clamp(1.3rem, 3.4vw, 1.75rem); color: var(--xt-green);
}
.xt-tours-head p { margin: 0; color: var(--xt-muted); font-size: .9rem; }
.xt-tours-all {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--xt-green-2); font-size: .87rem; font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.xt-tours-all:hover { text-decoration: underline; }

.xt-tours-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
.xt-tour-card {
  background: #fff; border: 1px solid var(--xt-border); border-radius: 14px;
  box-shadow: var(--xt-shadow); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.xt-tour-card:hover {
  transform: translateY(-4px); border-color: rgba(47,138,99,.4);
  box-shadow: var(--xt-shadow-lift);
}
.xt-tour-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.xt-tour-card > a:focus-visible { outline: 3px solid var(--xt-green-3); outline-offset: -3px; }

.xt-tour-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #2a9b73 0%, #14503c 100%);
  color: rgba(255,255,255,.6); font-size: 1.7rem;
}
.xt-tour-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.xt-tour-card:hover .xt-tour-media img { transform: scale(1.05); }
.xt-tour-save {
  position: absolute; left: 11px; top: 11px;
  padding: 4px 10px; border-radius: 999px;
  background: #c2185b; color: #fff; font-size: .68rem; font-weight: 800;
}

.xt-tour-body { display: flex; flex-direction: column; flex: 1; padding: 13px 15px 16px; }
.xt-tour-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.xt-tour-meta span {
  padding: 2px 8px; border-radius: 999px;
  background: #eef4f1; color: #3d5a4e; font-size: .69rem; font-weight: 600;
}
.xt-tour-body strong {
  font-size: .95rem; line-height: 1.38; color: var(--xt-green); margin-bottom: 10px;
}
.xt-tour-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 11px; }
.xt-tour-price s { color: #9aa5a0; font-size: .82rem; }
.xt-tour-price b { color: #f57c00; font-size: 1.1rem; font-weight: 800; }
.xt-tour-price small { color: var(--xt-muted); font-size: .72rem; }
.xt-tour-cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--xt-green-2); font-size: .83rem; font-weight: 700;
}
.xt-tour-cta i { transition: transform .2s ease; }
.xt-tour-card:hover .xt-tour-cta i { transform: translateX(4px); }

@media (max-width: 640px) {
  .xt-tours-grid { grid-template-columns: minmax(0, 1fr); }
  .xt-tours-head { align-items: flex-start; }
}

@media print { .xt-tours { display: none !important; } }