/* ===============================
   1) DESIGN TOKENS
================================ */
:root {
  --fg: #111;           /* primaire tekstkleur */
  --muted: #6f6f6f;     /* secundaire tekstkleur */
  --line: #e9e9e9;      /* hairline borders */
  --max: 1200px;        /* max content breedte */
  --ff-sans: Inter, system-ui, sans-serif;         /* body */
  --ff-serif: 'EB Garamond', serif;                /* headings */
  --ff-mono: 'IBM Plex Mono', ui-monospace, monospace; /* accent */
}


/* ===============================
   2) RESET / BASIS
================================ */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin:0; color:var(--fg); background:#fff; font-family:var(--ff-sans) }
img { display:block; max-width:100%; height:auto }
a { color:inherit; text-decoration:none }
h1, h2 { font-family:var(--ff-serif); font-weight:400 }
h1 { font-size:clamp(40px,6vw,72px); line-height:1.05; margin:0 0 20px }
h2 { font-size:clamp(26px,3.6vw,42px); line-height:1.15; margin:0 0 12px }
.container { max-width:var(--max); margin:0 auto; padding:0 20px }
section { padding:80px 0 }
.meta {
  font-family:var(--ff-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:12px;
}


/* ===============================
   3) HEADER + NAV
================================ */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(8px);
}

.brand img {
  height: 45px; /* pas dit aan naar gewenste hoogte */
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .brand img {
    height: 50px;
  }
}


.nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: var(--ff-serif);
  font-size: 24px;
  letter-spacing: .04em;
}

.menu {
  display: flex;
  gap: 22px;
  align-items: center;
}

.menu a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .9;
}

.menu a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}



/* ===============================
   4) LANGUAGE SWITCH
================================ */
.lang-switch {
  font-family: var(--ff-mono);
  font-size: 0.9rem;
  margin-left: 1rem;
}

.lang-switch button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  text-transform: uppercase;
}

.lang-switch button.active {
  text-decoration: underline;
}

/* Desktop/Mobile toggles */
.desktop-only { display: inline-block; }
.mobile-only  { display: none; }

/* Mobile view: toon NL/EN in de drawer vanaf hetzelfde breakpoint als de burger */
@media (max-width: 860px) {
  .desktop-only { display: none; }

  .mobile-only {
    display: block;
    margin-top: 16px;
    padding-top: 10px;
    text-align: left;
    border-top: 1px solid var(--line);
  }
  .mobile-only button {
    font-size: 13px;
  }
}



/* ===============================
   5) MOBIELE MENUDRAWER
================================ */
.drawer { display: none; }

.burger {
  display: none;
  border: 1px solid var(--line);
  background: transparent;
  padding: 8px 10px;
}

.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--fg);
  margin: 4px 0;
}

@media (max-width: 860px) {
  .menu { display: none; }
  .burger { display: block; }
  .drawer {
    position: fixed;
    inset: 64px 16px auto 16px;
    background:#fff;
    border:1px solid var(--line);
    padding:8px;
  }
  .drawer a {
    display:block;
    padding:14px 10px;
    border-bottom:1px solid var(--line);
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.11em;
  }
  .drawer a:last-child { border-bottom:none }
  .drawer.open { display:block }
}

/* ===== LOCATIEGRID (zonder beeld) ===== */
.locations-grid{
  display:grid;
  gap:40px;
  grid-template-columns:1fr;           /* mobiel: 1 kolom */
}

@media (min-width: 900px){
  .locations-grid{ grid-template-columns: 1fr 1fr; }   /* tablet/desktop: 2 kolommen */
}

@media (min-width: 1200px){
  .locations-grid{ grid-template-columns: 1fr 1fr 1fr; } /* brede desktop: 3 kolommen */
}

.location-card{
  border:1px solid var(--line);
  padding:18px;
  transition:transform .2s ease, box-shadow .2s ease;
}

.location-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.location-name{
  font-family:var(--ff-serif);
  font-weight:400;
  font-size:20px;
  margin:0 0 6px;
}

.location-address,
.location-city{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--fg);
}

.location-card .mono-link{
  display:inline-block;
  margin-top:10px;
}

/* ===============================
teampagina
================================ */
/* TEAM (matcht globale look & feel) */
#team .team-intro { max-width: 68ch; margin: 10px 0 18px; }

#team .team-name{
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#team .team-name:hover{ text-decoration-thickness: 2px; }



#team .team-bio {
  display: none;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  line-height: 1.55;
}

/* zachte open-animatie, zoals elders */
@media (prefers-reduced-motion: no-preference) {
  #team .team-bio.is-open { animation: teamFade .18s ease-out; }
  @keyframes teamFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}


/* ===============================
   Data & locaties grid
================================ */

.btn-row.highlight { gap: 12px; margin-top: 16px; }
.btn-row.route-tools { gap: 8px; margin-top: 10px; }
.btn.btn-small { font-size: 12px; padding: 6px 10px; border: 1px solid var(--line); }


.dates-list { list-style:none; padding:0; margin:0 0 14px; display:grid; gap:6px; }
.dates-list strong { font-family: var(--ff-mono); font-size:12px; text-transform:uppercase; color:var(--muted); margin-right:8px; }
.lead-small { margin:10px 0 14px; }

.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.btn { display:inline-block; padding:8px 12px; border-radius:10px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); cursor:pointer; background:#fff; }
.btn:hover { text-decoration:underline; text-underline-offset:3px; }
.btn-primary { background:#fff; }
.btn-outline { background:#fff; }

.program-details { margin-top:12px; }
.program-details > summary { cursor:pointer; list-style:none; margin-bottom:10px; display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:8px; font-family:var(--ff-mono); font-size:12px; text-transform:uppercase; }
.program-details[open] > summary { background:#fafafa; }
.program-schedule { display:grid; gap:12px; margin-top:6px; }
.program-block { display:grid; grid-template-columns:80px 1fr; gap:14px; }
.program-block time { font-family:var(--ff-mono); font-size:12px; color:var(--muted); padding-top:2px; }


/* ===============================
   6) KUNSTENAARSGRID
================================ */
.modules.artists-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr; /* mobiel: 1 kolom */
}

@media (min-width: 900px) {
  .modules.artists-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  .modules.artists-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.module {
  display: grid;
  gap: 12px;
}

.module img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  transition: transform .28s ease, box-shadow .28s ease;
}

.module:hover img {
  transform: scale(1.02);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.caption {
  color: var(--fg);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: .01em;
  margin-top: 10px;
}

.caption strong {
  display:block;
  font-family: var(--ff-serif);
  font-size: 18px;
  margin-bottom: 4px;
}

.mono-link {
  display: inline-block;  /* zorgt dat hij op eigen regel staat */
  margin-top: 10px;
  font-family: var(--ff-mono);
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ===============================
   7) LAYOUT HELPERS
================================ */
.grid { display:grid; gap:40px }
.two-col { grid-template-columns:1fr }
@media (min-width:900px){ .two-col { grid-template-columns:1fr 1fr } }

.tile img { border:1px solid var(--line) }


/* ===============================
   8) FOOTER
================================ */
footer { border-top:1px solid var(--line) }
.footer-inner {
  max-width:var(--max);
  margin:0 auto;
  padding:22px 20px;
  display:flex;
  justify-content:space-between;
  color:#777;
  font-size:12px;
}