/* Manrope*/
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope/Manrope-VariableFont_wght.woff2') format('woff2-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
/* Bebas for headers */
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Middle.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Bebas Italic variants */
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Light-Italic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Bebas Neue Pro';
    src: url('../fonts/bebas/Bebas-Neue-Pro-Bold-Italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
/* Bovine for Titles */
@font-face {
    font-family: 'Bovine Round';
    src: url('../fonts/bovine/Bovine_Round_MVB_Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* =========================
     ------------------------------KLEUREN----------------------------------------
  ========================== */ :root {
    /* =========================
     PRIMARY (goud / merk)
  ========================== */
    --primary: rgba(255, 217, 57, 1); /* ffd939 – hoofdkleur / warm goud */
    --primary-light: rgba(255, 248, 219, 1); /* #FFF8DB – zachte highlight / crème */
    --primary-dark: rgba(160, 141, 46, 1); /* #A08D2E – diepe goudtint / schaduw */
    --primary-accent: rgba(202, 178, 60, 1); /* #CAB23C – secundair accent goud */
    --primary-deep: rgba(159, 135, 14, 1); /* #9F870E – donker goud / contrast accent */
	--primary-Focus: rgba(255, 0, 128, 1); /* #FF0080 – Fel magenta / fuchsia */
	
    /* =========================
     GRAYS (UI / tekst / structuur)
  ========================== */
    --gray-100: rgba(237, 239, 240, 1); /* #EDEFF0 – bijna wit / achtergrond */
    --gray-200: rgba(194, 201, 204, 1); /* #C2C9CC – licht grijs / UI elementen */
    --gray-300: rgba(155, 163, 168, 1); /* #9BA3A8 – middelgrijs / secundaire tekst */
    --gray-400: rgba(123, 130, 133, 1); /* #7B8285 – donker grijs / body tekst */
    --gray-500: rgba(89, 95, 97, 1); /* #595F61 – deep gray / headings ondersteunend */
    --gray-600: rgba(56, 59, 61, 1); /* #383B3D – bijna zwart grijs / UI dark */
    --white: rgba(255, 255, 255, 1); /* #FFFFFF – puur wit */
    --black: rgba(15, 15, 16, 1); /* #0F0F10 – rich black / hoofddark */
}
:root {
    --font-size-base: 1.2rem; /* Adjust base font size */
    --bs-nav-link-font-size: 1.4rem;
    --default-spacing: 2rem;
}
/* =========================
     BASICS
  ========================== */
@media (max-width: 767.98px) {
    html {
        font-size: 80%;
    }
}
body {
    background-color: var(--primary);
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    line-height: 1.6;
}
h1 {
    font-family: 'Bovine Round';
    text-transform: uppercase;
    color: var(--primary);
    text-align: left;
    position: relative;
    /* BELANGRIJK: block layout */
    display: block;
    width: fit-content;
    margin: 0 0 1rem 0;
}
h1::before {
    content: "";
    position: absolute;
    top: -0.25em;
    bottom: -0.25em;
    left: -1.2em;
    right: -1.2em;
    background-image: url("../images/streep-stormram.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}
.editor-styles-wrapper h1 {
    text-align: left;
}
h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
}
h2 {
    font-size: 2rem;
    font-weight: 700;
}
h3 {
    font-weight: 400;
}
h4 {
    font-weight: 500;
}
h5 {
    font-weight: 500;
}
h6 {
    font-weight: 700;
}

a:link {
    color: var(--gray-600);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-underline-offset 0.2s ease;
}

a:visited {
    color: var(--gray-600);
}

a:hover {
    color: #000;
    text-underline-offset: 4px;

}

a:focus {
    color: #000;
    outline: 1px solid #252525;
    outline-offset: 1px;
}

a:active {
    color: #555;
}
.comment {
    /*display: block;*/
  display: none;
  padding: 8px 12px;
  margin: 10px 0;

  font-size: 0.75rem;
  font-family: monospace;
  letter-spacing: 0.5px;

  color: #00ff88;
  background: #0f0f10;

  border: 1px dashed #00ff88;
  border-left: 4px solid #00ff88;

  opacity: 0.8;
}

.text-white {
    text-color: var(--white) !important;
}
.text-black {
    text-color: var(--black) !important;
}
.btn {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
}
/* =========================
   HEADER
========================= */
.site-header {
    position: sticky;
    top: 0;
    background-color: var(--white);
    border-bottom: 1px solid #ddd;
    margin-bottom: 3rem;
    z-index: 2000;
}
.header-logo {
    width: 200px;
}
/* Navigatie */
.main-nav {
    margin-left: auto;
}
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
}
.main-nav > ul {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.main-nav ul li a {
    text-decoration: none;
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--black);
    line-height: 0;
}
@media (max-width: 991.98px) {
    .main-nav ul li a {
        font-size: 1.1rem;
    }
}
.main-nav ul li a:hover {
    text-decoration: none;
    color: var(--gray-500);
    transition: all 0.5s ease;
}
/* link met submenu */
.main-nav li:has(> .sub-menu) > a:hover {
    color: var(--black);
    cursor: default;
}
/* submenu */
.main-nav ul li {
    position: relative;
    margin-top: .8rem;
}
.main-nav ul .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background: var(--white);
    border: 1px solid #ddd;
    min-width: 200px;
    gap: 0;
    z-index: 999;
}
.main-nav ul li:hover > .sub-menu {
    display: flex;
}
/* submenu links blok */
.main-nav ul .sub-menu li a {
    display: block;
    padding-bottom: .5rem;
    padding-top: .5rem;
    padding-left: .5rem;
    padding-right: .5rem;
    font-family: 'Manrope';
    font-size: 1.2rem;
    line-height: .8;
    text-transform: none;
    font-weight: 600;
}
.main-nav ul .sub-menu li a:hover {
    background-color: var(--black);
    color: var(--white);
    transition: all 0.5s ease;
}
/* MOBIEL */
#menu-toggle {
    position: relative;
    margin-left: auto;
    background: none;
    border: 0;
    padding: 0;
    font-size: 2rem;
    font-family: 'Bebas Neue Pro';
    color: var(--black);
    cursor: pointer;
    z-index: 2000;
}
/* ingeklapt */
@media (max-width: 768px) {
    .main-nav {
        display: none;
    }
    .main-menu, .main-nav ul {
        flex-direction: column;
    }
    .main-nav ul .sub-menu {
        position: static;
        display: block;
        border: none;
        background: transparent;
        padding-left: 1rem;
        text-align: left;
        align-items: flex-start;
    }
}
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: 0.3s;
    padding: 20px;
    z-index: 1500;
    padding-top: 150px;
}
/* Scxroll fix */
.mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
/* Chrome / Safari scrollbar verbergen */
.mobile-menu::-webkit-scrollbar {
    display: none;
}
.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* hoofditems */
.mobile-menu ul li a {
    display: block;
    padding: 0 0;
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
}
/* submenu ALTIJD zichtbaar */
.mobile-menu .sub-menu {
    display: block;
    position: static;
    margin: 0;
    padding-left: 1rem;
    border: 0;
    background: transparent;
}
/* submenu links */
.mobile-menu .sub-menu li a {
    font-family: 'Manrope';
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: none;
    padding: .4rem 0;
    line-height: 1.2;
}
/* als hij een submenu heeft dan de hoofdlink grijs */
.mobile-menu li:has(> .sub-menu) > a {
    color: var(--gray-500);
    cursor: default;
}
.mobile-menu ul li a:hover {
    color: var(--gray-500);
    transition: all 0.5s ease;
}
.mobile-menu .sub-menu li a:hover {
    background-color: var(--black);
    color: var(--white);
    transition: all 0.5s ease;
}
.mobile-menu.open {
    left: 0;
}
/* =========================
 Hero Tiles
========================= */
.hero-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
}
/* zelfde sizing regels hergebruiken */
.hero-tile--l {
    grid-column: span 2;
    grid-row: span 2;
}
.hero-tile--m {
    grid-column: span 1;
    grid-row: span 2;
}
.hero-media-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* =========================
  MASONRY GRID
========================= */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 10px;
}
/* mobiel */
@media (max-width: 768px) {
    .masonry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* =========================
   TILE BASIS
========================= */
.tile {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.tile-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
    overflow: hidden;
    border-radius: 4px;
}
/* =========================
   TILE LAY OUT
========================= */
.layout-none {
    display: block;
}
.layout-none .tile-media {
    inset: 0;
}
.layout-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.layout-vertical {
    display: grid;
    grid-template-rows: 1fr 1fr;
}
.layout-vertical .tile-media {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
}
.layout-vertical .tile-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 50%;
    background: var(--black);
}
.layout-horizontal .tile-media {
    right: 50%;
    left: 0;
}
.layout-horizontal .tile-content {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    background: var(--black);
}
.media-full .tile-media-inner {
    width: 100%;
}
.media-cropped .tile-media-inner {
    transform: scale(1.1);
}
/* =========================
   TILE CONTENT
========================= */
.tile-content {
    position: relative;
    z-index: 2;
    background: var(--black);
    color: var(--white);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* belangrijk */
    align-items: flex-start;
    gap: 10px;
    height: 100%;
    overflow: hidden;
}
.tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 15px;
    padding-top: 20px; /* extra ademruimte boven */
    color: var(--white);
    pointer-events: none;
}
.tile-overlay-tagline {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
}
.tile-overlay-title {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
}
/* =========================
   TILE RELATIONS (GENERIC)
========================= */
.tile-relations {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tile-relations-item {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--white);
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.tile-relations-label {
    opacity: 0.7;
}
.tile-relations-title {
    font-weight: 800;
}
.tile-makers-inline {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 0.95rem;
    color: var(--white);
    opacity: 0.85;
}
.hide-maker-if {}
@media (max-width: 991.98px) {
    .hide-maker-if {
        display: none;
    }
}
/* =========================
   CLUSTER MEDIA SYSTEM (NEW)
========================= */
.clustercontainer {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    overflow: hidden;
}
/* default item */
.cluster-item {
    height: 100%;
    flex: 1 1 auto;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
    will-change: transform;
}
/* focus blijft werken via inline style */
/* 1 image */
.cluster--1 .cluster-item {
    flex: 0 0 100%;
}
/* 2 images */
.cluster--2 .cluster-item {
    flex: 0 0 50%;
}
/* 3 images */
.cluster--3 .cluster-item {
    flex: 0 0 33.333%;
}
/* 4 images */
.cluster--4 .cluster-item {
    flex: 0 0 25%;
}
/* hover effect blijft zoals je had */
.tile:hover .cluster-item {
    transform: scale(1.05);
}
/* =========================
   TILE MEDIA (IMAGE)
========================= */
.tile-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.tile-media-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease;
    transform: scale(1);
    will-change: transform;
}
/* zoom effect */
.tile:hover .tile-media-inner {
    transform: scale(1.08);
}
/* dark overlay */
.tile-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
}
.tile:hover .tile-media::after {
    background: rgba(0, 0, 0, 0.15);
}
.tile-title {
    position: relative;
    margin: 0;
    flex-shrink: 0;
    color: #fff;
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.3rem;
}
/* overlay */
.tile-tagline {
    position: relative;
    
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
}
/* zoom op  agenda tiles S en M hover*/
.agenda-tile.tile--s .tile-content, .agenda-tile.tile--m .tile-content {
    transition: transform 0.25s ease;
}
.agenda-tile.tile--s:hover .tile-content, .agenda-tile.tile--m:hover .tile-content {
    transform: translateY(-2px) scale(1.01);
    transform-origin: center;
}
/* =========================
READ MORE & Excerpt
========================= */
.tile-excerpt-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: start; /*  verticale positie */
    min-height: 0;
}
.tile-excerpt {}
.tile-excerpt {
    width: 100%;
    display: block;
    margin-top: 5px;
    margin-bottom: 15px;
    min-height: 50px;
    ;
    overflow: hidden;
    line-height: 1.6;
}
.tile-readmore {
    margin-top: 5px;
    display: block;
    font-weight: 600;
    white-space: nowrap;
}
.excerpt-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 8; /* desktop */
}
.tile--m .excerpt-text {
    -webkit-line-clamp: 2; /* desktop */
}
.tile--l .excerpt-text {
    -webkit-line-clamp: 8; /* desktop */
}
/* lg en kleiner (≤ 992px) */
@media (max-width: 991.98px) {
    .tile--m .excerpt-text {
        -webkit-line-clamp: 2;
    }
    .tile--l .excerpt-text {
        -webkit-line-clamp: 6;
    }
}
/* md en kleiner (≤ 768px) */
@media (max-width: 767.98px) {
    .tile--m .excerpt-text {
        -webkit-line-clamp: 3;
    }
    .tile--l .excerpt-text {
        -webkit-line-clamp: 10;
    }
}
/* sm en kleiner (≤ 576px) */
@media (max-width: 575.98px) {
    .tile--m .excerpt-text {
        -webkit-line-clamp: 3;
    }
    .tile--l .excerpt-text {
        -webkit-line-clamp: 10;
    }
}
.read-more-link {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: #000;
}
.read-more-link:hover {
    text-decoration: underline;
}
/* =========================
   L / M / S SIZES
========================= */
.tile--l {
    grid-column: span 2;
    grid-row: span 2;
}
.tile--m {
    grid-column: span 1;
    grid-row: span 2;
}
.tile--s {
    grid-column: span 1;
    grid-row: span 1;
}
/* =========================
   DEBUG (optioneel)
========================= */
.tile-debug {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 50;
    background: rgba(0, 0, 0, 0.85);
    color: #0f0;
    font-size: 11px;
    padding: 6px;
    border-radius: 4px;
    max-width: 180px;
    pointer-events: none;
    white-space: pre;
}
/* =========================
   PAGES
========================= */
.title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.4rem;
    row-gap: 0rem;
}
.maker-klein {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--white);
    background-color: var(--black);
    padding: 2px 8px;
    margin: 2px;
    border: 1px solid var(--black);
    transition:
        background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.maker-klein-inv {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1rem;
    color: var(--black);
    background-color: var(--white);
    padding: 2px 8px;
    margin: 2px;
    border: 1px solid var(--white);
    transition:
        background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.maker-klein:hover {
    color: var(--black);
    background-color: var(--white);
    padding: 2px 8px;
    /* geen underline */
    text-decoration: none;
}
/*  inline  */
.main-title {
    margin: 0;
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1;
    color: var(--black);
}
/* producties */
.titel_follow {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-size: 2rem;
    color: var(--black);
    white-space: normal; /* allow wrap */
    word-break: break-word; /* force safe breaking */
    line-height: 1;
    margin: 0;
}
.starttijd {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-size: 2rem; /* exact main-title */
    font-weight: 800;
    color: var(--black);
    line-height: 1;
    white-space: nowrap;
}
.weight-400 {
    font-weight: 400 !important;
}
.weight-800 {
    font-weight: 800 !important;
}
/* pipe separators automatisch via CSS */
.maker-title-line > *:not(:last-child)::after {
    content: " |";
    margin-left: 0.4rem;
    opacity: 0.6;
}
.productie-titel {
    font-family: 'Bovine Round';
    line-height: 1;
    margin-bottom: 0px;
    font-size: 1.2rem;
}
.agenda-card > .col-md-4 {
    display: flex;
    flex-direction: column;
}
.agenda-col {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
}
.agenda-partners-right {
    margin-top: auto;
    align-self: flex-end;
    text-align: right;
}
.agenda-partner-card {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
/* LOGO */
.agenda-partner-logo img {
    width: 80px;
    margin-right: 40px;
    height: auto;
    display: block;
}
/* CONTACT ROW (adres + map) */
.partner-contact-row {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 10px;
}
/* ADRES BLOK */
.partner-adres {
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--gray-300);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
}
/* MAP ICON BLOK */
.partner-map-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: var(--gray-300);
    text-decoration: none;
}
.partner-map-box i {
    font-size: 1.2rem;
    line-height: 1;
}
.partner-map-box:hover {
    opacity: 0.6;
}
.agenda-productie-square {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    overflow: hidden;
    border-radius: 10px;
}
/* item */
.agenda-productie-item {
    flex: 1;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}
/* gele scheidingslijn tussen meerdere producties */
.agenda-productie-item + .agenda-productie-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: var(--primary);
    z-index: 1;
    pointer-events: none;
}
/* image */
.agenda-productie-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.4s ease;
}
/* overlay */
.agenda-productie-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.0);
    transition: background 0.3s ease;
}
.agenda-productie-overlay span {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 800;
    color: var(--white);
    background-color: var(--black);
    width: 100%;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(10px);
    transition: 0.3s ease;
    text-align: center;
    margin-bottom: 1rem;
}
/* HOVER EFFECT */
.agenda-productie-item:hover .agenda-productie-bg {
    transform: scale(1.08);
}
.agenda-productie-item:hover .agenda-productie-overlay {
    background: rgba(0, 0, 0, 0.35);
}
.agenda-productie-item:hover .agenda-productie-overlay span {
    opacity: 1;
    transform: translateY(0);
}
/* -----------------IMAGE----------------- */
.focus-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ----------------- Productie + Maker blok ----------------- */
/* wrapper */
.productie-blok, .maker-blok {
    display: block;
    text-decoration: none;
}
/* inner container */
.productie-blok-inner, .maker-blok-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* hover effect */
.productie-blok-inner:hover, .maker-blok-inner:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
/* overlay */
.productie-blok-overlay, .maker-blok-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
}
/* title base */
.productie-blok-title, .maker-blok-title {
    font-size: 1.4rem;
    font-family: 'Bovine Round';
    text-transform: uppercase;
    color: var(--white);
    position: relative;
    display: inline-block;
    z-index: 1;
    margin-left: 0;
}
/* streep effect (nu voor beide gelijk) */
.productie-blok-title::before, .maker-blok-title::before {
    content: "";
    position: absolute;
    top: -0.5em;
    bottom: -0.3em;
    left: -2em;
    right: -2em;
    background-image: url("../images/streep-stormram.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: -1;
    pointer-events: none;
}
/* -----------------AGENDA----------------- */
.agenda-titel {
    font-family: 'Bovine Round';
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1em;
    font-weight: 200;
    padding: 0em;
    margin: 0em;
}
.agenda-titelLocatie {
    font-weight: 400;
}
.agenda-datum {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 1em;
    font-weight: 700;
    padding: 0em;
    margin: 0em;
}
.agenda-makers {
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    background-color: var(--gray-600);
    color: var(--primary);
    position: relative;
    display: inline-block;
    z-index: 1;
    padding-left: .4em;
    padding-right: .4em;
    padding-top: 0em;
    margin-top: 0em;
}
/*   EVENT STATUS OVERLAY */
.agenda-wrapper {
    position: relative;
}
/* overlay voor status-uitleg */
.agenda-overlay {
    position: absolute;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}
.agenda-warning {
    pointer-events: auto;
    background: rgba(15, 15, 16, 0.95);
    color: #fff;
    padding: 20px;
    max-width: 420px;
    text-align: center;
    border: 2px solid #fff;
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
}
/*    UITVERKOCHT */
.sold-out-block {
    background: var(--black);
    color: var(--white);
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    font-weight: 800;
    padding: 10px 14px;
    display: inline-block;
}
/*    GEANNULEERD */
.agenda-card.is-cancelled {
    position: relative;
    padding: 1rem;
    isolation: isolate;
}
/* zachte dim, geen zware grijze plaat */
.agenda-card.is-cancelled::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 16, 0.35);
    border-radius: 0.375rem;
    backdrop-filter: grayscale(1) blur(1px);
    z-index: 10;
    pointer-events: none;
}
/* centrale status badge */
.agenda-card.is-cancelled::after {
    content: "GEANNULEERD";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    font-family: 'Bebas Neue Pro';
    font-size: 2rem;
    letter-spacing: 2px;
    background: rgba(15, 15, 16, 0.95);
    color: var(--white);
    padding: 14px 22px;
    border: 2px solid var(--primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.agenda-cancel-warning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 15, 16, 0.95);
    color: var(--white);
    padding: 20px;
    z-index: 11;
    text-align: center;
    max-width: 320px;
    font-family: 'Bebas Neue Pro';
    text-transform: uppercase;
    letter-spacing: 1px;
}
.agenda-cancel-warning strong {
    display: block;
    font-size: 1.4rem;
    margin-bottom: 10px;
}
/* Binnenkort */
.agenda-status-soon {
    color: var(--gray-500);
}
.agenda-warning-box {
    position: relative;
    z-index: 30;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--black);
    color: var(--black);
    padding: 16px 18px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.agenda-card.is-cancelled a, .agenda-card.is-cancelled button {
    pointer-events: none;
}
/* ========================= 
PARTNERS 
========================= */
/*    MASONRY LAYOUT */
.partner-masonry {
    column-count: 3;
    column-gap: 1.5rem;
}
@media (max-width: 992px) {
    .partner-masonry {
        column-count: 2;
    }
}
@media (max-width: 576px) {
    .partner-masonry {
        column-count: 1;
    }
}
.partner-card {
    width: 100%;
    margin-bottom: 1.5rem;
    break-inside: avoid;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
/*   LOGO BLOCK (fixed height) */
.partner-logo {
    min-width: 120px;
    min-height: 60px;
}
.partner-logo-wrap {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #fafafa;
}
.partner-logo-wrap img, .partner-logo-wrap svg {
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}
.partner-body {
    padding: 15px;
}
.partner-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.partner-text.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================
  FOOTER
========================= */
.site-footer {
	background-color: var(--white);
}
.footer-logo {
	position:relative;
	top: -55px;
}
.footer-logo-img {
	max-width:150px;
}

.shortcuts-navdiv .footer-nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.shortcuts-navdiv .footer-nav li {
    margin: 0;
}

.shortcuts-navdiv .footer-nav li a {
    padding: 0;
    display: inline-block;
}

.shortcuts-navdiv .footer-nav li a::before {
    content: ">";
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s ease;
}

.shortcuts-navdiv .footer-nav li a:hover::before {
    transform: translateX(3px);
}
.shortcuts-navdiv .footer-nav li a {
    display: inline-block;
    padding: 0;
	text-decoration: none;
}

.shortcuts-navdiv .footer-nav li a::before {
    content: ">";
    display: inline-block;
    margin-right: 8px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.shortcuts-navdiv .footer-nav li a:hover::before {
    transform: translateX(3px);
}
/* -----------------------------------------Video Embed-------------------------------------- */
.video-embed-wrapper { position: relative; }

/* zorg dat Plyr's video volledig binnen zijn eigen ratio-box blijft */
.plyr__video-embed,
.plyr__video-embed iframe {
    width: 100%;
}
.video-embed-header {
    margin-top: -3rem;
	margin-bottom: 3rem;
}

.video-embed-page   {
    
	margin-bottom: 1rem;
}
.video-embed-wrapper .video-external-link {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 3;
    opacity: 0;
    transition: opacity .2s ease;
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: .25rem .6rem;
    border-radius: .25rem;
    font-size: .75rem;
    text-decoration: none;
}
.video-embed-wrapper:hover .video-external-link,
.video-embed-wrapper:focus-within .video-external-link,
.video-embed-wrapper.is-active .video-external-link {
    opacity: 1;
}

/* alleen play + voortgangsbalk, geen volume/instellingen/fullscreen */
.plyr--video .plyr__controls {
    background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
    padding: .5rem;
}


/* -----------------------------------------Wordpress overrides-------------------------------------- */
/* Verwijder de standaard Gutenberg padding */
.wp-block-media-text__content {
    padding: 0;
}
/* Afbeelding links */
.wp-block-media-text.has-media-on-the-left .wp-block-media-text__content {
    padding-left: var(--bs-gutter-x);
    padding-right: 0;
}
/* Afbeelding rechts */
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-right: var(--bs-gutter-x);
    padding-left: 0;
}
/* --------------------Adaptive embed--------------------------- */
.wp-block-embed__wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 ratio; bereken zelf: (height / width) * 100 */
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* -----------------------------------------Bootstrap overrides-------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--black);
    --bs-btn-border-color: var(--black);
    --bs-btn-hover-bg: var(--gray-500);
    --bs-btn-hover-border-color: var(--gray-500);
}
.btn-secondary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--black);
    --bs-btn-hover-border-color: var(--black);
}
.btn-light {
    --bs-btn-bg: var(--primary-Focus);
    --bs-btn-border-color: var(--primary-Focus);
    color: var(--white);
    font-size: 1.5rem;
    animation: btn-pulse 2s ease-in-out infinite;
}

@keyframes btn-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.55);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(255, 0, 128, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 128, 0);
    }
}
.btn-dark {
    --bs-btn-bg: var(--black);
    --bs-btn-border-color: var(--gray-600);
	
}
.btn-dark:link {
	color:var(--white)!important;
	text-decoration: none;
}
.maker-klein {
	color:var(--white)!important;
}
.maker-klein:hover {
	color:var(--black)!important;
}