/*
 Theme Name:   Studio Vagant 2025
 Theme URI:    https://studiovagant.be/
 Description:  Nieuwe theme Studio Vagant
 Author:       Studio Studio
 Author URI:   https://studiostudio.be/
 Template:     blankslate
 Version:      2.0.0
*/

/* ================================================================
   0) RESET - lichte Meyer + HTML5 block + box-sizing
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

blockquote, q {
    quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after {
    content: "";
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ================================================================
   1) FONT-FACE
   ================================================================ */
@font-face {
    font-family: "Matter Regular";
    src: url("https://studiovagant.be/www/wp-content/themes/studiovagant/fonts/Matter-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Matter Light";
    src: url("https://studiovagant.be/www/wp-content/themes/studiovagant/fonts/Matter-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Panama';
    src: url('fonts/Panama-Regular.woff2') format('woff2'),
    url('Panama-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ================================================================
   2) TOKENS (:root) - kleuren, spacing, timings, component-tokens
   ================================================================ */
:root {
    /* dimensies */
    --header-h: 120px;

    /* kleuren */
    --ink: #111;
    --ink-50: #6a6a6a;
    --brand: #5e6857;
    --paper: #FDFBF7;
    --pure: #fff;
    --muted: #ccc;
    --gray-eee: #eee;
    --gray-f2: #f2f2f2;
    --error: #b00020;
    --bg-error: #fff7f8;
    --bg-success: #f3fff3;
    --marker-color: var(--brand);


    /* typografie */
    --ff-regular: "Panama", serif;
    --ff-light: "Panama", serif;
    --fs-base: 1rem;
    --fs-sm: .92rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.5rem;
    --fs-xl: 2rem;
    --fs-2xl: 4rem;

    /* spacing */
    --space-0: 0;
    --space-0-25: .25rem;
    --space-0-5: .5rem;
    --space-1: 1rem;
    --space-1-5: 1.5rem;
    --space-2: 2rem;
    --space-3: 3rem;
    --space-4: 4rem;
    --space-5: 5rem;
    --space-10: 10rem;
    --space-15: 15rem;
    --space-20: 20rem;

    /* borders en outlines */
    --border-1: 1px;
    --focus-outline: 2px solid rgba(0, 0, 0, .25);

    /* schaduwen */
    --shadow-focus: 0 0 0 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, .08);

    /* timing en easing */
    --ms-60: 60ms;
    --ms-80: 80ms;
    --ms-150: 150ms;
    --ms-250: 250ms;
    --ms-350: 350ms;
    --ms-420: 420ms;
    --ms-500: 500ms;
    --ease: ease;
    --ease-out: ease-out;

    /* lists */
    --list-gap: .5em;
    --list-indent: 1.25em;
    --list-indent-ol: 2.5ch;

    /* slider (match JS) */
    --peek: clamp(24px, 25vw, 520px);
    --slider-h: clamp(480px, 85vh, 960px);
    --slider-gap: 1rem;
    --slider-ms: var(--ms-420);
    --slider-ease: var(--ease-out);
    --nav-click-w: 20%;
    --hover-shift: 4px;
    --caption-fs: clamp(14px, 1.6vw, 18px);
    --caption-mt: clamp(8px, 2vh, 16px);

    /* fading gallery */
    --fade-ms: 400ms;

    /* footer tiles */
    --footer-tile-h: 10vh;

    /* grid hulpschaal */
    --g: 20px;
}

/* ================================================================
   3) BASE ELEMENTEN
   ================================================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding: var(--space-2) var(--space-1) 0 var(--space-1);
    padding-top: var(--header-h);
    font-family: var(--ff-light);
    background-color: var(--paper);
    color: var(--brand);
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration-thickness: auto;
}

strong {
    font-weight: 600;
}

em {
    font-style: italic;
}

p {
    margin-bottom: var(--space-1);
    color: var(--brand);
}

h1 {
    font-size: var(--fs-xl);
    line-height: 1.25;
    color: var(--brand);
}

h2 {
    color: var(--brand);
}

/* lijsten */
ul, ol {
    margin: 0 0 1em 0;
    padding: 0;
    list-style-position: outside;
}

ul {
    padding-inline-start: var(--list-indent);
    list-style-type: disc;
}

ul ul {
    margin-top: .5em;
    list-style-type: circle;
}

ul ul ul {
    list-style-type: square;
}

ol {
    padding-inline-start: var(--list-indent-ol);
    list-style-type: decimal;
    font-variant-numeric: tabular-nums lining-nums;
}

ol ol {
    list-style-type: lower-alpha;
    padding-inline-start: 2.1ch;
}

ol ol ol {
    list-style-type: lower-roman;
    padding-inline-start: 2.6ch;
}

li {
    overflow-wrap: anywhere;
}

li::marker {
    color: var(--marker-color);
    font-weight: 600;
}

/* ================================================================
   4) HEADER - sticky grid met gelijke kolommen
   ================================================================ */
#taal {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    font-size: var(--fs-md);
    padding-right: var(--space-1);
    padding-top: var(--space-1);
}

#taal li {
    display: flex;
}

#taal li + li {
    margin-top: 0;
}

#menu-nl, #menu-en {
    display: flex;
    gap: var(--space-0-5);
    text-decoration: none;
}

#taal a {
    text-decoration: none;
}

#header {
    position: fixed;
    top: var(--space-3);
    left: var(--space-1);
    right: var(--space-1);
    font-size: var(--fs-md);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center; /* was 'left' en ongeldig */
    column-gap: var(--space-1);
    z-index: 1000;
    will-change: transform;
    text-transform: uppercase;
}

/* wrappers vlak maken zodat LI's in het grid vallen */
#header nav,
#header nav > .menu-header-menu-nl-container,
#header nav > .menu-header-menu-en-container,
#header nav ul {
    display: contents;
}

/* tegels */
#header .site-title, #header nav li {
    display: flex;
    align-items: center;
    justify-content: left;
    color: var(--pure);
    letter-spacing: 0.05em;
}

a.site-title {
    padding: var(--space-1);
    background-color: var(--brand);
    text-decoration: none;
}

#header nav li {
    padding: var(--space-1);
    background-color: var(--brand);
}

#header nav ul, #header nav li {
    list-style: none;
    margin: 0;
}

#header nav li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--pure);
}

/* volledige tegel klikbaar */
#menu .menu > li {
    position: relative;
}

#menu .menu > li > a {
    position: static;
}

#menu .menu > li > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

#menu .menu > li > * {
    position: relative;
    z-index: 2;
}

/* ================================================================
   5) GRID HERO SLIDER - 4 kolommen, 1-2-1 layout
   ================================================================ */
.grid-hero {
    --grid-gap: var(--space-1);
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    height: var(--slider-h);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.grid-hero .slot {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.grid-hero .slot-left {
    grid-column: 1 / span 1;
}

.grid-hero .slot-center {
    grid-column: 2 / span 2;
}

.grid-hero .slot-center .center-link {
    display: block;
    height: 100%;
}

.grid-hero .slot-right {
    grid-column: 4 / span 1;
}

.grid-hero img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    position: absolute;
    inset: 0;
    transform: translateX(var(--slide-x, 0));
    transform-origin: center;
    transition: transform var(--ms-350) var(--ease);
    will-change: transform;
}

.grid-hero .slot-center .center-link:hover img,
.grid-hero .slot-center .center-link:focus-visible img {
    transform: translateX(var(--slide-x, 0)) scale(1.02);
}

/* klikvlakken */
.grid-hero .nav {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: var(--nav-click-w) 1fr var(--nav-click-w);
    pointer-events: none;
}

.grid-hero .nav button {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
}

.grid-hero .nav .prev {
    grid-column: 1;
}

.grid-hero .nav .next {
    grid-column: 3;
}

.grid-hero .nav .prev {
    cursor: w-resize;
}

.grid-hero .nav .next {
    cursor: e-resize;
}

.grid-caption {
    margin: var(--caption-mt) 0 0;
    padding: 0 0 0 calc((100% - (3 * var(--space-1))) / 4 + var(--space-1));
    text-align: left;
    font-size: var(--caption-fs);
    line-height: 1.35;
    color: var(--brand);
    width: 100%;
    max-width: none;
}


/* ================================================================
   6) WORDS + GRID SLIDER (4 kolommen: 1 woorden, 2 peek, 3-4 main)
   ================================================================ */
.words-hero {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-1);
    align-items: stretch;
    margin: 0;
}

/* kolom 1: woorden */
.wh-words {
    grid-column: 1 / span 1;
}

.wh-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--ff-regular);
    font-size: clamp(28px, 4vw, 64px);
    line-height: 1.05;
    color: var(--brand);
}

.wh-list li + li {
    margin-top: .25em;
}

/* kolommen 2-4: media */
.wh-media {
    grid-column: 2 / span 3;
    position: relative;
    display: grid;
    --grid-gap: var(--space-1);
    --colW: calc((100% - 2 * var(--grid-gap)) / 3);
    grid-template-columns: var(--colW) calc(2 * var(--colW) + var(--grid-gap));
    column-gap: var(--grid-gap);
    align-items: stretch;
    overflow: hidden;
}

.slot-peek, .slot-main {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.slot-peek img, .slot-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    position: absolute;
    inset: 0;
    transform: translateX(0);
    transition: transform var(--ms-350) var(--ease);
}

.slot-peek img.is-slide-next, .slot-main img.is-slide-next {
    animation: wh-slide-next var(--ms-350) var(--ease);
}

.slot-peek img.is-slide-prev, .slot-main img.is-slide-prev {
    animation: wh-slide-prev var(--ms-350) var(--ease);
}

@keyframes wh-slide-next {
    from { transform: translateX(14px); }
    to { transform: translateX(0); }
}

@keyframes wh-slide-prev {
    from { transform: translateX(-14px); }
    to { transform: translateX(0); }
}

/* klikzones */
.wh-nav {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    pointer-events: none;
}

.wh-nav .prev, .wh-nav .next {
    appearance: none;
    background: transparent;
    border: 0;
    pointer-events: auto;
}

.wh-nav .prev {
    cursor: w-resize;
}

.wh-nav .next {
    cursor: e-resize;
}

.wh-caption {
    margin: var(--space-1) auto 0;
    padding: 0 var(--space-1);
    text-align: center;
    font-size: var(--caption-fs);
    color: var(--brand);
    max-width: min(1100px, 100%);
}

/* ================================================================
   7) ABOUT - 8 kolommen: [1 leeg] [2-3 beeld] [4 leeg] [5-8 tekst+logo]
   ================================================================ */
.about8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--space-1);
    align-items: start;
    margin: var(--space-15) 0;
}

.a8-photo {
    grid-column: 2 / span 2;
    margin: 0;
}

.a8-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.a8-text {
    grid-column: 5 / span 4;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.a8-title {
    font-family: var(--ff-regular);
    font-size: var(--fs-xl);
    line-height: 1.35;
    color: var(--brand);
}

.a8-rich {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--brand);
}

/* bugfix */
.a8-rich p + p {
    margin-top: .7em;
}

.a8-logo {
    margin-top: var(--space-2);
    align-self: flex-end;
    max-width: min(220px, 40%);
}

.a8-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================================================================
   8) STORY - 8 kolommen: [1 leeg] [2-4 tekst] [5-7 beeld] [8 leeg]
   ================================================================ */
.story8 {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--space-1);
    align-items: stretch;
    margin: var(--space-15) 0 0 0;
    height: 75vh;
}

.s8-text {
    grid-column: 2 / span 3;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    align-self: center;
}

.s8-title {
    font-family: var(--ff-regular);
    font-size: var(--fs-xl);
    line-height: 1.35;
    color: var(--brand);
}

.s8-rich {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--brand);
}

.s8-rich p + p {
    margin-top: .7em;
}

.s8-media {
    grid-column: 5 / span 3;
    min-width: 0;
}

/* Fading-gallery binnen story8 volgt de rijhoogte */
.story8 .fading-gallery {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

.story8 .fading-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.story8 .fade-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity var(--fade-ms) var(--ease);
    display: block;
}

.story8 .fade-slide.is-active {
    opacity: 1;
}

/* ================================================================
   9) FADING GALLERY - crossfade stack (standalone)
   ================================================================ */
.fading-gallery {
    position: relative;
    width: 49.65%;
    margin: auto;
    height: 60vh;
    overflow: hidden;
}

.fading-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.fade-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    display: block;
    transition: opacity var(--fade-ms) var(--ease);
    will-change: opacity;
}

.fade-slide.is-active {
    opacity: 1;
}

/* ================================================================
   10) PROJECTEN GRID
   ================================================================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-1);
    row-gap: var(--space-1);
    --tile-h: 70vh;
}

.project-card {
    list-style: none;
}

.project-card.span-1 {
    grid-column: span 1;
}

.project-card.span-2 {
    grid-column: span 2;
    padding-bottom: 0;
}

.project-thumb-wrap {
    display: block;
    overflow: hidden;
    height: var(--tile-h);
}

.project-card.span-1 .project-thumb-wrap,
.project-card.span-2 .project-thumb-wrap {
    aspect-ratio: auto;
}

.project-thumb {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1);
    transform-origin: center;
    transition: transform var(--ms-350) var(--ease);
    will-change: transform;
    background: var(--gray-eee);
}

.project-card > a {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.project-title {
    position: absolute;
    left: var(--space-1);
    bottom: var(--space-1);
    color: var(--pure);
    opacity: 0;
    transition: opacity var(--ms-250) var(--ease);
    pointer-events: none;
}

.project-title.is-on-light {
    color: var(--brand);
}

.project-card > a:hover .project-thumb,
.project-card > a:focus-visible .project-thumb {
    transform: scale(1.02);
}

.project-card > a:hover .project-title,
.project-card > a:focus-visible .project-title {
    opacity: 1;
}

ul.projects-grid {
    padding-inline-start: 0;
}

/* ================================================================
   11) SINGLE PROJECT
   ================================================================ */
.featured-image-post img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    margin-bottom: var(--space-1);
}

article header h1 {
    font-size: var(--fs-xl);
    line-height: 1.25;
    margin-bottom: var(--space-1);
}

section.project-short {
    font-size: var(--fs-md);
    line-height: 1.5;
    margin-bottom: var(--space-1);
}

.project-item.tekst {
    font-size: var(--fs-md);
    line-height: 1.5;
}

.long-description p {
    line-height: 1.5;
    margin-bottom: var(--space-1);
}

.project-attributes p {
    line-height: 1.5;
    border-bottom: var(--border-1) solid var(--muted);
}

.project-attributes p:first-child {
    border-top: var(--border-1) solid var(--muted);
    padding-top: var(--space-1);
}

/* 50/50 flexbeeldengrid met wrap */
.project-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.project-flex > * {
    box-sizing: border-box;
    min-width: 0;
    flex: 0 1 calc((100% - var(--space-1)) / 2);
}

.project-flex img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: 75vh;
    object-fit: contain !important;
    margin-inline: auto;
}

/* ================================================================
   12) CONTENT PAGES - rijen + rijke tekst
   ================================================================ */
.row {
    display: flex;
    gap: var(--space-1);
    align-items: center;
    margin-bottom: var(--space-5);
}

.row.is-image-right {
    flex-direction: row-reverse;
}

.col {
    flex: 1 1 0;
    min-width: 0;
}

.row-image {
    width: 100%;
    height: auto;
    display: block;
}

.richtext {
    padding: var(--space-1-5);
}

.richtext h2 {
    font-size: var(--fs-xl);
    line-height: 1.5;
    color: var(--brand);
}

.richtext p {
    margin-bottom: var(--space-1);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--brand);
}

.richtext strong {
    font-weight: 700;
}

.richtext em {
    font-style: italic;
}

.richtext a {
    color: var(--brand);
}

/* ================================================================
   13) AANBOD - 3 kolommen beeld-tekst-beeld
   ================================================================ */
.aanbod-list {
    display: grid;
    gap: clamp(1rem, 2vw, 2rem);
}

.aanbod-rij {
    display: grid;
    grid-template-columns: 1fr minmax(24ch, 48ch) 1fr;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.aanbod-col {
    min-width: 0;
}

.aanbod-img {
    width: 100%;
    height: auto;
    display: block;
}

.aanbod-col--tekst > *:first-child {
    margin-top: 0;
}

.aanbod-col--tekst > *:last-child {
    margin-bottom: 0;
}

/* ================================================================
   14) CONTACT - split + CF7 styling
   ================================================================ */
.contact-split__wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.contact-split__left {
    position: relative;
    overflow: hidden;
    padding: var(--space-4) var(--space-0-5) var(--space-10) 0;
}

.contact-split__photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.contact-split__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: var(--space-4) var(--space-0-5);
}

.contact-split__logo img {
    width: 30%;
    height: auto;
    margin-bottom: var(--space-1);
}

.contact-split__details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-split__details li {
    margin: var(--space-0-25) 0;
    font-size: var(--fs-md);
    line-height: 1.5;
}

.contact-split__details a {
    color: var(--brand);
    text-decoration: none;
}

/* CF7 form tokens en layout */
.contact-split__form {
    --cfw: 760px;
    --gap: 1rem;
    --gap-sm: 14px;
    margin-top: .5rem;
}

.contact-split__form .wpcf7-form {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

/* forceer enkelkoloms */
.contact-split__form .width-full,
.contact-split__form .width-half,
.contact-split__form .width-kwart {
    width: 100%;
}

.contact-split__form .contact-names {
    display: block;
}

/* typografie */
.contact-split__form label {
    display: block;
    color: var(--brand);
    margin-bottom: 6px;
}

.contact-split__form .gray {
    color: var(--ink-50);
    font-weight: 400;
}

/* fields */
.contact-split__form input[type="text"],
.contact-split__form input[type="email"],
.contact-split__form input[type="tel"],
.contact-split__form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-bottom: var(--border-1) solid var(--brand);
    background: var(--paper);
    font: inherit;
    line-height: 1.4;
    transition: box-shadow var(--ms-150) var(--ease), transform var(--ms-60) var(--ease);
}

.contact-split__form textarea {
    min-height: 140px;
    resize: vertical;
    border: var(--border-1) solid var(--brand);
}

/* focus micro-elevation */
.contact-split__form input:focus,
.contact-split__form textarea:focus {
    outline: 0;
    box-shadow: var(--shadow-focus);
    transform: translateY(-1px);
}

/* radio segmented */
.contact-split__form .wpcf7-radio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-sm);
    margin-top: 2px;
}

.contact-split__form .wpcf7-radio .wpcf7-list-item {
    margin: 0;
}

.contact-split__form .wpcf7-radio label {
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--border-1) solid var(--ink);
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    transition: background var(--ms-150) var(--ease), box-shadow var(--ms-150) var(--ease), transform var(--ms-60) var(--ease);
}

.contact-split__form .wpcf7-radio input[type="radio"] {
    accent-color: var(--ink);
}

.contact-split__form .wpcf7-radio label:hover {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}

.contact-split__form .wpcf7-radio label:active {
    transform: translateY(1px);
}

/* submit */
.contact-split__form input[type="submit"] {
    align-self: flex-start;
    min-width: 260px;
    padding: 14px 20px;
    border: var(--border-1) solid var(--ink);
    background: var(--brand);
    color: var(--pure);
    cursor: pointer;
    transition: transform var(--ms-80) var(--ease), background var(--ms-150) var(--ease), color var(--ms-150) var(--ease), box-shadow var(--ms-150) var(--ease);
}

.contact-split__form input[type="submit"]:hover {
    background: var(--pure);
    color: var(--ink);
    box-shadow: var(--shadow-hover);
}

.contact-split__form input[type="submit"]:active {
    transform: translateY(1px);
}

/* CF7 states */
.contact-split__form .wpcf7-not-valid {
    border-color: var(--error) !important;
    background: var(--bg-error);
}

.contact-split__form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-sm);
    color: var(--error);
}

.contact-split__form .wpcf7-response-output {
    border: var(--border-1) solid var(--ink);
    padding: 12px 14px;
    margin: 0;
}

.contact-split__form .wpcf7 form.invalid .wpcf7-response-output {
    background: var(--bg-error);
}

.contact-split__form .wpcf7 form.sent .wpcf7-response-output {
    background: var(--bg-success);
}

/* kleine utility */
.kleinbeetjenaarrechts {
    padding-left: var(--space-1);
}

/* ================================================================
   15) GENERIC GRID-RIJEN (herbruikbare section-grid)
   ================================================================ */
.section-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 1fr 1fr;
    column-gap: var(--space-1);
    row-gap: var(--space-1);
    margin: 0;
    padding: 0;
    padding-bottom: var(--space-10);
    color: inherit;
}

.section-grid > .cell {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.cell--image {
    height: 100%;
    overflow: hidden;
}

.cell--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cell--quote {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.cell--quote blockquote {
    margin: 0;
    font-size: clamp(1.15rem, 2.2vw, 2rem);
    line-height: 1.25;
}

.cell--body {
    line-height: 1.55;
}

/* WP defaults weg */
.section-grid figure, .section-grid .wp-block-image {
    margin: 0;
}

.section-grid.theme--dark, .section-grid.theme--dark p {
    color: var(--paper);
}

.section-grid.theme--dark a {
    color: var(--paper);
}

.section-grid hr {
    border-color: currentColor;
}

/* ================================================================
   16) FOOTER
   ================================================================ */
footer {
    padding: var(--space-1) 0 0 0;
}

.site-footer-nav .footer-menu {
    margin: var(--space-10) 0 var(--space-1) 0;
    border-top: var(--border-1) solid var(--muted);
    border-bottom: var(--border-1) solid var(--muted);
    display: flex;
    width: 100%;
    list-style: none;
    padding: 1.5rem 0;
}

.site-footer-nav .footer-menu > li {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-left: var(--border-1) solid var(--muted);
}

.site-footer-nav .footer-menu > li:first-child {
    border-left: 0;
}

.site-footer-nav .footer-menu a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--footer-tile-h);
    text-decoration: none;
    color: var(--brand);
    transition: background-color var(--ms-500) var(--ease), color var(--ms-150) var(--ease);
    font-size: 1.5rem;
}

.site-footer-nav .footer-menu a:hover,
.site-footer-nav .footer-menu a:focus-visible {
    color: var(--pure);
    background: var(--brand);
    outline: none;
}

#footer-contact {
    text-align: center;
    color: var(--brand);
    font-size: var(--fs-xl);
    line-height: 1.5;
    margin: var(--space-20) 0;
}

#footer-contact a {
    color: var(--brand);
}

#footer-contact a:hover {
    text-decoration: none;
}

#copyright {
    display: flex;
    width: 100%;
    background: var(--brand);
    color: var(--pure);
    font-family: var(--ff-light);
    font-size: var(--fs-md);
    padding: var(--space-1) var(--space-4);
    min-height: 75vh;
    height: auto;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
}

.copyright-inner {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-1);
}

.copyright-inner > * {
    flex: 1 1 0;
    min-width: 0;
}

#copyright > span, #copyright > div {
    display: flex;
}

#copyright a {
    color: var(--pure);
    text-decoration: none;
}

#footer-logo {
    filter: invert(1);
}

#footer-logo img {
    max-height: calc(var(--space-10) - 2 * var(--space-1));
    width: auto;
    height: 100%;
}

#credits {
    display: flex;
    justify-content: space-between;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-1) 0 var(--space-1);
}

#contact-info-footer, .socials, .footerflex {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5) 0;
    line-height: 1.5;
}

/* ================================================================
   17) INTRO VIDEO OVERLAY
   ================================================================ */
/* overlay blokkeert niet, is puur visueel tot hidden */
.intro-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: grid;
    place-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity .5s ease, visibility .5s ease;
    pointer-events: none;
}

.intro-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
}

.intro-video-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Skip-knop is klikbaar boven overlay */
.intro-skip {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 1;
    pointer-events: auto;
    padding: .6rem .9rem;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

.intro-skip:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .18);
}

.intro-skip:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.intro-video-overlay.is-hidden .intro-skip {
    display: none;
}

/* ================================================================
   18) RESPONSIVE - mobiele en tablet
   ================================================================ */

/* <= 1200px - grote tablets en kleine laptops */
@media (max-width: 1200px) {
    .hp-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-intro, .introwoorden {
        width: 60%;
    }
}

/* <= 980px - about stack */
@media (max-width: 980px) {
    .about8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .a8-photo {
        grid-column: 1 / span 4;
    }

    .a8-text {
        grid-column: 1 / span 4;
        margin-top: var(--space-1-5);
    }

    .a8-logo {
        align-self: flex-start;
        max-width: 180px;
    }
}

/* <= 900px - tablets en brede phones */
@media (max-width: 900px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hp-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-split__wrap {
        grid-template-columns: 1fr;
    }

    .contact-split__left {
        height: 40vh;
    }

    .contact-split__right {
        padding: 2rem 1.25rem;
    }

    .fading-gallery {
        width: 100%;
        height: 56vh;
    }

    .home-intro, .introwoorden {
        width: 72%;
    }

    .site-footer-nav .footer-menu {
        margin: var(--space-5) 0;
    }
}

/* <= 800px - content-rijen stapelen en section-grid 1 kolom */
@media (max-width: 800px) {
    .row, .row.is-image-right {
        flex-direction: column;
        gap: clamp(12px, 4vw, 24px);
    }

    .aanbod-rij {
        grid-template-columns: 1fr;
    }

    .aanbod-col--beeld:first-child {
        order: 1;
    }

    .aanbod-col--tekst {
        order: 2;
    }

    .aanbod-col--beeld:last-child {
        order: 3;
    }

    .home-intro {
        margin: var(--space-5) auto;
    }

    .section-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .cell--image {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }

    .cell--quote {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .cell--body {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    /* story8 fallback */
    .story8 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: auto;
    }

    .s8-text {
        grid-column: 1 / span 4;
    }

    .s8-media {
        grid-column: 1 / span 4;
        margin-top: var(--space-1-5);
    }

    .story8 .fading-gallery {
        height: 56vh;
    }
}

/* <= 720px - forms en projectflex */
@media (max-width: 720px) {
    .contact-split__form {
        --cfw: 100%;
        --gap: 18px;
    }

    .contact-split__form .wpcf7-radio {
        grid-template-columns: 1fr;
    }

    .contact-split__form input[type="submit"] {
        width: 100%;
        align-self: stretch;
    }

    .project-flex > * {
        flex: 0 1 100%;
    }

    .featured-image-post img {
        height: 50%;
    }

    .home-intro, .introwoorden {
        width: 86%;
    }

    :root {
        --footer-tile-h: auto;
    }

    .site-footer-nav .footer-menu {
        flex-direction: column;
        padding: 0;
    }

    .site-footer-nav .footer-menu > li {
        border-left: 0;
        border-top: var(--border-1) solid var(--muted);
    }

    .site-footer-nav .footer-menu > li:first-child {
        border-top: 0;
    }

    .site-footer-nav .footer-menu a {
        height: auto;
        padding: 1rem 1.25rem;
        font-size: 1.25rem;
        line-height: 1.2;
        justify-content: flex-start;
    }
}

/* <= 700px - header stacking en typoritme, plus 2 knoppen layout */
@media (max-width: 700px) {
    #header {
        font-size: var(--fs-sm);
    }

    .words-hero {
        grid-template-columns: 1fr;
    }

    .wh-words {
        display: none;
    }

    .wh-media {
        grid-column: 1 / -1;
        min-height: 52vh;
    }

    #header {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(56px, auto);
        gap: var(--space-1);
        grid-auto-flow: row dense;
    }

    #header .site-title {
        justify-content: center;
    }

    #header .site-title, #header nav li {
        min-height: 56px;
        padding: 0;
        display: flex;
    }

    a.site-title, #header nav li > a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        text-align: center;
    }

    body {
        padding-top: calc(var(--header-h) + 100px);
    }

    .home-intro {
        font-size: 1.6rem;
    }

    .introwoorden {
        font-size: 3rem;
    }
}

/* <= 560px - phones portret */
@media (max-width: 560px) {
    :root {
        --header-h: 110px;
    }

    .peek-slider {
        height: 40vh;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .hp-grid {
        grid-template-columns: 1fr;
    }

    figcaption.hp-title {
        padding-bottom: var(--space-5);
    }

    .fading-gallery {
        height: 48vh;
    }

    .richtext {
        padding: 1rem;
    }

    .site-footer-nav .footer-menu {
        margin: var(--space-5) 0 var(--space-3);
    }

    #footer-contact {
        font-size: 1.4rem;
        margin: var(--space-5) 0;
        padding: 0 1rem;
        text-align: center;
    }

    #footer-contact a {
        word-break: break-word;
    }

    #copyright {
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        text-align: center;
        margin-top: var(--space-3);
        font-size: var(--fs-sm);
    }

    .copyright-inner {
        flex-direction: column;
        align-items: center;
        gap: .35rem;
    }

    #copyright a {
        word-break: break-word;
    }

    .a8-title {
        font-size: 1.25rem;
    }

    .a8-rich {
        font-size: 1rem;
    }

    .a8-logo {
        max-width: 150px;
    }
}