/*
  Shared design tokens — Kelly Scherrenberg / Personal Touch Travel
  ===================================================================
  Global color variables used across every page of the site. Change a
  value here and it applies everywhere automatically — do not redefine
  :root locally in a page's own <style> block.
*/
:root{
  --paper:#FEF7F2;
  --paper-light:#FBF3EF;
  --card:#FFFFFF;
  --ink:#2A211D;
  --ink-soft:#5C4A45;
  --teal:#B83583;
  --teal-deep:#B83583;
  --gold:#C9A227;
  --coral:#D9A9A0;
  --whatsapp:#A3B320;
  --line: rgba(42,33,29,0.14);

  /* Site-wide typography system — see per-page <style> blocks for
     selectors that apply these; do not hardcode font names elsewhere. */
  --font-heading:'Fredoka', sans-serif;
  --font-body:'DM Sans', sans-serif;
  --font-label:'Patrick Hand', cursive;
}

/*
  Galerij-component (kgallery)
  =============================
  Gedeeld door reisverhalen.html (overzicht) en verhaal.html (detail),
  via gallery.js. Eén grote hoofdfoto + twee gestapelde thumbnails; schaalt
  netjes af bij minder foto's. Niet gebruikt door andere pagina's — puur
  additief, raakt niets anders op de site.
*/
.kgallery{
  position:relative;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:4px;
  background:var(--paper);
  overflow:hidden;
}
.kgallery--card{ border-radius:4px; aspect-ratio:4/3; }
.kgallery--hero{ border-radius:6px; aspect-ratio:16/7; margin-bottom:40px; }
.kgallery--single,
.kgallery--empty{ grid-template-columns:1fr; }
.kgallery--empty{ background:linear-gradient(135deg, var(--gold) 0%, var(--teal) 100%); }

.kgallery-featured,
.kgallery-thumb{
  background-color:var(--line);
  background-size:cover;
  background-position:center;
  position:relative;
}
.kgallery.has-gallery{ cursor:pointer; }
.kgallery.has-gallery:focus-visible{ outline:2px solid var(--teal-deep); outline-offset:2px; }

.kgallery-thumbs{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:4px;
}

.kgallery-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px;
  text-align:center;
  color:var(--paper-light);
  background:rgba(42,33,29,0.42);
  transition:background-color 0.2s ease;
}
.kgallery.has-gallery:hover .kgallery-overlay,
.kgallery.has-gallery:focus-visible .kgallery-overlay{ background:rgba(42,33,29,0.58); }
.kgallery-overlay svg{ width:16px; height:16px; flex-shrink:0; }
.kgallery-overlay span{
  font-family:var(--font-label);
  font-size:0.62rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  line-height:1.2;
}

.kgallery--card .kgallery-overlay svg{ width:13px; height:13px; }
.kgallery--card .kgallery-overlay span{ font-size:0.52rem; }

@media (max-width:640px){
  .kgallery--hero{ aspect-ratio:4/3; }
}

/* Lightbox used to view the full gallery, opened by gallery.js */
.lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(42,33,29,0.96);
  z-index:100;
  overflow-y:auto;
  padding:32px 20px 60px;
}
.lightbox.open{display:block;}
.lightbox-close{
  position:fixed;
  top:24px; right:28px;
  font-family:var(--font-label);
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--paper-light);
  background:none;
  border:1px solid rgba(251,248,241,0.4);
  border-radius:3px;
  padding:8px 14px;
  cursor:pointer;
}
.lightbox-close:hover{border-color:var(--paper-light);}
.lightbox-grid{
  max-width:900px;
  margin:60px auto 0;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.lightbox-grid img{
  width:100%;
  border-radius:6px;
  display:block;
}