/*
 * stamp — de ronde stempel met de meedraaiende tekst.
 *
 * Komt op de homepage drie keer voor: donker in de hero, licht bij "Tips &
 * trends" en bij "Succesverhalen". Twee componenten die hem allebei gebruiken
 * delen dit bestand; de asset-laag van het atelier laadt het één keer.
 *
 * Het draaien zelf staat niet hier maar in stamp.js: een eindeloze lus zonder
 * tweede stand is werk voor Motion (R4, §8), en daar zit
 * prefers-reduced-motion al in.
 */

/*
 * `overflow: clip` is er voor het draaien, en niet voor het beeld: een vierkant
 * dat draait heeft een bounding box die met de hoek meegroeit — op 45° is die
 * 157 × √2 = 222px. De browser rekent die box mee in de scrollbare breedte, dus
 * kreeg de pagina een horizontale schuifbalk die met de stempel mee kwam en ging
 * (gemeten op /over-ons/ tussen 768 en 1024px: `scrollWidth` schommelde tussen
 * 960 en 972 op een venster van 960). Er is niets te zien van die 32px aan
 * weerszijden — de tekening is een cirkel binnen de schijf — dus klipt hij weg
 * zonder dat het beeld verandert.
 *
 * `clip` en niet `hidden`: dat laatste maakt er een scrollcontainer van (§7).
 * En het staat hier en niet bij één component, want het geldt voor elke stempel
 * die dicht bij de rand van zijn container hangt.
 */
.stamp {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;
  width: 157px;
  height: 157px;
  border-radius: 999px;
}

.stampDark {
  background: #0c1524;
}

/*
 * De meedraaiende tekst is precies zo groot als de schijf eronder. Groter maken
 * zou hem tijdens het draaien buiten de pagina laten steken en de site
 * horizontaal laten scrollen.
 */
.stampText {
  position: absolute;
  width: 157px;
  height: 157px;
  max-width: none;
  border-radius: 999px;
}

.stampLogo {
  position: relative;
  z-index: 1;
  flex: none;
}

/*
 * De plek waar een stempel in een sectie hangt: een blok zonder hoogte, zodat
 * de stempel over de inhoud erboven valt en niets verschuift.
 */
.sectionStamp {
  position: relative;
  height: 0;
}

/*
 * 15% van de containerbreedte, op elke breedte: zo staat de stempel bij "Tips &
 * trends" op samdesign.nl. Alleen bij de klantverhalen wijkt hij daar vanaf
 * 1024px naar beneden van af (20px); die uitzondering staat bij dat component.
 */
.sectionStamp .stamp {
  right: 15%;
  bottom: 0;
}