:root{
  --bg: #e3e3dd;
  --ink: #111;
  --line: #444;
  --border: 2px solid var(--line);
  --radius: 14px;
  --container: 1060px;
  --gap: 42px;
}

*{
  box-sizing: border-box;
}

body{
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

/* PAGE */
.page{
  min-height: 100vh;
  border: var(--border);
}

/* HEADER */
.top{
  border-bottom: var(--border);
}

.top__title{
  margin: 0;
  padding: 20px;
  font-size: 48px;
  font-weight: 800;
}

.nav{
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto auto;
}

.tab,
.icon-btn{
  border: var(--border);
  border-left: none;
  padding: 14px 18px;
  background: rgba(255,255,255,.25);
  text-decoration: none;
  color: inherit;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-text{
  padding: 14px 18px;
  font-style: italic;
  display: flex;
  align-items: center;
  border-top: var(--border);
  border-bottom: var(--border);
  border-left: var(--border);
    border-right: var(--border);
}

.nav > *:first-child{
  border-left: var(--border);
}

.nav .tab--contact{
  border-left: var(--border);
}

.tab:hover,
.icon-btn:hover{
  background: rgba(255,255,255,.4);
  cursor: pointer;
}

.spacer{
  border-top: var(--border);
  border-bottom: var(--border);
}

/* MAIN */
.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 28px;
}

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

/* TILE */
.tile{
  display: grid;
  grid-template-rows: auto 44px; /* vaste labelhoogte */
  gap: 14px;
}

/* AFBEELDINGEN — ALLEMAAL EVEN GROOT */
.shot{
  aspect-ratio: 4 / 3;          /* vaste verhouding voor ALLE afbeeldingen */
  background: #bdbdb7;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.25);
}

.shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* netjes croppen */
}

/* LABELS — ALLEMAAL EVEN HOOG */
.label{
  border: var(--border);
  background: rgba(255,255,255,.25);
  text-align: center;
  font-style: italic;

  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FOOTER */
.footer{
  border-top: var(--border);
  padding: 16px;
}

.footer-grid{
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;

  justify-items: center;   /* horizontaal in het midden */
  text-align: center;      /* tekst ook in het midden */
}


/* RESPONSIVE */
@media (max-width: 880px){
  .tab--cv{
    display: none;
  }
  .nav{
    grid-template-columns: auto auto 1fr auto auto auto;
  }
}

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

/* ICON POPUPS */
.icon-wrapper{
  position: relative;
}

.icon-wrapper summary{
  list-style: none;
}

.icon-wrapper summary::-webkit-details-marker{
  display: none;
}

.popup{
  position: absolute;
  top: 110%;
  right: 0;
  background: var(--bg);
  border: var(--border);
  padding: 10px 14px;
  font-style: italic;
  white-space: nowrap;
  display: none;
  z-index: 10;
}

.icon-wrapper[open] .popup{
  display: block;
}

/* pijltje */
.popup::before{
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: var(--bg);
  border-left: var(--border);
  border-top: var(--border);
  transform: rotate(45deg);
}

.home-link{
  color: inherit;        /* zelfde kleur als tekst */
  text-decoration: none; /* geen streepje */
}

.home-link:hover{
  text-decoration: underline; /* kleine hint dat het klikbaar is */
}

.tab.active{
  background: rgba(0,0,0,0.08);  /* iets donkerder */
}

/* ===== SUBTIELE ANIMATIE VOOR ALLE KNOPPEN ===== */

.tab,
.icon-btn,
.cv-download{
  transition: all 0.2s ease;
}

.tab:hover,
.icon-btn:hover,
.cv-download:hover{
  background: rgba(255,255,255,0.4);
  transform: translateY(-2px);
  cursor: pointer;
}


/* hover = klein beetje bewegen */
.tab:hover,
.icon-btn:hover,
.cv-download:hover{
  background: rgba(0,0,0,.10);
  cursor: pointer;
}

/* klik-effect */
.tab:active,
.icon-btn:active,
.icon-wrapper summary:active{
  transform: translateY(0);
}

/* ===== ACTIEVE PAGINA ===== */

.tab.active{
  background: rgba(0,0,0,0.10);
}

/* ===== ACTIEVE ICONS (mail / telefoon open) ===== */

.icon-wrapper[open] summary{
  background: rgba(0,0,0,0.10);
}

.contact-text:hover{
  background: none;
  cursor: default;
}

/* Contact is puur tekst: nooit hover, nooit klik */
.contact-text{
  pointer-events: none;
}


/* ===== OVER MIJ ===== */

.about{
  margin-top: 60px;
  text-align: center;
}

.about-top{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}

.about-name{
  font-size: 64px;
  font-weight: 800;
}

.about-name.left{
  text-align: right;
}

.about-name.right{
  text-align: left;
}

.about-photo{
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #000;
}

.about-text{
  max-width: 800px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  font-style: italic;
}


/* ===== PROJECTEN ===== */

.project-filters{
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
}

.filter-btn{
  padding: 12px 24px;
  border: var(--border);
  text-decoration: none;
  font-style: italic;
  color: inherit;
}

.filter-btn.active{
  background: rgba(0,0,0,0.1);
}

/* ===== PROJECTEN PAGINA (ALLEEN 2 KNOPPEN) ===== */

.project-buttons{
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 80px;
}

.project-btn{
  border: var(--border);
  padding: 80px 160px;   /* ← knoppen VEEL groter */
  font-style: italic;
  font-size: 44px;      /* ← tekst groter */
  text-decoration: none;
  color: inherit;
  background: transparent;
}


.project-btn:hover{
  background: rgba(0,0,0,0.08);
}



/* ===== PROJECTPAGINA INHOUD ===== */

.projects-page{
  max-width: 900px;
  margin: 60px auto;
  text-align: center;
}

.projects-page h2{
  font-size: 40px;
  margin-bottom: 40px;
}

/* lijst met projecten */
.projects-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* één project */
.project-item{
  border: var(--border);
  padding: 30px;
  background: rgba(255,255,255,0.2);
}

.project-item h3{
  margin-top: 0;
  font-size: 22px;
}

.project-item p{
  font-style: italic;
  line-height: 1.6;
}

/* terug-link */
.back-link{
  display: inline-block;
  margin-top: 40px;
  text-decoration: none;
  font-style: italic;
  border-bottom: 1px solid currentColor;
}


/* ===== PROJECT FOTO GRID ===== */

.projects-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

/* project wrapper */
.project{
  position: relative;
}

/* klikbare foto */
.project summary{
  list-style: none;
  cursor: pointer;
}

.project summary::-webkit-details-marker{
  display: none;
}

.project-thumb{
  border: var(--border);
  overflow: hidden;
}

.project-thumb img{
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* popup */
.project-popup{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  translate: 0 100%;
  background: var(--bg);
  border: var(--border);
  padding: 12px 16px;
  font-style: italic;
  white-space: nowrap;
  z-index: 10;
}

/* ===== CV DOWNLOAD KNOP (GROOT & GEcentreerd) ===== */

.cv-download{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 80px 160px;
  font-size: 44px;
  font-style: italic;

  border: var(--border);
  text-decoration: none;
  color: inherit;
  background: transparent;
}
.cv-center{
  display: flex;
  justify-content: center;
  margin-top: 120px;
}