/* ==========================================================================
   Overgenomen uit de eerste versie: basis, knoppen, header en de eigen blokken
   van het thema (kruimelpad, foto's van een dienst, projectgegevens,
   aftermovie, volgend project, projectfilter, testimonial, social media en het
   offerteformulier). Die blokken maken hun HTML zelf, dus hun opmaak staat hier.
   ========================================================================== */

/* ---------- Basis ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

:root img {
  max-width: 100%;
  height: auto;
}

:root h1,
:root h2,
:root h3,
:root h4 {
  text-wrap: balance;
}

/* Letterbreedte per kopniveau (letterafstand staat in theme.json). Laag
   gewicht, zodat een blokstijl als Label of Extra groot ervoor gaat. */
:root :where(h1) {
  font-stretch: 80%;
}

:root :where(h2) {
  font-stretch: 84%;
}

:root :where(h3) {
  font-stretch: 92%;
}

:root p {
  text-wrap: pretty;
}

/* Geen standaardmarges: de ruimte komt uit de blokken (theme.json) en de blokstijlen */
:root :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul.wp-block-post-template) {
  margin: 0;
}

:root ::selection {
  background: var(--primary-l-3);
  color: var(--base);
}

:root :focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

:root .screen-reader-text,
:root .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:root .screen-reader-text:focus {
  position: fixed !important;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 100001;
  width: auto;
  height: auto;
  margin: 0;
  padding: 1.2rem 1.6rem;
  clip: auto;
  background: var(--base);
  color: var(--white);
}

/* ---------- Label en bijschrift (ook in de HTML van eigen blokken) ---------- */

:root .label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 450;
  font-stretch: normal;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Het oranje streepje: een LED-segment uit de niveaumeter */
:root .label::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 0.4rem;
  background: var(--primary);
}

:root .label--plain::before {
  display: none;
}

:root .figure-caption,
:root .wp-block-image figcaption.wp-element-caption {
  margin: 1.2rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: left;
}

/* ---------- Knoppen ---------- */

:root .wp-element-button,
:root .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

:root .wp-block-button.is-style-outline > .wp-block-button__link,
:root .wp-block-button__link.is-style-outline {
  padding: 1.5rem 2.4rem;
  background: transparent;
  color: var(--base);
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--base);
}

:root .wp-block-button.is-style-outline > .wp-block-button__link:hover,
:root .wp-block-button__link.is-style-outline:hover {
  background: var(--base);
  color: var(--white);
}

:root .wp-block-button.is-style-inkt > .wp-block-button__link,
:root .wp-block-button__link.is-style-inkt {
  background: var(--base);
  color: var(--white);
}

:root .wp-block-button.is-style-inkt > .wp-block-button__link:hover,
:root .wp-block-button__link.is-style-inkt:hover {
  background: var(--white);
  color: var(--base);
}

:root .wp-block-button__link.is-full {
  width: 100%;
  justify-content: space-between;
}

/* Knopstijl "Tekstlink": onderstreepte link naast een gewone knop */
:root .wp-block-button.is-style-tekst > .wp-block-button__link {
  padding: 0;
  background: transparent;
  color: var(--base);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  text-underline-offset: 0.35em;
}

:root .wp-block-button.is-style-tekst > .wp-block-button__link:hover {
  background: transparent;
  color: var(--primary-d-2);
}

/* ---------- Header ---------- */

:root .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-body);
  border-bottom: 1px solid var(--border-primary);
}

:root body.admin-bar .site-header {
  top: 32px;
}

:root .site-logo {
  display: block;
  flex: none;
  color: var(--base);
}

:root .site-logo :is(svg, img) {
  display: block;
  width: auto;
  height: 3.6rem;
}

:root .site-nav.wp-block-navigation {
  margin-inline: auto;
}

:root .site-nav .wp-block-navigation-item__content {
  position: relative;
  padding-block: 0.6rem;
  text-decoration: none;
}

:root .site-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

:root .site-nav .wp-block-navigation-item__content:hover::after,
:root .site-nav .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

:root .site-nav .wp-block-navigation-item__content:hover {
  color: inherit;
}

:root .site-nav .is-cta {
  display: none;
}

:root .site-header__tel {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

:root .site-header__tel a {
  text-decoration: none;
}

/* In de header zonder lijn eronder (naast een knop wel, zie Klein mono) */
:root .site-header__tel.is-style-mono a {
  padding-bottom: 0;
  border-bottom: 0;
}

:root .site-header__cta .wp-block-button__link {
  padding: 1.2rem 1.8rem;
}

/* Menuknop en volledig scherm-menu */
:root .site-nav .wp-block-navigation__responsive-container-open,
:root .site-nav .wp-block-navigation__responsive-container-close {
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: transparent;
  border: 1.5px solid var(--base);
  border-radius: var(--radius-xs);
  font: 600 var(--text-s) / 1 var(--font-body);
  color: var(--base);
  cursor: pointer;
}

:root .site-nav .wp-block-navigation__responsive-container-close {
  top: var(--space-s);
  right: var(--gutter);
}

:root .site-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--space-s) var(--gutter) var(--space-l);
  background: var(--bg-body);
  color: var(--base);
}

:root .site-nav .is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 7.2rem;
  align-items: stretch;
}

:root .site-nav .is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: stretch !important;
  gap: 0;
  width: 100%;
}

:root .site-nav .is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid var(--border-primary);
}

:root .site-nav .is-menu-open .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding-block: 1.4rem;
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 760;
  font-stretch: 82%;
  line-height: 1;
  letter-spacing: -0.02em;
}

:root .site-nav .is-menu-open .wp-block-navigation-item__content::after {
  display: none;
}

:root .site-nav .is-menu-open .is-cta {
  display: block;
  margin-top: var(--space-l);
  border: 0;
}

:root .site-nav .is-menu-open .is-cta .wp-block-navigation-item__content {
  padding: 1.8rem 2.4rem;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  font-stretch: normal;
  letter-spacing: 0;
}


/* ---------- Kruimelpad ---------- */

:root .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

:root .crumbs li + li::before {
  content: "/";
  margin-right: 0.8rem;
  color: var(--base-l-3);
}

:root .crumbs a {
  text-decoration: none;
}

:root .crumbs a:hover {
  color: var(--base);
}

/* ---------- Projectfilter en paginering ---------- */

:root .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: var(--space-xl);
}

:root .filter {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.6rem;
  border: 1.5px solid var(--base-l-4);
  border-radius: var(--radius-xs);
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.2;
  color: var(--base);
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

:root .filter:hover {
  border-color: var(--base);
  color: var(--base);
}

:root .filter[aria-current="page"] {
  background: var(--base);
  border-color: var(--base);
  color: var(--white);
}

:root .filter__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.7;
}

:root .geen-resultaten {
  color: var(--text-muted);
}

:root .wp-block-query-pagination {
  margin-top: var(--space-xl);
  gap: 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ---------- Testimonial van een artiest ---------- */

:root .quote__title {
  margin-bottom: var(--space-s);
}

:root .quote__text {
  margin: 0;
  padding: 0;
  border: 0;
}

:root .quote__text p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 560;
  font-stretch: 94%;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--text-title);
}

:root .quotes > :nth-child(odd) .quote__text p,
:root .is-style-lopende-tekst .quote__text p {
  font-size: var(--text-2xl);
  line-height: 1.12;
}

:root .quote__text p::before {
  content: "\201C";
  color: var(--primary-d-1);
}

:root .quote__text p::after {
  content: "\201D";
  color: var(--primary-d-1);
}

:root .quote__by {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: var(--space-m);
}

:root .quote__photo img {
  display: block;
  width: 6.4rem;
  height: 6.4rem;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--secondary);
}

:root .quote__name {
  display: block;
  font-weight: 600;
  color: var(--text-title);
}

:root a.quote__name {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}

:root a.quote__name:hover {
  text-decoration-color: var(--primary);
}

:root .quote__role {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---------- Foto's van een dienst ---------- */

:root .service-block__media {
  position: relative;
  padding-bottom: var(--space-xl);
}

:root .service-block__main {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--secondary);
}

:root .service-block__main img,
:root .service-block__sub img,
:root .service-visual__main img,
:root .service-visual__sub img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:root .service-block__sub {
  position: absolute;
  right: calc(-1 * var(--space-l));
  bottom: 0;
  width: 36%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--secondary);
  border: 0.8rem solid var(--bg-body);
}

:root .service-visual {
  --rand: calc((100vw - min(100vw - 2 * var(--wp--style--root--padding-right), var(--wp--style--global--content-size))) / 2);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
}

:root .service-visual__main {
  grid-column: 4 / -1;
  grid-row: 1;
  margin: 0 calc(-1 * var(--rand)) 0 0;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--secondary);
}

:root .service-visual__sub {
  grid-column: 1 / span 4;
  grid-row: 1;
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  margin-bottom: calc(-1 * var(--space-2xl));
  overflow: hidden;
  background: var(--secondary);
  border: 0.8rem solid var(--bg-body);
  border-left: 0;
}

:root .service-visual--enkel .service-visual__main {
  grid-column: 1 / -1;
}

/* Galerij in de inhoud */
:root .wp-block-gallery.has-nested-images figure.wp-block-image img {
  background: var(--secondary);
}

/* YouTube-blok altijd over de volle breedte in 16:9 */
:root .wp-block-embed.is-type-video iframe {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Voor de klik: foto met afspeelknop (ejs_youtube_voorvertoning) */
:root .wp-block-embed .wp-block-embed__wrapper::before {
  content: none;
}

:root .wp-block-embed .video-link {
  margin-top: 0;
}

:root .ejs-youtube .video-link__play {
  max-width: calc(100% - 3.2rem);
}


/* ---------- Social media van een artiest ---------- */

:root .socials__lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

:root .socials__lijst a {
  display: inline-flex;
  gap: 0.6rem;
  padding: 1rem 1.6rem;
  border: 1.5px solid var(--base-l-4);
  border-radius: var(--radius-xs);
  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1.2;
  color: var(--base);
  text-decoration: none;
  transition: border-color 0.2s;
}

:root .socials__lijst a:hover {
  border-color: var(--base);
}


/* ---------- Eén project ---------- */

/* Hoofdbeeld van een project; flyers en logo's passend in een vlak */
:root .is-style-projectfoto {
  overflow: hidden;
  background: var(--secondary);
}

:root .is-style-projectfoto img {
  width: 100%;
  height: auto;
}

:root .is-formaat-flyer .is-style-projectfoto,
:root .is-formaat-logo .is-style-projectfoto {
  display: grid;
  place-items: center;
  padding: var(--space-l);
  background: var(--secondary-d-1);
}

:root .is-formaat-flyer .is-style-projectfoto img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}

:root .is-formaat-logo .is-style-projectfoto {
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--border-primary);
}

:root .is-formaat-logo .is-style-projectfoto img {
  max-width: 56rem;
}


:root .project-meta {
  position: sticky;
  top: 10.4rem;
  margin: 0;
  border-top: 2px solid var(--base);
}

:root .project-meta div {
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--border-primary);
}

:root .project-meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

:root .project-meta dd {
  margin: 0.4rem 0 0;
  font-weight: 500;
  color: var(--text-title);
}

:root .project-meta dd a {
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

:root .project-video__speler {
  margin-top: var(--space-s);
  background: var(--base);
}

:root .video-link {
  position: relative;
  display: block;
  margin-top: var(--space-s);
  overflow: hidden;
  background: var(--secondary);
  color: var(--base);
  text-decoration: none;
}

:root .video-link img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

:root .video-link--zonder-beeld {
  aspect-ratio: 16 / 9;
  background: var(--secondary-d-1);
}

:root .video-link__play {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.6rem 2.4rem 1.6rem 1.6rem;
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--text-s);
  font-weight: 600;
}

:root .video-link__play::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.9rem solid transparent;
  border-bottom: 0.9rem solid transparent;
  border-left: 1.5rem solid currentColor;
}

:root .video-link:hover img {
  transform: scale(1.03);
}

:root .video-link:hover .video-link__play {
  background: var(--base);
  color: var(--white);
}

:root .next-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-m);
  align-items: end;
  padding-block: var(--space-l);
  border-top: 2px solid var(--base);
  border-bottom: 1px solid var(--border-primary);
  text-decoration: none;
}

:root .next-project:hover {
  color: inherit;
}

:root .next-project strong {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 780;
  font-stretch: 82%;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

:root .next-project:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 4px;
  text-underline-offset: 0.1em;
}

:root .next-project__knop {
  padding: 1.5rem 2.4rem;
  box-shadow: inset 0 0 0 1.5px var(--base);
  font-size: var(--text-s);
  font-weight: 600;
  white-space: nowrap;
}


/* ---------- Offerteformulier ---------- */

:root .form {
  display: grid;
  gap: var(--space-xl);
}

:root .form fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--space-s) 0 0;
  border: 0;
  border-top: 2px solid var(--base);
}

:root .form legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  margin-bottom: var(--space-m);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-stretch: 88%;
  color: var(--text-title);
}

:root .form legend span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--primary-d-2);
}

:root .form legend + * {
  clear: both;
}

:root .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--space-s);
}

:root .form-grid .span-2 {
  grid-column: 1 / -1;
}

:root .field {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

:root .field label {
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--text-title);
}

:root .field__optional {
  font-weight: 400;
  color: var(--text-muted);
}

:root .field__hint {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

:root .field input,
:root .field select,
:root .field textarea {
  width: 100%;
  padding: 1.4rem 1.6rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--base-l-4);
  border-radius: var(--radius-xs);
  font: inherit;
  font-size: var(--text-m);
  color: var(--base);
  transition: border-color 0.2s, box-shadow 0.2s;
}

:root .field select {
  appearance: none;
  padding-right: 4.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--base) 50%), linear-gradient(-45deg, transparent 50%, var(--base) 50%);
  background-position: calc(100% - 2.2rem) 50%, calc(100% - 1.6rem) 50%;
  background-size: 0.6rem 0.6rem;
  background-repeat: no-repeat;
}

:root .field textarea {
  min-height: 16rem;
  resize: vertical;
}

:root .field input:hover,
:root .field select:hover,
:root .field textarea:hover {
  border-color: var(--base-l-3);
}

:root .field input:focus,
:root .field select:focus,
:root .field textarea:focus {
  outline: none;
  border-color: var(--base);
  box-shadow: 0 0 0 3px var(--primary-l-3);
}

:root .field__error {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fout);
}

:root .has-error input,
:root .has-error select,
:root .has-error textarea,
:root .has-error .choice span {
  border-color: var(--fout);
}

:root .form-melding {
  padding: 1.6rem 2rem;
  border-left: 4px solid var(--fout);
  background: var(--bg-surface);
  font-size: var(--text-s);
}

:root .choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

:root .choice {
  position: relative;
}

:root .choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

:root .choice span {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.6rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--base-l-4);
  border-radius: var(--radius-xs);
  font-size: var(--text-s);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

:root .choice span::before {
  content: "";
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 1.5px solid currentColor;
}

:root .choice input[type="radio"] + span::before {
  border-radius: 50%;
}

:root .choice:hover span {
  border-color: var(--base);
}

:root .choice input:checked + span {
  background: var(--base);
  border-color: var(--base);
  color: var(--white);
}

:root .choice input:checked + span::before {
  background: var(--primary);
  border-color: var(--primary);
}

:root .choice input:focus-visible + span {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

:root .consent {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  font-size: var(--text-s);
}

:root .consent input {
  flex: none;
  width: 2rem;
  height: 2rem;
  margin: 0.2rem 0 0;
  accent-color: var(--base);
}

:root .consent a {
  text-decoration-color: var(--primary);
  text-underline-offset: 0.25em;
}

:root .ejs-honing {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

:root .form__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 2.4rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--border-primary);
}

:root .form__submit p {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

:root .form-success {
  padding: var(--space-l);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
  border-top: 4px solid var(--primary);
}

:root .form-success h2 {
  margin-block: var(--space-s) var(--space-m);
  font-size: var(--text-3xl);
}

:root .form-success dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.8rem 2.4rem;
  margin: var(--space-m) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--border-primary);
  font-size: var(--text-s);
}

:root .form-success dt {
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

:root .form-success dd {
  margin: 0;
}

/* ---------- Kleinere schermen (onderdelen) ---------- */

@media (max-width: 1100px) {
  :root .site-header__tel {
    display: none;
  }
}

@media (max-width: 960px) {
  /* Menu naar de knop vanaf 960px in plaats van de standaard 600px */
  :root .site-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }

  :root .site-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }

  :root .site-nav.wp-block-navigation {
    order: 3;
    margin-inline: 0;
  }

  :root .site-header__cta {
    order: 2;
    margin-left: auto;
  }
}

@media (max-width: 1024px) {
  :root .service-visual__main {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }

  :root .service-visual__sub {
    grid-column: 1 / span 6;
    grid-row: 2;
    margin-top: calc(-1 * var(--space-2xl));
    margin-bottom: 0;
  }
}

@media (max-width: 782px) {
  :root body.admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 640px) {
  :root .form-grid {
    grid-template-columns: 1fr;
  }

  :root .site-logo :is(svg, img) {
    height: 3rem;
  }

  :root .site-header .site-header__cta {
    display: none;
  }

  :root .site-nav.wp-block-navigation {
    margin-left: auto;
  }

  :root .next-project {
    grid-template-columns: 1fr;
  }

  :root .form-success dl {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  :root .form-success dd {
    margin-bottom: 0.8rem;
  }
}

@media (max-width: 600px) {
  :root body.admin-bar .site-header {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   EJSound — blokstijlen
   De indeling staat in de blokken zelf (raster, kolommen, ruimtes uit
   theme.json). Hier alleen wat een blokstijl extra doet: de stijlen die je in
   de editor onder Stijlen kiest (is-style-…). Kleuren en typografie van die
   stijlen staan in styles/*.json. Breekpunten zoals in theme.json: 1024 en 640.
   ========================================================================== */

/* ---------- Tekst ---------- */

/* Label: het oranje streepje is een LED-segment uit de niveaumeter. Inline,
   zoals in de eerste versie: in lopende tekst staat het label op de regel. */
:root :is(.is-style-label, .is-style-label-kaal) {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-stretch: normal;
}

:root .is-style-label::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 0.4rem;
  background: var(--primary);
}

:root :is(.is-style-label, .is-style-label-kaal).has-text-align-center {
  display: flex;
  justify-content: center;
}

:root .is-style-statement {
  font-stretch: 94%;
}

:root .is-style-groot-cijfer {
  font-stretch: 84%;
}

:root .is-style-groot-cijfer a {
  text-decoration: none;
}

:root .is-style-kop-groot {
  font-stretch: 76%;
}

:root :is(.is-style-tekstlink, .is-style-statement) a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--primary);
  text-underline-offset: 0.35em;
  transition: color 0.2s;
}

:root .is-style-tekstlink a:hover {
  color: var(--primary-d-2);
}

/* Inleidende tekst (grote letter) iets strakker dan lopende tekst */
:root p.has-l-font-size,
:root .wp-block-post-excerpt.has-l-font-size {
  line-height: 1.5;
}

:root p.has-xl-font-size:not(.is-style-groot-cijfer) {
  line-height: 1.4;
}

/* Groot cijfer in een kleinere maat (contactgegevens): iets breder */
:root .is-style-groot-cijfer.has-xl-font-size {
  font-stretch: 88%;
}

/* Ook als klasse op een lijstregel (bijv. "Bereikbaar" in de footer) */
:root li.is-style-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* Telefoonnummer naast een knop */
:root .is-style-mono a {
  padding-bottom: 0.2rem;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* ---------- Lijsten ---------- */

/* Alleen de marge onder en opzij weg: de ruimte erboven komt uit de blokafstand */
:root :is(ul, ol).is-style-checklist,
:root :is(ul, ol).is-style-checklist-groot,
:root .is-style-lijst-kaal {
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

:root :is(.is-style-checklist, .is-style-checklist-groot) > li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 1.4rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--border-primary);
  line-height: 1.45;
}

:root .is-style-checklist-groot > li {
  padding-block: 1.8rem;
  font-stretch: 92%;
  line-height: inherit;
}

:root :is(.is-style-checklist, .is-style-checklist-groot) > li::before {
  content: "";
  width: 1.6rem;
  height: 0.4rem;
  margin-top: 0.9rem;
  background: var(--primary);
}

:root .is-style-checklist-groot > li::before {
  margin-top: 1.1rem;
}

:root .is-style-lijst-kaal {
  display: grid;
  gap: 0.6rem;
}

/* Lijsten met eigen tussenruimte: geen extra marge per regel */
:root :is(.is-style-lijst-kaal, .is-style-indexlijst, .is-style-werkraster, .is-style-reviews) > li {
  margin-block: 0;
}

:root .is-style-lijst-kaal a {
  text-decoration: none;
}

:root .is-style-lijst-kaal a:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

:root .is-style-lijst-kaal .wp-block-post-title {
  font-family: var(--font-body);
  font-size: inherit;
  font-weight: 400;
  font-stretch: normal;
  line-height: 1.6;
  letter-spacing: 0;
  color: inherit;
}

/* ---------- Header en footer ---------- */

:root .site-footer__brand > p {
  max-width: 32ch;
}

:root .is-style-lijst-kaal > li.site-footer__socials {
  margin-top: 0.8rem;
}

:root .site-footer__bottom .is-style-mono {
  letter-spacing: normal;
}

:root .site-footer__bottom .is-style-mono a {
  padding-bottom: 0;
  border-bottom: 0;
}

:root .site-footer__bottom a:hover {
  color: var(--base);
}

/* Offerteband: smalle, vette kop, onderaan uitgelijnd met de tekst ernaast */
:root .is-style-sectie-accent h2 {
  font-stretch: 78%;
}

:root .is-style-sectie-accent > .is-layout-grid {
  align-items: end;
}

/* Header, inhoud, offerteband en footer sluiten op elkaar aan */
:root .wp-site-blocks > * {
  margin-block: 0;
}

:root footer.wp-block-template-part .site-logo :is(svg, img) {
  height: 4.4rem;
}

/* ---------- Groepen ---------- */

/* Logo met tekst (goed doel): tekst verticaal in het midden naast het logo */
:root .is-layout-grid:has(> .wp-block-image.is-style-met-kader:first-child) {
  align-items: center;
}

/* Grote kop op de home: kop en intro onderaan uitgelijnd */
:root .is-layout-grid:has(> .is-style-label:first-child + h1) {
  align-items: end;
}

/* Paginakop: titel en intro onderaan uitgelijnd; ruimte onder de inleiding
   ook als er geen knop meer volgt */
:root .is-layout-grid:has(> .wp-block-ejsound-kruimelpad) {
  align-items: end;
}

:root .is-layout-grid:has(> .wp-block-ejsound-kruimelpad) > .is-vertical > :is(p, .wp-block-post-excerpt):last-child {
  margin-bottom: var(--space-m);
}

/* Kop van een sectie (label en kop, tekst ernaast): onderaan uitgelijnd */
:root .is-layout-grid:has(> :first-child > .is-style-label:first-child + :is(h1, h2)):not(:has(> :nth-child(3))) {
  align-items: end;
}

/* Kop van een groep (dikke lijn): kop en korte tekst op één basislijn */
:root .is-style-lijn-dik.is-layout-flex {
  align-items: baseline;
}

:root .is-style-lijn-dik > p:last-child {
  max-width: 44ch;
}

:root .is-style-blijft-staan {
  position: sticky;
  top: 11rem;
  align-self: start;
}

:root .is-style-paneel {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--space-3xl)) !important;
}

/* Ruimte onder de tekst ernaast, zodat het paneel alleen over de foto valt */
:root .is-layout-grid:has(> .is-style-paneel) > :first-child {
  padding-bottom: var(--space-3xl);
}

/* Prijs onderin een paneel: vet stuk als kop, rest klein */
:root .is-style-paneel p strong:first-child {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 720;
  font-stretch: 88%;
  line-height: 1.15;
  color: var(--text-title);
}

/* Kader (In het kort): label als gewone regel, nummer zonder lijn */
:root .is-style-kader .is-style-label-kaal {
  display: block;
  font-weight: 400;
  line-height: 1.6;
}

:root .is-style-kader .is-style-mono {
  letter-spacing: normal;
}

:root .is-style-kader .is-style-mono a {
  padding-bottom: 0;
  border-bottom: 0;
}

/* Kolommen op de basislijn: nummer, kop en tekst lezen als één regel (beloftes) */
:root .wp-block-columns.is-style-basislijn {
  align-items: baseline !important; /* WordPress zet align-items met !important */
}

:root .ejs-beloftes h3 {
  font-stretch: 86%;
}

:root .ejs-beloftes {
  border-bottom: 1px solid var(--border-primary);
}

/* Uitgelichte zin: iets smallere letter */
:root .is-style-citaat {
  font-stretch: 90%;
}

/* Feitenstrook: lijntjes tussen de feiten */
:root .is-style-feitenstrook > * {
  padding-inline: var(--space-s);
}

:root .is-style-feitenstrook > :first-child {
  padding-left: 0;
}

:root .is-style-feitenstrook > * + * {
  border-left: 1px solid var(--border-primary);
}

:root .is-style-feitenstrook .is-style-label-kaal {
  font-weight: 400;
  line-height: 1.6;
}

/* Tijdlijn: de oranje schuiven van een mengpaneel op de rail */
:root .is-style-tijdlijn > * {
  position: relative;
  padding-top: var(--space-m);
}

:root .is-style-tijdlijn > *::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 0;
  width: 2.8rem;
  height: 1.4rem;
  background: var(--primary);
}

/* Stappen niet even breed, zoals de schuiven op een mengpaneel */
@media (min-width: 1025px) {
  :root .is-style-tijdlijn {
    grid-template-columns: 1fr 1.15fr 1fr 1.2fr;
  }
}

:root .is-style-tijdlijn > :nth-child(4n + 2)::before { left: 30%; }
:root .is-style-tijdlijn > :nth-child(4n + 3)::before { left: 12%; }
:root .is-style-tijdlijn > :nth-child(4n + 4)::before { left: 46%; }

:root .is-style-tijdlijn > * > p:last-child {
  max-width: 34ch;
}

/* ---------- Niveaumeter: foto's als balken van een VU-meter ---------- */

:root .is-style-niveaumeter {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 2.6fr 0.85fr 1.15fr;
  align-items: end;
  column-gap: clamp(0.6rem, 1vw, 1.4rem);
  height: clamp(30rem, 46vw, 66rem);
  margin-bottom: 5.6rem !important;
  border-bottom: 2px solid var(--base);
}

:root .is-style-niveaumeter > * {
  position: relative;
  height: var(--h, 100%);
  margin: 0 !important;
  transition: height 0.5s var(--ease);
}

:root .is-style-niveaumeter > :nth-child(1) { --h: 62%; }
:root .is-style-niveaumeter > :nth-child(2) { --h: 84%; }
:root .is-style-niveaumeter > :nth-child(3) { --h: 100%; }
:root .is-style-niveaumeter > :nth-child(4) { --h: 46%; }
:root .is-style-niveaumeter > :nth-child(5) { --h: 72%; }

:root .is-style-niveaumeter > .wp-block-image a,
:root .is-style-niveaumeter > .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
}

/* De editor zet links in een foto op display:inline (niet klikbaar tijdens
   bewerken) en de foto zelf op height:auto; hier moet hij de balk vullen */
:root .is-style-niveaumeter > .wp-block-image a[aria-disabled] {
  display: block !important;
}

:root .is-style-niveaumeter > .wp-block-image img {
  height: 100% !important;
}

:root .is-style-niveaumeter > .wp-block-image a,
:root .is-style-niveaumeter > .wp-block-image > img {
  overflow: hidden;
  background: var(--secondary);
}

:root .is-style-niveaumeter > .wp-block-image img {
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

:root .is-style-niveaumeter > .wp-block-image:hover {
  height: min(100%, calc(var(--h) + 7%));
}

:root .is-style-niveaumeter > .wp-block-image:hover img {
  transform: scale(1.04);
}

:root .is-style-niveaumeter figcaption.wp-element-caption {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--base);
}

:root .is-style-niveaumeter figcaption strong {
  margin-right: 0.6rem;
  font-weight: inherit;
  color: var(--primary-d-2);
}

/* De oranje balk: bovenin vol, onderin LED-segmenten */
:root .is-style-niveaumeter > .wp-block-group {
  background: var(--primary);
  color: var(--on-primary);
}

:root .is-style-niveaumeter > .wp-block-group::after {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: repeating-linear-gradient(to top, transparent 0 1.2rem, var(--bg-body) 1.2rem 1.5rem);
}

:root .is-style-niveaumeter > .wp-block-group > p {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-inline: 1.2rem;
}

:root .is-style-niveaumeter > .wp-block-group > p:first-child {
  padding-top: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.2vw, 4.8rem);
  font-weight: 800;
  font-stretch: 78%;
  line-height: 0.9;
  letter-spacing: -0.02em;
}

:root .is-style-niveaumeter > .wp-block-group > p + p {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* ---------- Afbeelding tot de rand van het scherm ---------- */

:root .wp-block-image.is-style-tot-rand {
  --rand: calc((100vw - min(100vw - 2 * var(--wp--style--root--padding-right), var(--wp--style--global--content-size))) / 2);
  min-height: clamp(36rem, 46vw, 68rem);
  margin-right: calc(-1 * var(--rand)) !important;
  overflow: hidden;
  background: var(--secondary);
}

:root .wp-block-image.is-style-tot-rand img {
  width: 100%;
  height: 100% !important; /* de editor zet height:auto op de foto */
  object-fit: cover;
  object-position: 75% 50%;
}

/* ---------- Lijsten uit een Query Loop ---------- */

/* Genummerde lijst (diensten op de home): de hele rij is klikbaar */
:root .is-style-indexlijst {
  counter-reset: rij;
  border-bottom: 1px solid var(--border-primary);
}

:root .is-style-indexlijst > li {
  counter-increment: rij;
}

:root .is-style-indexlijst > li > .wp-block-group {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.15fr) minmax(0, 1fr) 12rem 4.4rem;
  grid-template-areas:
    "nr titel tekst beeld pijl"
    "nr groep tekst beeld pijl";
  column-gap: var(--space-s);
  align-items: center;
  padding-block: var(--space-s);
  border-top: 1px solid var(--border-primary);
}

:root .is-style-indexlijst :where(li > .wp-block-group > *) {
  margin: 0 !important;
}

:root .is-style-indexlijst > li > .wp-block-group::before {
  content: counter(rij, decimal-leading-zero);
  grid-area: nr;
  align-self: start;
  padding-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--primary-d-2);
}

:root .is-style-indexlijst > li > .wp-block-group::after {
  content: "→";
  grid-area: pijl;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1.5px solid var(--base);
  border-radius: var(--radius-xs);
  font-size: 1.8rem;
  transition: background-color 0.2s, border-color 0.2s;
}

:root .is-style-indexlijst .wp-block-post-title {
  grid-area: titel;
  align-self: end;
  font-size: var(--text-2xl);
  font-weight: 760;
  font-stretch: 84%;
  line-height: 0.95;
  hyphens: auto;
  transition: transform 0.35s var(--ease);
}

:root .is-style-indexlijst .wp-block-post-title a {
  text-decoration: none;
}

:root .is-style-indexlijst .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

:root .is-style-indexlijst .wp-block-paragraph {
  grid-area: groep;
  align-self: start;
  margin-top: 0.8rem !important;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

:root .is-style-indexlijst .wp-block-post-excerpt {
  grid-area: tekst;
  font-size: var(--text-s);
  line-height: 1.5;
  color: var(--text-muted);
}

:root .is-style-indexlijst .wp-block-post-featured-image {
  grid-area: beeld;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--secondary);
}

:root .is-style-indexlijst .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

:root .is-style-indexlijst > li > .wp-block-group:hover .wp-block-post-title {
  transform: translateX(0.8rem);
}

:root .is-style-indexlijst > li > .wp-block-group:hover img {
  transform: scale(1.07);
}

:root .is-style-indexlijst > li > .wp-block-group:hover::after {
  background: var(--primary);
  border-color: var(--primary);
}

/* Verspringend raster (projecten op de home): vier kaarten, bewust ongelijk */
:root .is-style-werkraster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
  align-items: start;
}

:root .is-style-werkraster > :nth-child(4n + 1 of :not([style*="display: none"])) { grid-column: 1 / span 7; }
:root .is-style-werkraster > :nth-child(4n + 2 of :not([style*="display: none"])) { grid-column: 9 / span 4; margin-top: var(--space-3xl); }
:root .is-style-werkraster > :nth-child(4n + 3 of :not([style*="display: none"])) { grid-column: 2 / span 5; }
:root .is-style-werkraster > :nth-child(4n + 4 of :not([style*="display: none"])) { grid-column: 7 / span 6; margin-top: var(--space-2xl); }

:root :is(.is-style-werkraster, .is-style-zigzag) > li > .wp-block-group {
  position: relative;
}

:root :is(.is-style-werkraster, .is-style-zigzag) :where(li > .wp-block-group > *) {
  margin: 0;
}

:root .is-style-werkraster .wp-block-post-featured-image,
:root .is-style-zigzag .wp-block-post-featured-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--secondary);
}

:root .is-style-werkraster > :nth-child(4n + 2 of :not([style*="display: none"])) .wp-block-post-featured-image { aspect-ratio: 4 / 5; }
:root .is-style-werkraster > :nth-child(4n + 3 of :not([style*="display: none"])) .wp-block-post-featured-image { aspect-ratio: 1 / 1; }
:root .is-style-werkraster > :nth-child(4n + 4 of :not([style*="display: none"])) .wp-block-post-featured-image { aspect-ratio: 3 / 2; }

:root .is-style-werkraster .wp-block-post-featured-image img,
:root .is-style-zigzag .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

:root :is(.is-style-werkraster, .is-style-zigzag) .is-formaat-flyer .wp-block-post-featured-image,
:root :is(.is-style-werkraster, .is-style-zigzag) .is-formaat-logo .wp-block-post-featured-image {
  background: var(--secondary-d-1);
}

:root :is(.is-style-werkraster, .is-style-zigzag) .is-formaat-flyer .wp-block-post-featured-image img,
:root :is(.is-style-werkraster, .is-style-zigzag) .is-formaat-logo .wp-block-post-featured-image img {
  /* WordPress zet object-fit:cover inline op de uitgelichte afbeelding. */
  object-fit: contain !important;
  padding: var(--space-m);
}

:root :is(.is-style-werkraster, .is-style-zigzag) .is-formaat-logo .wp-block-post-featured-image {
  background: var(--bg-surface);
  box-shadow: inset 0 0 0 1px var(--border-primary);
}

:root :is(.is-style-werkraster, .is-style-zigzag) li:hover .wp-block-post-featured-image img {
  transform: scale(1.035);
}

/* Regel met categorie en jaar/plaats */
:root :is(.is-style-werkraster, .is-style-zigzag) .wp-block-group .wp-block-group {
  margin-top: 1.6rem;
}

:root :is(.is-style-werkraster, .is-style-zigzag) .wp-block-group .wp-block-group > *,
:root .is-style-portretten .is-style-label-kaal {
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

:root :is(.is-style-werkraster, .is-style-zigzag) .wp-block-group .wp-block-group > :first-child {
  color: var(--primary-d-2);
}

:root :is(.is-style-werkraster, .is-style-zigzag) .wp-block-post-title {
  margin-top: 1rem;
  font-size: var(--text-2xl);
  font-weight: 760;
  font-stretch: 84%;
  line-height: 0.98;
}

:root :is(.is-style-werkraster, .is-style-zigzag) .wp-block-post-title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
  transition: text-decoration-color 0.2s;
}

:root :is(.is-style-werkraster, .is-style-zigzag) .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

:root :is(.is-style-werkraster, .is-style-zigzag) li:hover .wp-block-post-title a {
  text-decoration-color: var(--primary);
}

:root :is(.is-style-werkraster, .is-style-zigzag) .wp-block-post-title + :is(p, .wp-block-post-excerpt) {
  margin-top: 0.6rem;
  font-size: var(--text-s);
  color: var(--text-muted);
}

/* Reviews verspringend: om en om breed links en smaller rechts */
:root .is-style-reviews {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
}

:root .is-style-reviews > :nth-child(odd of :not([style*="display: none"])) { grid-column: 1 / span 8; }
:root .is-style-reviews > :nth-child(even of :not([style*="display: none"])) { grid-column: 7 / span 6; }

:root .is-style-reviews > :nth-child(odd of :not([style*="display: none"])) .quote__text p {
  font-size: var(--text-2xl);
  line-height: 1.12;
}

/* Geen "Lees verder"-veld: de site gebruikt het niet */
:root .wp-block-post-excerpt__more-text {
  display: none;
}

/* ---------- Kleinere schermen ---------- */

/* Tussen tablet en 1100px is de kolom smal: titels iets kleiner, zodat ze niet afbreken */
@media (min-width: 1025px) and (max-width: 1100px) {
  :root .is-style-indexlijst .wp-block-post-title {
    font-size: var(--text-xl);
  }
}

@media (max-width: 1024px) {
  :root .is-layout-grid:has(> .is-style-paneel) > :first-child {
    padding-bottom: 0;
  }

  :root .is-style-blijft-staan {
    position: static;
  }

  :root .wp-block-image.is-style-tot-rand {
    min-height: 0;
    aspect-ratio: 4 / 3;
    margin-top: var(--space-l) !important;
  }

  :root .is-style-paneel {
    margin: calc(-1 * var(--space-xl)) var(--space-s) 0 !important;
  }

  :root .is-style-indexlijst > li > .wp-block-group {
    grid-template-columns: 3.2rem minmax(0, 1fr) 9.6rem;
    grid-template-areas:
      "nr titel beeld"
      "nr groep beeld"
      "nr tekst beeld";
    row-gap: 0.4rem;
  }

  :root .is-style-indexlijst > li > .wp-block-group::after {
    display: none;
  }

  :root .is-style-indexlijst .wp-block-post-excerpt {
    margin-top: 0.8rem !important;
  }

  :root .is-style-werkraster > :nth-child(n of :not([style*="display: none"])),
  :root .is-style-reviews > :nth-child(n of :not([style*="display: none"])) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  :root .is-style-werkraster > :nth-child(even of :not([style*="display: none"])) {
    margin-left: 18%;
  }

  :root .is-style-reviews > :nth-child(even of :not([style*="display: none"])) {
    margin-left: 12%;
  }

  :root .is-style-tijdlijn {
    border-top: 0;
    border-left: 2px solid var(--base);
  }

  :root .is-style-tijdlijn > * {
    padding-top: 0;
    padding-left: var(--space-m);
  }

  :root .is-style-tijdlijn > :nth-child(n)::before {
    top: 0.2rem;
    left: -0.8rem;
    width: 1.4rem;
    height: 2.8rem;
  }
}

/* Smal scherm (tot 800px, zoals de eerste versie): niveaumeter, tijdlijn,
   galerij en de ruimte boven de tekst van een dienst */
@media (max-width: 800px) {
  :root .is-style-tijdlijn > * > h3 {
    margin-top: 0.8rem;
  }

  :root .ejs-beloftes .wp-block-column[style*="flex-basis:4rem"] {
    flex-basis: 3.2rem !important;
  }

  :root .single-dienst main > section:has(> .is-layout-grid > .wp-block-post-content) {
    padding-top: var(--space-xl) !important;
  }

  :root .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: 100%;
  }

  :root .is-style-niveaumeter {
    grid-template-columns: 1fr 1.25fr 2fr 0.7fr 1fr;
    height: clamp(28rem, 80vw, 44rem);
    margin-bottom: 4.4rem !important;
  }

  :root .is-style-niveaumeter figcaption.wp-element-caption {
    font-size: 0;
  }

  :root .is-style-niveaumeter figcaption strong {
    margin: 0;
    font-size: 1.1rem;
  }

  :root .is-style-niveaumeter > .wp-block-group > p {
    display: none;
  }

  :root .is-style-niveaumeter > .wp-block-group::after {
    inset: 0;
  }
}

@media (max-width: 560px) {
  :root .is-layout-grid:has(> .is-style-label:first-child + h1) > .is-style-kop-groot {
    font-size: 15.5vw !important;
  }
}

@media (max-width: 640px) {

  /* Feitenstrook in twee kolommen: geen lijn voor het derde feit */
  :root .is-style-feitenstrook > :nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- Lopende tekst (inhoud van pagina's, diensten, projecten en artiesten) ---------- */

:root .is-style-lopende-tekst > * + * {
  margin-block-start: 1.1em;
}

:root .is-style-lopende-tekst > * + :is(h2, h3, h4) {
  margin-block-start: var(--space-l);
}

:root .is-style-lopende-tekst > :is(h2, h3, h4) + * {
  margin-block-start: var(--space-s);
}

:root .is-style-lopende-tekst > * + :is(.wp-block-gallery, .wp-block-image, .wp-block-quote, .wp-block-group, .wp-block-query) {
  margin-block-start: var(--space-xl);
}

/* Per soort pagina, zoals in de eerste versie. Dienst: kleinere tussenkoppen
   met meer ruimte eromheen. */
:root :where(.single-dienst, .post-type-dienst) .is-style-lopende-tekst > h2 {
  font-size: var(--text-2xl);
}

:root :where(.single-dienst, .post-type-dienst) .is-style-lopende-tekst > * + h2 {
  margin-block-start: var(--space-2xl);
}

:root :where(.single-dienst, .post-type-dienst) .is-style-lopende-tekst > h2 + * {
  margin-block-start: var(--space-m);
}

/* Project: grote tekst */
:root :is(.single-project, .post-type-project) .is-style-lopende-tekst > p:not([class*="has-"]) {
  font-size: var(--text-l);
  line-height: 1.55;
}

/* Artiest: eerste alinea groot, de rest gewoon; video's iets dichter op de tekst */
:root :is(.single-artiest, .post-type-artiest) .is-style-lopende-tekst > p:not([class*="has-"]) {
  font-size: var(--text-m);
  line-height: 1.65;
}

:root :is(.single-artiest, .post-type-artiest) .is-style-lopende-tekst > p:not([class*="has-"]):first-child {
  font-size: var(--text-l);
  line-height: 1.5;
  color: var(--text-title);
}

:root :is(.single-artiest, .post-type-artiest) .is-style-lopende-tekst > * + .wp-block-embed {
  margin-block-start: var(--space-m);
}

/* Artiesten in de tekst van een dienst: twee naast elkaar */
:root .is-style-lopende-tekst .is-style-portretten > li {
  grid-column: span 6;
}

:root .is-style-lopende-tekst .is-style-portretten > :nth-child(n of :not([style*="display: none"])) {
  margin-top: 0;
}

:root .is-style-lopende-tekst .is-style-portretten > :nth-child(even of :not([style*="display: none"])) {
  margin-top: var(--space-xl);
}

/* Review onder het verhaal: lijn erboven, geen foto (het portret staat ernaast) */
:root .single-artiest .wp-block-post-content + .wp-block-ejsound-testimonial {
  padding-top: var(--space-l);
  border-top: 1px solid var(--border-primary);
}

:root .single-artiest .wp-block-post-content + .wp-block-ejsound-testimonial .quote__photo {
  display: none;
}

:root .is-style-lopende-tekst a {
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

/* ---------- Afbeelding en review ---------- */

:root .wp-block-image.is-style-met-kader {
  padding: var(--space-m);
  background: var(--bg-surface);
  border: 1px solid var(--border-primary);
}

:root .is-style-review .is-style-statement::before {
  content: "\201C";
  color: var(--primary-d-1);
}

:root .is-style-review .is-style-statement::after {
  content: "\201D";
  color: var(--primary-d-1);
}

:root .is-style-review .wp-block-image img {
  display: block;
  width: 6.4rem;
  height: 6.4rem !important;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--secondary);
}

/* ---------- Dienstblokken (dienstenpagina): foto's en tekst om en om ---------- */

:root main:has(.is-style-dienstblokken) {
  counter-reset: dienst;
}

:root .is-style-dienstblokken > li {
  counter-increment: dienst;
  margin-block: 0;
}

:root .is-style-dienstblokken > li > .wp-block-group {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);
  align-items: center;
  margin-bottom: var(--space-3xl);
}

:root .is-style-dienstblokken > li:last-child > .wp-block-group {
  margin-bottom: var(--space-xl);
}

:root .is-style-dienstblokken :where(li > .wp-block-group > *) {
  margin: 0;
}

:root .is-style-dienstblokken > li > .wp-block-group > .service-block__media {
  grid-column: 1 / span 7;
}

:root .is-style-dienstblokken > li > .wp-block-group > .wp-block-group {
  grid-column: 9 / span 4;
}

:root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) > .wp-block-group > .service-block__media {
  grid-column: 6 / span 7;
  order: 2;
}

:root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) .service-block__sub {
  right: auto;
  left: calc(-1 * var(--space-l));
}

:root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) > .wp-block-group > .wp-block-group {
  grid-column: 1 / span 4;
  order: 1;
}

/* Nummer voor de groep: 01 TECHNIEK */
:root .is-style-dienstblokken .wp-block-group > p:first-child {
  font-weight: 400;
  line-height: 1.6;
}

:root .is-style-dienstblokken .wp-block-group > p:first-child::before {
  content: counter(dienst, decimal-leading-zero);
  color: var(--primary-d-2);
}

:root .is-style-dienstblokken .wp-block-post-title {
  font-weight: 760;
  font-stretch: 84%;
  line-height: 0.94;
}

:root .is-style-dienstblokken .wp-block-post-title a {
  text-decoration: none;
}

:root .is-style-dienstblokken .wp-block-buttons {
  align-items: center;
  gap: 1.4rem 2.4rem;
  margin-top: var(--space-m);
}

/* ---------- Genummerde links (dienstenpagina, onder de intro) ---------- */

:root .is-style-springlijst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border-primary);
  counter-reset: spring;
}

:root .is-style-springlijst > li {
  counter-increment: spring;
  margin-block: 0;
  border-bottom: 1px solid var(--border-primary);
}

:root .is-style-springlijst .wp-block-post-title {
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 500;
  font-stretch: normal;
  line-height: 1.4;
  letter-spacing: 0;
}

:root .is-style-springlijst .wp-block-post-title a {
  display: flex;
  gap: 1rem;
  padding-block: 0.9rem;
  text-decoration: none;
}

:root .is-style-springlijst .wp-block-post-title a::before {
  content: counter(spring, decimal-leading-zero);
  padding-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--primary-d-2);
}

/* ---------- Links met pijl (andere diensten, berichten) ---------- */

:root .is-style-pijllijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  border-bottom: 1px solid var(--border-primary);
}

:root .is-style-pijllijst > li {
  margin-block: 0;
  border-top: 1px solid var(--border-primary);
}

:root .is-style-pijllijst .wp-block-post-title {
  font-size: var(--text-xl);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.05;
}

:root .is-style-pijllijst .wp-block-post-title a {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: 1.8rem;
  text-decoration: none;
}

:root .is-style-pijllijst .wp-block-post-title a::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 400;
}

:root .is-style-pijllijst .wp-block-post-title a:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* ---------- Portretten (artiesten): drie op verschillende hoogtes ---------- */

:root .is-style-portretten {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
  align-items: start;
}

:root .is-style-portretten > li {
  grid-column: span 4;
  margin-block: 0;
}

:root .is-style-portretten > :nth-child(3n + 2 of :not([style*="display: none"])) { margin-top: var(--space-xl); }
:root .is-style-portretten > :nth-child(3n + 3 of :not([style*="display: none"])) { margin-top: var(--space-2xl); }

:root .is-style-portretten > li > .wp-block-group {
  position: relative;
}

:root .is-style-portretten :where(li > .wp-block-group > *) {
  margin: 0;
}

:root .is-style-portretten .wp-block-post-featured-image {
  overflow: hidden;
  background: var(--secondary);
}

:root .is-style-portretten .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.7s var(--ease);
}

:root .is-style-portretten li:hover .wp-block-post-featured-image img {
  transform: scale(1.035);
}

:root .is-style-portretten .wp-block-group .wp-block-group {
  margin-top: 1.6rem;
}

:root .is-style-portretten .wp-block-post-title {
  font-size: var(--text-xl);
  font-weight: 720;
  font-stretch: 86%;
}

:root .is-style-portretten .wp-block-post-title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
  transition: text-decoration-color 0.2s;
}

:root .is-style-portretten .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

:root .is-style-portretten li:hover .wp-block-post-title a {
  text-decoration-color: var(--primary);
}

:root .is-style-portretten .wp-block-post-excerpt {
  margin-top: 1rem;
}

/* Artiestpagina: portret blijft staan naast een lang verhaal */
:root .is-style-blijft-staan .wp-block-post-featured-image img {
  max-height: calc(100vh - 24rem);
}

/* ---------- Zigzag (projectenpagina): twee ongelijke kolommen ---------- */

:root .is-style-zigzag {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-2xl);
  align-items: start;
}

:root .is-style-zigzag > li {
  margin-block: 0;
}

:root .is-style-zigzag > :nth-child(4n + 1 of :not([style*="display: none"])) { grid-column: 1 / span 7; }
:root .is-style-zigzag > :nth-child(4n + 2 of :not([style*="display: none"])) { grid-column: 9 / span 4; margin-top: var(--space-2xl); }
:root .is-style-zigzag > :nth-child(4n + 3 of :not([style*="display: none"])) { grid-column: 1 / span 5; }
:root .is-style-zigzag > :nth-child(4n + 4 of :not([style*="display: none"])) { grid-column: 7 / span 6; margin-top: var(--space-3xl); }

:root .is-style-zigzag > :nth-child(4n + 2 of :not([style*="display: none"])) .wp-block-post-featured-image,
:root .is-style-zigzag > :nth-child(4n + 3 of :not([style*="display: none"])) .wp-block-post-featured-image { aspect-ratio: 4 / 5; }
:root .is-style-zigzag > :nth-child(4n + 4 of :not([style*="display: none"])) .wp-block-post-featured-image { aspect-ratio: 3 / 2; }

/* ---------- Kleinere schermen (pagina's) ---------- */

@media (max-width: 1024px) {
  :root .is-style-dienstblokken > li > .wp-block-group > .service-block__media,
  :root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) > .wp-block-group > .service-block__media {
    grid-column: 1 / -1;
    order: 1;
    margin-right: var(--space-l);
    margin-left: 0;
  }

  :root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) > .wp-block-group > .service-block__media {
    margin-right: 0;
    margin-left: var(--space-l);
  }

  :root .is-style-dienstblokken > li > .wp-block-group > .wp-block-group,
  :root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) > .wp-block-group > .wp-block-group {
    grid-column: 1 / -1;
    order: 2;
    max-width: 64rem;
  }

  :root .is-style-pijllijst,
  :root .is-style-springlijst {
    grid-template-columns: 1fr;
  }

  :root .is-style-portretten > li {
    grid-column: span 6;
  }

  :root .is-style-portretten > :nth-child(n of :not([style*="display: none"])) {
    margin-top: 0;
  }

  :root .is-style-portretten > :nth-child(even of :not([style*="display: none"])) {
    margin-top: var(--space-xl);
  }

  :root .is-style-zigzag > :nth-child(n of :not([style*="display: none"])) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  :root .is-style-zigzag > :nth-child(even of :not([style*="display: none"])) {
    margin-left: 18%;
  }

  :root .is-style-blijft-staan .wp-block-post-featured-image img {
    max-height: none;
  }
}

@media (max-width: 640px) {
  :root .is-style-dienstblokken > li > .wp-block-group > .service-block__media,
  :root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) > .wp-block-group > .service-block__media {
    margin-inline: 0;
  }

  :root .is-style-dienstblokken .service-block__sub {
    right: 0;
    width: 40%;
  }

  :root .is-style-dienstblokken > :nth-child(even of :not([style*="display: none"])) .service-block__sub {
    left: 0;
  }

  :root .is-style-portretten > li,
  :root .is-style-lopende-tekst .is-style-portretten > li {
    grid-column: 1 / -1;
  }

  :root :is(.is-style-portretten, .is-style-lopende-tekst .is-style-portretten) > :nth-child(even of :not([style*="display: none"])) {
    margin-top: 0;
    margin-left: 16%;
  }
}