/* Reset en basis styling */
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Chivo", sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: var(--bg-color, #fff);
    min-width: 800px;
    max-width: 100%;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--spacing, 20px);
}

/* Presentatie container */
.presentation-container {
    padding: 0 var(--spacing, 20px);
}

/* Slide styling */
.slide {
    margin-bottom: var(--spacing, 20px);
    opacity: 0;
    transform: translateY(30px);
    overflow: hidden;
    min-height: 400px; /* Geef slides een minimale hoogte voor correcte positioning */
}

.slide.loaded {
    /* Animatie wordt gehandeld door @keyframes slideIn */
}

.slide img,
.slide video {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.slide:hover img,
.slide:hover video {
    transform: scale(1.02);
}

/* Breedte klassen gebaseerd op slide type */
.slide.width-1 {
    width: 100%;
}

.slide.width-2 {
    width: calc(50% - calc(var(--spacing, 20px) / 2));
    display: inline-block;
    vertical-align: top;
    margin-right: 0; /* Standaard geen margin */
}

.slide.width-2.left-slide {
    margin-right: var(--spacing, 20px); /* Alleen linker slides van paar */
}

/* Loading state */
.slide.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    min-height: 200px;
}

.audio-container {
    min-height: 200px;
    background-color: #f7f7f1;
    padding: 3em;
}

.audio-container h2{
    font-size: 2em;
    margin-top: 1em;
    display: block;
}

.audio-container h3{
    font-size: 1.7em;
    margin-top: 1em;
    display: block;
}

.audio-container .text-content{
    max-width: 800px;
    margin: 0 auto;
}

.audio-container audio{
    width: 100%;
    margin: 0 auto;
    filter: invert(1);
}

.audiocontainer{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    font-size: 2em;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Responsive design */
@media (max-width: var(--mobile-breakpoint, 768px)) {

    .container {
        padding: 0 calc(var(--spacing, 20px) / 2);
    }

    .presentation-container {
        padding: 0 calc(var(--spacing, 20px) / 2);
    }

    .slide.width-2 {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--spacing, 20px);
    }

    .slide {
        margin-bottom: calc(var(--spacing, 20px) * 0.75);
    }
}

/* Animaties alleen voor geladen slides */
.slide.loaded {
    animation: slideIn var(--fade-duration, 0.6s) ease-out forwards;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}