/* VORMule: projecttegels op telefoon en tablet. Op touchscreens bestaat geen hover, dus de tekst staat
   altijd zichtbaar onderin de foto, op een donkere verloop-laag, in een formaat dat in de tegel past. */
@media (max-width: 1024px), (hover: none) {
  .elementor-cta--skin-cover .elementor-cta { min-height: 230px; }
  .elementor-cta--skin-cover .elementor-cta__bg-overlay {
    background: linear-gradient(to top, rgba(46,43,44,.88) 0%, rgba(46,43,44,.55) 38%, rgba(46,43,44,0) 72%) !important;
    opacity: 1 !important;
  }
  .elementor-cta--skin-cover .elementor-cta__content {
    min-height: 230px !important; padding: 18px 20px !important;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left !important;
  }
  .elementor-cta--skin-cover .elementor-cta__content-item {
    transform: none !important; opacity: 1 !important; transition: none !important; color: #fff !important;
  }
  .elementor-cta--skin-cover .elementor-cta__title {
    font-size: 24px !important; line-height: 1.15 !important; margin: 0 0 4px !important; letter-spacing: 0 !important;
    overflow-wrap: anywhere; hyphens: auto;
  }
  .elementor-cta--skin-cover .elementor-cta__description {
    font-size: 14px !important; line-height: 1.4 !important; margin: 0 !important; opacity: .9 !important;
  }
  .elementor-cta--skin-cover .elementor-cta__button-wrapper { display: none !important; }
  .elementor-cta--skin-cover .elementor-cta:hover .elementor-cta__bg { transform: none !important; }
}

/* Smalle tegels (twee naast elkaar bij "Andere projecten"): kleinere tekst zodat namen niet over de foto lopen */
.elementor-cta--skin-cover .elementor-widget-container { container-type: inline-size; }
@container (max-width: 260px) {
  .elementor-cta--skin-cover .elementor-cta__content { padding: 12px 12px !important; min-height: 190px !important; }
  .elementor-cta--skin-cover .elementor-cta__title { font-size: 18px !important; }
  .elementor-cta--skin-cover .elementor-cta__description { font-size: 12px !important; line-height: 1.35 !important; }
}

@media (max-width: 767px) {
  /* vaste kopbalk bij scrollen: logo past in de witte balk in plaats van eronder uit te steken */
  .elementor-sticky--effects .elementor-element-786601e img { max-height: 52px !important; width: auto !important; }
  /* projectpagina's: ruimte tussen de kop en de lijst Klant/Sector/Plaats */
  .elementor-element-6bb57e4 { margin-bottom: 28px !important; }
}

/* Mobiel menu: in huisstijl, ruimer, en pas onder het logo openklappen */
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown.elementor-nav-menu__container { background: #EEE9E4 !important; box-shadow: 0 12px 24px rgba(46,43,44,.12); }
  .elementor-nav-menu--dropdown a.elementor-item { padding: 14px 28px !important; color: #2E2B2C !important; border-bottom: 1px solid rgba(115,94,69,.18); }
  .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
  .elementor-nav-menu--dropdown a.elementor-item:hover,
  .elementor-nav-menu--dropdown a.elementor-item:focus { background: #4D343F !important; color: #fff !important; }
  .elementor-element-6e8f545:not(.elementor-sticky--effects) .elementor-nav-menu--dropdown.elementor-nav-menu__container { margin-top: 36px !important; }
}

/* 404-pagina: inhoud onder het logo, ruimte rondom en de footer onderaan */
body.error404 main.site-main { padding: 140px 24px 80px !important; min-height: calc(100vh - 230px); text-align: center; }
body.error404 main.site-main .entry-title { font-size: clamp(34px, 8vw, 56px); line-height: 1.1; margin: 0 0 18px; }