/* =====================================================================
   maasstad-child: reviews (CONTRACTEN §10, §17). Alleen onder .msc-reviews.
   In de stijl van de site (zie msc-vacature.css voor de gemeten waarden):
   gecentreerde blauwe sectiekop (Roboto 600 37px/41px), zwarte broodtekst
   Roboto 17px/1.5, geen kaarten met schaduw of afronding: reviews staan als
   citaten naast elkaar, gescheiden door witruimte. Het citaat in de
   weergave "citaat" staat op een volle-breedte blauw vlak met witte tekst,
   zoals het accentblok op /onze-diensten/. Sterren in het geel van de live
   offerteknoppen (#FDB813).
   ===================================================================== */

.msc-reviews {
  --mscr-blauw: var(--e-global-color-primary, #357DC0);
  --mscr-groen: var(--e-global-color-50aace6, #49B46A);
  --mscr-tekst: var(--e-global-color-text, #000000);
  --mscr-wit: var(--e-global-color-a983356, #FFFFFF);
  --mscr-geel: #FDB813;
  --mscr-lijn: #e5e5e5;

  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 40px 0;
  font-family: var(--e-global-typography-text-font-family, "Roboto"), Helvetica, sans-serif;
  font-size: var(--e-global-typography-text-font-size, 17px);
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--mscr-tekst);
}
.msc-reviews *,
.msc-reviews *::before,
.msc-reviews *::after { box-sizing: inherit; }
.msc-reviews ul { margin: 0; padding: 0; list-style: none; }
.msc-reviews p { margin: 0; }

.msc-reviews .msc-reviews__titel {
  margin: 0 0 32px;
  font-family: var(--e-global-typography-secondary-font-family, "Roboto"), Helvetica, sans-serif;
  font-size: var(--e-global-typography-secondary-font-size, 37px);
  font-weight: 600;
  line-height: 41px;
  color: var(--mscr-blauw);
  text-align: center;
}

.msc-reviews .msc-reviews__sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- één review: platte tekst, geen kaart */
.msc-reviews .msc-reviews__review { display: flex; flex-direction: column; gap: 12px; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.msc-reviews .msc-reviews__sterren { font-size: 18px; letter-spacing: 2px; line-height: 1; }
.msc-reviews .msc-reviews__sterren-beeld { color: var(--mscr-geel); }
.msc-reviews .msc-reviews__sterren-leeg { color: var(--mscr-lijn); }
.msc-reviews .msc-reviews__citaat { margin: 0; padding: 0; border: 0; font-style: italic; color: var(--mscr-tekst); quotes: "\201C" "\201D"; }
.msc-reviews .msc-reviews__citaat p::before { content: open-quote; }
.msc-reviews .msc-reviews__citaat p::after { content: close-quote; }
.msc-reviews .msc-reviews__wie { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.msc-reviews .msc-reviews__logo { width: 48px; height: 48px; border-radius: 0; object-fit: contain; flex: none; }
.msc-reviews .msc-reviews__namen { display: flex; flex-direction: column; line-height: 1.35; }
.msc-reviews .msc-reviews__naam { font-weight: 600; color: var(--mscr-blauw); }
.msc-reviews .msc-reviews__persoon,
.msc-reviews .msc-reviews__bron { font-size: 15px; color: var(--mscr-tekst); }
.msc-reviews a.msc-reviews__bron { color: var(--mscr-blauw); text-decoration: underline; text-underline-offset: 2px; }
.msc-reviews a:focus-visible,
.msc-reviews button:focus-visible,
.msc-reviews .msc-reviews__lijst:focus-visible { outline: 2px solid var(--mscr-tekst); outline-offset: 3px; }

/* ---------- naast elkaar */
.msc-reviews--kaarten .msc-reviews__lijst { display: grid; gap: 32px; }

/* ---------- slider: scroll-snap, knoppen via JS (rechthoekig, zoals de siteknoppen) */
.msc-reviews .msc-reviews__slider { position: relative; }
.msc-reviews--slider .msc-reviews__lijst {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 12px;
  overscroll-behavior-x: contain;
}
.msc-reviews .msc-reviews__dia { scroll-snap-align: start; }
.msc-reviews .msc-reviews__knoppen { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.msc-reviews .msc-reviews__knoppen[hidden] { display: none; }
.msc-reviews .msc-reviews__knop {
  width: 44px; height: 44px;
  border: 2px solid var(--mscr-blauw);
  border-radius: 8px;
  background: transparent;
  color: var(--mscr-blauw);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.msc-reviews .msc-reviews__knop:hover { background: var(--mscr-blauw); color: var(--mscr-wit); }
.msc-reviews .msc-reviews__knop[disabled] { opacity: 0.4; cursor: default; }

/* ---------- één groot citaat op een blauw vlak */
.msc-reviews--citaat { padding: 5%; background: var(--mscr-blauw); color: var(--mscr-wit); }
.msc-reviews--citaat .msc-reviews__titel,
.msc-reviews--citaat .msc-reviews__citaat,
.msc-reviews--citaat .msc-reviews__naam,
.msc-reviews--citaat .msc-reviews__persoon,
.msc-reviews--citaat .msc-reviews__bron,
.msc-reviews--citaat a.msc-reviews__bron { color: var(--mscr-wit); }
.msc-reviews--citaat .msc-reviews__review { max-width: 820px; margin: 0 auto; align-items: center; text-align: center; }
.msc-reviews--citaat .msc-reviews__citaat { font-size: 23px; line-height: 1.45; }

/* ---------- alleen klantlogo's: een rij logo's zoals de klantenslider van de site, zonder citaat en sterren */
.msc-reviews .msc-reviews__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 48px; }
.msc-reviews .msc-reviews__logo-item { flex: 0 1 160px; display: flex; justify-content: center; }
.msc-reviews .msc-reviews__logo-groot { display: block; width: auto; max-width: 100%; max-height: 80px; height: auto; border: 0; border-radius: 0; object-fit: contain; }

@media (min-width: 768px) {
  .msc-reviews--kaarten .msc-reviews__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msc-reviews--slider .msc-reviews__lijst { grid-auto-columns: calc(50% - 16px); }
}
@media (min-width: 1025px) {
  .msc-reviews--kaarten .msc-reviews__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .msc-reviews--slider .msc-reviews__lijst { grid-auto-columns: calc(33.333% - 22px); }
}
@media (max-width: 767px) {
  .msc-reviews .msc-reviews__titel { font-size: 26px; line-height: 1.1em; }
  .msc-reviews--citaat { padding: 8% 6% 11%; }
}
@media (prefers-reduced-motion: no-preference) {
  .msc-reviews--slider .msc-reviews__lijst { scroll-behavior: smooth; }
}

/* koppen zoals ingevoerd: de Kit zet h3 op "capitalize" (typografie 02da0e9), dat doen wij niet (0,2,1 wint van .elementor-kit-11 h3) */
.msc-reviews.msc-reviews h2,
.msc-reviews.msc-reviews h3 { text-transform: none; }   /* Kit-capitalize uit */