/* ================================
   PROJECT PAGES — CLEAN BASE
   Scope alles binnen .project-single
   ================================ */

.project-single {
  --content-w: 1100px;
  --gap: 1.25rem;
  /* thema-variabelen + fallbacks */
  --accent-1: var(--wp--preset--color--accent-1, #2b8db1);
  --accent-2: var(--wp--preset--color--accent-2, #e5522b);
  --accent-4: var(--wp--preset--color--accent-4, #D9E5EA);
  --font-ui: var(--wp--preset--font-family--source-sans-3, "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/* Links: underline overal; visited in brand */
.project-single a { text-decoration: underline; }
.project-single a:visited { color: var(--accent-1); }

/* ---------- Pre-hero titelblok ---------- */
 .project-single .project-header {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 3rem var(--gap) 0; /* extra ruimte boven titel */
  margin-bottom: 2rem;        /* extra ruimte tussen one-liner en hero */
} 

.project-single .project-header h1 { margin: .25rem 0 0; line-height: 1.15; }
.project-single .project-header .one-liner{
  color: var(--accent-2);
  font-family: var(--font-ui);
  font-weight: 500;           /* 300 te licht -> 500 */
  font-size: inherit;         /* exact p-grootte van theme */
  line-height: 1.5;
  margin-top: .4rem;
}

/* ---------- Full-bleed hero met achtergrond ---------- */
.project-single .project-hero.hero-bg{
  background: var(--accent-4);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  padding: 0;
}

/* Binnenkant hero: 2 kolommen (video | highlights) */
.project-single .project-hero .hero-inner{
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 1.25rem var(--gap);
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center; /* highlights verticaal centreren t.o.v. video */
}

/* Media wrapper + ratio’s */
.project-single .project-hero .hero-media .ratio{ position: relative; width: 100%; overflow: hidden; border-radius: 14px; }
.project-single .project-hero .hero-media .ratio > iframe,
.project-single .project-hero .hero-media .ratio > video{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; border-radius: 0.5rem; }

/* Ratio utilities */
.project-single .project-hero .ratio{ width:100%; overflow:hidden; }
.project-single .project-hero .ratio.r-16x9{ aspect-ratio: 16/9; }
.project-single .project-hero .ratio.r-21x9{ aspect-ratio: 21/9; }
.project-single .project-hero .ratio.r-4x3 { aspect-ratio: 4/3;  }
.project-single .project-hero .ratio.r-1x1 { aspect-ratio: 1/1;  }
.project-single .project-hero .ratio.r-9x16{ aspect-ratio: 9/16; }
.project-single .project-hero .ratio.fit-cover  > video{ object-fit: cover; }
.project-single .project-hero .ratio.fit-contain > video{ object-fit: contain; background: #000; }

/* Mute-toggle overlay: init boven iframe; JS zet pointer-events terug */
.project-single .project-hero .hero-media .ratio iframe { pointer-events: none; }
.project-single .project-hero .hero-media .ratio .mute-toggle{
  position: absolute; left: .75rem; bottom: .75rem;
  z-index: 999; pointer-events: auto;
  width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.project-single .project-hero .hero-media .ratio .mute-toggle:focus-visible{
  outline: 2px solid currentColor; outline-offset: 2px;
}

/* Highlights rechts: bullets, geen pills */
.project-single .hero-highlights ul.highlights{ list-style: disc; margin: 0; padding-left: 1.25rem; }
.project-single .hero-highlights ul.highlights li{
  color: var(--accent-1);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.125rem; /* nét groter dan body */
  line-height: 1.5;
  margin: .35rem 0;
  /* hard pill-stijlen uitzetten (legacy) */
  border: 0 !important; border-radius: 0 !important; background: none !important; padding: 0 !important;
}

/* CTA naast video: gewone link met ↗ */
.project-single a.hero-cta{
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent-1);
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: underline;
  border: 0; padding: 0; background: transparent;
}
.project-single a.hero-cta::after{ content: " ↗"; }

/* ---------- Body sectie ---------- */
.project-single .project-body{
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 1rem var(--gap);
}
.project-single .project-body h2{ margin: 2.2rem 0 .6rem; line-height: 1.2; }
.project-single .project-body .bullets{ margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; }
.project-single .project-body .bullets li{ margin: .15rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .project-single .project-hero .hero-inner{ grid-template-columns: 1fr; }
  .project-single .project-header{ padding-top: 2.25rem; }
}

.single-project .why,
.single-project .how,
.single-project .what,
.single-project .leverage { margin: 1rem 0 2rem; }
.single-project .what-src { margin-top: .5rem; opacity: .8; }

.single-project .what a {
  margin-left: 0.25em;
}