/* Elzineer — paginalayout van de one-pager. Laad na tokens.css en components.css.
   Alleen var(--…) uit tokens.css: geen hex-waarden, geen losse px-afstanden. De breekpunten (480, 720, 820,
   900px) volgen components.css; media queries kunnen geen var() gebruiken. */

/* ---------- basis ---------- */
img { max-width: 100%; height: auto; }

/* Verborgen blijft verborgen, ook als een ez-klasse display zet (ez-notice, ez-field__msg). */
[hidden] { display: none !important; }

/* Zonder JavaScript stuurt de server terug naar /#verzonden of /#niet-verzonden; dan toont de melding
   zich via :target. Met JavaScript (html.js) regelt main.js de meldingen zelf. */
html:not(.js) .ez-notice[hidden]:target { display: flex !important; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Geen los woord op de laatste regel van een intro. */
.ez-sh__intro, .ez-hero__lead { text-wrap: pretty; }

/* Op smalle telefoons past een maatlijn-label met 0,38em spatiëring niet op één regel naast de lijnen.
   Dan mag het label afbreken (de   in de HTML bepalen waar) in plaats van de pagina te verbreden. */
@media (max-width: 480px) {
  .ez-maat__label { flex: 0 1 auto; min-width: 0; white-space: normal; }
  .ez-maat--center .ez-maat__label { text-align: center; }
  .ez-maat__line { min-width: var(--space-4); }
}

/* ---------- header ---------- */
/* De header-binnenkant telt zijn zijmarge mee in layout-max; de secties niet. Zonder dit staat het logo
   op brede schermen een zijmarge verder naar binnen dan de inhoud eronder (de referentie lijnt ze uit). */
.ez-header__inner { max-width: calc(var(--layout-max) + var(--space-6) * 2); }

/* De header schakelt bij 820px naar de smalle telefoonmarge, de secties pas bij 720px. Daartussen
   houdt de header de brede marge, zodat logo, menu en inhoud op één lijn staan. */
@media (min-width: 721px) and (max-width: 820px) {
  .ez-header__inner { padding: 0 var(--space-6); }
  .ez-nav { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* Menuknop: het icoon volgt aria-expanded (☰ dicht, × open). */
.ez-header__menu[aria-expanded="true"] [data-icon="menu"],
.ez-header__menu[aria-expanded="false"] [data-icon="x"] { display: none; }

/* Zonder JavaScript doet de menuknop niets; dan tonen we hem niet. De pagina blijft gewoon scrollbaar. */
html:not(.js) .ez-header__menu { display: none; }

/* Het uitklapmenu mag niet onder het scherm doorlopen (lage schermen, sterk ingezoomd). */
.ez-header.is-open .ez-nav {
  box-sizing: border-box;
  max-height: calc(100dvh - var(--layout-header));
  overflow-y: auto;
}

/* ---------- skip-link (een ez-btn--secondary die pas bij focus in beeld komt) ---------- */
.site-skip {
  position: absolute;
  z-index: 20;
  top: var(--space-3);
  left: var(--space-4);
  background: var(--surface);
  transform: translateY(calc(-100% - var(--space-6)));
}
.site-skip:focus { transform: none; }

/* ---------- projecten (2–4 ProjectCards) ---------- */
.site-projects { display: grid; gap: var(--space-6); }
/* Foto's staan in een <picture> (WebP met JPEG als terugval); die moet het 3:2-kader vullen. */
.ez-project__media picture { display: block; height: 100%; }
@media (min-width: 721px) {
  .site-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- over mij ---------- */
.site-about { display: grid; gap: var(--space-7); align-items: start; }
.site-about__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: calc(var(--layout-text) / 2 + var(--space-6));
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
}
.site-about__media picture { display: block; height: 100%; }
.site-about__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-about__text { max-width: var(--layout-text); }
.site-about__text p { margin: 0 0 var(--space-4); }
.site-about__text p:last-child { margin-bottom: 0; }
.site-about__todo {
  position: relative;
  min-height: calc(var(--space-10) + var(--space-8));
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 721px) {
  /* Fotokolom zo breed als de foto zelf, zodat de ruimte tot de tekst precies space-7 blijft. */
  .site-about {
    grid-template-columns: minmax(0, calc(var(--layout-text) / 2 + var(--space-6))) minmax(0, var(--layout-text));
  }
}

/* ---------- contact: ContactList naast het formulier ---------- */
.site-contact { display: grid; gap: var(--space-8); align-items: start; }
.site-contact__form { width: 100%; max-width: calc(var(--layout-text) - var(--space-10)); }
@media (min-width: 900px) {
  .site-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--layout-text) - var(--space-10)));
    gap: var(--space-9);
  }
}

/* ---------- footer ---------- */
.site-footer {
  padding: var(--space-7) var(--space-6);
  border-top: var(--stroke-hair) solid var(--line);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
/* Maat komt uit width/height in de HTML (164×32); img { height: auto } houdt de verhouding. */
.site-footer__logo { display: block; }
.site-footer__meta { margin: 0; color: var(--ink-muted); }

@media (max-width: 720px) {
  .site-footer { padding: var(--space-7) var(--space-4); }
}