/* ===== BirkBosma portfolio ===== */
:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#6b6b6b;
  --line:#111111;
  --gap:42px;
  --maxw:1280px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- Header / logo ---- */
.site-header{
  text-align:center;
  padding:48px 24px 8px;
}

.logo img{
  width:230px;
  max-width:60vw;
  height:auto;
  display:inline-block;
}

/* ---- Navigation ---- */
.nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:40px;
  padding:28px 24px 8px;
  font-size:20px;
}

.nav a{
  color:var(--ink);
  text-decoration:none;
  padding-bottom:4px;
  transition:opacity .2s ease;
}

.nav a:hover{opacity:.55;}

.nav a.active{
  text-decoration:underline;
  text-underline-offset:6px;
}

/* ---- Portfolio grid ---- */
.grid{
  max-width:var(--maxw);
  margin:46px auto 90px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--gap);
}

.tile{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:#000;
}

.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease, filter .4s ease;
}

.tile:hover img{
  transform:scale(1.04);
  filter:brightness(.78);
}

.tile .play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .3s ease;
}

.tile:hover .play{opacity:1;}

.tile .play span{
  width:74px;height:74px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
}

.tile .play span::after{
  content:"";
  width:0;height:0;
  border-left:22px solid var(--ink);
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  margin-left:6px;
}

.tile .caption{
  position:absolute;
  left:18px;bottom:14px;
  color:#fff;
  font-size:15px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  pointer-events:none;
}

/* ---- Rotating badge (top-right accent) ---- */
.badge{
  position:fixed;
  right:-46px;
  top:46%;
  width:188px;height:188px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  z-index:5;
  pointer-events:auto;
  cursor:pointer;
}
.badge svg{width:100%;height:100%;animation:spin 16s linear infinite;}
.badge .center{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;letter-spacing:1px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Video page ---- */
.back{
  display:inline-block;
  margin:0 0 22px;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  opacity:.75;
}
.back:hover{opacity:1;}

.video-wrap{
  max-width:1000px;
  margin:30px auto 30px;
  padding:0 24px;
}

.player{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--ink);
}
.player iframe{
  position:absolute;inset:0;
  width:100%;height:100%;border:0;
}

.video-title{
  font-size:26px;
  font-weight:600;
  margin:26px 0 6px;
}
.video-meta{
  color:var(--muted);
  font-size:16px;
  margin:0 0 40px;
}

/* ---- Simple text page (About) ---- */
.page{
  max-width:760px;
  margin:46px auto 90px;
  padding:0 24px;
  font-size:18px;
  line-height:1.7;
  color:#222;
}
.page h1{font-size:30px;font-weight:600;margin-bottom:18px;}

/* ---- Footer ---- */
.site-footer{
  text-align:center;
  padding:28px 24px 50px;
  color:var(--muted);
  font-size:14px;
}

/* ---- Responsive ---- */
@media (max-width:760px){
  .grid{grid-template-columns:1fr;gap:26px;margin-top:34px;}
  .nav{gap:26px;font-size:17px;}
  .badge{width:128px;height:128px;right:-34px;top:auto;bottom:24px;}
  .site-header{padding-top:34px;}
}

@media (prefers-reduced-motion:reduce){
  .badge svg{animation:none;}
  .tile img{transition:none;}
}

/* =====================================================================
   FOTOGRAFIE  (categorie-overzicht, galerij, lightbox)
   ===================================================================== */

/* Display font for big FOTOGRAFIE / VIDEO wordmarks */
.display{
  font-family:'Anton','Poppins',sans-serif;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* ---- Fotografie header row: VIDEO pill (left) + FOTOGRAFIE title ---- */
.foto-top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  max-width:var(--maxw);
  margin:10px auto 6px;
  padding:24px 24px 0;
}
.pill{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:150px;height:110px;
  background:var(--ink);
  color:#fff;
  border-radius:50% / 60%;
  font-size:40px;
  text-decoration:none;
  transition:transform .25s ease;
}
.pill:hover{transform:scale(1.05);}
.foto-top h1{
  margin:0;
  font-size:clamp(44px,8vw,104px);
  line-height:.9;
  text-align:center;
}
.foto-top .spacer{}

/* ---- Category cards ---- */
.cat-row{
  max-width:var(--maxw);
  margin:40px auto 90px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
.cat-card{
  position:relative;
  display:block;
  aspect-ratio:3/5;
  overflow:hidden;
  background:#000;
  text-decoration:none;
}
.cat-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease, filter .4s ease;
}
.cat-card:hover img{transform:scale(1.05);filter:brightness(.65);}
.cat-card .label{
  position:absolute;
  left:18px;top:16px;right:18px;
  color:#fff;
  font-size:22px;
  font-weight:500;
  line-height:1.15;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.cat-card .count{
  position:absolute;
  left:18px;bottom:14px;
  color:#fff;
  font-size:14px;
  opacity:.85;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* ---- Category page intro ---- */
.cat-head{
  max-width:var(--maxw);
  margin:30px auto 0;
  padding:0 24px;
}
.cat-head h1{
  font-size:clamp(34px,6vw,66px);
  line-height:.95;
  margin:6px 0 4px;
}

/* ---- Gallery (masonry via columns) ---- */
.gallery{
  max-width:var(--maxw);
  margin:30px auto 90px;
  padding:0 24px;
  column-count:3;
  column-gap:22px;
}
.gallery figure{
  margin:0 0 22px;
  break-inside:avoid;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  background:#000;
}
.gallery img{
  width:100%;
  display:block;
  transition:transform .5s ease, filter .4s ease;
}
.gallery figure:hover img{transform:scale(1.04);filter:brightness(.8);}
.gallery figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:14px 14px 12px;
  color:#fff;
  font-size:15px;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  opacity:0;
  transition:opacity .3s ease;
}
.gallery figure:hover figcaption{opacity:1;}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed;inset:0;
  background:rgba(10,10,10,.94);
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:100;
  padding:30px;
}
.lightbox.open{display:flex;}
.lb-stage{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  max-width:96vw;
}
.lb-pane{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
}
.lb-pane img{
  max-width:88vw;
  max-height:72vh;
  object-fit:contain;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
/* When comparing, each image takes half the stage */
.lb-stage.compare .lb-pane img{ max-width:46vw; max-height:68vh; }
.lb-pane figcaption{
  color:#cfcfcf;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.lb-info{
  color:#fff;
  text-align:center;
  margin-top:20px;
  max-width:700px;
}
.lb-info h3{margin:0 0 6px;font-size:22px;font-weight:600;}
.lb-info p{margin:0;color:#cfcfcf;font-size:16px;line-height:1.6;}
.lb-close,.lb-prev,.lb-next{
  position:absolute;
  background:none;border:0;color:#fff;
  cursor:pointer;
  font-family:'Poppins',sans-serif;
  user-select:none;
}
.lb-close{top:22px;right:28px;font-size:34px;line-height:1;}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:50px;padding:10px 18px;opacity:.8;}
.lb-prev{left:14px;}
.lb-next{right:14px;}
.lb-prev:hover,.lb-next:hover,.lb-close:hover{opacity:1;}

/* ---- Responsive ---- */
@media (max-width:900px){
  .cat-row{grid-template-columns:repeat(2,1fr);}
  .gallery{column-count:2;}
}
@media (max-width:560px){
  .cat-row{grid-template-columns:1fr;}
  .gallery{column-count:1;}
  .foto-top{grid-template-columns:auto 1fr;}
  .pill{width:104px;height:78px;font-size:28px;}
  .lb-prev,.lb-next{font-size:38px;}
}

/* =====================================================================
   ABOUT-PAGINA
   ===================================================================== */
.about{ max-width:var(--maxw); margin:30px auto 90px; padding:0 24px; }

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  align-items:start;
}
.about-logo{ width:210px; max-width:60%; height:auto; margin-bottom:26px; }
.about-text p{
  font-size:16px;
  line-height:1.65;
  color:#1a1a1a;
  margin:0 0 18px;
  max-width:46ch;
}

/* Right media: big photo + overlapping portrait */
.about-media{ position:relative; }
.about-big{ margin:0; }
.about-big .big-img, .about-big .ph{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
.about-portrait{
  margin:0;
  position:absolute;
  right:-18px;
  bottom:-46px;
  width:46%;
}
.about-portrait .portrait-img, .about-portrait .ph{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  filter:grayscale(1);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}

/* Placeholder boxes (shown until real photos are added) */
.ph{
  display:flex; align-items:center; justify-content:center;
  background:#ededed;
  color:#9a9a9a;
  font-size:14px;
  letter-spacing:.5px;
  border:1px dashed #c7c7c7;
}

/* Scrapbook collage — photos overlap each other but stay visible */
.about-collage{
  margin-top:80px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  padding:30px 0;
}
.collage-item{
  margin:0 -26px;                 /* negative margin => overlap */
  width:clamp(150px, 21%, 240px);
  transform:rotate(var(--rot,0deg)) translateY(var(--ty,0px));
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
}
.collage-item:hover{
  transform:rotate(0deg) translateY(0) scale(1.08);
  z-index:20;                      /* hovered photo comes fully to front */
}
.collage-img, .collage-item .ph{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  border:5px solid #fff;          /* white edge so overlaps read as separate photos */
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}

@media (max-width:820px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-portrait{ position:static; width:60%; margin-top:16px; }
  .collage-item{ width:42%; margin:0 -12px; }
}

/* =====================================================================
   BEHEER / TEKST-EDITOR
   ===================================================================== */
.editor{ max-width:900px; margin:30px auto 90px; padding:0 24px; }
.editor h1{ font-size:30px; font-weight:600; margin:0 0 6px; }
.editor .lead{ color:var(--muted); margin:0 0 26px; line-height:1.6; }
.editor .cat-block{ margin-bottom:34px; }
.editor .cat-block > h2{ font-size:20px; font-weight:600; margin:0 0 14px; }
.edit-row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:16px;
  align-items:start;
  padding:14px 0;
  border-top:1px solid #eee;
}
.edit-row img{ width:88px; height:88px; object-fit:cover; background:#000; }
.edit-fields{ display:flex; flex-direction:column; gap:8px; }
.edit-fields label{ font-size:12px; color:var(--muted); margin-bottom:-4px; }
.edit-fields input, .edit-fields textarea{
  font-family:'Poppins',sans-serif;
  font-size:15px;
  padding:9px 11px;
  border:1px solid #d8d8d8;
  border-radius:7px;
  width:100%;
  resize:vertical;
}
.editor-bar{
  position:sticky; bottom:0;
  background:#fff;
  padding:16px 0;
  border-top:1px solid #eee;
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.btn{
  background:var(--ink); color:#fff; border:0;
  padding:12px 20px; border-radius:8px; font-size:15px;
  font-family:'Poppins',sans-serif; cursor:pointer;
}
.btn:hover{ opacity:.85; }
.editor-bar .hint{ color:var(--muted); font-size:13px; max-width:520px; line-height:1.5; }

/* --- Before/after badge on gallery thumbnails + stacked compare on mobile --- */
.gallery figure.has-compare .compare-badge{
  position:absolute;
  top:10px; left:10px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:20px;
  pointer-events:none;
  z-index:2;
}
@media (max-width:700px){
  .lb-stage.compare{ flex-direction:column; gap:10px; }
  .lb-stage.compare .lb-pane img{ max-width:90vw; max-height:38vh; }
}

/* --- Row gallery (e.g. Examen: links->rechts) + category description --- */
.gallery.row{
  column-count:initial;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  align-items:start;
}
.gallery.row figure{ margin:0; }

.cat-beschrijving{
  max-width:var(--maxw);
  margin:0 auto 90px;
  padding:0 24px;
}
.cat-beschrijving h2{
  font-size:24px;
  font-weight:600;
  margin:0 0 16px;
}
.cat-beschrijving ul{
  margin:0;
  padding-left:22px;
  max-width:780px;
}
.cat-beschrijving li{
  font-size:17px;
  line-height:1.6;
  color:#2a2a2a;
  margin-bottom:10px;
}

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

/* --- Camera settings line in lightbox --- */
.lb-exif{
  margin-top:14px;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  font-weight:500;
}

/* --- Editor: camera settings inputs --- */
.exif-row{ display:flex; gap:8px; flex-wrap:wrap; }
.exif-row input{ flex:1; min-width:120px; }

/* --- Examen intro paragraph --- */
.cat-beschrijving .besch-intro{
  font-size:17px;
  line-height:1.7;
  color:#2a2a2a;
  max-width:780px;
  margin:0 0 20px;
}

/* --- Section headings + paragraphs in category description --- */
.cat-beschrijving h3{
  font-size:18px;
  font-weight:600;
  margin:22px 0 6px;
}
.cat-beschrijving p{
  font-size:16px;
  line-height:1.7;
  color:#2a2a2a;
  max-width:780px;
  margin:0 0 6px;
}

/* --- Overige opnames carousel --- */
.overige{ max-width:var(--maxw); margin:0 auto 80px; padding:0 24px; }
.overige h2{ font-size:24px; font-weight:600; margin:0 0 4px; }
.overige-hint{ font-size:14px; color:#777; margin:0 0 16px; }
.overige-hint span{ color:#111; font-weight:600; }
.carousel{ position:relative; display:flex; align-items:center; gap:10px; }
.car-track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 14px; flex:1;
  scrollbar-color:#bbb #eee;
}
.car-track::-webkit-scrollbar{ height:8px; }
.car-track::-webkit-scrollbar-track{ background:#eee; border-radius:4px; }
.car-track::-webkit-scrollbar-thumb{ background:#bbb; border-radius:4px; }
.car-item{ flex:0 0 auto; width:200px; scroll-snap-align:start; cursor:pointer; }
.car-item img{
  width:200px; height:280px; object-fit:cover; border-radius:8px; display:block;
  transition:transform .2s ease;
}
.car-item:hover img{ transform:scale(1.03); }
.car-btn{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1px solid #ddd;
  background:#fff; font-size:22px; line-height:1; cursor:pointer; color:#222;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.car-btn:hover{ background:#f3f3f3; }
@media (max-width:760px){
  .car-btn{ display:none; }
  .car-item, .car-item img{ width:150px; }
  .car-item img{ height:210px; }
}