/* =====================================================
   STUDIO SAPORITO 2.0
   Vormgeving nieuwe startpagina
   ===================================================== */


/* 1. Algemene basis */

body {
    background-color: #F7F6F2;
    color: #343B43;
    line-height: 1.7;
}


/* 2. Koppen */

h1,
h2,
h3,
h4 {
    color: #24364B;
    line-height: 1.25;
    font-weight: 600;
}


/* 3. Links */

a {
    color: #176B87;
    text-underline-offset: 3px;
}

a:hover {
    color: #E83E82;
    text-decoration-thickness: 2px;
}


/* 4. Header en navigatie */

.container-header {
    background-color: #24364B;
    background-image: none;
}

.container-header .mod-menu a,
.container-header .navbar a {
    color: #FFFFFF;
}

.container-header .mod-menu a:hover,
.container-header .navbar a:hover {
    color: #F3A6C7;
}


/* 5. Algemene inhoudsblokken en knoppen */

.card {
    border: 1px solid #E5E1D8;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(36, 54, 75, 0.05);
}

.btn {
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.card img {
    border-radius: 8px;
}


/* 6. Startpagina: typografie */

.saporito-home h1 {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
}

.saporito-home h2 {
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 2.8rem;
    margin-bottom: 1rem;
}

.saporito-home h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 0.65rem;
}

.saporito-home p {
    max-width: 72ch;
    line-height: 1.75;
    margin-bottom: 1rem;
}


/* 7. De vijf pijlers */

.saporito-home .saporito-pijlers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    margin: 2rem 0 3rem;
}

.saporito-home .saporito-pijler {
    background: #FFFFFF;
    border: 1px solid #E5E1D8;
    border-top: 5px solid #176B87;
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: 0 3px 12px rgba(36, 54, 75, 0.05);
}

.saporito-home .saporito-pijler h3 {
    margin-top: 0;
    color: #24364B;
}

.saporito-home .saporito-pijler p {
    margin-bottom: 0;
}

.saporito-home .saporito-pijler.talent {
    border-top-color: #E83E82;
}

.saporito-home .saporito-pijler.productie {
    border-top-color: #176B87;
}

.saporito-home .saporito-pijler.muziek {
    border-top-color: #D99A28;
}

.saporito-home .saporito-pijler.digitaal-gezond {
    border-top-color: #64876B;
}

.saporito-home .saporito-pijler.innovatie {
    border-top-color: #8B78B8;
}


/* 8. De vier YouTube-kanalen */

.saporito-home .saporito-kanalen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin: 2rem 0;
}

.saporito-home .saporito-kanaal {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E5E1D8;
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: 0 3px 12px rgba(36, 54, 75, 0.05);
}

.saporito-home .saporito-kanaal h3 {
    color: #24364B;
    margin-top: 0;
}

.saporito-home .saporito-kanaal p {
    margin-bottom: 0;
}


/* 9. Persoonlijk blok: Over Studio Saporito */

.saporito-home .saporito-over {
    margin: 3rem 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: #EEECE5;
    border-radius: 16px;
    border-left: 5px solid #E83E82;
}

.saporito-home .saporito-over h2 {
    margin-top: 0;
}

.saporito-home .saporito-over p {
    max-width: 68ch;
}

.saporito-home .saporito-over .saporito-slotzin {
    margin-top: 1.5rem;
    color: #24364B;
    font-size: 1.1rem;
}


/* 10. Tablet */

@media (max-width: 900px) {
    .saporito-home .saporito-kanalen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .saporito-home .saporito-pijlers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* 11. Mobiel */

@media (max-width: 520px) {
    .saporito-home .saporito-pijlers,
    .saporito-home .saporito-kanalen {
        grid-template-columns: 1fr;
    }
}


/* 12. Minder beweging respecteren */

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}


/* =====================================================
   STUDIO SAPORITO 2.0
   Talentpagina
   ===================================================== */


/* Studio Saporito 2.0 — Talentpagina */

.saporito-talent {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.saporito-talent h1 {
    color: #24364B;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -0.035em;
    margin: 0 0 1rem;
}

.saporito-talent h2 {
    color: #24364B;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.2;
    font-weight: 700;
    margin: 2.4rem 0 1rem;
}

.saporito-talent p {
    max-width: 85ch;
    line-height: 1.75;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .saporito-talent {
        padding: 0.5rem 0 2rem;
    }
}



/* Studio Saporito 2.0 — Nieuws & Projecten */

.saporito-projecten {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.saporito-projecten h1 {
    color: #24364B;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
}

.saporito-projecten h2 {
    color: #24364B;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.2;
    font-weight: 700;
    margin-top: 2.4rem;
    margin-bottom: 1rem;
}

.saporito-projecten p {
    max-width: 85ch;
    line-height: 1.75;
    margin-bottom: 1rem;
}


/* Nieuws & Projecten — vier YouTube-kaarten */

.saporito-projecten .saporito-kanalen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
    margin: 2rem 0;
}

.saporito-projecten .saporito-kanaal {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.4rem;
    background: #FFFFFF;
    border: 1px solid #E5E1D8;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(36, 54, 75, 0.05);
}

.saporito-projecten .saporito-kanaal h3 {
    margin-top: 0;
    color: #24364B;
    overflow-wrap: anywhere;
}

.saporito-projecten .saporito-kanaal p {
    margin-bottom: 0;
}

@media (max-width: 1000px) {
    .saporito-projecten .saporito-kanalen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .saporito-projecten .saporito-kanalen {
        grid-template-columns: 1fr;
    }
}


/* YouTube-kaarten — accentkleuren zoals op de startpagina */

.saporito-projecten .saporito-kanaal {
    border-top: 5px solid #176B87;
}

/* Studio Saporito — roze */
.saporito-projecten .saporito-kanaal:nth-child(1) {
    border-top-color: #E83E82;
}

/* PretparkMagie — blauw */
.saporito-projecten .saporito-kanaal:nth-child(2) {
    border-top-color: #176B87;
}

/* Zelf Wijn Maken — goud */
.saporito-projecten .saporito-kanaal:nth-child(3) {
    border-top-color: #D99A28;
}

/* Saporito Music Production — groen */
.saporito-projecten .saporito-kanaal:nth-child(4) {
    border-top-color: #64876B;
}


/* =====================================================
   STUDIO SAPORITO 2.0 — SUBMENU'S
   Achtergrond: warm gebroken wit
   Tekst: donker petrol
   Hover/actief: zacht groen
   ===================================================== */

/* Achtergrond en vorm van het uitklapmenu */
.container-header .mod-menu .metismenu-item > ul,
.container-header .mod-menu .metismenu-item > .mod-menu__sub,
.container-header .mod-menu .mm-collapse {
    background-color: #F1EBDD;
    border: 1px solid #E5E1D8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(36, 54, 75, 0.12);
    overflow: hidden;
}

/* Tekstkleur en ruimte rond submenu-links */
.container-header .mod-menu .metismenu-item > ul a,
.container-header .mod-menu .metismenu-item > .mod-menu__sub a,
.container-header .mod-menu .mm-collapse a {
    color: #263F46;
    padding: 0.65rem 1rem;
}

/* Hover en toetsenbordfocus */
.container-header .mod-menu .metismenu-item > ul a:hover,
.container-header .mod-menu .metismenu-item > .mod-menu__sub a:hover,
.container-header .mod-menu .mm-collapse a:hover,
.container-header .mod-menu .metismenu-item > ul a:focus-visible,
.container-header .mod-menu .metismenu-item > .mod-menu__sub a:focus-visible,
.container-header .mod-menu .mm-collapse a:focus-visible {
    color: #263F46;
    background-color: #D9E6DF;
}

/* Actieve menuoptie */
.container-header .mod-menu .metismenu-item > ul .current > a,
.container-header .mod-menu .metismenu-item > .mod-menu__sub .current > a,
.container-header .mod-menu .mm-collapse .current > a,
.container-header .mod-menu a[aria-current="page"] {
    color: #263F46;
    background-color: #D9E6DF;
}


/* Studio Saporito 2.0 — rand om uitklapmenu's */

.container-header .mod-menu .metismenu-item > ul,
.container-header .mod-menu .metismenu-item > .mod-menu__sub,
.container-header .mod-menu .mm-collapse {
    border: 1px solid #E5E1D8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(36, 54, 75, 0.12);
    overflow: hidden;
}

/* Ruimte rondom de submenu-links */
.container-header .mod-menu .metismenu-item > ul a,
.container-header .mod-menu .metismenu-item > .mod-menu__sub a,
.container-header .mod-menu .mm-collapse a {
    padding: 0.65rem 1rem;
}


/* ==========================================
   STUDIO SAPORITO 2.0 — PROJECTOVERZICHT
   ========================================== */

.saporito-projectoverzicht {
  --sp-navy: #24364B;
  --sp-cream: #F1EBDD;
  --sp-petrol: #263F46;
  --sp-green: #D9E6DF;
  --sp-border: #E5E1D8;

  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 60px;
  color: var(--sp-navy);
}

.saporito-projectoverzicht .saporito-projectintro {
  max-width: 780px;
  margin: 0 auto 48px;
}

.saporito-projectoverzicht .saporito-projectlabel {
  margin-bottom: 10px;
  color: #64876B;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saporito-projectoverzicht h1 {
  margin-bottom: 18px;
  color: var(--sp-navy);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.1;
}

.saporito-projectoverzicht h2 {
  margin: 0 0 10px;
  color: var(--sp-navy);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.saporito-projectoverzicht h3 {
  margin: 14px 0 8px;
  color: var(--sp-navy);
  font-size: 1.4rem;
}

.saporito-projectoverzicht p {
  line-height: 1.75;
}

.saporito-projectoverzicht .saporito-projectondertitel {
  color: var(--sp-petrol);
  font-size: 1.1rem;
  font-weight: 600;
}

.saporito-projectoverzicht .saporito-groepsintro {
  margin-bottom: 24px;
}

.saporito-projectoverzicht .saporito-projectgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.saporito-projectoverzicht .saporito-projectkaart {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(36, 54, 75, 0.06);
}

.saporito-projectoverzicht .saporito-projectstatus {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.saporito-projectoverzicht .saporito-projectstatus.actief {
  background: var(--sp-green);
  color: var(--sp-petrol);
}

.saporito-projectoverzicht .saporito-projectlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.saporito-projectoverzicht .saporito-projectlinks a {
  display: inline-block;
  padding: 9px 14px;
  color: var(--sp-navy);
  background: var(--sp-cream);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.saporito-projectoverzicht .saporito-projectlinks a:hover {
  background: var(--sp-green);
  text-decoration: underline;
}

@media (max-width: 700px) {
  .saporito-projectoverzicht {
    padding: 24px 16px 40px;
  }

  .saporito-projectoverzicht .saporito-projectgrid {
    grid-template-columns: 1fr;
  }

  .saporito-projectoverzicht .saporito-projectkaart {
    padding: 22px;
  }
}


/* Statuskleuren projectoverzicht */

.saporito-projectoverzicht .saporito-projectstatus.ontwikkeling {
  background: #F7E7C7;
  color: #76521C;
}

.saporito-projectoverzicht .saporito-projectstatus.toekomst {
  background: #E9E2F3;
  color: #5B477C;
}

.saporito-projectoverzicht .saporito-projectgroep {
  margin-bottom: 52px;
}

.saporito-projectoverzicht .saporito-projectgroep:last-child {
  margin-bottom: 0;
}


/* Subtiel accent aan de bovenkant van projectkaarten */


/* Speelse accentkleuren per projectgroep */

.saporito-projectoverzicht .saporito-projectkaart {
  border-top: 4px solid #263F46;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Actieve projecten — petrol */
.saporito-projectoverzicht
.saporito-projectgroep:nth-of-type(1)
.saporito-projectkaart {
  border-top-color: #176B87;
}

/* Projecten in ontwikkeling — warm oranje */
.saporito-projectoverzicht
.saporito-projectgroep:nth-of-type(2)
.saporito-projectkaart {
  border-top-color: #D99A28;
}

/* Toekomstplannen — paars */
.saporito-projectoverzicht
.saporito-projectgroep:nth-of-type(3)
.saporito-projectkaart {
  border-top-color: #8B78B8;
}

/* Subtiel bewegingseffect bij aanwijzen */
@media (hover: hover) {
  .saporito-projectoverzicht .saporito-projectkaart:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 24px rgba(36, 54, 75, 0.10);
  }
}



/* Studio Saporito 2.0 — banner centreren en gelijke hoogte */

/* Desktop */
.container-header .navbar-brand {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
}

.container-header .navbar-brand img {
  display: block;
  width: 100%;
  max-height: 240px;
  height: 240px;
  object-fit: cover;
  object-position: center;
  margin-inline: auto;
}

/* Tablet */
@media (max-width: 991px) {
  .container-header .navbar-brand img {
    height: 200px;
    max-height: 200px;
  }
}

/* Mobiel */
@media (max-width: 600px) {
  .container-header .navbar-brand img {
    height: 140px;
    max-height: 140px;
  }
}

/* Studio Saporito 2.0 – ontwikkelingsblok */
.saporito-ontwikkeling {
  margin: 30px 0;
  padding: 26px 28px;
  background: #f8f6f1;
  border: 1px solid #d99a28;
  border-left: 5px solid #d99a28;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
}

.saporito-ontwikkeling h2 {
  margin-top: 0;
}

.saporito-ontwikkeling p:last-child {
  margin-bottom: 0;
}

.saporito-ontwikkeling .saporito-projectlink {
  display: inline-block;
  margin-top: 4px;
  padding: 10px 16px;
  border: 1px solid #d99a28;
  border-radius: 6px;
  color: #60420c;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.saporito-ontwikkeling .saporito-projectlink:hover {
  background: #d99a28;
  color: #ffffff;
}

@media (max-width: 600px) {
  .saporito-ontwikkeling {
    padding: 20px;
  }
}

/* Startpagina — gekleurde kaarten per hoofdstuk */
.saporito-home .saporito-hoofdstuk {
  margin: 30px 0;
  padding: 24px 28px;
  background: #FFFFFF;
  border: 1px solid #E5E1D8;
  border-left: 5px solid #176B87;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(36, 54, 75, 0.05);
}

.saporito-home .saporito-hoofdstuk h2 {
  margin-top: 0;
}

/* Introductie — roze */
.saporito-home .saporito-intro {
  border-left-color: #E83E82;
}

/* Vijf pijlers — petrolblauw */
.saporito-home .saporito-pijlers-blok {
  border-left-color: #176B87;
}

/* Projecten — warm oranje */
.saporito-home .saporito-projecten-blok {
  border-left-color: #D99A28;
}

/* YouTube — groen */
.saporito-home .saporito-youtube-blok {
  border-left-color: #64876B;
}

/* Ontdek en contact — paars */
.saporito-home .saporito-contact-blok {
  border-left-color: #8B78B8;
}

/* Mobiele weergave */
@media (max-width: 600px) {
  .saporito-home .saporito-hoofdstuk {
    padding: 20px;
    margin: 22px 0;
  }
}


/* =====================================================
   STUDIO SAPORITO 2.0 — WARME BASISSTIJL
   ===================================================== */

/* Warme achtergrond voor de hoofdstukken op de startpagina */
.saporito-home .saporito-hoofdstuk {
  background: #FBF9F4;
}

/* Warme achtergrond voor de vijf pijlers */
.saporito-home .saporito-pijler {
  background: #F7F3EA;
}

/* Warme achtergrond voor de vier YouTube-kaarten */
.saporito-home .saporito-kanaal {
  background: #F7F3EA;
  border-top: 5px solid #176B87;
}

/* Eigen accentkleur per YouTube-kanaal */
.saporito-home .saporito-kanaal:nth-child(1) {
  border-top-color: #E83E82;
}

.saporito-home .saporito-kanaal:nth-child(2) {
  border-top-color: #176B87;
}

.saporito-home .saporito-kanaal:nth-child(3) {
  border-top-color: #D99A28;
}

.saporito-home .saporito-kanaal:nth-child(4) {
  border-top-color: #64876B;
}

/* Warme achtergrond voor het ontwikkelingsblok */
.saporito-home .saporito-ontwikkeling {
  background: #FBF5E9;
}

/* =====================================================
   ARTIKELEN — WARME, RUSTIGE BASIS
   ===================================================== */

.com-content-article {
  background: #FBF9F4;
  border: 1px solid #E5E1D8;
  border-radius: 12px;
  padding: clamp(20px, 3vw, 36px);
}

/* Op kleine schermen minder binnenruimte */
@media (max-width: 600px) {
  .com-content-article {
    padding: 18px;
  }
}


/* =====================================================
   STUDIO SAPORITO 2.0 — PROJECTEN EN NIEUWS
   Warme, samenhangende vormgeving
   ===================================================== */

.saporito-projectoverzicht {
  background: #FBF9F4;
  border-radius: 16px;
}

/* Ruimte en warme achtergrond voor projectgroepen */
.saporito-projectoverzicht .saporito-projectgroep {
  padding: 24px;
  background: #F7F3EA;
  border: 1px solid #E5E1D8;
  border-radius: 14px;
}

/* Projectkaarten */
.saporito-projectoverzicht .saporito-projectkaart {
  background: #FBF9F4;
  border: 1px solid #E5E1D8;
  border-top: 4px solid #176B87;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(36, 54, 75, 0.05);
}

/* Actieve projecten — petrolblauw */
.saporito-projectoverzicht
.saporito-projectgroep:nth-of-type(1)
.saporito-projectkaart {
  border-top-color: #176B87;
}

/* Projecten in ontwikkeling — warm oranje */
.saporito-projectoverzicht
.saporito-projectgroep:nth-of-type(2)
.saporito-projectkaart {
  border-top-color: #D99A28;
}

/* Toekomstplannen — paars */
.saporito-projectoverzicht
.saporito-projectgroep:nth-of-type(3)
.saporito-projectkaart {
  border-top-color: #8B78B8;
}

/* Warme projectlinks */
.saporito-projectoverzicht .saporito-projectlinks a {
  background: #F1EBDD;
  border: 1px solid #E5E1D8;
  transition: background-color 0.2s ease,
              transform 0.2s ease;
}

.saporito-projectoverzicht .saporito-projectlinks a:hover {
  background: #D9E6DF;
  transform: translateY(-1px);
}

/* Mobiel */
@media (max-width: 700px) {
  .saporito-projectoverzicht .saporito-projectgroep {
    padding: 16px;
  }
}

/* =====================================================
   STUDIO SAPORITO 2.0 — NIEUWS & PROJECTEN
   Warme blokken per paragraaf
   ===================================================== */

.saporito-projecten {
  padding: 24px;
  background: #FBF9F4;
  border-radius: 16px;
}

/* Koppen */
.saporito-projecten h1 {
  margin-bottom: 24px;
}

.saporito-projecten h2 {
  margin-top: 36px;
}

/* Iedere paragraaf krijgt een eigen blok */
.saporito-projecten > p {
  max-width: 85ch;
  margin: 18px 0;
  padding: 20px 24px;
  background: #F7F3EA;
  border: 1px solid #E5E1D8;
  border-left: 5px solid #176B87;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(36, 54, 75, 0.04);
}

/* Afwisselende kleuraccenten */
.saporito-projecten > p:nth-of-type(3n + 2) {
  border-left-color: #D99A28;
}

.saporito-projecten > p:nth-of-type(3n) {
  border-left-color: #64876B;
}

/* De vier YouTube-kaarten behouden hun eigen kleuren */
.saporito-projecten .saporito-kanaal {
  background: #F7F3EA;
  border-top: 5px solid #176B87;
}

.saporito-projecten .saporito-kanaal:nth-child(1) {
  border-top-color: #E83E82;
}

.saporito-projecten .saporito-kanaal:nth-child(2) {
  border-top-color: #176B87;
}

.saporito-projecten .saporito-kanaal:nth-child(3) {
  border-top-color: #D99A28;
}

.saporito-projecten .saporito-kanaal:nth-child(4) {
  border-top-color: #64876B;
}

/* Mobiele weergave */
@media (max-width: 600px) {
  .saporito-projecten {
    padding: 12px;
  }

  .saporito-projecten > p {
    padding: 16px;
  }
}


/* STUDIO SAPORITO 2.0 — NIEUWSARTIKEL */

.saporito-nieuwsartikel {
  background: #FBF9F4;
  color: #24364B;
  padding: clamp(18px, 3vw, 36px);
  border-radius: 12px;
}

.saporito-nieuwsartikel .saporito-nieuwsbericht {
  max-width: 900px;
  margin: 0 auto;
}

.saporito-nieuwsartikel .saporito-nieuwsdatum {
  display: inline-block;
  color: #176B87;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.saporito-nieuwsartikel h1 {
  color: #24364B;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 24px;
}

.saporito-nieuwsartikel h2,
.saporito-nieuwsartikel h3 {
  color: #176B87;
  line-height: 1.35;
  margin-top: 30px;
  margin-bottom: 12px;
}

.saporito-nieuwsartikel p {
  line-height: 1.8;
  margin-bottom: 18px;
}

.saporito-nieuwsartikel a {
  color: #176B87;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.saporito-nieuwsartikel a:hover {
  color: #E83E82;
}

.saporito-nieuwsartikel strong {
  color: #24364B;
}

@media (max-width: 600px) {
  .saporito-nieuwsartikel {
    padding: 18px;
    border-radius: 8px;
  }

  .saporito-nieuwsartikel h1 {
    font-size: 1.8rem;
  }

  .saporito-nieuwsartikel h2 {
    font-size: 1.35rem;
  }
}

/* STUDIO SAPORITO 2.0 — NIEUWSBRIEF */

.saporito-nieuwsbrief {
  color: #24364B;
  margin: 24px 0;
}

.saporito-nieuwsbrief-datum {
  color: #176B87;
  font-weight: 700;
  margin-bottom: 8px;
}

.saporito-nieuwsbrief > h1 {
  color: #24364B;
  line-height: 1.25;
  margin: 0 0 12px;
}

.saporito-nieuwsbrief-publicatie {
  color: #6D756F;
  font-size: 0.9rem;
  margin-bottom: 26px;
}

.saporito-nieuwsbrief .saporito-nieuws-kaart {
  background: #FBF9F4;
  border: 1px solid #E5E1D8;
  border-top: 5px solid #176B87;
  border-radius: 12px;
  padding: clamp(20px, 3vw, 30px);
  margin: 0 0 22px;
  box-sizing: border-box;
}

.saporito-nieuwsbrief .saporito-nieuws-kaart:nth-of-type(1) {
  border-top-color: #E83E82;
}

.saporito-nieuwsbrief .saporito-nieuws-kaart:nth-of-type(2) {
  border-top-color: #176B87;
}

.saporito-nieuwsbrief .saporito-nieuws-afsluiting {
  background: #FBF5E9;
  border-top-color: #D99A28;
}

.saporito-nieuwsbrief .saporito-nieuws-kaart h2 {
  color: #24364B;
  line-height: 1.35;
  margin: 0 0 16px;
}

.saporito-nieuwsbrief .saporito-nieuws-kaart p {
  line-height: 1.8;
  margin: 0 0 16px;
}

.saporito-nieuwsbrief .saporito-nieuws-kaart p:last-child {
  margin-bottom: 0;
}

.saporito-nieuwsbrief .saporito-nieuws-slogan {
  color: #176B87;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.6;
  padding: 14px 18px;
  background: #F7F3EA;
  border-left: 4px solid #E83E82;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .saporito-nieuwsbrief .saporito-nieuws-kaart {
    padding: 20px;
    margin-bottom: 16px;
  }

  .saporito-nieuwsbrief > h1 {
    font-size: 1.8rem;
  }
}

/* Studio Saporito 2.0 — Productiepagina */

.saporito-productie {
  max-width: 1080px;
  margin: 0 auto;
  color: #343B43;
  line-height: 1.75;
}

.saporito-productie h1,
.saporito-productie h2,
.saporito-productie h3,
.saporito-productie h4 {
  color: #24364B;
  line-height: 1.3;
}

.saporito-productie h1 {
  margin: 0 0 0.4em;
  font-size: clamp(2rem, 4vw, 3rem);
}

.saporito-productie h2 {
  margin: 0 0 0.8em;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.saporito-productie h3 {
  margin: 0 0 0.5em;
  font-size: 1.25rem;
}

.saporito-productie h4 {
  margin: 0 0 0.75em;
  font-size: 1.05rem;
}

.saporito-productie p {
  margin: 0 0 1em;
}

.saporito-productie-intro,
.sp-productie-intro {
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
  background: #F7F6F2;
  border-radius: 12px;
}

.sp-productie-label {
  margin-bottom: 0.6rem;
  color: #6B706E;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sp-productie-lead {
  color: #24364B;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 600;
  line-height: 1.5;
}

.sp-productie-sectie {
  margin: 0 0 2.5rem;
}

.sp-productie-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.sp-productie-item,
.sp-productie-samenhang p,
.sp-productie-kanaal {
  padding: 1.4rem;
  border: 1px solid #E5E1D8;
  border-radius: 12px;
  background: #FFFFFF;
}

.sp-productie-item p,
.sp-productie-samenhang p:last-child,
.sp-productie-kanaal p:last-child {
  margin-bottom: 0;
}

.sp-productie-lijst {
  padding-left: 1.4rem;
}

.sp-productie-lijst li {
  margin-bottom: 0.45rem;
  padding-left: 0.2rem;
}

.sp-productie-accent {
  padding: 1.5rem;
  background: #F7F6F2;
  border-left: 4px solid #C4A77D;
  border-radius: 0 12px 12px 0;
}

.sp-productie-samenhang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.sp-productie-kanalen {
  margin-top: 3rem;
}

.sp-productie-kanalen-intro {
  margin-bottom: 1.5rem;
}

.sp-productie-kanaal {
  margin-bottom: 1rem;
}

.sp-productie-link {
  display: inline-block;
  color: #24364B;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #C4A77D;
  text-underline-offset: 4px;
}

.sp-productie-link:hover,
.sp-productie-link:focus {
  color: #6D5132;
  text-decoration-thickness: 2px;
}

.sp-productie-afsluiting {
  margin-top: 3rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #F7F6F2;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .sp-productie-grid,
  .sp-productie-samenhang {
    grid-template-columns: 1fr;
  }

  .sp-productie-intro,
  .sp-productie-item,
  .sp-productie-kanaal,
  .sp-productie-afsluiting {
    padding: 1.2rem;
  }
}

/* Studio Saporito 2.0 — pijlerkaarten */

.saporito-productie {
  max-width: 1080px;
  margin: 0 auto;
  color: #343B43;
  font-style: italic;
  line-height: 1.75;
}

.saporito-productie h1,
.saporito-productie h2,
.saporito-productie h3,
.saporito-productie h4 {
  color: #24364B;
  line-height: 1.3;
}

.saporito-productie h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 0.4em;
}

.saporito-productie h2 {
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  margin: 0 0 0.8em;
}

.saporito-productie h3 {
  font-size: 1.2rem;
  margin: 0 0 0.6em;
}

.saporito-productie h4 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin: 0 0 0.7em;
}

.saporito-productie p {
  margin: 0 0 1em;
}

.saporito-productie .sp-intro,
.saporito-productie .sp-outro {
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background: #F7F6F2;
  border: 1px solid #E5E1D8;
  border-radius: 14px;
  margin-bottom: 2rem;
}

.saporito-productie .sp-intro {
  text-align: center;
}

.saporito-productie .sp-label {
  color: #65716F;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.saporito-productie .sp-lead {
  color: #397B68;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.5;
}

.saporito-productie .sp-section {
  margin: 0 0 2.5rem;
}

.saporito-productie .sp-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.saporito-productie .sp-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.saporito-productie .sp-card {
  --sp-accent: #00A9B7;
  min-width: 0;
  padding: 1.35rem;
  background: #FFFEFA;
  border: 2px solid var(--sp-accent);
  border-radius: 13px;
  overflow-wrap: anywhere;
}

.saporito-productie .sp-card p:last-child {
  margin-bottom: 0;
}

.saporito-productie .sp-card ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.saporito-productie .sp-card li {
  margin-bottom: 0.45rem;
}

.saporito-productie .sp-cyan {
  --sp-accent: #00A9B7;
}

.saporito-productie .sp-orange {
  --sp-accent: #E98B20;
}

.saporito-productie .sp-pink {
  --sp-accent: #D94B83;
}

.saporito-productie .sp-green {
  --sp-accent: #269B69;
}

.saporito-productie .sp-purple {
  --sp-accent: #8C70C9;
}

.saporito-productie .sp-blue {
  --sp-accent: #168DB4;
}

.saporito-productie .sp-channels {
  margin-top: 3rem;
}

.saporito-productie .sp-channel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saporito-productie .sp-card a {
  color: #006F91;
  font-weight: 700;
  text-underline-offset: 4px;
  text-decoration-color: #C4A77D;
}

.saporito-productie .sp-card a:hover,
.saporito-productie .sp-card a:focus {
  color: #6D5132;
  text-decoration-thickness: 2px;
}

.saporito-productie .sp-outro {
  margin-top: 3rem;
  margin-bottom: 0;
  text-align: center;
}

.saporito-productie .sp-outro .sp-lead {
  color: #24364B;
}

@media (max-width: 850px) {
  .saporito-productie .sp-four,
  .saporito-productie .sp-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .saporito-productie .sp-card-grid,
  .saporito-productie .sp-four,
  .saporito-productie .sp-channel-grid {
    grid-template-columns: 1fr;
  }

  .saporito-productie .sp-card {
    padding: 1.1rem;
  }

  .saporito-productie .sp-intro,
  .saporito-productie .sp-outro {
    padding: 1.25rem;
  }
}

/* =====================================================
   STUDIO SAPORITO 2.0
   Over Studio Saporito — Werkversie 1.4
   Eigen vormgeving voor deze pagina
   ===================================================== */

.saporito-over-studio {
  max-width: 1000px;
  margin: 0 auto;
  color: #343B43;
  line-height: 1.75;
}

.saporito-over-studio h2 {
  color: #24364B;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 1rem;
}

.saporito-over-studio h3 {
  color: #24364B;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0 0 0.7rem;
}

.saporito-over-studio p {
  margin: 0 0 1rem;
}

.saporito-over-studio .saporito-os-intro {
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-bottom: 2rem;
  background: #F7F3EA;
  border: 1px solid #E5E1D8;
  border-left: 5px solid #E83E82;
  border-radius: 12px;
}

.saporito-over-studio .saporito-os-slogan {
  color: #24364B;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.saporito-over-studio .saporito-os-kernzin {
  color: #176B87;
  font-size: 1.1rem;
  font-weight: 600;
}

.saporito-over-studio .saporito-os-sectie {
  margin: 2rem 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #FBF9F4;
  border: 1px solid #E5E1D8;
  border-radius: 12px;
}

.saporito-over-studio .saporito-os-pijlers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.saporito-over-studio .saporito-os-pijler {
  padding: 1.3rem;
  background: #FFFFFF;
  border: 1px solid #E5E1D8;
  border-top: 4px solid #176B87;
  border-radius: 10px;
}

.saporito-over-studio .saporito-os-pijler p:last-child {
  margin-bottom: 0;
}

.saporito-over-studio .saporito-os-pijler.talent {
  border-top-color: #E83E82;
}

.saporito-over-studio .saporito-os-pijler.productie {
  border-top-color: #176B87;
}

.saporito-over-studio .saporito-os-pijler.muziek {
  border-top-color: #D99A28;
}

.saporito-over-studio .saporito-os-pijler.digitaal-gezond {
  border-top-color: #64876B;
}

.saporito-over-studio .saporito-os-pijler.innovatie {
  border-top-color: #8B78B8;
}

.saporito-over-studio .saporito-os-afsluiting {
  background: #F7F3EA;
  border-left: 5px solid #D99A28;
}

.saporito-over-studio .saporito-os-slotzin {
  margin: 1.5rem 0 0;
  color: #24364B;
  font-size: 1.1rem;
  font-weight: 700;
}

@media (max-width: 600px) {
  .saporito-over-studio .saporito-os-pijlers {
    grid-template-columns: 1fr;
  }
}


/* =====================================================
   STUDIO SAPORITO 2.0
   Mensen achter Studio Saporito — Werkversie 1.3
   Warme kaders met gekleurde bovenrand
   ===================================================== */

.saporito-mensen {
  max-width: 1000px;
  margin: 0 auto;
  color: #343B43;
  line-height: 1.75;
}

.saporito-mensen h2 {
  color: #24364B;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.3;
  margin: 0 0 1rem;
}

.saporito-mensen p {
  margin: 0 0 1rem;
}

/* Alle hoofdkaders dezelfde warme achtergrond */
.saporito-mensen .saporito-mensen-intro,
.saporito-mensen .saporito-mensen-sectie {
  margin: 2rem 0;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: #F7F3EA;
  border: 1px solid #E5E1D8;
  border-top: 5px solid #176B87;
  border-radius: 12px;
}

/* Introductiekader */
.saporito-mensen .saporito-mensen-intro {
  margin-top: 0;
  border-top-color: #E83E82;
}

/* Eigen kleuraccent per volgend kader */
.saporito-mensen .saporito-mensen-sectie:nth-of-type(2) {
  border-top-color: #176B87;
}

.saporito-mensen .saporito-mensen-sectie:nth-of-type(3) {
  border-top-color: #D99A28;
}

.saporito-mensen .saporito-mensen-sectie:nth-of-type(4) {
  border-top-color: #64876B;
}

.saporito-mensen .saporito-mensen-sectie:nth-of-type(5) {
  border-top-color: #8B78B8;
}

.saporito-mensen .saporito-mensen-sectie:nth-of-type(6) {
  border-top-color: #E83E82;
}

/* Introductietekst */
.saporito-mensen .saporito-mensen-slogan {
  color: #24364B;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 700;
}

/* Links binnen het Matthis-kader */
.saporito-mensen .saporito-mensen-links {
  margin: 1.2rem 0 1.5rem;
  padding: 1rem 1.3rem;
  background: #FBF9F4;
  border: 1px solid #E5E1D8;
  border-radius: 10px;
}

.saporito-mensen .saporito-mensen-links p:last-child {
  margin-bottom: 0;
}

.saporito-mensen .saporito-mensen-links {
  margin: 1.2rem 0 1.5rem;
  padding: 1rem 1.3rem;
  background: #F7F3EA;
  border: 1px solid #E5E1D8;
  border-radius: 10px;
}

.saporito-mensen .saporito-mensen-links a:hover {
  color: #E83E82;
}

.saporito-mensen .saporito-mensen-slotzin {
  margin-top: 1.5rem;
  color: #24364B;
  font-size: 1.1rem;
  font-weight: 700;
}

@media (max-width: 600px) {
  .saporito-mensen .saporito-mensen-intro,
  .saporito-mensen .saporito-mensen-sectie {
    padding: 1.25rem;
  }
}