/* --- LOKALE FONTS --- */
@font-face {
    font-family: 'Sometype Mono';
    src: url('../fonts/SometypeMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    /* 'optional' is de meest stabiele instelling om layout shifts en flitsen te voorkomen */
    font-display: optional;
}

/* --- BASIS INSTELLINGEN --- */
:root {
    --unit: calc(100vw / 290);
    --gap: calc(11 * var(--unit));
    
    /* Marges buitenkant website */
    --marge-buiten-boven: calc(11 * var(--unit)); 
    --marge-buiten-zij: calc(44 * var(--unit)); 
    
    --bg-color: #fafafa;
    --text-color: #6F6F6F; /* ---  FONT KLEUR --- */
    --menu-bg: #fbfbfb;
    --hover-color: #888;
    --trans-speed: 0.4s;

    /* Afstanden navigatie & lay-out */
    --marge-na-titel: calc(10 * var(--unit)); 
    --marge-home-exposities-desktop: 5em; 
    --marge-na-werk: calc(5 * var(--unit)); 
    --marge-na-about: calc(5 * var(--unit));
    
    --marge-foto: calc(8 * var(--unit));
    --marge-tussen-twee-beelden: var(--gap);
    
    /* Gekoppelde witmarge voor zowel Insights als Catalogus blokken */
    --marge-tussen-blokken: calc(18 * var(--unit));
    
    --marge-voor-tags: 1.5em; 

    /* Typografische witregels */
    --witregel-hoogte: 3em;
    --marge-blokken-desktop: 5em; 

    /* Afstanden CV */
    --witmarge-na-jaartal: 17px; 

    /* Foto overlay instellingen */
    --marge-overlay-zijkant: 30px; 
    --marge-overlay-onder: 25px;   
    
    --overlay-donker-transparantie: 0.3; 
    --overlay-licht-transparantie: 0.4;  

    /* --- MOBIELE FONT GROOTTE --- */
    --mobile-font-size: 15.5px;
}

/* --- DESKTOP BASIS --- */
body {
    margin: 0;
    padding: var(--marge-buiten-boven) var(--marge-buiten-zij);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Sometype Mono', monospace;
    font-size: 14px; /* --- DESKTOP FONT GROOTTE --- */
    line-height: 1.5;
    box-sizing: border-box;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

.mobile-header, .mobile-header-menu, .mobile-foto-tekst, .mobile-copyright { display: none; }

::selection { background-color: #e5e5e5; color: var(--text-color); }
::-moz-selection { background-color: #e5e5e5; color: var(--text-color); }

a { color: inherit; text-decoration: none; }
a, .menu-knop, .site-title, .gallery-nav span, .year-knop, .tag-knop, .menu-item, .contact-link {
    -webkit-tap-highlight-color: transparent;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--gap);
    width: 100%;
    align-items: start;
}

.page { display: none; }
.page.actief { display: contents; }

.menu-knop {
    grid-column: 9;
    grid-row: 1;
    text-align: right;
    cursor: pointer;
    transition: color 0.3s ease;
    position: sticky;
    top: var(--marge-buiten-boven);
    z-index: 50;
}

.menu-knop:hover { color: var(--hover-color); }

/* MODULAIRE OPBOUW (PROJECTPAGINA'S) */
.kolom-links { grid-column: 1 / span 5; grid-row: 1; display: flex; flex-direction: column; gap: var(--marge-foto); }
.kolom-rechts { grid-column: 6 / span 3; grid-row: 1; display: flex; flex-direction: column; gap: var(--marge-foto); }

.is-sticky { position: sticky; top: var(--marge-buiten-boven); align-self: start; }

.project-tekst { margin: 0; width: 100%; }

.foto-box { position: relative; display: block; overflow: hidden; background-color: transparent; }
.foto-box img { display: block; width: 100%; height: 100%; border: none; outline: none; object-fit: cover; }
.pasvorm-contain { background-color: transparent; }
.pasvorm-contain img { object-fit: contain; object-position: left top; }

/* PLACEHOLDER VOOR ONTBREKENDE BEELDEN */
.foto-placeholder {
    width: 100%;
    aspect-ratio: 7 / 9;
    background-color: #eeeeee;
}

.lay-out-enkel { width: 100%; }
.lay-out-enkel img { height: auto; }

.lay-out-dubbel { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--marge-tussen-twee-beelden); }
.lay-out-dubbel .foto-box { aspect-ratio: 4 / 5; }

/* GALLERY / CARROUSEL BASIS */
.gallery-nav { white-space: nowrap; position: relative; top: -5px; }
.gallery-nav span { cursor: pointer; transition: color 0.3s ease; user-select: none; padding: 15px; margin: -15px; display: inline-block; }
.gallery-nav span:hover { color: var(--hover-color); }

.gallery-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.gallery-img.actief { opacity: 1; pointer-events: auto; z-index: 2; }

/* CATALOGUS */
.kolom-catalogus-links { grid-column: 1 / span 4; }
.kolom-catalogus-rechts { grid-column: 5 / span 3; position: sticky; top: var(--marge-buiten-boven); align-self: start; }
.catalog-item { margin-bottom: var(--marge-tussen-blokken); transition: opacity var(--trans-speed); }
.catalog-item.verborgen { display: none; }
.catalog-images-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-bottom: calc(5 * var(--unit)); }
.img-vol { grid-column: 1 / -1; }
.img-smal { grid-column: span 1; aspect-ratio: 4 / 5; }
.catalog-tags { margin-top: var(--marge-voor-tags); }
.tag-knop { cursor: pointer; transition: color 0.3s ease; }
.tag-knop:hover, .tag-knop.actief { color: var(--hover-color); }

.home-afbeelding { grid-column: 1 / span 5; height: calc(100vh - (2 * var(--marge-buiten-boven))); }
.home-afbeelding img { object-fit: contain; object-position: left top; }

/* ABOUT DESKTOP */
.aboutme-links { grid-column: 1 / span 4; position: sticky; top: var(--marge-buiten-boven); }
.aboutme-rechts { grid-column: 5 / span 4; } 
.aboutme-rechts p { margin: 0 0 24px 0; }
.aboutme-foto { width: 100%; aspect-ratio: 5 / 4; margin-bottom: var(--marge-foto); }

#page-about #about-dates-block, 
#page-about #about-contact-block, 
#page-about #about-cv-block { 
    margin-top: 2.9em; 
}


.desktop-copyright { grid-column: 5 / span 4; margin-top: var(--witregel-hoogte); margin-bottom: 0; }

/* INSIGHTS */
.insights-content { grid-column: 1 / span 5; grid-row: 1; position: relative; overflow: hidden; }

.insights-years { display: flex; flex-direction: row; gap: 24px; margin-top: 24px; }
.year-knop { cursor: pointer; transition: color 0.3s ease; }
.year-knop:hover, .year-knop.actief { color: var(--hover-color); }

.insight-item { position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; opacity: 0; transition: opacity var(--trans-speed) ease-in-out, visibility var(--trans-speed); }
.insight-item.actief { position: relative; visibility: visible; opacity: 1; }

.project-blok { margin-bottom: var(--marge-tussen-blokken); }

.insights-gallery { position: relative; width: 100%; overflow: hidden; }
.insights-gallery .gallery-img.actief { position: relative; height: auto; }
.insights-gallery .gallery-img.actief img { height: auto; }

.insight-meta {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gap);
    margin-top: calc(5 * var(--unit));
}
.insight-meta-tekst { grid-column: 1 / span 4; }
.insight-meta-nav { grid-column: 5; text-align: right; }
.insight-text { margin-top: 24px; }

.insights-info { grid-column: 6 / span 3; grid-row: 1; position: sticky; top: var(--marge-buiten-boven); align-self: start; }
.insights-info p { margin: 0; }

/* MENU OVERLAY */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--menu-bg); padding: var(--marge-buiten-boven) var(--marge-buiten-zij); box-sizing: border-box; z-index: 100; opacity: 0; pointer-events: none; transition: opacity var(--trans-speed) ease-in-out; }
.menu-overlay.actief { opacity: 1; pointer-events: auto; }
.menu-overlay .site-title { grid-column: 6; grid-row: 1; }
.menu-items { grid-column: 6 / span 4; margin-top: var(--marge-na-titel); }
.blok-werk { margin-bottom: var(--marge-na-werk); }
.blok-about { margin-bottom: var(--marge-na-about); }
.blok-newsletter { margin-top: var(--marge-na-werk); }
.menu-item { cursor: pointer; transition: color 0.3s ease; }
.menu-item:hover { color: var(--hover-color); }

/* ALGEMENE CLASSES */
.link-underlined { text-decoration: underline; text-underline-offset: 2px; }
.witregel { margin-bottom: var(--witregel-hoogte) !important; }
.breedte-3-van-5 { width: calc(((100% - (4 * var(--gap))) / 5) * 3 + (2 * var(--gap))); }

/* CV STYLING & CORRECTIES */
.cv-sectie { margin-bottom: 24px; }
.cv-sectie > p { margin-bottom: 0 !important; padding-bottom: 0; } 
.cv-item { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--witmarge-na-jaartal); margin-bottom: 2px; }

.site-title { white-space: nowrap; cursor: pointer; }
.home-rechts { grid-column: 6 / span 4; grid-row: 1; }
.home-exposities { margin-top: var(--marge-home-exposities-desktop); }
.home-exposities p { margin: 0 0 24px 0; }

/* Optische uitlijning */
.kolom-catalogus-rechts p:first-child { margin-top: 0; }

.menu-knop, .site-title, .aboutme-contact p:first-child, .aboutme-rechts p:first-child, .kolom-rechts p:first-child, .kolom-links p:first-child, .catalog-info p:first-child, .insights-info p:first-child, .kolom-catalogus-rechts p:first-child { 
    transform: translateY(-4px); 
}

/* SCROLL INDICATOR */
#global-scroll-indicator {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bg-color);
    padding: 15px var(--marge-buiten-zij) 60px var(--marge-buiten-zij); 
    box-sizing: border-box;
    z-index: 40;
    font-size: 13px;
    color: var(--text-color);
    transition: opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    text-align: left;
}

/* --- PAGINA OVERGANG --- */
#pagina-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 200;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}




/* =========================================
    MOBIELE OVERRIDES (STRIKT GEISOLEERD) 
   ========================================= */
@media (max-width: 1024px) {
    :root {
        --marge-buiten-boven: 40px; 
        --marge-buiten-zij: 40px; 
        --marge-foto: 40px; 
        --gap: 20px; 
        --marge-home-foto-onder: 40px; 
        --marge-werk-foto-onder: 40px;
        --marge-werk-tekst-onder: 20px;
        --marge-tussen-insight-exposities-mobiel: 120px; 
        --marge-boven-jaartallen-mobiel: 20px; 
    }

    .hide-on-mobile { display: none !important; }

    body { font-size: var(--mobile-font-size) !important; padding: var(--marge-buiten-boven) var(--marge-buiten-zij); }
    
    .mobile-header, .mobile-header-menu { display: flex; justify-content: space-between; align-items: baseline; width: 100%; }
    .mobile-header { margin-bottom: var(--marge-werk-foto-onder); }
    .mobile-header-menu { margin-bottom: 4.5em; }

    .mobile-header .site-title,
    .mobile-header .menu-knop,
    .mobile-header-menu .site-title,
    .mobile-header-menu .menu-knop {
        transform: none;
    }

    .grid-container { display: flex; flex-direction: column; gap: 0; }
    .page.actief { display: flex; flex-direction: column; }
    
    body > .grid-container > .menu-knop { display: none; }
    #page-home .home-rechts .site-title { display: none; }
    #menu-overlay .grid-container > .site-title { display: none; }
    #menu-overlay .grid-container > .menu-knop { display: none; }

    #page-home .home-afbeelding { order: 1; width: 100%; height: auto !important; margin-bottom: var(--marge-home-foto-onder); }
    #page-home .home-rechts { order: 2; width: 100%; }
    #page-home .home-exposities { margin-top: 0; }

    #page-about.actief { display: flex; flex-direction: column; }
    .aboutme-links, .aboutme-rechts { display: contents; }

    #about-bio-block p:last-child,
    #about-dates-block p:last-child,
    #about-contact-block p:last-child { margin-bottom: 0 !important; }

    #about-bio-block { order: 1; margin-bottom: var(--marge-werk-foto-onder); }
    #about-photo-block { order: 2; margin-bottom: var(--marge-werk-foto-onder); width: 100%; }
    
    #page-about #about-dates-block { order: 3; margin-bottom: 60px; margin-top: 0; }
    #page-about #about-contact-block { order: 4; margin-bottom: 60px; margin-top: 0; }
    #page-about #about-cv-block { order: 5; margin-top: 0; }
    
    .mobile-copyright { display: block; order: 6; margin-top: 30px; margin-bottom: 0; }

    .aboutme-foto { aspect-ratio: auto; margin-bottom: 0; }
    .is-sticky { position: static !important; }
    .desktop-copyright { display: none; }
    .mobile-about-gap { margin-bottom: 0 !important; }

    #page-insights.actief { display: flex; flex-direction: column; }
    .insights-info { order: 1; margin-bottom: 0; position: static !important; }
    .insights-years { order: 2; position: static !important; display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; margin-bottom: var(--marge-werk-foto-onder); margin-top: var(--marge-boven-jaartallen-mobiel); }
    .insights-content { order: 3; }
    #page-insights .project-blok { margin-bottom: var(--marge-tussen-insight-exposities-mobiel); }
    
    .insight-meta { display: flex; flex-direction: column; margin-top: var(--marge-werk-foto-onder); }
    .insight-meta-nav { order: 1; text-align: left; margin-bottom: 12px; }
    .insight-meta-nav.gallery-nav span:first-child { padding-left: 0; margin-left: 0; }
    .insight-meta-tekst { order: 2; }

    #page-catalog.actief { display: flex; flex-direction: column; }
    .kolom-catalogus-rechts { order: 1; position: static !important; width: 100%; margin-bottom: 0; }
    .catalog-tags { order: 2; margin-bottom: var(--marge-werk-foto-onder); margin-top: var(--marge-boven-jaartallen-mobiel); display: flex; flex-wrap: wrap; gap: 0px; }
    .tag-knop::after { content: ''; margin: 0 7px; pointer-events: none; }
    .tag-knop:last-child::after { content: ''; }
    .kolom-catalogus-links { order: 3; width: 100%; }

    #page-catalog .catalog-item { margin-bottom: var(--marge-tussen-insight-exposities-mobiel); }
    #page-catalog .catalog-images-grid { margin-bottom: var(--marge-werk-foto-onder); }

    .page .kolom-links { order: 1; width: 100%; margin-bottom: var(--marge-werk-foto-onder); display: flex; flex-direction: column; gap: var(--marge-foto); }
    .page .kolom-links > p.project-tekst { display: none; }
    .mobile-foto-tekst { display: block; position: absolute; bottom: var(--marge-overlay-onder); right: var(--marge-overlay-zijkant); z-index: 10; text-align: right; pointer-events: none; }
    .page .kolom-rechts { order: 2; width: 100%; padding-bottom: var(--marge-werk-tekst-onder); }
    
    .menu-items { margin-top: 0; grid-column: auto; }
    #global-scroll-indicator { padding-left: var(--marge-buiten-zij); padding-right: var(--marge-buiten-zij); }
}
/* Aanpassing voor gelijke witruimte Insights filters */
.insights-years {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
}

.year-knop::after {
    content: '';
    margin: 0 7px;
    pointer-events: none;
}

.year-knop:last-child::after {
    content: '';
}