/* Elzineer — componentstijlen. Laad na tokens.css. Typografie komt uit de type-klassen van tokens.css
   (display-xl, display-l, heading-s, step-number, maat-label, button-text, lead, body, body-strong, ui-text, small). */

/* ---------- basis ---------- */
html { scroll-padding-top: var(--layout-header); }
body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 28px; background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
[data-theme] { background: var(--surface); color: var(--ink); }
.ez-container { max-width: var(--layout-max); margin: 0 auto; }
.ez-section { padding: var(--space-9) var(--space-6); }
.ez-section--sunken { background: var(--surface-sunken); }
.ez-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ez-icon { flex: none; display: block; }
.display-xl, .display-l, .heading-m, .heading-s, .maat-label, .button-text { text-transform: uppercase; }
::selection { background: var(--signal); color: var(--on-signal); }
@media (max-width: 720px) {
  .ez-section { padding: var(--space-8) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- Button ---------- */
.ez-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); box-sizing: border-box; height: var(--layout-control); padding: 0 var(--space-5); border: var(--stroke-maat) solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out; }
.ez-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ez-btn__arrow { transition: transform .15s ease-out; }
.ez-btn:hover .ez-btn__arrow { transform: translateX(4px); }
.ez-btn--primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.ez-btn--primary:hover, .ez-btn--primary:active { background: var(--signal-hover); border-color: var(--signal-hover); }
.ez-btn--secondary { border-color: var(--ink); }
.ez-btn--secondary:hover, .ez-btn--secondary:active { background: var(--ink); color: var(--surface); }
.ez-btn--ghost { height: auto; padding: var(--space-1) 0; border: 0; }
.ez-btn--ghost:hover { color: var(--signal-text); }
.ez-btn:disabled, .ez-btn[aria-disabled="true"] { background: var(--line); border-color: var(--line); color: var(--ink-muted); cursor: not-allowed; }
.ez-btn:disabled .ez-btn__arrow { transform: none; }

/* ---------- Maatlijn (dimension line, uit het logo) ---------- */
.ez-maat { display: flex; align-items: center; gap: var(--space-3); color: var(--ink); --ez-maat-ink: currentColor; }
.ez-maat--signal { --ez-maat-ink: var(--signal); }
.ez-maat__line { position: relative; flex: 1 1 0; min-width: var(--space-6); height: var(--stroke-maat); background: var(--ez-maat-ink); }
.ez-maat__line:first-child::before, .ez-maat__line:last-child::after { content: ""; position: absolute; top: 50%; width: var(--stroke-maat); height: 14px; transform: translateY(-50%); background: var(--ez-maat-ink); }
.ez-maat__line:first-child::before { left: 0; }
.ez-maat__line:last-child::after { right: 0; }
.ez-maat__label { flex: none; white-space: nowrap; padding-left: 0.38em; }
.ez-maat--start .ez-maat__line:first-child { flex: 0 0 var(--space-6); }

/* ---------- SectionHeading ---------- */
.ez-sh { display: grid; gap: var(--space-5); max-width: var(--layout-text); margin-bottom: var(--space-7); }
.ez-sh--center { margin-left: auto; margin-right: auto; text-align: center; }
.ez-sh__title { margin: 0; }
.ez-sh__intro { margin: 0; color: var(--ink-muted); }
@media (max-width: 720px) { .ez-sh .display-l { font-size: 44px; } }

/* ---------- Hero ---------- */
.ez-hero { padding: var(--space-10) var(--space-6) var(--space-7); }
.ez-hero__inner { display: grid; gap: var(--space-7); }
.ez-hero__text { display: grid; align-content: end; gap: var(--space-6); }
.ez-hero__text > .ez-maat { max-width: 440px; }
.ez-hero__title { margin: 0; max-width: 12em; text-wrap: balance; }
.ez-hero__media { position: relative; aspect-ratio: 4 / 5; max-height: 560px; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); }
.ez-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .ez-hero__inner--media { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; } }
.ez-hero__lead { margin: 0; max-width: 560px; color: var(--ink-muted); }
.ez-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.ez-hero__foot { margin-top: var(--space-9); color: var(--ink-muted); }
@media (max-width: 720px) {
  .ez-hero { padding: var(--space-8) var(--space-4) var(--space-6); }
  .ez-hero .display-xl { font-size: clamp(52px, 13vw, 96px); }
  .ez-hero__foot { margin-top: var(--space-8); }
}

/* ---------- SiteHeader ---------- */
.ez-header { position: sticky; top: 0; z-index: 10; border-bottom: var(--stroke-hair) solid var(--line); }
.ez-header__inner { display: flex; align-items: center; gap: var(--space-6); max-width: var(--layout-max); height: var(--layout-header); margin: 0 auto; padding: 0 var(--space-6); box-sizing: border-box; }
.ez-header__logo { display: block; flex: none; margin-right: auto; }
.ez-header__logo img { display: block; height: 32px; width: auto; }
.ez-header__logo:focus-visible, .ez-nav__link:focus-visible, .ez-header__menu:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ez-nav { display: flex; align-items: stretch; gap: var(--space-5); height: 100%; }
.ez-nav__link { position: relative; display: flex; align-items: center; color: var(--ink-muted); text-decoration: none; }
.ez-nav__link:hover { color: var(--ink); }
.ez-nav__link.is-active { color: var(--ink); }
.ez-nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--stroke-heavy); background: var(--signal); }
.ez-header__cta { height: 40px; padding: 0 var(--space-4); }
.ez-header__menu { display: none; align-items: center; justify-content: center; width: var(--layout-control); height: var(--layout-control); margin-right: calc(var(--space-3) * -1); padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
@media (max-width: 820px) {
  .ez-header__inner { padding: 0 var(--space-4); gap: var(--space-3); }
  .ez-header__logo img { height: 26px; }
  .ez-header__menu { display: inline-flex; }
  .ez-header__cta { display: none; }
  .ez-nav { display: none; position: absolute; left: 0; right: 0; top: var(--layout-header); height: auto; flex-direction: column; gap: 0; padding: var(--space-2) var(--space-4) var(--space-5); background: var(--surface); border-bottom: var(--stroke-hair) solid var(--line); }
  .ez-header.is-open .ez-nav { display: flex; }
  .ez-nav__link { padding: var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line); }
  .ez-nav__link.is-active::after { left: auto; right: 0; top: 50%; bottom: auto; width: var(--space-5); transform: translateY(-50%); }
}

/* ---------- ServiceCard ---------- */
.ez-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.ez-card { position: relative; display: grid; align-content: start; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--surface-raised); border: var(--stroke-hair) solid var(--line); border-radius: var(--radius-md); transition: border-color .15s ease-out; }
.ez-card::before, .ez-card::after { content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--ink); transition: border-color .15s ease-out; }
.ez-card::before { top: -1px; left: -1px; border-top-width: var(--stroke-maat); border-left-width: var(--stroke-maat); border-top-left-radius: var(--radius-md); }
.ez-card::after { right: -1px; bottom: -1px; border-right-width: var(--stroke-maat); border-bottom-width: var(--stroke-maat); border-bottom-right-radius: var(--radius-md); }
.ez-card:hover { border-color: var(--line-strong); }
.ez-card:hover::before, .ez-card:hover::after { border-color: var(--signal); }
.ez-card__icon { display: inline-flex; color: var(--ink); }
.ez-card__title { margin: 0; }
.ez-card__body { margin: 0; color: var(--ink-muted); }
.ez-card__body p { margin: 0 0 var(--space-3); }
.ez-card__body p:last-child { margin-bottom: 0; }
.ez-card__list { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: var(--space-4) 0 0; list-style: none; border-top: var(--stroke-hair) solid var(--line); }
.ez-card__list li { position: relative; padding-left: var(--space-6); }
.ez-card__list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: var(--stroke-maat); background: var(--signal); }

/* ---------- ProcessStep ---------- */
.ez-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ez-step { display: grid; align-content: start; gap: var(--space-3); }
.ez-step__num { color: var(--signal-text); }
.ez-step__rule { position: relative; display: block; height: var(--stroke-maat); margin: var(--space-2) 0 var(--space-3); background: var(--ink); }
.ez-step__rule::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--stroke-maat); height: 14px; transform: translateY(-50%); background: var(--ink); }
.ez-step:last-child .ez-step__rule::after { content: ""; position: absolute; right: 0; top: 50%; width: var(--stroke-maat); height: 14px; transform: translateY(-50%); background: var(--ink); }
.ez-step__title { margin: 0; }
.ez-step__text { margin: 0; color: var(--ink-muted); }

/* ---------- ProjectCard (titelblok) ---------- */
.ez-project { margin: 0; display: grid; background: var(--surface-raised); border: var(--stroke-maat) solid var(--ink); border-radius: var(--radius-md); overflow: hidden; }
.ez-project__media { position: relative; aspect-ratio: 3 / 2; background: var(--surface-sunken); }
.ez-project__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ez-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-4); text-align: center; color: var(--ink-muted); background-color: var(--surface-sunken); background-image: repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 12px); }
.ez-titelblok { display: grid; border-top: var(--stroke-maat) solid var(--ink); }
.ez-titelblok__title { margin: 0; padding: var(--space-4) var(--space-4) var(--space-3); }
.ez-titelblok__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 0; border-top: var(--stroke-hair) solid var(--line-strong); }
.ez-titelblok__cell { padding: var(--space-2) var(--space-4) var(--space-3); border-left: var(--stroke-hair) solid var(--line-strong); }
.ez-titelblok__cell:first-child { border-left: 0; }
.ez-titelblok__cell dt { color: var(--ink-muted); font-size: 11px; line-height: 16px; letter-spacing: 0.24em; }
.ez-titelblok__cell dd { margin: 2px 0 0; }

/* ---------- ContactList ---------- */
.ez-contact { position: relative; display: grid; gap: var(--space-1); margin: 0; padding: var(--space-2) 0; list-style: none; }
.ez-contact::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(24px + var(--space-5)); width: var(--stroke-maat); background: var(--ink); }
.ez-contact__row { display: grid; grid-template-columns: 24px 1fr; align-items: center; column-gap: calc(var(--space-5) * 2 + var(--stroke-maat)); min-height: var(--layout-control); }
.ez-contact__icon { display: inline-flex; color: var(--ink); }
.ez-contact__text { overflow-wrap: anywhere; }
.ez-contact__link { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--signal), var(--signal)); background-size: 0 var(--stroke-maat); background-position: 0 100%; background-repeat: no-repeat; transition: background-size .2s ease-out; }
.ez-contact__link:hover { background-size: 100% var(--stroke-maat); }
.ez-contact__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- TextField ---------- */
.ez-form { display: grid; gap: var(--space-5); }
.ez-field { display: grid; gap: var(--space-2); }
.ez-field__label { color: var(--ink); }
.ez-field__opt { font-weight: 400; color: var(--ink-muted); }
.ez-input { box-sizing: border-box; width: 100%; height: var(--layout-control); margin: 0; padding: 0 var(--space-4); background: var(--surface-raised); color: var(--ink); border: var(--stroke-maat) solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-sans); appearance: none; transition: border-color .15s ease-out; }
textarea.ez-input { height: auto; min-height: 160px; padding: var(--space-3) var(--space-4); resize: vertical; }
.ez-input::placeholder { color: var(--ink-muted); opacity: 1; }
.ez-input:hover { border-color: var(--ink-muted); }
.ez-input:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.ez-field--error .ez-input { border-color: var(--signal-text); }
.ez-field__msg { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--ink-muted); }
.ez-field--error .ez-field__msg { color: var(--signal-text); }
.ez-notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
.ez-notice--success { background: var(--success-soft); color: var(--success); }
.ez-notice--error { background: var(--signal-soft); color: var(--signal-text); }