/*
  De voorpagina van een ontwikkelaar.
  ---------------------------------------------------------------------------
  Het model is een studiosite, geen bedrijfsbrochure: bovenaan het spel dat er
  nu is, daaronder de volledige lijst, en pas daarna een korte alinea over wie
  we zijn. De tekst is er om het beeld te ondersteunen en niet andersom.

  Wat hier NIET meer staat: de opsomming van welke database of welk framework
  eronder draait. Dat hoort in een offerte, niet op de pagina waar iemand komt
  kijken wat we gemaakt hebben.
*/

/* ============================================================ UITGELICHT */
/*
  Het sleutelbeeld draagt de titel al - PETROL EMPIRE staat erin getekend. Er
  komt hier dus geen tweede titel overheen; dat zou het beeld herhalen en het
  tegelijk onleesbaar maken. Wat er wel overheen komt is een strook onderaan
  met de genre-regel en de knoppen.
*/
.uitgelicht { position: relative; border-bottom: 1px solid var(--border); }

/*
  DE BAND STOPTE HALVERWEGE. Hier stond een aspect-ratio samen met een
  max-height en geen breedte. Zodra de hoogte op 560 werd afgekapt, rekende de
  verhouding de BREEDTE terug: op een scherm van 1600 werd het doek 977 pixels
  breed en hield de band halverwege op, met de tekst eronder wel over de volle
  breedte.

  Een breedte erbij zetten lost dat op, maar levert het volgende probleem: met
  object-fit: cover snijdt een afgekapte hoogte dwars door de tekening. En die
  tekening verdraagt dat niet - de titel staat bovenin en de pompen staan
  onderin, dus elke horizontale snede kost een van de twee. Op welke hoogte je
  het plafond ook legt, er is altijd een schermbreedte waarop het fout valt.

  Daarom wordt er niet meer bijgesneden. De tekening staat op haar eigen maat
  van 1232 pixels, gecentreerd, en op een breder scherm loopt het verloop
  hieronder links en rechts door. De stops zijn uit de randkolommen van
  hero.png zelf gemeten, dus de naad valt niet op.
*/
.uitgelicht .doek {
  position: relative;
  overflow: hidden;
  background: var(--randverloop);
}
.uitgelicht .doek img {
  display: block;
  /* Waarom niet de volle 1232 van de tekening zelf: dan is de band 706 hoog en
     beginnen de kaarten van "Drie soorten werk" op 974, terwijl een venster van
     1600x900 tot 900 reikt. Je ziet dan een beeld en verder niets, en niets dat
     zegt dat er meer is.

     Gemeten op 1600x900, met waar de eerste kaart dan begint:

         1232 breed -> band 706, kaart op 974   (onder de vouw)
         1000 breed -> band 573, kaart op 841   <- dit, een rand kaart in beeld

     Groter dan de spelkop op een productpagina (800), want hier IS het beeld
     het onderwerp. */
  width: 100%; max-width: 1000px; height: auto;
  margin-inline: auto;
}
/* Naar beneden toe dicht, zodat de tekst erop leesbaar blijft zonder dat het
   beeld in een donkere waas verdwijnt. */
.uitgelicht .doek::after {
  content: ''; position: absolute; inset: 0;
  background: var(--diavervaging);
}

.uitgelicht .over {
  position: absolute; inset-inline: 0; bottom: 0;
  padding-bottom: 34px;
}
.uitgelicht .merkje {
  font-family: var(--head); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 10px;
}
.uitgelicht .zin {
  margin: 0 0 22px; max-width: 54ch;
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.45; color: var(--text);
}

/* Onder de 760 wordt een beeld met tekst erop onleesbaar: de tekst neemt dan
   meer dan de helft van het beeld in. Daar staat de tekst dus ONDER het
   beeld, en het beeld krijgt zijn eigen hoogte. */
@media (max-width: 760px) {
  /* Bijsnijden gebeurt nergens meer, ook hier niet: met een vierkanter
     uitsnede viel de titel die in het beeld getekend staat links en rechts
     weg, en dan lees je "ETROL EMPIR". */
  .uitgelicht .doek::after { background: linear-gradient(to bottom, transparent 60%, var(--bg)); }
  .uitgelicht .over { position: static; padding-block: 4px 34px; }
}

/* ================================================================ CONTACT */
#contact .knoppen { margin-top: 28px; }

@media (max-width: 640px) {
  section { padding-block: 48px; }
}

/* ------------------------------------------------------ de dia's en bolletjes */
/*
  Elke release is een <article class="dia">. De eerste staat in de HTML als
  zichtbaar; zonder JavaScript blijft het daarbij en zie je de nieuwste
  release - precies wat er zou moeten staan.
*/
.uitgelicht { position: relative; }
.dia[hidden] { display: none; }

/* De inloop. Kort en alleen doorzichtigheid: iets wat elke vijftien seconden
   gebeurt, mag niet opvallen. Wie beweging liever helemaal niet heeft, krijgt
   ze ook niet - zie de regel onderaan. */
@keyframes diaIn { from { opacity: 0 } to { opacity: 1 } }
.dia.inloop { animation: diaIn .45s ease-out; }
@media (prefers-reduced-motion: reduce) { .dia.inloop { animation: none; } }

/* De bolletjes liggen OVER het beeld, rechtsonder. Ze worden door
   js/uitgelicht.js gemaakt; staat er maar een release, dan komen ze er niet. */
.bolletjes {
  position: absolute; inset-inline-end: 22px; bottom: 22px;
  display: flex; gap: 9px; z-index: 2;
}
.bol {
  width: 30px; height: 4px; padding: 0; border: 0; border-radius: 99px;
  background: rgba(255,255,255,.3); cursor: pointer;
  transition: background .2s;
}
.bol:hover { background: rgba(255,255,255,.55); }
.bol[aria-selected="true"] { background: var(--gold); }

/* Op een telefoon staat de tekst onder het beeld, dus daar horen de bolletjes
   niet meer rechtsonder in het beeld maar netjes onder de knoppen. */
@media (max-width: 760px) {
  .bolletjes { position: static; margin: 0 22px 30px; justify-content: center; }
}

/* ============================================================= DOORGANGEN */
/*
  De voorpagina TOONT de titels niet meer, ze wijst ernaar. Drie doorgangen naar
  de drie categorieën, met per categorie een telling en een regel wat erin zit.

  Waarom niet de volledige lijst hier: met drie titels paste die er nog op, maar
  dan is de voorpagina de categoriepagina en heeft die laatste geen reden om te
  bestaan. Bij de vijfde titel had je datzelfde probleem alsnog moeten oplossen,
  en dan met een pagina waar al naar verwezen wordt.
*/
.doorgangen { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .doorgangen { grid-template-columns: 1fr; } }

.doorgang {
  display: flex; flex-direction: column; gap: 8px;
  padding: 26px 26px 24px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 3px;
  text-decoration: none; color: inherit;
}
.doorgang:hover { border-color: var(--gold-dim); background: var(--panel-2); }
.doorgang .telling {
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.doorgang h3 { font-size: 23px; }
.doorgang p { margin: 0; color: var(--muted); font-size: 15.5px; }
.doorgang .heen { margin-top: 10px; font-family: var(--head); font-weight: 600; font-size: 15px; color: var(--gold); }
.doorgang:hover .heen { color: var(--gold-hi); }