/* ===================== THEME (light & fast) ===================== */
:root{
  --bg: #F4EFE8;         /* soft white-beige */
  --bg-2: #FAF7F2;
  --text: #2B2622;
  --muted:#6E6258;
  --line: rgba(43,38,34,.12);

  --surface:#FFFFFF;
  --surface-2:#FBF8F4;

  --gold:#D7B97A;
  --gold-2:#E7C98E;

  --radius:22px;

  /* lichtere schaduwen (performant) */
  --elev-1: 0 6px 16px rgba(0,0,0,.06);
  --elev-2: 0 10px 22px rgba(0,0,0,.08);

  --header-h:76px;
}

/* ================ BASE ================ */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1180px,92%); margin-inline:auto}
h1,h2,h3,.brand-text{font-family:"Cormorant Garamond", serif}

.hidden{display:none !important}
.tiny{font-size:.88rem; color:var(--muted)}

/* ================ HEADER (pill) ================ */
.page-offset{height:calc(var(--header-h) + 16px)}
.nav{
  position:fixed; inset:16px 16px auto 16px; height:var(--header-h);
  display:flex; align-items:center; z-index:60;
  background:rgba(255,255,255,.86); /* minder transparant = sneller */
  backdrop-filter: blur(6px);
  border:1px solid var(--line); border-radius:999px; box-shadow:var(--elev-1);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 14px}
.brand{display:flex; align-items:center; gap:10px}
.brand-text{font-weight:600; letter-spacing:.3px}
.nav-links{display:flex; gap:10px; align-items:center}
.nav-links a{padding:10px 14px; border-radius:999px}
.nav-links a:hover{background:rgba(0,0,0,.05)}
.nav-toggle{display:none; background:none; border:none; color:var(--text)}
.nav-toggle i{width:24px; height:24px}

/* ================ BUTTONS ================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:12px 18px; border:1px solid transparent;
  cursor:pointer; transition: transform .18s ease; font-weight:600;
  will-change: transform;
}
.btn:active{transform:scale(.98)}
.btn-gold{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#2B2622; border-color: rgba(0,0,0,.06);
}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.small{padding:8px 12px; font-size:.9rem}

/* ================ HERO ================ */
.hero{
  position:relative; min-height:82vh;
  display:grid; place-items:center; overflow:hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(0.7); /* 1 filter, snel */
}
.hero-content{position:relative; z-index:2; text-align:center; padding:80px 0 60px}
.eyebrow{letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; font-size:.85rem}
.headline{font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.05; margin:0 0 10px; min-height:60px}
.subhead{margin:0 auto 16px; max-width:880px; color:#3A332E; font-size:clamp(1rem,1.6vw,1.15rem)}

.hero-meta{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; color:#4E463F;
}
.hero-meta span{
  display:inline-flex; gap:8px; align-items:center;
  background:#fff; border:1px solid var(--line);
  padding:8px 12px; border-radius:999px;
  box-shadow: var(--elev-1);
}

/* Spotify hero */
.spotify-hero{max-width:420px; margin:14px auto 0; box-shadow:var(--elev-1); border-radius:12px; overflow:hidden}

/* ================ SECTIONS ================ */
.section{padding:72px 0}
.section-alt{background:var(--surface-2)}
.section-title{font-size:clamp(1.7rem,3.2vw,2.25rem); margin:0 0 10px}
.section-intro{color:var(--muted); margin:0 0 18px; max-width:900px}

/* ================ CARDS (value props) ================ */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--elev-1);
  transition: transform .18s ease;
  will-change: transform;
}
.card:hover{transform:translateY(-4px)}
.card-icon{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:#2B2622; margin-bottom:12px;
}

/* ================ MEDIA / SPOTIFY (grid variant) ================ */
.spotify-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.spotify-grid iframe{width:100%; border:0; height:152px; box-shadow:var(--elev-1); border-radius:12px}

/* ================ PRICING – refined (performant) ================ */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,20px); margin-top:12px}
.tier{
  position:relative; background:radial-gradient(120% 120% at 0% 0%, #FFFFFF 0%, #FAF7F2 100%);
  border-radius:26px; padding:22px; box-shadow:var(--elev-1); overflow:hidden;
  transition: transform .18s ease; will-change: transform;
}
.tier:hover{transform:translateY(-5px)}
.tier-border{
  pointer-events:none; position:absolute; inset:0; border-radius:26px;
  border:1px solid rgba(215,185,122,.55);
}
.tier .pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(215,185,122,.18); border:1px solid rgba(215,185,122,.45);
  color:#7A633F; font-weight:600; font-size:.9rem;
}
.tier-title{font-family:"Cormorant Garamond",serif; font-size:clamp(1.2rem,2.1vw,1.6rem); margin:10px 0 8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.chip{font-size:.82rem;color:#5A4F47;background:rgba(0,0,0,.03);border:1px solid var(--line);padding:6px 10px;border-radius:999px}
.tier-list{list-style:none;padding:0;margin:8px 0 14px;display:grid;gap:8px}
.tier-list li{display:flex;gap:10px;align-items:flex-start;color:#3A332E}
.tier-list i{width:18px;height:18px;color:#7A633F;flex:0 0 18px;margin-top:3px}
.tier-cta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tier-cta .tiny{color:#6E6258}
.tier.featured{box-shadow:var(--elev-2)}
.ribbon{
  position:absolute; top:10px; right:-22px; background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#2B2622; font-weight:700; font-size:.82rem; padding:6px 16px; border-radius:999px; transform:rotate(10deg);
}

/* ================ TESTIMONIALS (grid) ================ */
.testimonial-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.testimonial{
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; padding:18px; box-shadow:var(--elev-1);
  text-align:center; display:flex; flex-direction:column; align-items:center;
  transition: transform .18s ease; will-change: transform;
}
.testimonial:hover{transform:translateY(-3px)}
.testimonial img{width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:10px}
.testimonial p{font-style:italic; margin:0 0 8px}
.testimonial h4{margin:0; font-weight:600; color:var(--muted)}

/* ================ REGIONEN (split) ================ */
.region-split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(16px,3vw,24px); align-items:center}
.region-text .region-list{margin:8px 0 14px; padding-left:18px; color:var(--muted)}
.region-text .region-list li{margin:4px 0}
.region-figure{margin:0}
.region-figure img{
  width:100%; aspect-ratio:1 / 1; object-fit:cover; background:#fff;
  border:1px solid var(--line); border-radius:20px; box-shadow:var(--elev-1);
}
.region-figure figcaption{text-align:center; margin-top:6px; color:var(--muted)}

/* ================ CALENDAR (FullCalendar) ================ */
#calendarEl{
  background:#fff; border-radius:22px; padding:16px; box-shadow:var(--elev-1);
}
.fc{
  --fc-border-color: var(--line);
  --fc-page-bg-color:#fff;
  --fc-neutral-bg-color:#FBF8F4;
}
.fc .fc-toolbar-title{
  font-family:"Cormorant Garamond",serif; font-weight:700; color:var(--text);
}
.fc .fc-button{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  border:none; color:#2B2622; border-radius:999px; padding:8px 12px;
}
.fc .fc-col-header-cell{background:#f8f6f2; font-weight:600; color:#6d5f4b; border:none}
.fc .fc-col-header-cell-cushion{padding:10px 0; border-bottom:2px solid var(--gold)}
.fc .fc-daygrid-day{border:none; background:#fff; transition:background .12s ease}
.fc .fc-daygrid-day-number{padding:6px 8px; border-radius:10px}
.fc .fc-daygrid-day:hover{background:#faf6ef; border-radius:12px; outline:2px solid var(--gold); outline-offset:-2px}
.fc .fc-daygrid-day.fc-day-today{background:linear-gradient(180deg,#fffaf0,#fff); border-radius:12px; outline:2px solid var(--gold)}
.fc .fc-highlight{background:linear-gradient(180deg,var(--gold),var(--gold-2))!important; border-radius:12px!important; opacity:1!important}

/* ================ OVERLAY FORM (light glass) ================ */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; justify-content:center; align-items:center; z-index:200}
.overlay.hidden{display:none}
.overlay-card{
  background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
  border-radius:20px; padding:24px; width:min(92%,460px);
  box-shadow:var(--elev-2); position:relative; animation:fadeUp .25s ease;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.overlay-close{position:absolute; top:14px; right:16px; border:none; background:none; font-size:1.6rem; cursor:pointer}

.field{margin:12px 0; display:flex; flex-direction:column; gap:6px}
.field label{font-size:.9rem; color:var(--muted)}
.field input,.field select,.field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:8px 4px; font-size:1rem; outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.btn.full{width:100%; justify-content:center; margin-top:14px}

/* ================ GALLERY (background + masonry) ================ */
/* Gebruik je eigen bestand hier */
:root{ --gallery-bg: url("img/bg-gallery-2.webp"); }

#gallery.section{
  position:relative; z-index:0; padding-top:84px; padding-bottom:84px;
  background:
    radial-gradient(70% 40% at 50% -10%, rgba(215,185,122,.14) 0%, rgba(215,185,122,0) 60%),
    radial-gradient(70% 40% at 50% 110%, rgba(215,185,122,.12) 0%, rgba(215,185,122,0) 60%),
    var(--gallery-bg);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
#gallery .container{position:relative}
#gallery .container::after{
  content:""; position:absolute; inset:-20px; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.14));
  border:1px solid rgba(0,0,0,.06); border-radius:24px;
}

/* Masonry – zonder zware animaties */
.masonry{columns: 3 280px; column-gap:16px}
.masonry-item{display:inline-block; margin:0 0 16px; width:100%; border-radius:16px; overflow:hidden; break-inside:avoid; box-shadow:var(--elev-1)}
.masonry-item img{width:100%; height:auto; display:block}
.masonry-item figcaption{
  position:absolute; inset:0; display:flex; justify-content:center; align-items:center;
  opacity:0; transition:opacity .2s ease; color:#fff; font-family:"Cormorant Garamond",serif;
  background:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.35));
}
.masonry-item:hover figcaption{opacity:1}

/* ================ FOOTER ================ */
.footer{border-top:1px solid var(--line); background:#fff; padding:16px 0; color:var(--muted)}
#year{font-variant-numeric: tabular-nums}

/* ================ RESPONSIVE ================ */
@media (max-width:1024px){
  .cards, .pricing-grid, .spotify-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .nav{inset:10px 10px auto 10px}
  .nav-links{
    display:none; position:fixed; top:calc(10px + var(--header-h) + 10px); right:10px;
    background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; flex-direction:column; min-width:230px; z-index:61;
    box-shadow:var(--elev-1);
  }
  .nav-links a{padding:12px 14px}
  .nav-toggle{display:block}
  .cards, .pricing-grid, .spotify-grid{grid-template-columns:1fr}
  .hero{min-height:72vh}
  .region-split{grid-template-columns:1fr}
  .region-figure{order:-1}
}

/* ================ ACCESSIBILITY / MOTION ================ */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
}
/* --- GALLERY: achtergrond + clean look --- */
#gallery.section{
  position: relative;
  padding-top: 84px;
  padding-bottom: 84px;
  background: url("img/achtergrond.png") center / cover no-repeat;
}

/* VERWIJDER de ‘kaart’-overlay achter de gallery */
#gallery .container::after{ display:none !important; }

/* Masonry zonder grijze hoverlaag */
.masonry{ columns: 3 280px; column-gap:16px; }
.masonry-item{
  display:inline-block; margin:0 0 16px; width:100%;
  border-radius:16px; overflow:hidden; break-inside:avoid;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.masonry-item img{
  width:100%; height:auto; display:block;
  will-change: transform;
  transition: transform .35s ease;            /* slechts transform = snel */
}

/* Geen donkere/ grijze overlay op hover; alleen een mini-zoom */
.masonry-item figcaption{ display:none; }
.masonry-item:hover img{ transform: scale(1.03); }

/* Mobiel: 2 kolommen */
@media (max-width: 900px){
  .masonry{ columns: 2 160px; }
}

/* Als gebruiker animaties wil beperken: parallax uit */
@media (prefers-reduced-motion: reduce){
  .masonry-item img{ transition: none !important; }
}
/* --- SHARED BACKGROUND (Warum + Gallery) --- */
.section.bg-paper {
  position: relative;
  padding-top: 84px;
  padding-bottom: 84px;
  background: url("img/achtergrond.png") center / cover no-repeat;
}

/* Kaart/overlay achter secties weghalen */
.section.bg-paper .container::after { display:none !important; }

/* --- GALLERY masonry --- */
#gallery.section{ padding-top:84px; padding-bottom:84px; }
.masonry{ columns: 3 280px; column-gap:16px; }
.masonry-item{
  display:inline-block; margin:0 0 16px; width:100%;
  border-radius:16px; overflow:hidden; break-inside:avoid;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.masonry-item img{
  width:100%; height:auto; display:block;
  will-change: transform;
  transition: transform .35s ease;
}

/* Geen donkere overlay op hover, alleen een lichte zoom */
.masonry-item figcaption{ display:none; }
.masonry-item:hover img{ transform: scale(1.03); }

/* Responsief */
@media (max-width: 900px){ .masonry{ columns: 2 160px; } }

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .masonry-item img{ transition:none !important; }
}
/* ===== One big paper background over both sections ===== */
.paper-wrap{
  background: url("img/achtergrond.png") center top / cover no-repeat;
  /* hou transparante secties daarbinnen */
}
.paper-wrap .section{background: transparent}

/* ===== Why-cards: icoontjes i.p.v. gouden kopjes ===== */
.why-cards .card{
  position:relative;
  padding-top:18px;
}
.card-icon{
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#2B2622;
  box-shadow: var(--elev-1);
  margin-bottom:10px;
}
.card-icon i{width:20px; height:20px}

/* ===== Gallery: grid-masonry met strakke kolom-alingment ===== */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px;           /* basis-rijhoogte voor autospan */
  gap: 16px;
}
.g-item{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  overflow:hidden; box-shadow:var(--elev-1);
  display:block;
}
.g-item img{
  width:100%; height:auto; display:block;
}
.g-item figcaption{
  display:none; /* optioneel zichtbaar maken */
}

/* Zorg dat kolom 1 en 3 'hetzelfde lopen' (strak raster) */
@media (max-width: 900px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

/* Hover zonder grijze sluier; mini-zoom */
.g-item:hover img{ transform: scale(1.02); transition: transform .25s ease }

/* Kleine performance fix */
.g-item, .g-item img{ will-change: transform }

/* === Cinematic Stack (Apple-style) === */
.cinematic-gallery{
  padding-top: 84px;
  padding-bottom: 84px;
  background: url("img/achtergrond.png") center / cover no-repeat;
}

/* Layout: links sticky kop, rechts stack */
.cine-wrap{
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(16px, 4vw, 40px);
  align-items: start;
}
.cine-aside{
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.cine-aside .section-title{ margin-top: 6px }

/* Stack items */
.cine-stack{ display: grid; gap: 18px }
.cine-item{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--elev-1);
  transform: translateZ(0); /* promote layer */
}
.cine-item img{
  width: 100%; height: auto; display: block;
  will-change: transform, filter, opacity;
}

/* --- CSS scroll-linked animaties (modern browsers) --- */
@supports (animation-timeline: view()) {
  .cine-item{
    view-timeline-name: --reveal;
    view-timeline-axis: block;
    animation-name: cine-reveal;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.2,.6,.2,1);
    animation-fill-mode: both;
    /* start iets voor binnenkomst, eind als het midden scherm bedekt */
    animation-timeline: --reveal;
    animation-range: entry 20% cover 35%;
  }
  .cine-item img{
    view-timeline-name: --parallax;
    animation-name: cine-parallax;
    animation-duration: 1s;
    animation-timeline: --parallax;
    animation-range: entry 0% exit 100%;
    animation-fill-mode: both;
  }

  @keyframes cine-reveal {
    from { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
  }
  @keyframes cine-parallax {
    from { transform: translateY(8px); }
    to   { transform: translateY(-8px); }
  }
}

/* Hover: mini-zoom, geen grijze overlay */
.cine-item:hover img{ transform: scale(1.015); transition: transform .25s ease }

/* Responsief */
@media (max-width: 900px){
  .cine-wrap{ grid-template-columns: 1fr }
  .cine-aside{ position: static }
}

/* Motion preferencies */
@media (prefers-reduced-motion: reduce){
  .cine-item{ animation: none !important }
  .cine-item img{ animation: none !important; transform: none !important }
}

/* === Achtergrond varianten === */

/* Basis beige */
.bg-solid{
  background: var(--bg);
}

/* Volledige paper texture */
.bg-paper{
  background: url("img/achtergrond.png") center center / contain repeat;
  /* contain ipv cover → zie je meer van de lijnen, niet ingezoomd */
}
.bg-paper1{
  background: url("img/header.png") center center / contain repeat;
  /* contain ipv cover → zie je meer van de lijnen, niet ingezoomd */
}
/* Subtiele paper-overlay */
.bg-paper-soft{
  position: relative;
  background: var(--bg-2);
}
.bg-paper-soft::before{
  content:"";
  position:absolute; inset:0;
  background: url("img/achtergrond.png") center center / 800px auto repeat;
  opacity:.25;                /* zacht effect */
  z-index:0;
}
.bg-paper-soft > *{ position:relative; z-index:1 }
/* Standaard transparant */
.nav {
  position: fixed;
  inset: 16px 16px auto 16px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  z-index: 60;
  background: transparent; /* 👈 transparant gemaakt */
  border: none;            /* geen rand */
  box-shadow: none;        /* geen schaduw */
  transition: background .3s ease, box-shadow .3s ease, border .3s ease;
}

/* Zodra gescrolled */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.85); /* lichte glaslook */
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* ===== Language Switcher ===== */
.lang-switch{ position:relative; z-index:65 }
.lang-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  box-shadow: var(--elev-1);
  cursor:pointer;
  font-weight:600;
}
.lang-btn .flag{ border-radius:2px; display:block }
.lang-btn .chev{ width:16px; height:16px; opacity:.7 }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--elev-2);
  min-width:180px; padding:6px; margin:0; list-style:none;
  display:none;
}
.lang-menu.open{ display:block; }
.lang-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
}
.lang-menu a:hover{ background:#F7F4EE; }
.lang-menu .flag{ border-radius:2px }

/* Mobiel: groter raakvlak */
@media (max-width:780px){
  .lang-btn{ padding:10px 14px }
  .lang-menu{ min-width:200px }
}
/* ===== FOOTER ===== */
.footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  padding: 22px 0;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
}

.footer small {
  display: block;
  font-family: "Inter", sans-serif;
}

.footer a.footer-link {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.footer a.footer-link:hover {
  color: var(--gold-2);
  text-shadow: 0 0 6px rgba(215,185,122,0.5);
}

#year {
  font-variant-numeric: tabular-nums;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 600px) {
  .footer {
    font-size: 0.85rem;
    padding: 18px 12px;
  }
}