/* ============================================================
   ATLAS GUIDE — COUNTRY PAGE v5 "One Page, Zero Scroll Fatigue"
   Field Guide design system: dark green / gold / parchment
   Playfair Display (display) + DM Sans (body)
   Loads INSTEAD of country.css / country-hub.css on v5 pages.
   Prefix: cg-  (no collisions with jg-* or cv-*)
   ============================================================ */

/* Tokens map onto the global.css design system (--ag-*), with
   hard fallbacks so the page still renders if global.css is absent. */
:root {
  --cg-ink: var(--ag-ink, #2a2420);
  --cg-forest: var(--ag-green-600, #2e6b4a);
  --cg-deep: var(--ag-green-800, #1a3a2b);
  --cg-darkest: var(--ag-green-900, #0d2118);
  --cg-gold: var(--ag-gold-500, #c9a85c);
  --cg-gold-soft: var(--ag-gold-400, #d9bc80);
  --cg-parchment: var(--ag-parchment, #f5f0e8);
  --cg-paper: var(--ag-white, #ffffff);
  --cg-line: var(--border, rgba(26, 58, 43, 0.10));
  --cg-muted: var(--ag-ink-mid, #5c5248);
  --cg-danger: var(--ag-terra-500, #c24b3a);
  --cg-radius: var(--radius-md, 16px);
  --cg-shadow: var(--shadow-sm, 0 2px 10px rgba(26, 36, 32, 0.06));
  --cg-font-display: var(--font-display, 'Playfair Display', Georgia, serif);
  --cg-font-body: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ---------- 1. Base ---------- */
.cg-page {
  font-family: var(--cg-font-body);
  color: var(--cg-ink);
  background: var(--cg-parchment);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.cg-page * { box-sizing: border-box; }
.cg-page img { max-width: 100%; height: auto; }
/* Content links only. :where() keeps specificity low so component
   link colors (.cg-bb-link, .cg-em-card) and the site header/footer
   styles are never overridden. */
.cg-section :where(a),
.cg-side-card :where(a),
.cg-closing :where(a) { color: var(--cg-forest); }
.cg-closing :where(a) { color: var(--cg-gold-soft); }
.cg-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Prose rhythm: the global reset zeroes all margins, so spacing is explicit */
.cg-section > p,
.cg-tabpanel > p,
.cg-closing p { margin-bottom: 14px; }
.cg-section > p:last-child,
.cg-tabpanel > p:last-child,
.cg-closing p:last-child { margin-bottom: 0; }

/* Eyebrow + headings */
.cg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ag-gold-600, #b07a28);
  margin-bottom: 8px;
}
.cg-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--cg-gold);
  flex-shrink: 0;
}
.cg-eyebrow b {
  font-family: var(--cg-font-display);
  font-weight: 700;
  color: var(--cg-deep);
  letter-spacing: 0.06em;
}
.cg-h2 {
  font-family: var(--cg-font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--cg-deep);
  margin: 0 0 14px;
  line-height: 1.2;
}
.cg-h3 {
  font-family: var(--cg-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cg-deep);
  margin: 0 0 8px;
}
.cg-lede { font-size: 1.05rem; max-width: 68ch; }
.cg-muted { color: var(--cg-muted); }
.cg-small { font-size: 0.85rem; }

/* ---------- 2. Hero ---------- */
.cg-hero {
  position: relative;
  padding-top: 68px; /* clears the fixed site header */
  background: linear-gradient(160deg, var(--cg-deep) 0%, var(--cg-forest) 70%);
  color: var(--cg-parchment);
  overflow: hidden;
}
.cg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(201, 168, 92, 0.18), transparent 55%);
  pointer-events: none;
}
.cg-hero-inner {
  position: relative;
  z-index: 1;
  padding: 54px 0 34px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: center;
}
.cg-breadcrumb {
  font-size: 0.82rem;
  margin-bottom: 16px;
  opacity: 0.85;
}
.cg-breadcrumb a { color: var(--cg-gold-soft); text-decoration: none; }
.cg-breadcrumb a:hover { text-decoration: underline; }
.cg-hero-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cg-gold);
}
.cg-hero-title em { font-style: italic; color: var(--cg-gold-soft); }
.cg-hero-title {
  font-family: var(--cg-font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 8px 0 6px;
}
.cg-dateline {
  font-size: 0.85rem;
  color: var(--cg-gold-soft);
  margin-bottom: 14px;
}
.cg-hero-lede {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 56ch;
  opacity: 0.94;
}
.cg-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.cg-badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid rgba(246, 241, 227, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.cg-hero-media {
  border-radius: var(--cg-radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(201, 168, 92, 0.35);
}
.cg-hero-media { position: relative; }
.cg-hero-media img { display: block; width: 100%; object-fit: cover; aspect-ratio: 16/10; }
.cg-hero-media img { animation: cg-kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes cg-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07) translate(-1%, -1%); }
}
.cg-hero-coord {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cg-gold-soft);
  background: rgba(13, 33, 24, 0.78);
  border: 1px solid rgba(201, 168, 92, 0.35);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Hero entrance choreography (pure CSS, killed by reduced-motion block) */
@keyframes cg-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cg-hero-kicker  { animation: cg-rise .65s cubic-bezier(0.16,1,0.3,1) backwards; }
.cg-hero-title   { animation: cg-rise .65s cubic-bezier(0.16,1,0.3,1) .08s backwards; }
.cg-dateline     { animation: cg-rise .65s cubic-bezier(0.16,1,0.3,1) .16s backwards; }
.cg-hero-lede    { animation: cg-rise .65s cubic-bezier(0.16,1,0.3,1) .24s backwards; }
.cg-quick-answer { animation: cg-rise .65s cubic-bezier(0.16,1,0.3,1) .34s backwards; }
.cg-hero-badges  { animation: cg-rise .65s cubic-bezier(0.16,1,0.3,1) .42s backwards; }
.cg-hero-media   { animation: cg-rise .8s  cubic-bezier(0.16,1,0.3,1) .2s  backwards; }
.cg-booking-bar  { animation: cg-rise .65s cubic-bezier(0.16,1,0.3,1) .5s  backwards; }

/* Mobile-only key facts strip */
.cg-hero-facts { display: none; }

/* Quick answer callout in hero */
.cg-quick-answer {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(201, 168, 92, 0.12);
  border-left: 3px solid var(--cg-gold);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  max-width: 62ch;
}
.cg-quick-answer strong { color: var(--cg-gold-soft); }
.cg-quick-answer strong::before { content: '\2726\00a0'; color: var(--cg-gold); }

/* Booking bar */
.cg-booking-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 0 26px;
}
.cg-bb-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cg-gold);
  margin-right: 4px;
}
.cg-bb-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cg-parchment);
  border: 1px solid rgba(246, 241, 227, 0.4);
  transition: background 0.2s, border-color 0.2s;
}
.cg-bb-link:hover { background: rgba(201, 168, 92, 0.2); border-color: var(--cg-gold); }

/* ---------- 3. Sticky section nav (the spine) ---------- */
.cg-nav {
  position: sticky;
  top: 68px; /* below the fixed site header */
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cg-line);
  box-shadow: 0 1px 8px rgba(26, 58, 43, 0.06);
}
.cg-nav-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--cg-gold), var(--ag-gold-600, #b07a28));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
.cg-nav-track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 20px;
  max-width: 1180px;
  margin: 0 auto;
}
.cg-nav-track::-webkit-scrollbar { display: none; }
.cg-nav-link {
  flex: 0 0 auto;
  padding: 13px 14px 11px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cg-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.cg-nav-link:hover { color: var(--cg-forest); }
.cg-nav-link.cg-active {
  color: var(--cg-deep);
  border-bottom-color: var(--cg-gold);
}

/* ---------- 4. Layout: main + sidebar ---------- */
.cg-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  padding: 44px 0 20px;
}
.cg-main { min-width: 0; }
.cg-section { padding: 26px 0 34px; scroll-margin-top: 132px; /* header 68 + section nav */ }
.cg-section + .cg-section { border-top: 1px solid var(--cg-line); }

/* Sidebar */
.cg-sidebar { min-width: 0; }
.cg-side-sticky { position: sticky; top: 132px; display: grid; gap: 18px; }
.cg-side-card {
  background: var(--cg-paper);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius);
  padding: 18px;
  box-shadow: var(--cg-shadow);
}
.cg-side-card h3 {
  font-family: var(--cg-font-display);
  font-size: 1.05rem;
  color: var(--cg-deep);
  margin: 0 0 12px;
}
.cg-fact-list { display: grid; gap: 0; margin: 0; }
.cg-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--cg-line);
  font-size: 0.85rem;
}
.cg-fact:last-child { border-bottom: none; }
.cg-fact dt { color: var(--cg-muted); }
.cg-fact dd { margin: 0; font-weight: 700; text-align: right; color: var(--cg-deep); }

/* Score chips */
.cg-scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cg-score {
  text-align: center;
  background: var(--cg-parchment);
  border: 1px solid var(--cg-line);
  border-radius: 10px;
  padding: 8px 4px;
}
.cg-score b { display: block; font-size: 1.05rem; color: var(--cg-forest); }
.cg-score span { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cg-muted); }

/* Month bar (best time to visit) */
.cg-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.cg-month {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 8px 0 6px;
  border-radius: 6px;
  background: var(--cg-parchment);
  color: var(--cg-muted);
  border: 1px solid var(--cg-line);
}
.cg-month.cg-m-best { background: var(--cg-forest); color: #fff; border-color: var(--cg-forest); }
.cg-month.cg-m-good { background: var(--cg-gold-soft); color: var(--cg-deep); border-color: var(--cg-gold-soft); }
.cg-month-legend { display: flex; gap: 12px; margin-top: 8px; font-size: 0.72rem; color: var(--cg-muted); }
.cg-month-legend i {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px;
}
.cg-month-legend .cg-l-best { background: var(--cg-forest); }
.cg-month-legend .cg-l-good { background: var(--cg-gold-soft); }

/* Ad slot card: zero padding, creative fills the card */
.cg-side-card.cg-side-ad {
  padding: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
}
.cg-side-ad iframe { display: block; border: 0; overflow: hidden; }

/* Sidebar link list */
.cg-side-links { display: grid; gap: 8px; }
.cg-side-links a {
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 12px;
  border: 1px solid var(--cg-line);
  border-radius: 9px;
  background: var(--cg-parchment);
  transition: border-color 0.2s, background 0.2s;
}
.cg-side-links a:hover { border-color: var(--cg-gold); background: var(--cg-paper); }

/* ---------- 5. Tabs ---------- */
.cg-tabs { margin-top: 18px; }
.cg-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 2px solid var(--cg-line);
  padding-bottom: 0;
}
.cg-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 14px;
  font-family: var(--cg-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cg-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.cg-tab:hover { color: var(--cg-forest); }
.cg-tab[aria-selected="true"] { color: var(--cg-deep); border-bottom-color: var(--cg-gold); }
.cg-tab:focus-visible { outline: 2px solid var(--cg-gold); outline-offset: 2px; border-radius: 4px; }
.cg-tabpanel { padding-top: 20px; }
.cg-tabpanel[hidden] { display: none; }

/* ---------- 6. Accordions ---------- */
.cg-acc {
  border: 1px solid var(--cg-line);
  border-radius: 12px;
  background: var(--cg-paper);
  margin-top: 12px;
  overflow: hidden;
}
.cg-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--cg-deep);
  font-size: 0.98rem;
}
.cg-acc summary::-webkit-details-marker { display: none; }
.cg-acc summary::after {
  content: "+";
  font-family: var(--cg-font-display);
  font-size: 1.3rem;
  color: var(--cg-gold);
  line-height: 1;
  transition: transform 0.2s;
}
.cg-acc[open] summary::after { transform: rotate(45deg); }
.cg-acc summary:hover { background: var(--ag-gold-50, #fbf5e6); }
.cg-acc[open] > summary { border-bottom: 1px dashed var(--cg-line); }
.cg-acc-body { padding: 16px 18px 20px; }
.cg-acc-body > * + * { margin-top: 14px; } /* breathing room between blocks */
.cg-acc-body > :first-child { margin-top: 0; }

/* ---------- 7. Cards & grids ---------- */
.cg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; }
.cg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.cg-card {
  background: var(--cg-paper);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius);
  padding: 18px;
  box-shadow: var(--cg-shadow);
}
.cg-card-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cg-gold);
}
.cg-card p { margin: 8px 0 0; font-size: 0.92rem; }
.cg-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cg-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cg-parchment);
  border: 1px solid var(--cg-line);
  color: var(--cg-muted);
}
.cg-price-tag { float: right; font-weight: 700; color: var(--cg-forest); font-size: 0.88rem; }

/* Show-more expander */
.cg-more-content[hidden] { display: none; }
.cg-more-btn {
  appearance: none;
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  background: transparent;
  border: 1.5px solid var(--cg-forest);
  border-radius: 999px;
  color: var(--cg-forest);
  font-family: var(--cg-font-body);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cg-more-btn:hover { background: var(--cg-forest); color: var(--cg-parchment); }
.cg-more-btn:focus-visible { outline: 2px solid var(--cg-gold); outline-offset: 2px; }

/* ---------- 7b. Inline figures ---------- */
.cg-figure { margin: 22px 0; }
.cg-figure img {
  width: 100%;
  border-radius: var(--cg-radius);
  box-shadow: var(--cg-shadow);
  display: block;
}
.cg-figure figcaption {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--cg-muted);
  font-style: italic;
}

/* ---------- 7c. VS comparison box ---------- */
.cg-vs {
  margin-top: 22px;
  background: var(--cg-paper);
  border: 1px solid var(--cg-line);
  border-radius: var(--cg-radius);
  padding: 20px;
  box-shadow: var(--cg-shadow);
}
.cg-vs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.cg-vs-title {
  font-family: var(--cg-font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cg-deep);
}
.cg-vs-title em { color: var(--cg-gold); font-style: normal; }
.cg-vs table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 8px; }
.cg-vs th, .cg-vs td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--cg-line); vertical-align: top; }
.cg-vs th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cg-muted); font-weight: 700;
}
.cg-vs tr:last-child td { border-bottom: none; }
.cg-vs td:first-child { font-weight: 700; color: var(--cg-muted); white-space: nowrap; }
.cg-vs-more { display: inline-block; margin-top: 10px; font-size: 0.85rem; font-weight: 700; }

/* ---------- 7d. Scam cards ---------- */
.cg-scam-risk {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.cg-scam-risk.cg-risk-med { background: var(--ag-gold-50, #fbf5e6); color: var(--ag-gold-700, #8a6020); }
.cg-scam-risk.cg-risk-low { background: var(--ag-green-50, #e8f4ed); color: var(--ag-green-800, #1a3a2b); }

/* ---------- 8. Do / Don't ---------- */
.cg-dodont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.cg-do, .cg-dont {
  border-radius: var(--cg-radius);
  padding: 18px;
  background: var(--cg-paper);
  border: 1px solid var(--cg-line);
  border-top: 4px solid var(--cg-forest);
}
.cg-dont { border-top-color: var(--cg-danger); }
.cg-dodont h3 {
  font-family: var(--cg-font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.cg-do h3 { color: var(--cg-forest); }
.cg-dont h3 { color: var(--cg-danger); }
.cg-dodont ul { margin: 0; padding-left: 0; list-style: none; }
.cg-dodont li { position: relative; margin-bottom: 12px; padding-left: 26px; font-size: 0.92rem; }
.cg-dodont li b { color: var(--cg-deep); }
.cg-do li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--cg-forest);
}
.cg-dont li::before {
  content: '\2715';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--cg-danger);
}

/* ---------- 9. Callout boxes ---------- */
.cg-callout {
  margin-top: 22px;
  padding: 18px 20px;
  border-radius: var(--cg-radius);
  background: var(--cg-deep);
  color: var(--cg-parchment);
  font-size: 0.94rem;
}
.cg-callout b, .cg-callout strong { color: var(--cg-gold-soft); }
.cg-callout a { color: var(--cg-gold-soft); }
.cg-callout-light {
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--cg-gold);
  background: var(--cg-paper);
  border-radius: 0 10px 10px 0;
  font-size: 0.94rem;
}

/* ---------- 10. Tables ---------- */
.cg-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.9rem; }
.cg-table th, .cg-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cg-line); }
.cg-table th {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cg-muted); font-weight: 700;
}
.cg-table td b { color: var(--cg-forest); }

/* Scrollable table wrapper for narrow screens */
.cg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cg-table-wrap .cg-table { min-width: 460px; }
.cg-vs .cg-table-wrap table { min-width: 480px; }

/* Embassy grid (replaces the 4-column table) */
.cg-embassy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.cg-embassy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--cg-line);
  font-size: 0.88rem;
}
.cg-embassy dt { color: var(--cg-muted); }
.cg-embassy dd { margin: 0; font-weight: 700; color: var(--cg-forest); text-align: right; }

/* ---------- 11. Timeline ---------- */
.cg-timeline { margin-top: 8px; padding-left: 0; list-style: none; }
.cg-timeline li {
  position: relative;
  padding: 0 0 18px 26px;
  border-left: 2px solid var(--cg-line);
  margin-left: 8px;
}
.cg-timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cg-gold);
  border: 2px solid var(--cg-paper);
  box-shadow: 0 0 0 3px rgba(201, 168, 92, 0.22);
}
.cg-timeline li:last-child { padding-bottom: 0; }
.cg-tl-year { font-family: var(--cg-font-display); font-weight: 800; color: var(--cg-forest); font-size: 0.95rem; letter-spacing: 0.02em; }
.cg-timeline p { margin: 3px 0 0; font-size: 0.9rem; }

/* ---------- 12. Budget tiers ---------- */
.cg-tier { border-top: 4px solid var(--cg-line); }
.cg-tier.cg-tier-hl { border-top-color: var(--cg-gold); }
.cg-tier-price {
  font-family: var(--cg-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cg-forest);
  margin: 4px 0 10px;
}
.cg-tier ul { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.cg-tier li { margin-bottom: 6px; }

/* ---------- 13. Emergency strip ---------- */
.cg-emergency { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.cg-em-card {
  display: block;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(135deg, var(--cg-darkest), var(--ag-green-700, #1f4d35));
  color: var(--cg-parchment);
  border-radius: 12px;
  padding: 16px 10px;
  transition: transform 0.15s;
}
.cg-em-card:hover { transform: translateY(-2px); }
.cg-em-num {
  display: block;
  font-family: var(--cg-font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--cg-gold);
}
.cg-em-label { font-size: 0.78rem; font-weight: 600; }

/* ---------- 14. FAQ ---------- */
.cg-faq .cg-acc summary { font-size: 0.95rem; }

/* ---------- 15. Closing + crosslinks ---------- */
.cg-closing {
  background: linear-gradient(160deg, var(--cg-deep), var(--cg-forest));
  color: var(--cg-parchment);
  border-radius: var(--cg-radius);
  padding: 34px 30px;
  margin: 30px 0 10px;
}
.cg-closing .cg-h2 { color: var(--cg-parchment); }
.cg-closing em { color: var(--cg-gold-soft); font-style: italic; }
.cg-crosslinks { padding: 26px 0 50px; }
.cg-crosslinks-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cg-crosslinks-grid a {
  padding: 10px 18px;
  border: 1px solid var(--cg-line);
  border-radius: 999px;
  background: var(--cg-paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}
.cg-crosslinks-grid a:hover { border-color: var(--cg-gold); background: var(--ag-gold-50, #fbf5e6); transform: translateY(-2px); }
.cg-crosslinks-grid a { transition: border-color .2s, background .2s, transform .2s; }

/* Freshness note */
.cg-freshness { font-size: 0.78rem; color: var(--cg-muted); margin-top: 10px; font-style: italic; }

/* Emerald / third-party injection guard: anything injected into our grids
   drops out of grid flow instead of stretching the layout */
.cg-grid-2 > :not([class^="cg-"]),
.cg-grid-3 > :not([class^="cg-"]),
.cg-dodont > :not([class^="cg-"]),
.cg-emergency > :not([class^="cg-"]) {
  grid-column: 1 / -1;
}

/* ---------- 16. Responsive ---------- */
@media (max-width: 960px) {
  .cg-hero-inner { grid-template-columns: 1fr; gap: 22px; }
  .cg-layout { grid-template-columns: 1fr; gap: 0; }
  .cg-side-sticky { position: static; }
  /* Sidebar moves BELOW the article on smaller screens; the hero facts
     strip covers the essentials up top instead. */
  .cg-sidebar { order: 1; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--cg-line); }
  .cg-sidebar .cg-side-sticky { grid-template-columns: 1fr 1fr; align-items: start; }
  .cg-side-card.cg-side-wide { grid-column: 1 / -1; }
  .cg-grid-3 { grid-template-columns: repeat(2, 1fr); }

  /* Key facts strip appears in the hero */
  .cg-hero-facts {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px 0 14px;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    position: relative;
    z-index: 1;
  }
  .cg-hero-facts::-webkit-scrollbar { display: none; }
  .cg-hero-fact {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(201, 168, 92, 0.3);
    white-space: nowrap;
  }
  .cg-hero-fact span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cg-gold-soft); font-weight: 700; }
  .cg-hero-fact b { font-size: 0.84rem; color: var(--cg-parchment); }
}
@media (max-width: 640px) {
  .cg-grid-2, .cg-grid-3, .cg-dodont { grid-template-columns: 1fr; }
  .cg-emergency { grid-template-columns: repeat(2, 1fr); }
  .cg-sidebar .cg-side-sticky { grid-template-columns: 1fr; }
  .cg-hero-inner { padding: 30px 0 18px; gap: 18px; }
  .cg-section { scroll-margin-top: 124px; padding: 22px 0 28px; }
  .cg-container { padding: 0 16px; }

  /* Sticky nav: comfortable tap targets + scroll hint fade */
  .cg-nav-track {
    padding: 0 16px;
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent);
  }
  .cg-nav-link { padding: 15px 13px 13px; font-size: 0.88rem; }

  /* Booking bar: one scrollable row of pills */
  .cg-booking-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .cg-booking-bar::-webkit-scrollbar { display: none; }
  .cg-bb-label { flex: 0 0 auto; }
  .cg-bb-link { flex: 0 0 auto; padding: 10px 18px; }

  /* Tabs: horizontal scroll with snap instead of wrapping */
  .cg-tablist {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .cg-tablist::-webkit-scrollbar { display: none; }
  .cg-tab { flex: 0 0 auto; scroll-snap-align: start; padding: 12px 14px; }

  /* Type + spacing tune */
  .cg-hero-lede { font-size: 0.98rem; }
  .cg-quick-answer { font-size: 0.9rem; padding: 12px 14px; }
  .cg-lede { font-size: 1rem; }
  .cg-acc summary { padding: 15px 16px; font-size: 0.94rem; }
  .cg-acc-body { padding: 14px 16px 18px; }
  .cg-card { padding: 16px; }
  .cg-embassy-grid { grid-template-columns: 1fr; }
  .cg-closing { padding: 26px 20px; }
  .cg-em-num { font-size: 1.5rem; }
  .cg-vs { padding: 16px; }
  .cg-figure figcaption { font-size: 0.76rem; }
}

/* ---------- 16b. Motion layer ---------- */
/* Accordion body: measured and animated by JS (grid-rows fallback-free) */
.cg-acc-anim { overflow: hidden; }

/* Tab panels ease in when switched */
@keyframes cg-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cg-tabpanel.cg-panel-enter { animation: cg-panel-in .35s cubic-bezier(0.16, 1, 0.3, 1); }

/* Show-more blocks ease in */
.cg-more-content.cg-panel-enter { animation: cg-panel-in .4s cubic-bezier(0.16, 1, 0.3, 1); }

/* Scroll reveal for cards and section headers */
.cg-js .cg-rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1), transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cg-js .cg-rv.cg-rv-in { opacity: 1; transform: translateY(0); }

/* Cards lift slightly on hover */
.cg-card { transition: box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
.cg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 6px 28px rgba(26,36,32,.10)); }

/* Month bar cells rise in when revealed */
.cg-js .cg-months .cg-month {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.cg-js .cg-months.cg-rv-in .cg-month { opacity: 1; transform: translateY(0); }

/* ---------- 17. Motion & accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .cg-page *, .cg-page *::before, .cg-page *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .cg-js .cg-rv, .cg-js .cg-months .cg-month { opacity: 1 !important; transform: none !important; }
}
.cg-page :focus-visible { outline: 2px solid var(--cg-gold); outline-offset: 2px; }
html { scroll-behavior: smooth; }