/* SalSal - extra regels voor schermformaten en fotoweergave (laadt na de vormgeving). */

/* Projectpagina: kolommen mogen nooit breder worden dan het scherm */
.case__grid > * { min-width: 0; }
@media (max-width: 900px) {
  .case__grid { grid-template-columns: minmax(0, 1fr); }
  .case__body, .case__facts { overflow-wrap: anywhere; }
}

/* Menubalk op kleine laptops en tablets liggend (1025-1279 px): alles past op een regel */
@media (min-width: 1025px) and (max-width: 1279px) {
  .nav__inner { gap: 14px; }
  .nav__links { gap: 18px; }
  .nav__links > a, .nav__trigger { font-size: 16px; }
  .nav__login span { display: none; }
  .nav__login { padding: 10px; }
  .nav__actions .btn { font-size: 16px; }
}

/* Hero homepage: tekst over de volle breedte en offerteformulier zichtbaar boven de foto */
@media (max-width: 1024px) {
  .hero__top { max-width: none; }
  .hero__card { position: relative; right: auto; bottom: auto; z-index: 3; width: auto; margin: -40px var(--pad) 40px; box-shadow: var(--shadow-card); }
  .section__head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .services-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero__card { margin: -24px var(--pad) 32px; }
  .proj__meta { flex-wrap: wrap; gap: 8px 10px; }
  .proj__tag { font-size: 14px; }
}
@media (max-width: 420px) {
  .mini-row { grid-template-columns: 1fr; }
}

/* Veelgestelde vragen: lange woorden breken netjes af */
.faq { grid-template-columns: minmax(0, 1fr); }
.faq-q { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 480px) {
  .faq-q { font-size: 18px; gap: 16px; padding: 22px 0; }
}

/* Knoppen op smalle telefoons */
@media (max-width: 480px) {
  .btn > span:first-child { min-width: 0; }
  .ctaband-inner { padding: 28px 20px; }
  .ctaband-inner h2 { overflow-wrap: anywhere; }
  .ctaband__btns { flex-direction: column; align-items: stretch; }
  .ctaband__btns .btn { justify-content: space-between; white-space: normal; text-align: left; }
  .case__facts { padding: 22px 20px; }
  .case__facts .btn { width: 100%; justify-content: space-between; font-size: 16px; white-space: nowrap; }
}
@media (max-width: 360px) {
  .btn { font-size: 16px; }
}

/* Foto van vader en zoon: gezichten in beeld, label in de lucht in plaats van over de gezichten */
.why__media { aspect-ratio: 4 / 5; }
img[src*="/image.png"], img[src*="over-ons-intro"] { object-position: 50% 74%; }
.why__seal, .about__tag, .founders__media figcaption { top: 20px; bottom: auto; }
@media (min-width: 1025px) {
  .why__panel { margin-left: -32px; }
}
@media (max-width: 1024px) {
  .why__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .why__media { aspect-ratio: 1 / 1; }
  .why__seal, .about__tag, .founders__media figcaption { left: 14px; top: 14px; padding: 10px 14px; }
}

/* Beoordelingen-slider (homepage en Over ons) */
.rslider { position: relative; }
.rslider__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 10px 2px 12px; margin: -10px -2px 0; outline: none;
}
.rslider__track::-webkit-scrollbar { display: none; }
.rslider__track:focus-visible { box-shadow: 0 0 0 2px var(--green); border-radius: 22px; }
.rslider .hrev__card {
  scroll-snap-align: start; background: #fff; border: 1px solid var(--hair); border-radius: 20px;
  padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 16px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.rslider .hrev__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.rslider .hrev__cstars { display: inline-flex; gap: 2px; color: var(--orange); }
.rslider .hrev__cstars svg { width: 17px; height: 17px; }
.rslider .hrev__quote { font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); margin: 0; flex: 1; text-wrap: pretty; }
.rslider .hrev__by { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hair); }
.rslider .hrev__name { font-family: var(--f-sub); font-weight: 600; font-size: 15px; color: var(--ink); }
.rslider .hrev__src { font-family: var(--f-sub); font-size: 13px; color: var(--text-soft); }
.rslider .rev-card__avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.rslider .rev-card__avatar svg { width: 17px; height: 17px; }
.rslider .rev-card__avatar--google { background: #fff; border: 1px solid var(--hair); }
.rslider__nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.rslider__btn {
  width: 46px; height: 46px; padding: 0; border-radius: 999px; border: 1px solid var(--hair-strong);
  background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.rslider__btn svg { width: 16px; height: 16px; }
.rslider__btn:hover:not(:disabled) { background: var(--green); border-color: var(--green); color: #fff; }
.rslider__btn:disabled { opacity: .35; cursor: default; }
.rslider__count { font-family: var(--f-sub); font-size: 14px; color: var(--text-soft); min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  .rslider__track { grid-auto-columns: calc((100% - 22px) / 2); }
}
@media (max-width: 640px) {
  .rslider__track { grid-auto-columns: 86%; gap: 14px; }
  .rslider .hrev__card { padding: 22px 20px 20px; }
  .rslider .hrev__quote { font-size: 17px; }
}

/* Ingelogde beheerders: de menubalk schuift onder de WordPress-beheerbalk door */
.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }
@media (max-width: 600px) { .admin-bar .nav { top: 0; } }

/* Grotere tikvlakken in het klantportaal */
.login__links a, .linkbtn { display: inline-block; padding: 10px 6px; margin: -10px -6px; }