/* ==========================================================================
   Pagina-compositie. Alles wat hier hergebruikt raakt, hoort in
   components.css thuis.
   ========================================================================== */

/* ---- hero --------------------------------------------------------------- */

.hero {
  padding-top: clamp(2.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.hero__eyebrow { margin-bottom: var(--space-m); }

.hero__headline {
  font-size: var(--step-7);
  font-weight: 800;
  font-stretch: 88%;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  max-width: 13ch;
  margin-bottom: var(--space-m);
}

.hero__lede {
  max-width: 54ch;
  color: var(--ink-2);
  font-size: var(--step-1);
  margin-bottom: var(--space-l);
}

.hero__actions { margin-bottom: var(--space-l); }

/* De bron is 1600×900 — een WhatsApp-export, dus dat is het echte plafond aan
   detail. Eerder liep deze foto van rand tot rand: op elk scherm breder dan
   1600px (bijna elk bureaublad) werd hij dus door de browser opgerekt tot ver
   voorbij zijn eigen resolutie, en dát was de wazigheid — geen bestandsprobleem.

   De box hier is daarom gemaximeerd op 50rem (800px). Bij 1x is dat al kleiner
   dan de bron (dus verkleind, nooit vergroot); bij 2x (retina) vraagt de
   browser exact 1600px — precies de eigen resolutie van de foto, dus nooit
   opgerekt. `aspect-ratio` komt uit de echte afmetingen, dus geen bijgesneden
   `object-fit` nodig: de box past zich naar de foto, niet andersom. */
.hero__figure {
  max-width: 50rem;
  margin: 0 0 var(--space-l);
  border: var(--rule) solid var(--border);
  overflow: hidden;
  background: var(--surface-2);
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;
  filter: var(--card-image-filter);
}

/* Headline/foto-kolom en "Wat wij doen" staan vanaf 62rem naast elkaar in
   plaats van gestapeld — zelfde breekpunt als .section-head--split verderop
   op de site. Onder de foto blijft ruimte over in de kolom op brede schermen;
   dat is bewust, de foto rekt niet mee tot kolombreedte (zie .hero__figure
   hierboven — dat zou hem weer wazig maken). */
.hero__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

.hero__intro-title {
  font-size: var(--step-4);
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: var(--tracking-display);
  max-width: 22ch;
  margin-block: var(--space-s) var(--space-m);
}

/* ---- intro (hergebruikt door .hero__intro en elders) --------------------- */

.intro__body { display: grid; gap: var(--space-m); }
.intro__body p { color: var(--ink-2); font-size: var(--step-1); max-width: var(--measure); }

/* ---- werkwijze ---------------------------------------------------------- */

.steps {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* ---- diensten ----------------------------------------------------------- */

.services { display: grid; }
.services .service:last-child { border-bottom: var(--rule) solid var(--border); }

/* ---- werk / galerij ----------------------------------------------------- */

.work-group { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.work-group + .work-group { border-top: var(--rule) solid var(--border); }

.work-group__head {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-l);
}

.work-group__title {
  font-size: var(--step-3);
  font-weight: 700;
  font-stretch: 102%;
  letter-spacing: var(--tracking-display);
}

.work-group__lede { color: var(--ink-2); max-width: var(--measure); }

/* Paginakop en sprongnavigatie staan op breed scherm naast elkaar: titel +
   tekst links, de index rechts. Gestapeld op smal scherm. */
.work-head {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 62rem) {
  .work-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

/* Sprongnavigatie tussen de groepen — mono-chips die als een legenda lezen,
   onder elkaar gestapeld. */
.work-index {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.work-index__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border: var(--rule) solid var(--border);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.work-index__link:hover { border-color: var(--accent); color: var(--accent); }
.work-index__code { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---- certificering ------------------------------------------------------ */

.certs { display: grid; gap: var(--space-m); }

@media (min-width: 52rem) {
  .certs--material { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dit is een detailfoto van een plaatrand, geen sfeerbeeld: op volle
   sectiebreedte domineerde hij de hele pagina. Staand formaat, dus smal
   houden. */
.cert-figure {
  margin: var(--space-l) 0 0;
  max-width: 23rem;
}

/* ---- over ons ----------------------------------------------------------- */

/* "Over ons" en "Achtergrond" staan naast elkaar op breed scherm, met de
   paginatitel als gedeelde kop erboven. Gestapeld op smal scherm — zelfde
   breekpunt als .section-head--split. */
.about-intro {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

.about-intro__col { display: grid; gap: var(--space-s); align-content: start; }

.about-intro__heading {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

@media (min-width: 62rem) {
  .about-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.principles {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.principle { display: grid; gap: var(--space-2xs); padding-top: var(--space-s); border-top: 2px solid var(--ink); }
.principle__title { font-size: var(--step-1); font-weight: 700; letter-spacing: var(--tracking-tight); }
.principle__body { color: var(--ink-2); font-size: var(--step--1); }

.brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 0 var(--space-l); }

/* ---- contact ------------------------------------------------------------ */

/* De sectiekop ("Bellen werkt het snelst") staat op breed scherm naast de
   contactgegevens in plaats van erboven — zelfde breekpunt als de rest van
   de site. Gestapeld op smal scherm. */
.contact-layout {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }
}

/* Geen kop-marge: de grid-gap regelt hier de ruimte. */
.section-head--flush { margin-bottom: 0; }

/* De gegevens staan boven, de social-card en certificering eronder — nooit
   naast elkaar, zodat de gegevenslijst de volle kolombreedte krijgt. */
.contact-grid { display: grid; gap: var(--space-xl); }

.contact-aside { display: grid; gap: var(--space-m); align-content: start; }

/* ---- slot-cta ----------------------------------------------------------- */

.cta {
  display: grid;
  gap: var(--space-m);
  padding: clamp(2.25rem, 6vw, 4rem);
  background: var(--surface);
  border: var(--rule) solid var(--border);
  border-left: 3px solid var(--accent);
}

.cta__heading {
  font-size: var(--step-4);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
}

.cta__body { color: var(--ink-2); max-width: var(--measure); font-size: var(--step-1); }

/* ---- werkgebied --------------------------------------------------------- */

.area__body { color: var(--ink-2); font-size: var(--step-1); max-width: var(--measure); margin-bottom: var(--space-m); }

/* ---- 404 ---------------------------------------------------------------- */

.notfound { padding-block: clamp(4rem, 14vw, 9rem); }

.notfound__code {
  font-family: var(--font-display);
  font-size: var(--step-7);
  font-weight: 800;
  font-stretch: 88%;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  color: var(--accent);
}

.notfound__title { font-size: var(--step-4); font-weight: 700; margin-block: var(--space-s); }
.notfound__body { color: var(--ink-2); font-size: var(--step-1); max-width: 46ch; margin-bottom: var(--space-l); }