/*
 * heroSection — de openingssectie van een gewone pagina.
 *
 * Kop, inleiding met streepje, knop, de stempel en daaronder een pijl naar
 * beneden. Maten 1-op-1 van https://www.samdesign.nl/over-ons/ en
 * https://www.samdesign.nl/onze-aanpak/ (R9), gemeten op 1440, 1024, 767 en
 * 390px.
 *
 * Twee rijen: de tekstkolom en daaronder een rij met de stempel, de pijl en de
 * versiering. Wat de vormen onderscheidt staat onderaan dit bestand bij
 * .heroSectionStacked en .heroSectionMedia; hierboven staat de vorm van
 * /over-ons/, waar de kolom 793px breed is en er 164px ruimte tussen de twee
 * rijen zit. De vorm met beeld ernaast (/huisstijl/) heeft die tweede rij niet:
 * daar staan de tekst en het beeld naast elkaar in de eerste.
 */

.heroSection {
  margin-top: 80px;
}

/*
 * Twee rijen, allebei over de volle breedte. Vanaf 1024px naar beneden staat de
 * kolom in het midden in plaats van links, en zakt de ruimte tussen de twee
 * rijen van 164 naar 40px.
 */
.heroSectionInner {
  display: flex;
  flex-wrap: wrap;
  row-gap: 164px;
}

.heroSectionInner > * {
  width: 100%;
}

/* De stempel hangt hieraan; vandaar position: relative. */
.heroContent {
  position: relative;
  max-width: 793px;
}

/* De versiering hangt aan deze rij, dus ook hier position: relative. */
.heroAside {
  position: relative;
}

/*
 * Het bovenkopje: dezelfde maat als de lopende tekst maar groter en flauwer, en
 * met 5px naar de kop. De kleur is de tekstkleur op 40%, zo staat het in de bron
 * van samdesign.nl.
 */
.heroKicker {
  margin: 0 0 5px;
  color: #09204166;
  font-size: 25px;
  line-height: 33px;
  letter-spacing: -0.05em;
}

/*
 * 40px = de 20px onder de kop plus de 20px boven de inleiding, zoals de
 * bestaande site het opbouwt. Onder de inleiding is dat 30 + 20 = 50px.
 */
.heroIntro {
  margin-top: 40px;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 50px;
  padding-left: 30px;
}

/* ------------------------------------------------------------------
   De stempel
   ------------------------------------------------------------------ */

/*
 * Een blok zonder hoogte tegen de onderrand van de kolom, met de schijf daar
 * 40px boven. Zo hangt de stempel voor een deel onder de kolom uit zonder iets
 * te verschuiven — precies wat samdesign.nl met een negatieve marge doet.
 */
.heroStamp {
  position: absolute;
  right: 0;
  bottom: 15px;
  left: 0;
  z-index: 1;
  height: 0;
}

.heroStamp .stamp {
  position: relative;
  right: auto;
  bottom: auto;
  width: 124px;
  height: 124px;
  margin: -40px 0 0 auto;
}

.heroStamp .stampText {
  width: 124px;
  height: 124px;
}

/* ------------------------------------------------------------------
   De pijl naar beneden
   ------------------------------------------------------------------ */

/*
 * De pijl staat in het midden van de ruimte die na de 100px links overblijft —
 * daardoor staat hij nét niet op het midden van de sectie. Zo staat het op
 * samdesign.nl; vanaf 1024px naar beneden valt die 100px weg.
 *
 * Het icoon is inline en niet block, want de hoogte van dit blok (42,5px) is de
 * regelhoogte van de body om een inline-blok van 35px heen. Zet je het icoon op
 * display: block, dan is het blok 35px en schuift alles eronder 7,5px omhoog.
 *
 * Het op en neer bewegen doet heroSection.js met Motion (R4, §8): een lus zonder
 * eindstand hoort niet in een CSS-keyframe.
 */
.heroArrow {
  padding-left: 100px;
  text-align: center;
}

.heroArrowIcon {
  display: inline-block;
  flex: none;
  width: 35px;
  height: 35px;
  color: var(--colorNavy);
}

/* ==================================================================
   De gestapelde vorm — /onze-aanpak/
   ------------------------------------------------------------------
   Zelfde onderdelen, andere opbouw: een smallere tekstkolom, de stempel groot
   in het midden van de tweede rij en de pijl daar recht onder. De versiering
   komt alleen in deze vorm voor.
   ================================================================== */

.heroSectionStacked .heroSectionInner {
  row-gap: 50px;
}

.heroSectionStacked .heroContent {
  max-width: 611px;
}

/*
 * Hier zit 40px onder de kop in plaats van 20, dus 60px tot de inleiding.
 *
 * En het streepje voor de inleiding is een vast stuk lijn van 114px in plaats
 * van de hele hoogte van de tekst: bij vier regels loopt het 18px te kort en bij
 * drie steekt het eronderuit. Zo staat het op samdesign.nl.
 */
.heroSectionStacked .heroIntro {
  position: relative;
  margin-top: 60px;
  border-left: 0;
}

.heroSectionStacked .heroIntro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 114px;
  background: currentColor;
}

/* De stempel staat hier in de flow, midden in zijn rij, met 54px naar de pijl. */
.heroSectionStacked .heroStamp {
  position: static;
  height: auto;
  margin-bottom: 54px;
}

.heroSectionStacked .heroStamp .stamp {
  position: relative;
  right: auto;
  bottom: auto;
  width: 190px;
  height: 190px;
  /* margin en niet margin-inline: de hoekvorm trekt de schijf 40px omhoog en
     die marge hoort hier niet te blijven staan. */
  margin: 0 auto;
}

/* De schijf is 190px, de meedraaiende tekst 186 — 2px kleiner, zoals daar. */
.heroSectionStacked .heroStamp .stampText {
  width: 186px;
  height: 186px;
}

.heroSectionStacked .heroArrow {
  padding-left: 0;
}

/*
 * Het lijnlogo hangt rechtsboven achter de stempel, net buiten de bovenrand van
 * zijn rij. Hetzelfde beeld als bij mediaText, alleen minder ver opgetrokken.
 */
.heroDecoration {
  position: absolute;
  top: -99.1px;
  right: 0;
  opacity: 0.3;
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1024px) {
  /*
   * Twee selectors, want .heroSectionStacked .heroSectionInner hierboven weegt
   * zwaarder dan één class — en een media query verandert daar niets aan.
   */
  .heroSectionInner,
  .heroSectionStacked .heroSectionInner {
    justify-content: center;
    row-gap: 40px;
  }

  .heroKicker {
    font-size: 20px;
    line-height: 24px;
  }

  .heroArrow {
    padding-left: 0;
  }

  /* Vanaf hier laat samdesign.nl de stempel en de versiering weg. */
  .heroStamp,
  .heroDecoration {
    display: none;
  }
}

/* ==================================================================
   De vorm met beeld ernaast — /huisstijl/
   ------------------------------------------------------------------
   Links de tekstkolom van 610px, rechts een beeld van 550 bij 540 dat vanaf
   1206px naar beneden wegvalt. De stempel hangt in de rechteronderhoek van de
   tekstkolom en steekt daar 75px buiten. Er is hier geen pijl en geen tweede
   rij: de twee kolommen zijn de hele sectie.

   Maten 1-op-1 gemeten op https://www.samdesign.nl/huisstijl/ (R9) op 1440,
   1024, 767 en 390px.
   ================================================================== */

/*
 * De kop mag op een vaste breedte breken; zonder --heroTitleWidth verandert er
 * niets. Staat buiten de vorm, want het is een gewoon veld.
 */
.heroTitle {
  max-width: var(--heroTitleWidth, none);
}

.heroSectionMedia .heroSectionInner {
  justify-content: space-between;
  row-gap: 0;
}

/*
 * De twee kolombreedtes verschillen per pagina — 610 + 550 op /huisstijl/,
 * 616 + 495 op /visitekaartjes/ — dus komen ze als custom property van het
 * component mee, met die eerste twee als standaard. De kolommen mogen krimpen,
 * zodat de tekstkolom onder 768px meegaat naar de 400 van containerNarrow.
 */
.heroSectionMedia .heroSectionInner > * {
  width: auto;
}

.heroSectionMedia .heroContent {
  flex: 0 1 var(--heroContentWidth, 610px);
  max-width: var(--heroContentWidth, 610px);
}

.heroMedia {
  flex: 0 1 var(--heroMediaWidth, 550px);
  margin: 0;
}

/*
 * Een vaste hoogte en geen beeldverhouding: op /huisstijl/ staat het beeld op
 * 540px met een uitsnede, dus is het daar hoger dan breed; op /visitekaartjes/
 * is het 412,5 bij 495 en valt de uitsnede precies samen met de eigen
 * verhouding. Drie classes in de selector, want de reset heeft
 * `img[width][height] { height: auto }` staan en dat weegt zwaarder dan één
 * class.
 *
 * Het beeld vult zijn kolom, behalve waar samdesign.nl er een percentage op
 * zet: op /nieuwsbrief-design/ staat het op 79% van een kolom van 435, dus 343,65
 * breed, en `margin-inline: auto` zet het dan in het midden van die kolom. Bij de
 * standaard van 100% verandert die marge niets, dus blijven /huisstijl/ en
 * /visitekaartjes/ zoals ze stonden.
 */
.heroSectionMedia .heroMedia .heroMediaImage {
  display: block;
  width: var(--heroMediaScale, 100%);
  height: var(--heroMediaHeight, 540px);
  margin-inline: auto;
  object-fit: cover;
  object-position: center;
}

/*
 * Het bovenkopje is hier een vaste grijstint in plaats van de tekstkleur op
 * 40%, en het houdt zijn 25/33 ook op een tablet en een telefoon. Er zit 20px
 * onder in plaats van 5. Zo staat het op samdesign.nl; de letterafstand blijft
 * wél de −0,05em van .heroKicker — op /huisstijl/ en /visitekaartjes/ meet die
 * op alle vier de breedtes −1,25px.
 */
.heroSectionMedia .heroKicker {
  margin-bottom: 20px;
  color: #a3a6b1;
  font-size: 25px;
  line-height: 33px;
}

/*
 * Het streepje voor de inleiding is een vast stuk lijn van 114px in plaats van
 * de hele hoogte van de tekst — hetzelfde als in de gestapelde vorm. Bij drie
 * regels steekt het er dus 15px onderuit.
 */
.heroSectionMedia .heroIntro {
  position: relative;
  border-left: 0;
}

.heroSectionMedia .heroIntro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 114px;
  background: currentColor;
}

/*
 * De stempel staat met zijn onderkant 67px boven de onderrand van de
 * tekstkolom en loopt 75px verder naar rechts dan die kolom. Zelfde truc als in
 * de hoekvorm: een blok zonder hoogte met de schijf er met een negatieve marge
 * bovenop, zodat er niets van verschuift.
 *
 * Hoe ver hij uitsteekt hangt van de beeldkolom af: bij een smallere kolom
 * schuift hij mee naar rechts, want hij hangt boven de ruimte ertussen. Op
 * /huisstijl/ en /visitekaartjes/ is dat 75px, op /nieuwsbrief-design/ 125.
 */
.heroSectionMedia .heroStamp {
  right: calc(-1 * var(--heroStampOffset, 75px));
  bottom: 67px;
}

.heroSectionMedia .heroStamp .stamp {
  margin-top: -124px;
}

/*
 * Een eigen breekpunt van samdesign.nl: hier vallen het beeld en de stempel
 * weg, terwijl de tekstkolom pas op 1024 naar het midden schuift.
 */
@media (max-width: 1205px) {
  .heroSectionMedia .heroMedia,
  .heroSectionMedia .heroStamp {
    display: none;
  }
}

/*
 * En vanaf 1024px naar beneden staat de tekstkolom in het midden, net als bij de
 * andere twee vormen. Dat staat hierboven al in de gewone media query, maar
 * .heroSectionMedia .heroSectionInner weegt zwaarder én komt later, dus moet het
 * hier nog een keer.
 */
@media (max-width: 1024px) {
  .heroSectionMedia .heroSectionInner {
    justify-content: center;
  }
}