/* ═══════════════════════════════════════════════════════════════════════════
   destination-guide.css — Editorial guide layer + per-destination identity
   ─────────────────────────────────────────────────────────────────────────
   Structure is shared; personality comes from --dg-accent, --dg-ground and a
   handful of theme classes. That keeps one design language across 48
   destinations while letting the Serengeti feel cinematic, Zanzibar coastal
   and Kilimanjaro like an expedition logbook.
═══════════════════════════════════════════════════════════════════════════ */

.dg{
  --dg-accent:#c8b28a;
  --dg-ground:#0d1615;
  --dg-ink:#f5f1e8;
  --dg-muted:rgba(245,241,232,.62);
  --dg-serif:"Cormorant Garamond",Georgia,serif;
  margin-top:3rem;
}

/* ── Shared editorial furniture ────────────────────────────────────────── */
.dg-kick{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dg-accent); display:block;
}
.dg-h2{
  font-family:var(--dg-serif); font-weight:300; line-height:1.1;
  font-size:clamp(1.8rem,4vw,2.9rem); margin:.5rem 0 .7rem; color:#fff;
}
.dg-h2 em{ font-style:italic; color:var(--dg-accent); }
.dg-sub{ font-size:1rem; line-height:1.8; color:var(--dg-muted); margin:0; }

/* ── At a glance ───────────────────────────────────────────────────────── */
.dg-glance{
  margin:2.5rem 0; padding:1.4rem 1.6rem; border-radius:16px;
  /* Fallback first — color-mix() is unsupported on older Safari and Firefox
     ESR, and without this the panel would render with no background at all. */
  background:rgba(200,178,138,.07);
  border:1px solid rgba(200,178,138,.24);
  background:color-mix(in srgb, var(--dg-accent) 7%, transparent);
  border-color:color-mix(in srgb, var(--dg-accent) 24%, transparent);
}
.dg-glance h3{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dg-accent); margin:0 0 1rem;
}
.dg-glance dl{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem 1.6rem; margin:0;
}
.dg-glance dt{
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(245,241,232,.45); margin-bottom:.25rem;
}
.dg-glance dd{ margin:0; font-size:.95rem; line-height:1.5; color:var(--dg-ink); font-weight:500; }

/* ── Local insights — the part nobody can copy ────────────────────────── */
.dg-insights{
  margin:3.5rem 0; padding:clamp(2rem,5vw,3.2rem) clamp(1.2rem,4vw,2.4rem);
  border-radius:22px;
  /* Solid fallback for browsers without color-mix() support. */
  background:#0d1615;
  border:1px solid rgba(200,178,138,.2);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--dg-accent) 9%, var(--dg-ground)) 0%,
    var(--dg-ground) 70%);
  border-color:color-mix(in srgb, var(--dg-accent) 20%, transparent);
}
.dg-insights__head{ max-width:56ch; margin-bottom:2rem; }
.dg-insights__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem;
}
.dg-insight{
  position:relative; padding:1.3rem 1.4rem 1.4rem;
  border-radius:16px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .3s ease, transform .3s ease;
}
.dg-insight:hover{
  border-color:rgba(200,178,138,.45);
  border-color:color-mix(in srgb, var(--dg-accent) 45%, transparent);
  transform:translateY(-2px);
}
.dg-insight__ic{ font-size:1.5rem; display:block; margin-bottom:.5rem; }
.dg-insight__label{
  display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dg-accent); margin-bottom:.4rem;
}
.dg-insight__place{
  font-family:var(--dg-serif); font-size:1.22rem; font-weight:500;
  line-height:1.25; margin:0 0 .55rem; color:#fff;
}
.dg-insight__body{ font-size:.88rem; line-height:1.75; color:rgba(245,241,232,.74); margin:0; }

/* ═══ PERSONALITIES ═══════════════════════════════════════════════════════
   Each shifts weight, spacing and treatment — not just colour. */

/* Cinematic — Serengeti, Mara. Wide, slow, big type over big landscape. */
.dg--cinematic .dg-h2{ font-size:clamp(2.1rem,5vw,3.4rem); letter-spacing:-.01em; }
.dg--cinematic .dg-insights{ border-radius:26px; }
.dg--cinematic .dg-insights__grid{ gap:1.3rem; }

/* Ancient — Ngorongoro. Heavier, deeper shadow, more gravity. */
.dg--ancient .dg-insights{
  background:linear-gradient(180deg, rgba(168,135,92,.12), var(--dg-ground) 65%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.dg--ancient .dg-h2{ font-weight:400; letter-spacing:.01em; }
.dg--ancient .dg-insight{ background:rgba(0,0,0,.22); }

/* Coastal — Zanzibar, Mafia, Pemba. Light, airy, generous. */
.dg--coastal .dg-insights{
  background:linear-gradient(150deg, rgba(79,179,168,.1), var(--dg-ground) 70%);
}
.dg--coastal .dg-h2{ font-weight:300; }
.dg--coastal .dg-insight{ border-radius:20px; background:rgba(255,255,255,.055); }
.dg--coastal .dg-insights__grid{ gap:1.2rem; }

/* Expedition — Kilimanjaro. Logbook: tighter, data-forward, mono accents. */
.dg--expedition .dg-glance dt,
.dg--expedition .dg-insight__label{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.1em;
}
.dg--expedition .dg-insights{ border-radius:12px; }
.dg--expedition .dg-insight{ border-radius:10px; border-left:2px solid var(--dg-accent); }
.dg--expedition .dg-h2{ font-family:inherit; font-weight:600; font-size:clamp(1.5rem,3.2vw,2.2rem); letter-spacing:-.01em; }

/* Riverine — Tarangire. Warm, earthen, dusty. */
.dg--riverine .dg-insights{
  background:linear-gradient(155deg, rgba(184,137,74,.13), var(--dg-ground) 68%);
}
.dg--riverine .dg-insight__place{ font-style:italic; }

/* Gateway — Arusha. Practical, connected, hub-like. */
.dg--gateway .dg-insights{ border-radius:14px; }
.dg--gateway .dg-insight{ border-radius:12px; }
.dg--gateway .dg-glance{ border-radius:12px; }

/* Highland — Moshi. Slower, warmer, agricultural. */
.dg--highland .dg-insights{
  background:linear-gradient(165deg, rgba(143,122,77,.12), var(--dg-ground) 72%);
}
.dg--highland .dg-insight__place{ font-weight:400; }

/* Volcanic — Natron, Lengai. Hot, stark, high contrast. */
.dg--volcanic .dg-insights{
  background:linear-gradient(170deg, rgba(181,83,63,.14), var(--dg-ground) 66%);
}
.dg--volcanic .dg-insight{ border-color:rgba(181,83,63,.22); }

/* Historic — Kilwa, Bagamoyo, Stone Town. Aged paper, restrained. */
.dg--historic .dg-insights{
  background:linear-gradient(180deg, rgba(156,132,89,.1), var(--dg-ground) 70%);
}
.dg--historic .dg-h2{ font-weight:400; }
.dg--historic .dg-insight{ border-radius:8px; }

/* Forest / wilderness / river — deep, quiet, low contrast. */
.dg--forest .dg-insights,
.dg--wilderness .dg-insights,
.dg--river .dg-insights{
  background:#0b120c;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--dg-accent) 11%, var(--dg-ground)), var(--dg-ground) 72%);
}

@media(max-width:640px){
  .dg-insights{ padding:1.6rem 1.1rem; border-radius:16px; }
  .dg-insights__grid{ grid-template-columns:1fr; }
  .dg-glance{ padding:1.1rem 1.2rem; }
}
@media(prefers-reduced-motion:reduce){
  .dg-insight{ transition:none; }
}