/* ===== Mobile responsiveness fixes (appended; only affects <=980px) ===== */
.mob-nav-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.burger{display:none}
@media(max-width:980px){
  /* --- Mobile navigation (hamburger) --- */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;order:3;flex:0 0 auto;
    width:44px;height:44px;padding:0 10px;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;background:none;border:0}
  .burger span{display:block;height:2.5px;width:100%;background:var(--inkt,#2b2b26);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
  #mob-nav:checked ~ .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  #mob-nav:checked ~ .burger span:nth-child(2){opacity:0}
  #mob-nav:checked ~ .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .top .knop.knop-vol{order:2}
  /* nav becomes a drop panel, closed by default, opened by the checkbox */
  nav.hoofdmenu{display:none}
  #mob-nav:checked ~ nav.hoofdmenu{
    display:flex;flex-direction:column;align-items:stretch;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;padding:6px 22px 20px;gap:0;z-index:70;
    box-shadow:0 24px 40px rgba(30,30,20,.16);border-top:1px solid #ece9e4;
    max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #mob-nav:checked ~ nav.hoofdmenu > a,
  #mob-nav:checked ~ nav.hoofdmenu .dd-trig{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:15px 2px;border-bottom:1px solid #f1efeb;
    font-size:16px;font-weight:700;color:var(--inkt,#2b2b26);line-height:1.2}
  #mob-nav:checked ~ nav.hoofdmenu .dd{display:block;position:static;width:100%}
  /* destinations submenu: shown expanded & compact inside the mobile panel */
  nav.hoofdmenu .dd-mega{display:none}
  #mob-nav:checked ~ nav.hoofdmenu .dd-mega{
    display:block;position:static;width:100%;max-width:none;inset:auto;margin:0;
    background:none;box-shadow:none;border:0;padding:2px 0 10px;transform:none;opacity:1;visibility:visible;pointer-events:auto}
  #mob-nav:checked ~ nav.hoofdmenu .dd-trig{border-bottom:0;padding-bottom:6px}
  nav.hoofdmenu .dd-chev{display:none}
  .dd-mega .dd-kop,.dd-mega .dd-foot,.dd-mega .dd-tag,.dd-mega .dd-flag{display:none}
  .dd-mega .dd-grid{display:block;gap:0}
  .dd-mega .dd-dest{padding:0;margin:0;border:0}
  .dd-mega .dd-body{padding:0}
  .dd-mega .dd-naam{display:block;padding:11px 2px 3px 15px;font-size:15px;font-weight:700;color:var(--inkt,#2b2b26);border-bottom:0}
  .dd-mega .dd-links{display:flex;gap:16px;padding:0 2px 11px 15px;margin:0;border-bottom:1px solid #f1efeb}
  .dd-mega .dd-links a{padding:0;border:0;font-size:13px;font-weight:600;color:var(--zacht,#6b7360);background:none}
  .dd-mega .dd-links a.fam{color:var(--mos,#536144)}
  /* keep the logo name on one line, never wrapping */
  .logo-tx{white-space:nowrap}
  /* tablet: two columns instead of a long stack */
  .reis-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  /* voorbeeldreis wens-lijst: let text flow instead of splitting into flex items */
  .plan-lijst li{display:block;position:relative;padding-left:32px}
  .plan-lijst li i{position:absolute;left:0;top:2px;margin-top:0}
}
@media(max-width:600px){
  /* --- Compact header so logo + CTA + burger fit --- */
  .top .wrap{gap:10px}
  .logo-tx small{display:none}
  .logo-tx{font-size:17px}
  .top .knop.knop-vol{margin-left:auto;padding:9px 15px;font-size:13.5px;gap:0}
  .top .knop .nav-ava{display:none}
  /* --- 6 voorbeeldreizen become a swipeable carousel --- */
  .reis-grid{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;margin-top:34px;padding:2px 0 16px;scroll-padding-left:2px;-webkit-overflow-scrolling:touch}
  .reis-grid::-webkit-scrollbar{height:0}
  .reis-grid > .reis{flex:0 0 84%;scroll-snap-align:start;margin:0}

  /* --- Tall card grids -> swipeable carousels (instead of one long stack) --- */
  .rt-grid,.droom-grid,.af-grid,.stappen,.feature-grid,.bento,.team-grid,.segment-grid{
    display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:14px;padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .rt-grid::-webkit-scrollbar,.droom-grid::-webkit-scrollbar,.af-grid::-webkit-scrollbar,
  .stappen::-webkit-scrollbar,.feature-grid::-webkit-scrollbar,.bento::-webkit-scrollbar,
  .team-grid::-webkit-scrollbar,.segment-grid::-webkit-scrollbar{height:0}
  .rt-grid > *,.droom-grid > *,.af-grid > *,.stappen > *,.feature-grid > *,
  .bento > *,.team-grid > *,.segment-grid > *{
    flex:0 0 85%;scroll-snap-align:start;margin:0}
  .segment-grid > *{flex-basis:88%}
  .stap-squig{display:none}

  /* --- Small text-block grid (Route & timing etc.): 2 columns, not a long stack --- */
  .feat-grid{grid-template-columns:1fr 1fr;gap:14px}

  /* --- Footer: brand + contact full width, destinations & links side by side --- */
  .voet-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .voet-grid > :first-child{grid-column:1 / -1}
  .voet-grid > :last-child{grid-column:1 / -1}

  /* --- Homepage destination chips: heading on top, one swipeable row (never two columns) --- */
  .kies-balk{flex-direction:column;align-items:stretch;gap:16px;padding:22px 20px}
  .kies-chips{flex-wrap:nowrap;min-width:0;width:100%;flex:0 1 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .kies-chips::-webkit-scrollbar{height:0}
  .kies-chips a{flex:0 0 auto;font-size:14.5px;padding:10px 20px}
  .kies-balk .geen-idee{text-align:left}

  /* ===== Plan-een-reisgesprek: put avatars + reactietijd above the H1 ===== */
  .plan > .wrap{display:flex;flex-direction:column}
  .plan .plan-grid{display:contents}
  .plan .context-kol{display:contents}
  .plan .context-kol > *{order:2}
  .plan .context-kol > .trust-top{order:-2;margin-bottom:4px}
  .plan .context-kol > .reactie-pil{order:-1;margin-top:0;margin-bottom:6px}
  .plan .plan-titel{order:0;margin-bottom:22px}
  .plan .form-kol{order:1;margin-bottom:8px}

  /* ===== Voorbeeldreis hero: shorter breadcrumb, route right under the title, smaller photos ===== */
  .vr-hero .kruim{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px;font-size:12px}
  .vr-hero .kruim::-webkit-scrollbar{height:0}
  .vr-hero .kruim > span{display:none}
  .vr-hero .kruim > i:last-of-type{display:none}
  .vr-hero .kruim a{white-space:nowrap}
  .vr-hero .wrap{display:flex;flex-direction:column;gap:0}
  .vr-hero .vr-kop{display:contents}
  .vr-hero .hero-rechts{display:contents}
  .vr-hero .kruim{order:1}
  .vr-hero .kicker{order:2}
  .vr-hero h1{order:3}
  .vr-hero .routekaart{order:4;margin:16px 0 6px}
  .vr-hero .vr-intro{order:5}
  .vr-hero .reis-feiten{order:6}
  .vr-hero .vr-knoppen{order:7}
  .vr-hero .reizigers{order:8;flex-direction:row;gap:12px;padding-top:16px}
  .vr-hero .reiziger{padding:8px 8px 0}
  .vr-hero .reiziger .cap{font-size:14px;padding:7px 4px 9px}

  /* ===== Voorbeeldreis reader Q&A: more compact ===== */
  .rij-zij{gap:12px}
  .qa-vraag{padding:12px 13px}
  .qa-vraag > p{font-size:13.5px;line-height:1.45;margin-top:0}
  .qa-antw{padding:11px 12px;margin-top:10px}
  .qa-antw p{font-size:13px;line-height:1.45}
  .qa-avatar{width:26px;height:26px;font-size:11px}
  .qa-antw img{width:24px;height:24px}
  .qa-kop{gap:8px;margin-bottom:6px}
  .qa-acties{margin-top:8px;gap:14px}
}