/* ============================================================
   RIET QUADEN MAKELAARS — hero

   Klassieke twee-koloms hero: links de kop + subregel + CTA's,
   rechts het ronde portret van Riet met een rustige rode ring en
   een klein STATISCH zegel "45 jaar · sinds 1980".

   Uitgangspunten:
   - Deze CSS is de EINDSTAND. Zonder JS en bij prefers-reduced-motion
     staat alles gewoon op zijn plek; hero.js zet alleen de beginstand
     en animeert daarnaartoe.
   - Geen CLS: het portret heeft een vaste aspect-ratio (1/1) en
     width/height op de <img>.
   - Het bronbeeld is al rond uitgesneden (590x590, cirkel raakt de rand).
     De container is óók vierkant, dus object-fit: cover snijdt niets weg:
     het hoofd kan per definitie niet worden afgekapt. De scale(1.02) op
     de <img> eet alleen het witte anti-alias-randje van de broncirkel op
     (~6 px aan elke kant; het hoofd begint pas ~55 px onder de bovenrand).
   - Kleurregel: wit op --rood haalt 3,97:1. Rood staat hier dus alleen in
     lijnen, ringen en stippen. Tekstkleuren: --zwart (17:1) en
     --steungrijs (6,6:1) op wit.
   ============================================================ */

#hero {
  /* minder lucht bovenaan dan het standaard sectie-ritme: de gereserveerde
     header-ruimte (.kop__ruimte, 140/110px) staat er al boven */
  padding-block: clamp(2.25rem, 1.4rem + 3.4vw, 5.5rem) clamp(3.25rem, 2.2rem + 4vw, 7rem);
  /* bewust GEEN overflow:clip hier: de uitstekende ring en het zegel passen
     al binnen de gereserveerde 40px marge van het medaillon, en Taak 9
     (Telefoonlijn) moet straks een lijn dwars door deze sectie kunnen tekenen */
}

.hero__raster {
  display: grid;
  grid-template-areas:
    "label"
    "kop"
    "sub"
    "beeld"
    "acties";
  row-gap: 0;
}

/* ---------- eyebrow ---------- */
.hero__label {
  grid-area: label;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steungrijs);
  line-height: 1.4;
}
.hero__label b {
  color: var(--rood-diep); /* zelfde scheidingsteken-stijl als de footer */
  font-weight: 600;
}
.hero__stip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rood);
  flex: none;
}

/* ---------- kop (G7 woord-reveal) ---------- */
.hero__kop {
  grid-area: kop;
  margin-top: 18px;
  font-family: var(--font-kop);
  /* eigen clamp: de <br> forceert een regelafbreking, dus "Uw droomhuis,"
     moet ook op 360px binnen de kolom passen */
  font-size: clamp(2.4rem, 1.9rem + 2.6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero__kop em {
  font-style: italic;
  font-weight: 500;
}

/* G7: de woorden. overflow:hidden maakt de "van onder naar boven"-reveal;
   de padding/margin houdt staarten (g, j, p) en cursieve schuinte heel. */
.hero__kop .woord {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.06em 0.08em 0.1em 0.02em;
  margin: -0.06em -0.08em -0.1em -0.02em;
}
.hero__kop .woord-inner {
  display: inline-block;
  will-change: transform;
}

/* ---------- subregel ---------- */
.hero__sub {
  grid-area: sub;
  margin-top: 20px;
  max-width: 46ch; /* ~65 tekens leesregel */
  color: var(--steungrijs);
  font-size: 1.125rem;
  line-height: 1.6;
}

/* ---------- knoppen + belregel ---------- */
.hero__acties {
  grid-area: acties;
  margin-top: 30px;
}
.hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* rustige tekstlinks onder de knoppen: dezelfde acties als in de footer,
   maar bewust geen derde en vierde knop (dat wordt te druk) */
.hero__extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 18px;
}
.hero__link {
  position: relative;
  padding: 2px 1px;
  font-family: var(--font-body);
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--zwart);
  border-bottom: 1px solid rgba(24, 22, 23, 0.25);
  transition: color 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
.hero__link:hover {
  color: var(--rood-diep);
  border-bottom-color: var(--rood);
}
.hero__link:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
  border-radius: 2px;
}
/* rode scheidingsstip, zelfde familie als het menu en de slotregel */
.hero__extra-stip {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rood);
  opacity: 0.6;
  flex: none;
}

.hero__bellen {
  margin-top: 20px;
  font-size: var(--fs-klein);
  color: var(--steungrijs);
}
.hero__telrij {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 8px;
}
.hero__mailrij {
  margin-top: 10px;
}
.hero__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--zwart);
  font-size: var(--fs-klein);
  font-weight: 600;
  border-bottom: 1px solid var(--rood);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 0.25s var(--ease-luxe);
}
.hero__tel:hover {
  color: var(--rood-diep);
}
.hero__tel:focus-visible {
  outline: 2px solid var(--zwart);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- portret ---------- */
.hero__beeld {
  grid-area: beeld;
  display: flex;
  justify-content: center;
}

.hero__medaillon {
  position: relative;
  isolation: isolate;
  /* de 40px marge is de ruimte waar de ring (-16px) en het zegel (-14px)
     in mogen uitsteken zonder de kolom uit te lopen */
  width: min(100% - 40px, 420px);
}

/* zachte warmgrijze gloed: houdt het witte vlak levend zonder plat kleurvlak */
.hero__gloed {
  position: absolute;
  /* Nooit verder naar buiten dan de 18 px die het medaillon vrijhoudt. Op
     12 % stak de gloed bij een groot medaillon 50 px uit, en dan kon de
     pagina rond 1024 px 2 px opzij scrollen. */
  inset: max(-18px, -12%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
    rgba(244, 244, 242, 0.95) 0%,
    rgba(244, 244, 242, 0.65) 46%,
    rgba(244, 244, 242, 0) 70%);
}

.hero__foto {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--warmgrijs); /* ruimte is gereserveerd vóór het laden */
  box-shadow: 0 26px 60px -34px rgba(24, 22, 23, 0.55);
}
.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.02);
}

/* rustige rode ring: één haarlijn, ruim om het portret heen */
.hero__ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1.5px solid var(--rood);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- zegel: statisch (besluit 9) ---------- */
.hero__zegel {
  position: absolute;
  left: -14px;
  bottom: 24px;
  width: 112px;
  height: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 50%;
  background: var(--wit);
  border: 1px solid var(--rood);
  box-shadow: 0 14px 30px -18px rgba(24, 22, 23, 0.45);
  text-align: center;
}
/* tweede haarlijn binnenin: leest als een klassiek keurmerk-zegel */
.hero__zegel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(230, 68, 73, 0.32);
}
.hero__zegel-groot {
  font-family: var(--font-kop);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--zwart);
}
.hero__zegel-lijn {
  width: 22px;
  height: 1px;
  background: var(--rood);
  opacity: 0.6;
}
.hero__zegel-klein {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--steungrijs);
}

/* ============================================================
   DESKTOP: twee kolommen, beeld rechts over de volle hoogte
   ============================================================ */
@media (min-width: 900px) {
  .hero__raster {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    /* de eerste en laatste rij zijn lege veerrijen. Het beeld is hoger dan
       de tekstkolom en spant over álle rijen; zonder die veren verdeelt
       grid die extra hoogte over de tekstrijen en wordt de tekst uit
       elkaar getrokken. Nu vangen de veren het op en staat de tekst
       netjes gecentreerd naast het portret. */
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas:
      ".      beeld"
      "label  beeld"
      "kop    beeld"
      "sub    beeld"
      "acties beeld"
      ".      beeld";
    column-gap: clamp(40px, 5vw, 84px);
  }
  .hero__beeld {
    align-self: center;
  }
}

/* brede en lage schermen (1920x760, ultrawide): het portret mag niet
   groter worden dan de zichtbare hoogte toelaat */
@media (min-width: 900px) and (max-height: 820px) {
  .hero__medaillon { width: min(100% - 40px, 344px); }
  .hero__zegel { width: 96px; height: 96px; bottom: 18px; }
  .hero__zegel-groot { font-size: 1rem; }
}

/* ============================================================
   MOBIEL: kop boven het portret, alles gecentreerd
   ============================================================ */
/* let op: bewust GEEN justify-items:center — de grid-items blijven op
   stretch staan (volle kolombreedte), zodat de percentages in
   min(100% - 40px, …) tegen een echte breedte rekenen in plaats van
   tegen een shrink-to-fit-breedte. Centreren gebeurt binnenin. */
@media (max-width: 899px) {
  .hero__raster { text-align: center; }
  /* De stip hoort naast de tekst. Zodra het label over twee regels breekt,
     bleef hij als los flex-item links naast het tekstblok hangen; met een
     inline-layout loopt hij gewoon vóór het eerste woord mee. */
  .hero__label {
    display: block;
    justify-content: center;
  }
  .hero__label .hero__stip {
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
  }
  .hero__sub { margin-inline: auto; }
  .hero__knoppen { justify-content: center; }
  .hero__extra,
  .hero__telrij { justify-content: center; }
  .hero__beeld { margin-block: 34px 4px; }
  .hero__medaillon { width: min(100% - 40px, 300px); }
}

@media (max-width: 560px) {
  .hero__label { font-size: 11px; letter-spacing: 0.13em; }
  .hero__sub { font-size: 1.0625rem; margin-top: 16px; }
  .hero__beeld { margin-block: 30px 2px; }
  .hero__medaillon { width: min(100% - 36px, 236px); }
  .hero__acties { margin-top: 26px; }
  .hero__knoppen { flex-direction: column; }
  .hero__knoppen .knop { width: 100%; }
  /* onder elkaar: de stip tussen twee gestapelde links slaat nergens op */
  .hero__extra { flex-direction: column; gap: 12px; }
  .hero__extra-stip { display: none; }
  .hero__telrij { flex-direction: column; align-items: center; gap: 12px; }
  .hero__zegel {
    left: -10px;
    bottom: 10px;
    width: 88px;
    height: 88px;
    gap: 4px;
  }
  .hero__zegel-groot { font-size: 0.9375rem; }
  .hero__zegel-klein { font-size: 9.5px; letter-spacing: 0.08em; }
}

/* geen animatie: de eindstand hierboven is meteen de juiste stand.
   hero.js slaat zichzelf over bij reduced motion, dus hier hoeft alleen
   de will-change eraf. */
@media (prefers-reduced-motion: reduce) {
  .hero__kop .woord-inner { will-change: auto; }
}