/* ===========================================================================
   hsb-home-mozaiek.css — het beeldvlak van de hero op de homepage

   Staat los van hsb-home.css en wordt erna ingeladen. Daar is niets aan
   veranderd: de oude regels voor .hm-portretten en .hm-portret blijven
   gewoon staan, er is alleen niets meer dat ze gebruikt. Wil je terug, dan
   haal je deze regel uit index.php en het oude beeld staat er weer.

   WAT HIER GEBEURT

   Vier vakken: één breed bovenaan en drie eronder. In elk vak wisselen twee
   sprekers elkaar af, zestien seconden per spreker.

   Het punt is dat ze NIET tegelijk wisselen. Elk vak heeft zijn eigen fase,
   dus er verandert ergens in het mozaïek elke vier seconden één gezicht.
   Wie even blijft kijken ziet steeds iemand anders; wie doorscrolt merkt er
   niets van. Zouden ze gelijk omklappen, dan knippert het halve scherm in
   één keer en kijkt niemand er nog naar.

   Acht sprekers in beeld in plaats van vier, en vier tegelijk zichtbaar.
   =========================================================================== */

/* Het beeldvlak zelf. Twee klassen, zodat deze regels het winnen van wat er
   in hsb-home.css over .hm-hero__beeld staat, wat dat ook is. */
.hm-hero__beeld--mozaiek {
  /* Hsb-home.css geeft dit vlak flex: 0 1 460px -- genoeg voor één portret,
     krap voor vier vakken naast elkaar. Met 560px zijn de drie kleine vakken
     zo'n 178px breed, en dan past een naam er netjes in. */
  flex: 1 1 560px;

  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
}

.hm-mozaiek {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
}

.hm-vak {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 3 / 4;

  /* De vormentaal van de rest van de site: drie hoeken rond, één recht. */
  border-radius: 24px 2px 24px 2px;

  /* Een egale ondergrond, zodat er tijdens het overvloeien nooit wit
     doorschijnt en er bij traag laden geen gat valt. */
  background: #dbe7f0;
}

/* Het eerste vak ligt over de volle breedte en is het grootst. */
.hm-mozaiek .hm-vak--1 {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 11;
  border-radius: 40px 2px 40px 2px;
}

/* ---- Eén gezicht ------------------------------------------------------- */

.hm-gezicht {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  opacity: 0;
}
.hm-gezicht:first-child { opacity: 1; }

.hm-mozaiek .hm-vak img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* De naamplaat. Melkglas over de foto, want een naam in platte witte letters
   op een willekeurige foto is soms wel en soms niet te lezen -- en dat haalt
   het onder de 4,5:1 die je nodig hebt. */
.hm-vak__plaat {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 9px 13px;
  border-radius: 14px 2px 14px 2px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(8px);
}
.hm-vak__naam {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #103856;
}
.hm-vak__oms {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  line-height: 1.3;
  color: #2c4a63;
}
.hm-vak--2 .hm-vak__oms,
.hm-vak--3 .hm-vak__oms,
.hm-vak--4 .hm-vak__oms { display: none; }

.hm-vak--2 .hm-vak__naam,
.hm-vak--3 .hm-vak__naam,
.hm-vak--4 .hm-vak__naam {
  font-size: 13px;
  /* Een lange naam wordt twee regels en dan afgekapt, in plaats van de hele
     plaat over de foto heen te duwen. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hm-vak--1 .hm-vak__plaat { left: 18px; right: 18px; bottom: 18px; padding: 12px 17px; }
.hm-vak--1 .hm-vak__naam  { font-size: 17px; }
.hm-vak--1 .hm-vak__oms   { font-size: 13.5px; }

/* ---- Het wisselen ------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .hm-gezicht { animation: hm-wissel 32s linear infinite; }

  /* Het tweede gezicht loopt een halve ronde achter. Een negatieve vertraging
     start de animatie middenin, zodat er bij het laden meteen iemand staat in
     plaats van een leeg vlak. */
  .hm-gezicht:nth-child(2) { animation-delay: -16s; }

  /* En elk vak loopt weer voor op het vorige. Dat zijn deze vier getallen:
     daardoor wisselt er elke vier seconden ergens één gezicht in plaats van
     alle vier tegelijk. Alle vier de vakken laten bij het openen wel hun
     eerste spreker zien, dus je begint altijd met de echte top vier. */
  .hm-vak--1 .hm-gezicht { animation-delay: 0s; }
  .hm-vak--1 .hm-gezicht:nth-child(2) { animation-delay: -16s; }

  .hm-vak--2 .hm-gezicht { animation-delay: -8s; }
  .hm-vak--2 .hm-gezicht:nth-child(2) { animation-delay: -24s; }

  .hm-vak--3 .hm-gezicht { animation-delay: -4s; }
  .hm-vak--3 .hm-gezicht:nth-child(2) { animation-delay: -20s; }

  .hm-vak--4 .hm-gezicht { animation-delay: -12s; }
  .hm-vak--4 .hm-gezicht:nth-child(2) { animation-delay: -28s; }

  /* Staat er maar één spreker in een vak, dan valt er niets te wisselen. */
  .hm-gezicht:only-child { animation: none; opacity: 1; visibility: visible; }
}

/* visibility gaat mee met de doorzichtigheid. Zonder dat blijft het gezicht
   dat je niet ziet gewoon aanklikbaar en vang je met je muis de link van een
   spreker die niet in beeld staat. */
@keyframes hm-wissel {
  0%     { opacity: 1; visibility: visible; }
  47%    { opacity: 1; visibility: visible; }
  50%    { opacity: 0; visibility: visible; }
  50.1%  { opacity: 0; visibility: hidden; }
  96.9%  { opacity: 0; visibility: hidden; }
  97%    { opacity: 0; visibility: visible; }
  100%   { opacity: 1; visibility: visible; }
}

/* Wie beweging heeft uitgezet ziet vier stilstaande sprekers. */
@media (prefers-reduced-motion: reduce) {
  .hm-gezicht { animation: none; opacity: 0; visibility: hidden; }
  .hm-gezicht:first-child { opacity: 1; visibility: visible; }
}

/* ---- Kleinere schermen -------------------------------------------------- */

/* Onder de 640px is er voor een naam op de kleine vakken geen plek meer.
   Dan alleen het gezicht; bij het grote vak blijft de naam staan. */
@media (max-width: 640px) {
  .hm-vak--2 .hm-vak__plaat,
  .hm-vak--3 .hm-vak__plaat,
  .hm-vak--4 .hm-vak__plaat { display: none; }
}

@media (max-width: 560px) {
  .hm-mozaiek { gap: 9px; }
  .hm-vak { border-radius: 18px 2px 18px 2px; }
  .hm-mozaiek .hm-vak--1 { border-radius: 28px 2px 28px 2px; aspect-ratio: 16 / 12; }
  .hm-vak--1 .hm-vak__plaat { left: 12px; right: 12px; bottom: 12px; padding: 9px 13px; }
  .hm-vak--1 .hm-vak__naam  { font-size: 15px; }
  .hm-vak--1 .hm-vak__oms   { font-size: 12.5px; }
}