/*
 * TDO-opmaak voor de Elementor-homepage.
 * Elke Elementor-container van het thema draagt de klasse "tdo" plus de klasse uit main.css.
 * Elementor zet zelf padding, gap, breedte en lettertypes; die worden hier teruggezet naar de huisstijl.
 * De !important-regels zijn nodig omdat Elementor zijn eigen stijlen later en met variabelen toepast.
 */

/* ---------- Basis: Elementor-standaarden neutraliseren ---------- */
.e-con.tdo {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  min-height: 0;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
}
.e-con.tdo > .elementor-element { margin: 0; }
.e-con.tdo .elementor-widget:not(:last-child) { margin-block-end: 0; }

.e-con.tdo .elementor-heading-title {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 0 0 .5em !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.e-con.tdo h1.elementor-heading-title { font-size: clamp(2.3rem, 5.4vw, 4rem) !important; }
.e-con.tdo h2.elementor-heading-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important; }
.e-con.tdo h3.elementor-heading-title { font-size: 1.35rem !important; font-weight: 700 !important; }
.e-con.tdo .elementor-widget-text-editor {
  color: inherit !important;
  font-family: var(--font-body) !important;
  font-size: inherit !important;
  line-height: 1.6 !important;
}
.e-con.tdo .elementor-widget-text-editor > .elementor-widget-container > :last-child,
.e-con.tdo .elementor-widget-text-editor > :last-child { margin-bottom: 0; }

/* Knoppen */
.tdo-btn .elementor-button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 24px !important; border-radius: 999px !important;
  font: 800 1rem/1 var(--font-body) !important; text-decoration: none;
  border: 2px solid transparent !important; transition: transform .15s, background .15s;
}
.tdo-btn .elementor-button:hover { transform: translateY(-3px); }
.tdo-btn-yellow .elementor-button { background: var(--yellow) !important; color: var(--ink) !important; box-shadow: 0 4px 0 #D9A41F; }
.tdo-btn-teal .elementor-button { background: var(--teal) !important; color: #fff !important; box-shadow: 0 4px 0 var(--teal-dark); }
.tdo-btn-ghost .elementor-button { background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.85) !important; }
.tdo-btn-ghost .elementor-button:hover { background: rgba(255,255,255,.18) !important; }
.tdo-btn-soft .elementor-button { background: var(--tint-mint) !important; color: var(--teal-dark) !important; width: 100%; }
.tdo-btn-soft .elementor-button:hover { background: #D2EEE5 !important; }
.tdo-btn-outline-dark .elementor-button { background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important; }
.tdo-btn .elementor-button-text { color: inherit !important; }

/* Afbeeldingen die hun vak vullen */
.e-con.tdo .w-cover { position: absolute !important; inset: 0; width: 100% !important; height: 100%; }
.e-con.tdo .w-cover .elementor-widget-container,
.e-con.tdo .w-cover img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; border-radius: 0 !important; }

/* ---------- Secties ---------- */
.e-con.tdo.section { padding: 96px 0 !important; }
.e-con.tdo.section-tight { padding: 0 0 96px !important; }
.e-con.tdo.praktisch { padding-top: 96px !important; }
.e-con.tdo.container { width: min(1200px, 100% - 32px) !important; max-width: none !important; margin-inline: auto !important; }
.e-con.tdo.narrow { width: min(860px, 100% - 32px) !important; }
.e-con.tdo.section-head { max-width: 680px !important; margin: 0 0 44px !important; }
.e-con.tdo.section-head.center { margin-inline: auto !important; text-align: center; align-items: center; }

/* Hero */
.e-con.tdo.hero { position: relative; min-height: min(86vh, 760px) !important; justify-content: center !important; overflow: hidden; background: var(--teal); color: #fff; }
.e-con.tdo.hero .w-hero-bg { position: absolute !important; inset: 0; width: 100% !important; height: 100%; z-index: 0; }
.e-con.tdo.hero .w-hero-bg .elementor-widget-container,
.e-con.tdo.hero .w-hero-bg img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center 40%; }
.e-con.tdo.hero .w-hero-overlay { position: absolute !important; inset: 0; width: 100% !important; z-index: 1; }
.e-con.tdo.hero .w-hero-overlay .elementor-widget-container,
.e-con.tdo.hero .w-hero-overlay .hero-overlay { position: absolute; inset: 0; }
.e-con.tdo.hero-inner { position: relative; z-index: 2; padding: 80px 0 140px !important; align-items: flex-start; }
.e-con.tdo.hero h1.elementor-heading-title { color: #fff !important; max-width: 13ch; margin-top: 18px !important; }
.e-con.tdo.hero .w-wave { position: absolute !important; left: 0; right: 0; bottom: -1px; width: 100% !important; z-index: 2; line-height: 0; }
.e-con.tdo.hero .wave { position: static; display: block; }

.e-con.tdo.btn-row { flex-direction: row !important; flex-wrap: wrap !important; gap: 14px !important; margin-top: 28px !important; width: auto !important; }
.e-con.tdo.btn-row > .elementor-widget { width: auto !important; }

/* Kaarten */
.e-con.tdo.grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px !important; }
.e-con.tdo.card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 0 rgba(11,122,112,.12); transition: transform .2s; }
.e-con.tdo.card:hover { transform: translateY(-4px); }
.e-con.tdo.card-media { position: relative; aspect-ratio: 16 / 10; overflow: visible; z-index: 2; }
.e-con.tdo.card-media.tall { aspect-ratio: 4 / 3.4; }
.e-con.tdo .w-card-icon { position: absolute !important; left: 20px; bottom: -26px; width: auto !important; z-index: 3; }
.e-con.tdo .w-card-icon .card-icon { position: static; }
.e-con.tdo .w-card-tag { position: absolute !important; top: 16px; left: 16px; width: auto !important; z-index: 3; }
.e-con.tdo.card-body { padding: 40px 24px 24px !important; flex: 1; }
.e-con.tdo.card-photo .card-body { padding-top: 22px !important; }
.e-con.tdo.card-body .w-grow { flex: 1; color: var(--ink-soft); }

/* Split met blob-foto */
.e-con.tdo.split { display: grid !important; grid-template-columns: 5fr 6fr; gap: 64px !important; align-items: center; }
.e-con.tdo.blob-photo { position: relative; max-width: 460px !important; width: 100% !important; justify-self: center; }
.e-con.tdo.blob-photo > .elementor-widget { position: relative; z-index: 1; }
.e-con.tdo.blob-photo img { width: 100% !important; max-width: none !important; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: 46% 54% 52% 48% / 54% 44% 56% 46% !important; }
.e-con.tdo.levels { display: grid !important; gap: 14px !important; margin: 28px 0 32px !important; }
.e-con.tdo.split-text { align-items: flex-start; }
.e-con.tdo.split-text > .elementor-widget:not(.tdo-btn) { width: 100%; }

/* Praktisch en cijfers */
.e-con.tdo.facts { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px !important; margin-top: -40px !important; position: relative; }
.e-con.tdo.stats { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 20px !important; margin-bottom: 28px !important; }
.e-con.tdo .w-fact .elementor-widget-container, .e-con.tdo .w-fact .fact,
.e-con.tdo .w-stat .elementor-widget-container, .e-con.tdo .w-stat .stat { height: 100%; }
.e-con.tdo .fact h3 { color: #fff; }
.e-con.tdo .fact-yellow h3 { color: var(--ink); }

/* Volgende stappen en steun */
.e-con.tdo.next-steps { display: grid !important; grid-template-columns: 1fr 1.4fr; gap: 32px !important; align-items: center; margin-top: 40px !important; }
.e-con.tdo.next-steps p { color: var(--ink-soft); }
.e-con.tdo.cta { display: grid !important; grid-template-columns: 1fr 1.3fr; background: var(--yellow); border-radius: 36px; overflow: hidden; box-shadow: 0 8px 0 #D9A41F; }
.e-con.tdo.cta .w-cta-photo { position: relative !important; min-height: 320px; }
.e-con.tdo.cta .w-cta-photo .elementor-widget-container { position: absolute; inset: 0; }
.e-con.tdo.cta-body { padding: 56px 48px !important; }
.e-con.tdo.cta-body p { font-size: 1.15rem; max-width: 48ch; }

/* ---------- Responsief ---------- */
@media (max-width: 1080px) {
  .e-con.tdo.facts, .e-con.tdo.stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .e-con.tdo.section { padding: 72px 0 !important; }
  .e-con.tdo.praktisch { padding-top: 72px !important; }
  .e-con.tdo.grid-3 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto !important; }
  .e-con.tdo.split { grid-template-columns: 1fr; gap: 40px !important; }
  .e-con.tdo.blob-photo { max-width: 360px !important; }
  .e-con.tdo.next-steps, .e-con.tdo.cta { grid-template-columns: 1fr; }
  .e-con.tdo.cta .w-cta-photo { min-height: 220px; }
  .e-con.tdo.cta-body { padding: 36px 24px !important; }
  .e-con.tdo.hero-inner { padding: 56px 0 120px !important; }
}
@media (max-width: 520px) {
  .e-con.tdo.facts, .e-con.tdo.stats { grid-template-columns: 1fr; }
  .e-con.tdo.btn-row, .e-con.tdo.btn-row > .elementor-widget, .e-con.tdo.btn-row .elementor-button { width: 100% !important; }
}