/* ============================================================
   Reisgierig — Inspiratie design tokens + globals
   Overgenomen uit het design-prototype (Inspiratie Prototype.html).
   Eén bron voor kleuren, typografie, spacing, radii, shadows, motion.
   ============================================================ */

:root {
  /* ---- Brand red ramp ---- */
  --red-50:#fef3f2; --red-100:#fde4e3; --red-200:#fbcfcd; --red-300:#f7a8a6;
  --red-400:#f0595f; --red-500:#ef4444; --red-600:#dc2625; --red-700:#b91c1c;
  --red-800:#991b1b; --red-900:#7f1d1d;

  /* ---- Warm neutral (stone) ramp ---- */
  --stone-0:#ffffff; --stone-50:#fafaf9; --stone-100:#f5f5f4; --stone-200:#e7e5e4;
  --stone-300:#d6d3d1; --stone-400:#a8a29e; --stone-500:#78716c; --stone-600:#57534e;
  --stone-700:#44403c; --stone-800:#292524; --stone-900:#1c1917;

  /* ---- Pastel category accents ---- */
  --blue-100:#dbeafe;   --blue-600:#2563eb;
  --green-100:#dcfce7;  --green-600:#16a34a;
  --purple-100:#ede9fe; --purple-600:#7c3aed;
  --amber-100:#fef3c7;  --amber-600:#d97706;
  --teal-100:#ccfbf1;   --teal-600:#0d9488;

  /* ---- Semantic ---- */
  /* Brand-rood afgestemd op de rest van de website (Tailwind 'rose') i.p.v. eigen rood */
  --brand:#f43f5e; --brand-hover:#e11d48; --brand-pressed:#be123c;
  --brand-soft:#ffe4e6; --brand-soft-fg:#e11d48; --brand-contrast:#ffffff;
  --brand-gradient:linear-gradient(150deg, #fb7185 0%, #e11d48 70%);

  --text-strong:var(--stone-900); --text-body:var(--stone-700); --text-muted:var(--stone-500);
  --text-faint:var(--stone-400); --text-on-brand:#ffffff; --text-link:#e11d48;

  --surface-page:#f7f6f5; --surface-card:#ffffff; --surface-sunken:var(--stone-100);
  --surface-hover:var(--stone-50); --surface-inverse:var(--stone-900);

  --border:var(--stone-200); --border-strong:var(--stone-300); --divider:var(--stone-100);
  --ring:rgba(244,63,94,0.40); --ring-offset:#ffffff;

  --status-done-bg:var(--red-100); --status-done-fg:var(--red-700);
  --success:var(--green-600); --success-bg:var(--green-100);
  --warning:var(--amber-600); --warning-bg:var(--amber-100);
  --info:var(--blue-600); --info-bg:var(--blue-100);
  --danger:var(--red-600); --danger-bg:var(--red-100);

  --like:var(--red-500); --view:var(--stone-400);

  /* Per-hue chip tokens (bg/fg) — referenced by .hue-* helpers */
  --hue-red-bg:var(--red-100);     --hue-red-fg:var(--red-600);
  --hue-blue-bg:var(--blue-100);   --hue-blue-fg:var(--blue-600);
  --hue-green-bg:var(--green-100); --hue-green-fg:var(--green-600);
  --hue-purple-bg:var(--purple-100);--hue-purple-fg:var(--purple-600);
  --hue-amber-bg:var(--amber-100); --hue-amber-fg:var(--amber-600);
  --hue-teal-bg:var(--teal-100);   --hue-teal-fg:var(--teal-600);

  /* ---- Typography ---- */
  --font-sans:'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:var(--font-sans);
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.0625rem; --text-lg:1.125rem;
  --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem; --text-5xl:3rem; --text-6xl:3.75rem;
  --leading-none:1; --leading-tight:1.12; --leading-snug:1.28; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-normal:0; --tracking-wide:0.04em;

  /* ---- Spacing / radii / shadows / motion ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --container-lg:1024px; --container-xl:1200px; --container-2xl:1320px;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px;
  --radius-2xl:28px; --radius-pill:9999px; --radius-full:50%;
  --shadow-xs:0 1px 2px rgba(28,25,23,0.06);
  --shadow-sm:0 1px 3px rgba(28,25,23,0.08), 0 1px 2px rgba(28,25,23,0.04);
  --shadow-md:0 6px 16px -4px rgba(28,25,23,0.10), 0 2px 6px -2px rgba(28,25,23,0.06);
  --shadow-card:0 1px 3px rgba(28,25,23,0.05), 0 14px 34px -10px rgba(28,25,23,0.14);
  --shadow-lg:0 20px 50px -14px rgba(28,25,23,0.22);
  --shadow-xl:0 32px 70px -18px rgba(28,25,23,0.28);
  --shadow-brand:0 10px 26px -8px rgba(244,63,94,0.50);
  --ease-standard:cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast:120ms; --duration-normal:200ms; --duration-slow:320ms;
  --z-header:200; --z-overlay:800; --z-modal:900; --z-toast:1000;
}

/* ---- Base ---- */
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family:var(--font-sans); background:var(--surface-page); color:var(--text-body); }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
h1,h2,h3,h4 { color:var(--text-strong); margin:0; }

/* Lucide-iconen in-place: <i> is de maatbox, <svg> vult 'm. */
i[data-lucide] { display:inline-flex; align-items:center; justify-content:center; width:1em; height:1em; vertical-align:-0.15em; line-height:0; flex:none; }
i[data-lucide] > svg { width:100%; height:100%; display:block; }

/* Hue helpers (accentkleur op chips e.d.) */
.hue-red   { --hue-bg:var(--hue-red-bg);    --hue-fg:var(--hue-red-fg); }
.hue-blue  { --hue-bg:var(--hue-blue-bg);   --hue-fg:var(--hue-blue-fg); }
.hue-green { --hue-bg:var(--hue-green-bg);  --hue-fg:var(--hue-green-fg); }
.hue-purple{ --hue-bg:var(--hue-purple-bg); --hue-fg:var(--hue-purple-fg); }
.hue-amber { --hue-bg:var(--hue-amber-bg);  --hue-fg:var(--hue-amber-fg); }
.hue-teal  { --hue-bg:var(--hue-teal-bg);   --hue-fg:var(--hue-teal-fg); }

/* Cover-fallback: hue-gradient wanneer er (nog) geen foto is (vgl. RG_gradImg) */
.rg-cover { position:relative; background-size:cover; background-position:center; overflow:hidden; }
.cover-hue-teal   { background-image:linear-gradient(135deg,#5eead4,#0d9488); }
.cover-hue-green  { background-image:linear-gradient(135deg,#86efac,#16a34a); }
.cover-hue-amber  { background-image:linear-gradient(135deg,#fcd34d,#ea9c1c); }
.cover-hue-purple { background-image:linear-gradient(135deg,#c4b5fd,#7c3aed); }
.cover-hue-red    { background-image:linear-gradient(135deg,#fca5a5,#dc2625); }
.cover-hue-blue   { background-image:linear-gradient(135deg,#93c5fd,#2563eb); }

/* Interactie-helpers uit het prototype */
.rg-hovercard { transition:transform .16s var(--ease-out), box-shadow .2s var(--ease-standard); }
.rg-hovercard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.rg-hoverrow { transition:background .15s; }
.rg-hoverrow:hover { background:var(--surface-hover); }
.rg-crumb:hover { text-decoration:underline; }
.rg-itemrow .rg-item-go { transition:transform .15s var(--ease-out), color .15s; }
.rg-itemrow:hover .rg-item-go { transform:translateX(3px); color:var(--brand); }

.rg-wrap { max-width:var(--container-2xl); margin:0 auto; padding:0 32px; }
.rg-chip { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:700;
  padding:4px 10px; border-radius:var(--radius-pill); background:var(--hue-bg, var(--stone-100)); color:var(--hue-fg, var(--text-muted)); }
.rg-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-weight:var(--weight-semibold);
  font-size:var(--text-base); padding:11px 18px; border-radius:var(--radius-md); border:none; cursor:pointer; transition:background .15s, transform .1s; }
.rg-btn-primary { background:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }
.rg-btn-primary:hover { background:var(--brand-hover); }
.rg-btn-ghost { background:var(--surface-card); color:var(--text-strong); border:1px solid var(--border); }
.rg-btn-ghost:hover { background:var(--surface-hover); }

/* Like-knop (interactief) */
.rg-like { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-weight:700;
  font-size:var(--text-base); color:var(--text-muted); background:transparent; border:none; cursor:pointer; padding:0; transition:color .15s, transform .1s; }
.rg-like:hover { color:var(--like); }
.rg-like.is-liked { color:var(--like); }
.rg-like.is-liked svg { fill:var(--like); }
.rg-like:disabled { opacity:.6; cursor:default; }
.rg-like.rg-like-pop svg { animation:rg-likepop .35s var(--ease-spring); }
@keyframes rg-likepop { 0%{ transform:scale(1);} 40%{ transform:scale(1.35);} 100%{ transform:scale(1);} }

/* Volledige kaart: groot, maar de pagina blijft scrollbaar (cooperative gestures) */
.rg-fullmap { height:620px; position:sticky; top:88px; }
@media (max-width:1024px) {
  /* Op mobiel zetten we de kaart zelf in de normale flow (relative met eigen hoogte)
     i.p.v. een absolute kind binnen een vaste-hoogte container. Een absolute kaart
     viel anders over de filters/breadcrumb (erboven) én de markerlijst (eronder) heen. */
  .rg-fullmap { position:relative; height:auto; top:auto; }
  .rg-fullmap > #rg-full-map { position:relative !important; inset:auto !important; width:100%; height:520px; }
  .rg-maplist { max-height:none !important; overflow:visible !important; }
}
@media (max-width:680px) {
  .rg-fullmap > #rg-full-map { height:62vh; }
}

/* Inklapbaar blok (chevron-toggle) */
.rg-collapse-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; cursor:pointer; font-family:var(--font-sans); text-align:left; }
.rg-collapse-chevron { transition:transform .2s var(--ease-out); flex:none; }
.rg-collapsible.is-collapsed .rg-collapse-body { display:none !important; }
.rg-collapsible.is-collapsed .rg-collapse-chevron { transform:rotate(-90deg); }

/* Live zoek-typeahead */
.rg-search { position:relative; }
.rg-search-box { display:flex; align-items:center; gap:10px; min-width:0; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); padding:0 16px; box-shadow:var(--shadow-sm); transition:box-shadow .15s, border-color .15s; }
.rg-search-box:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }
.rg-search-box input { flex:1; min-width:0; border:none; outline:none; background:transparent; padding:14px 0; font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong); }
.rg-search-panel { position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden auto; z-index:var(--z-overlay); max-height:min(60vh, 420px); text-align:left; }
.rg-search-row { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; }
.rg-search-row.is-active, .rg-search-row:hover { background:var(--surface-hover); }
.rg-search-ic { width:34px; height:34px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.rg-search-kind { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-faint); flex:none; }
.rg-search-empty { padding:18px 16px; color:var(--text-muted); font-size:var(--text-sm); text-align:center; }

/* Filter-pills (kaart) */
.rg-filter { font-family:var(--font-sans); font-size:var(--text-sm); font-weight:600; color:var(--text-body);
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:7px 14px; cursor:pointer; transition:all .15s; }
.rg-filter:hover { background:var(--surface-hover); }
.rg-filter.is-active { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:var(--shadow-brand); }

/* ============ KAART: pins + on-click popover ============ */
.rg-pin { width:30px; height:30px; cursor:pointer; transition:transform .15s var(--ease-out); filter:drop-shadow(0 3px 5px rgba(28,25,23,.4)); }
.rg-pin:hover { transform:scale(1.15); z-index:5; }
.rg-pin svg { width:100%; height:100%; display:block; }
.rg-pin.is-active { transform:scale(1.25); }

/* Genummerde route-stop */
.rg-pin-num { width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; font-family:var(--font-sans);
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 0 0 2px #fff, var(--shadow-sm); transition:transform .15s var(--ease-out); }
.rg-pin-num:hover, .rg-pin-num.is-active { transform:scale(1.18); }

/* Nieuw on-click popover-design (overgenomen uit het prototype) */
.rg-mappop .mapboxgl-popup-content { padding:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border); width:210px; font-family:var(--font-sans); }
.rg-mappop .mapboxgl-popup-tip { display:none; }
.rg-mappop-cover { height:8px; }
.rg-mappop-body { padding:12px 14px 13px; }
.rg-mappop-title { font-weight:700; color:var(--text-strong); font-size:var(--text-base); line-height:1.25; }
.rg-mappop-sub { font-size:var(--text-sm); color:var(--text-muted); margin-top:3px; }
.rg-mappop-meta { display:flex; align-items:center; gap:12px; margin-top:10px; font-size:var(--text-sm); }
.rg-mappop-open { display:inline-flex; align-items:center; gap:5px; margin-top:12px; color:var(--brand); font-weight:700; font-size:var(--text-sm); }

/* ============ REIS: route + meebewegende kaart ============ */
.rg-routewrap { display:grid; grid-template-columns:1fr 420px; gap:32px; align-items:start; }
.rg-routeaside { position:sticky; top:88px; }
.rg-stop { transition:background .15s, border-color .15s; }
.rg-stop.is-active { border-color:var(--brand); box-shadow:0 0 0 2px var(--ring); }
@media (max-width:1024px) {
  .rg-routewrap { grid-template-columns:1fr; }
  .rg-routeaside { position:static; order:-1; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px) {
  [style*="repeat(5, 1fr)"] { grid-template-columns:repeat(3,1fr) !important; }
  [style*="repeat(4, 1fr)"] { grid-template-columns:repeat(2,1fr) !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns:repeat(2,1fr) !important; }
  /* Asymmetrische twee-koloms layouts (kaart + lijst, hero + media) stapelen */
  [style*="1.5fr 1fr"], [style*="1fr 1.5fr"] { grid-template-columns:1fr !important; }
  /* CTA-blokken stapelen op tablet i.p.v. samenpersen */
  .rg-cta { flex-direction:column !important; align-items:flex-start !important; gap:20px !important; }
}
@media (max-width:680px) {
  [style*="repeat(5, 1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"], [style*="repeat(2, 1fr)"],
  [style*="1fr 1fr"] { grid-template-columns:1fr !important; }
  .rg-wrap { padding:0 18px; }
  .rg-nav { display:none !important; }
  h1 { font-size:clamp(28px,8vw,50px) !important; }
  .rg-cta { padding:24px !important; }
  .rg-cta h2 { font-size:var(--text-2xl) !important; }
  /* CTA-knop vol breed op de telefoon */
  .rg-cta > a.rg-btn { width:100% !important; justify-content:center !important; }
  /* Persoonlijk blok: knop onder de tekst, vol breed */
  .rg-personal-head > a.rg-btn { width:100%; justify-content:center; margin-top:6px; }
}

/* Uitklapbaar reisverhaal (reis-detail): geclampt tot 6 regels, "Lees meer" toont alles. */
.rg-verhaal.rg-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Actieve marker (na "draai naar marker"): vergroot de pin zodat je 'm meteen ziet.
   We schalen de inner-svg, niet het pin-element zelf — dat heeft Mapbox' translate. */
.rg-pin.is-active { z-index: 10; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.rg-pin.is-active svg { transform: scale(1.5); transform-origin: 50% 100%; transition: transform .2s ease; }
.rg-pin-num.is-active { z-index: 10; box-shadow: 0 0 0 4px rgba(220,38,37,.35); transform-box: fill-box; }

/* Section-head op mobiel: titel/sub boven, de actie-link eronder (niet ernaast geperst). */
@media (max-width:680px) {
  .rg-sechead { flex-direction:column; align-items:flex-start; gap:8px; }
  .rg-sechead-action { white-space:normal; }
}