/* =========================================
   Kunst met een Verhaal — Gallery CSS (v1)
   - Purple brand + frosted gallery wall
   - Future-proof spacing tokens
   ========================================= */

/* ==============
   Design Tokens
   ============== */
:root{
  /* Brand / purple system */
  --p-900: rgb(31, 18, 44);
  --p-800: rgb(45, 27, 63);
  --p-700: rgb(63, 44, 86);
  --p-600: rgb(96, 72, 125);
  --p-500: rgb(132, 105, 166);

  /* Gallery wall */
  --wall-0: var(--p-900);
  --wall-1: var(--p-800);
  --wall-2: var(--p-700);

  /* Text */
  --ink: rgb(243, 240, 248);
  --muted: rgba(243,240,248,.72);
  --soft: rgba(243,240,248,.10);

  /* Accents */
  --accent: rgb(142, 108, 188);
  --accent-2: rgb(92, 64, 135);
  --gold: rgb(199, 164, 98);

  /* Passe-partout */
  --mat: rgb(244, 240, 247);
  --mat-2: rgb(232, 226, 239);

  /* Frame */
  --frame: rgb(34, 28, 40);

  /* Radius + shadows */
  --radius: 18px;
  --shadow-lg: 0 30px 90px rgba(0,0,0,.62);
  --shadow-md: 0 18px 60px rgba(0,0,0,.52);

  /* Layout */
  --container: 1200px;

  /* =========================
     Future-proof spacing scale
     ========================= */
  --space-1: clamp(6px, 0.6vw, 10px);
  --space-2: clamp(10px, 0.9vw, 14px);
  --space-3: clamp(14px, 1.2vw, 18px);
  --space-4: clamp(18px, 1.6vw, 24px);
  --space-5: clamp(24px, 2.2vw, 32px);
  --space-6: clamp(32px, 3.0vw, 44px);

  --gutter: clamp(16px, 3vw, 40px);
  --measure: 70ch;

  --pad-panel: var(--space-5);
  --pad-panel-sm: var(--space-4);
  --pad-hero: var(--space-3);

  /* Frost intensity */
  --frost-blur: 14px;
}

/* ==========
   Base Reset
   ========== */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  color: var(--ink);
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.55;
  background: none;
  position: relative;
  overflow-x: hidden;
}
img{ max-width: 100%; height: auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible{
  outline: 2px solid rgba(142,108,188,.75);
  outline-offset: 3px;
}

/* =======================================
   Background: image + frosted glass overlay
   ======================================= */

/* Background image layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;

  background-image: url("../images/gallerywall.png"); /* jouw afbeelding 1 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: none; /* voorkomt extra zoom */
  filter: saturate(0.98) contrast(1.08) brightness(0.92);
}


/* Frosted overlay */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;

  /* 1) Spotlights (boven) */
  /* 2) Corridor/walls (donkere zijkanten) */
  /* 3) Floor glow / looplijn (onder) */
  /* 4) Frosted glass (heel subtiel, niet teveel detailverlies) */

  background:
    /* Spotlights: 4 lampen bovenaan, zacht en filmisch */
    radial-gradient(260px 180px at 18% 6%, rgba(255,240,220,.22), transparent 70%),
    radial-gradient(280px 190px at 43% 5%, rgba(255,240,220,.26), transparent 72%),
    radial-gradient(280px 190px at 66% 5%, rgba(255,240,220,.22), transparent 72%),
    radial-gradient(260px 180px at 88% 6%, rgba(255,240,220,.20), transparent 70%),

    /* Lichtbundels / haze naar beneden (zoals museumstof in licht) */
    linear-gradient(180deg,
      rgba(255,235,210,.10) 0%,
      rgba(255,235,210,.06) 22%,
      transparent 52%),

    /* Corridor: donkere zijkanten (muren) */
    linear-gradient(90deg,
      rgba(8,6,12,.72) 0%,
      rgba(8,6,12,.35) 18%,
      transparent 50%,
      rgba(8,6,12,.35) 82%,
      rgba(8,6,12,.72) 100%),

    /* Vignette: focus op het midden */
    radial-gradient(1200px 900px at 50% 36%,
      rgba(255,255,255,.10),
      rgba(0,0,0,.46) 72%),

    /* Floor glow (onder): geeft die “loopruimte” */
    radial-gradient(1200px 520px at 50% 100%,
      rgba(255,220,180,.14),
      rgba(0,0,0,.40) 72%),

    /* Brand tint over alles */
    linear-gradient(180deg,
      rgba(31,18,44,.36),
      rgba(14,16,18,.62)),

    /* Subtiele grain */
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);

  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}


/* ==========
   Containers
   ========== */
.container{
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

/* ==========
   Header/Nav
   ========== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(31,18,44,.78), rgba(31,18,44,.38));
  border-bottom: 1px solid rgba(243,240,248,.08);
}

.nav{
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 0;
  position: relative;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 240px;
}

.brand-logo{
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.brand-name{
  font-size: 14px;
  letter-spacing: .35px;
  color: rgba(243,240,248,.88);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display:flex;
  align-items:center;
  gap: 18px;
}

.nav-links a{
  position: relative;
  padding: 10px 6px;
  color: rgba(243,240,248,.82);
  letter-spacing: .2px;
  font-size: 14px;
  transition: color 220ms ease;
}

.nav-links a:hover{ color: rgba(243,240,248,1); }

.nav-links a.active::after,
.nav-links a:hover::after{
  content:"";
  position:absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(142,108,188,.18),
    rgba(142,108,188,.95),
    rgba(199,164,98,.85)
  );
}

/* Mobile menu button */
.nav-toggle{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(243,240,248,.12);
  background: rgba(142,108,188,.08);
  cursor:pointer;
  padding: 10px;
}

.nav-toggle span{
  display:block;
  height: 2px;
  background: rgba(243,240,248,.92);
  border-radius: 2px;
  margin: 6px 0;
}

/* Responsive nav */
@media (max-width: 900px){
  .brand-name{ display:none; }
  .nav-toggle{ display:block; }

  .nav-links{
    position: absolute;
    top: 64px;
    right: var(--gutter);
    left: var(--gutter);
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: rgba(20, 12, 28, .92);
    border: 1px solid rgba(243,240,248,.12);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
  }

  .nav-links.open{ display:flex; }

  .nav-links li a{
    padding: 12px 12px;
    border-radius: 12px;
  }
  .nav-links li a:hover{
    background: rgba(243,240,248,.06);
  }

  .nav-links a.active::after,
  .nav-links a:hover::after{ display:none; }
}

/* =======
   Hero
   ======= */
.hero{
  position: relative;
  padding: var(--space-6) 0 var(--space-5);
  padding-top: calc(var(--space-6) + 10px);
}

.hero-inner{
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-6);
  align-items: center;
  border-radius: calc(var(--radius) + 6px);
  background: rgba(20, 12, 28, .26);
  border: 1px solid rgba(243,240,248,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 26px 90px rgba(0,0,0,.45);
  padding: var(--space-5);
}

.hero-copy{
  padding: var(--pad-hero);
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(243,240,248,.75);
  margin: 0 0 10px;
}
.kicker::before{
  content:"";
  width: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142,108,188,.9));
}

.hero h1{
  margin: 0 0 var(--space-2);
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.hero .accent{
  background: linear-gradient(90deg, rgba(142,108,188,.98), rgba(199,164,98,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead{
  margin: 0 0 var(--space-3);
  color: rgba(243,240,248,.82);
  font-size: 16px;
  max-width: var(--measure);
}

.hero-actions{
  display:flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}

.hero-note{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(243,240,248,.62);
  font-size: 13px;
}

.hero-note .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(142,108,188,.98), rgba(199,164,98,.92));
  box-shadow: 0 0 0 3px rgba(142,108,188,.14);
}

/* Portrait card */
.portrait-card{
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(243,240,248,.12);
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(255,255,255,.08), transparent 60%),
    rgba(243,240,248,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

.portrait-card img{
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.02);
}

.portrait-card figcaption{
  padding: var(--space-3);
  border-top: 1px solid rgba(243,240,248,.10);
}

.portrait-name{
  display:block;
  font-size: 14px;
  letter-spacing: .2px;
}

.portrait-sub{
  display:block;
  margin-top: 3px;
  font-size: 12.5px;
  color: rgba(243,240,248,.68);
}

/* Optional watermark mark */
.hero-mark{
  position:absolute;
  right: var(--gutter);
  bottom: -10px;
  width: min(280px, 40vw);
  opacity: .16;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  pointer-events:none;
  user-select:none;
}

@media (max-width: 950px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-mark{ display:none; }
}

/* =========
   Buttons
   ========= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 14px;
  letter-spacing: .2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.btn-primary{
  background: linear-gradient(90deg, rgba(142,108,188,.98), rgba(199,164,98,.92));
  color: rgb(12, 10, 14);
  box-shadow: 0 18px 40px rgba(0,0,0,.38);
}
.btn-primary:hover{ transform: translateY(-1px); }

.btn-ghost{
  background: rgba(142,108,188,.10);
  border-color: rgba(243,240,248,.16);
  color: rgba(243,240,248,.92);
}
.btn-ghost:hover{
  background: rgba(142,108,188,.14);
  transform: translateY(-1px);
}

.text-link{
  color: rgba(243,240,248,.78);
  border-bottom: 1px solid rgba(243,240,248,.22);
  padding-bottom: 2px;
}
.text-link:hover{
  color: rgba(243,240,248,.95);
  border-bottom-color: rgba(142,108,188,.70);
}

.sep{ color: rgba(243,240,248,.35); }

/* ==========
   Sections
   ========== */
.section{
  padding: var(--space-6) 0;
}

.section-head{
  margin-bottom: var(--space-3);
}

.section-head h2{
  margin: 0 0 var(--space-1);
  font-size: 22px;
  letter-spacing: -0.01em;
}

.section-head p{
  margin: 0;
  color: rgba(243,240,248,.68);
}

/* ==========
   Panels
   ========== */
.panel{
  border-radius: var(--radius);
  border: 1px solid rgba(243,240,248,.12);
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    rgba(243,240,248,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: var(--pad-panel);
  box-shadow: 0 14px 50px rgba(0,0,0,.38);
}

.panel h2, .panel h3{
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

.panel p{
  margin: var(--space-2) 0 0;
  color: rgba(243,240,248,.82);
  max-width: var(--measure);
}

.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 950px){
  .split{ grid-template-columns: 1fr; }
}

.panel-spotlight{
  position: sticky;
  top: 92px;
}

@media (max-width: 950px){
  .panel-spotlight{ position: static; }
}

.spotlight-head h3{
  margin: 0 0 var(--space-1);
  font-size: 18px;
}

.spotlight-head p{
  margin: 0 0 var(--space-3);
  font-size: 13.5px;
  color: rgba(243,240,248,.70);
}

.quote{
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border-radius: 14px;
  background: rgba(243,240,248,.04);
  border: 1px solid rgba(243,240,248,.10);
}

.quote p{
  margin: 0;
  color: rgba(243,240,248,.88);
  font-size: 15px;
}

.quote footer{
  margin-top: var(--space-1);
  color: rgba(243,240,248,.62);
  font-size: 12.5px;
}

/* =========================
   Gallery grid + art cards
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

.art-card{
  grid-column: span 4;
  display:block;
  border-radius: var(--radius);
  transition: transform 420ms ease, filter 420ms ease;
}

@media (max-width: 1050px){
  .art-card{ grid-column: span 6; }
}
@media (max-width: 650px){
  .art-card{ grid-column: span 12; }
}

/* Frame */
.frame{
  position: relative;
  border-radius: var(--radius);
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(0,0,0,.35)),
    linear-gradient(180deg, var(--frame), rgb(22,18,26));
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 2px 0 rgba(255,255,255,.05) inset;
  transform: translateZ(0);
  transition: transform 420ms ease, box-shadow 420ms ease;
}

/* Passe-partout */
.mat{
  position: relative;
  border-radius: 12px;

  /* 30x30 artwork in 50x50 passe-partout → 20% rand */
  padding: 20%;

  background: linear-gradient(180deg, var(--mat), var(--mat-2));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18) inset,
    0 2px 0 rgba(255,255,255,.65) inset;
  overflow: hidden;
}


/* Mat paper grain (subtle) */
.mat::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .14;
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* Inner shadow (art sits slightly recessed) */
.mat::before{
  content:"";
  position:absolute;
  inset: 20%;
  border-radius: 8px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.18) inset,
    0 1px 0 rgba(255,255,255,.32) inset;
  pointer-events:none;
}


/* Artwork image */
.art{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: rgba(0,0,0,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22);
}

/* Hover: premium lift */
.art-card:hover .frame{
  transform: scale(1.015);
  box-shadow:
    0 30px 80px rgba(0,0,0,.62),
    0 2px 0 rgba(255,255,255,.06) inset;
}

.meta{
  padding: var(--space-3) var(--space-2) 0;
}

.meta .title{
  font-size: 14px;
  color: rgba(243,240,248,.92);
  letter-spacing: .2px;
  line-height: 1.35;
}

.meta .sub{
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(243,240,248,.66);
}

/* CTA row */
.cta-row{
  margin-top: var(--space-4);
  display:flex;
  justify-content: center;
}

/* =======
   Footer
   ======= */
.footer{
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(243,240,248,.08);
  background: rgba(14, 10, 20, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: var(--space-3);
}

.footer a{
  color: rgba(243,240,248,.74);
}
.footer a:hover{
  color: rgba(243,240,248,.94);
}

@media (max-width: 700px){
  .footer-inner{
    flex-direction: column;
    align-items:flex-start;
  }
}

/* ===========================
   Mobile spacing adjustments
   =========================== */
@media (max-width: 650px){
  :root{
    --pad-panel: var(--pad-panel-sm);
    --pad-hero: var(--space-2);
  }

  .panel{ padding: var(--pad-panel); }
}

/* ===========================
   Reduced motion accessibility
   =========================== */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}
/* Spotlight: image-only (no frame/mat) */
.spotlight-image{
  display:block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(243,240,248,.12);
  background: rgba(243,240,248,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  transition: transform 420ms ease, box-shadow 420ms ease;
}

.spotlight-image img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

.spotlight-image:hover{
  transform: scale(1.01);
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
}

.spotlight-meta{
  padding: var(--space-3) var(--space-3);
  border-top: 1px solid rgba(243,240,248,.10);
  background: rgba(20, 12, 28, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.spotlight-meta .title{
  font-size: 14px;
  color: rgba(243,240,248,.92);
  letter-spacing: .2px;
}

.spotlight-meta .sub{
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(243,240,248,.66);
}
/* =========================================
   Spotlight: Ornate / light frame override
   ========================================= */

/* Alleen voor spotlight */
.panel-spotlight .frame{
  background:
    linear-gradient(180deg, #e6e1d6, #cfc8bb);
  border-radius: 16px;
  padding: 18px;

  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.55) inset;

  /* geen donker hout/metaal */
}

/* Subtiele ornament-rand simulatie */
.panel-spotlight .frame::before{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: 12px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(0,0,0,.08));
  box-shadow:
    0 0 0 1px rgba(180,170,150,.85);

  pointer-events:none;
}

/* Passe-partout blijft licht en klassiek */
.panel-spotlight .mat{
  background:
    linear-gradient(180deg, #fbfaf7, #efece5);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.15) inset,
    0 2px 0 rgba(255,255,255,.75) inset;
}

/* Iets meer lucht voor spotlight (museumgevoel) */
.panel-spotlight .mat{
  padding: 22%;
}

/* Hover subtieler dan gallery */
.panel-spotlight .art-card:hover .frame{
  transform: scale(1.01);
  box-shadow:
    0 26px 70px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.65) inset;
}
/* Art Gallery page extras */
.page-title{
  margin: 0 0 var(--space-2);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.gallery-hero{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--space-6);
  align-items: start;
}

.gallery-hero-mark img{
  width: 100%;
  height: auto;
  opacity: .95;
  filter: drop-shadow(0 22px 55px rgba(0,0,0,.35));
}

.small-muted{
  color: rgba(243,240,248,.68);
  font-size: 13px;
  margin: 0;
  max-width: var(--measure);
}

@media (max-width: 950px){
  .gallery-hero{ grid-template-columns: 1fr; }
}