/* ============================================================
   APEX FOTOLIJST — VOORSTEL, NOG NERGENS TOEGEPAST
   ------------------------------------------------------------
   Dit bestand wordt door geen enkele productiepagina geladen.
   Het staat er om te beoordelen; pas na akkoord bepalen we waar
   de lijst wel en niet thuishoort.

   NAAR DE REFERENTIE VAN 07-09-2026
   ---------------------------------
   Afgeschuinde hoeken, een antracieten rand met metaalglans, rode
   gloedsegmenten langs de randen en een merkplaat onderaan met de
   chevron en APEX CONTROLLERS.

   Op verzoek van 07-09-2026 in maat teruggebracht: de rand ging van 3%
   naar 1,5%, de plaat van 7% naar 4,4% en de gloed van een felle lijn
   van 3px naar 1,5px op 72% dekking. De onderlinge verhoudingen zijn
   gelijk gebleven, alleen het geheel is stiller.

   WAAROM CSS EN GEEN PNG-OVERLAY
   ------------------------------
   Een kaderafbeelding rekt mee met de verhouding: op een staande foto
   worden de hoeken uitgetrokken en wordt de plaat smal. Deze lijst is
   opgebouwd uit vormen, dus de afschuining blijft 45 graden en de
   plaat houdt zijn maat — of de foto nu liggend, staand of vierkant is.

   DE FOTO BLIJFT DE FOTO
   ----------------------
   Geen filter, geen contrastcorrectie. De lijst ligt eromheen; alleen
   de chevron steekt bewust over de onderrand het beeld in, zoals in de
   referentie.

   GEBRUIK
   -------
     <figure class="apex-lijst">
       <div class="apex-lijst__kader">
         <i class="apex-lijst__gloed apex-lijst__gloed--boven"></i>
         <i class="apex-lijst__gloed apex-lijst__gloed--rechts"></i>
         <i class="apex-lijst__gloed apex-lijst__gloed--onder"></i>
         <i class="apex-lijst__gloed apex-lijst__gloed--links"></i>
         <div class="apex-lijst__beeld"><img src="..." alt="..." /></div>
       </div>
       <div class="apex-lijst__plaat">
         <img class="apex-lijst__merk" src="assets/logo.webp" alt="" />
         <span class="apex-lijst__naam">APEX <b>CONTROLLERS</b></span>
       </div>
     </figure>
   ============================================================ */

.apex-lijst {
  --rand:    clamp(7px, 1.5%, 15px);    /* dikte van de lijst */
  --schuin:  clamp(12px, 2.5%, 26px);   /* afschuining van de hoeken */
  --kerf:    clamp(7px, 1.3%, 15px);    /* diepte van de inkepingen */
  --rood:    #ff1520;
  --plaat-h: clamp(22px, 4.4%, 32px);

  position: relative;
  display: block;
  margin: 0;
  /* Ruimte onder de foto voor de merkplaat. */
  padding-bottom: calc(var(--plaat-h) * .52);

  /* Nodig voor de @container-regels onderaan dit bestand. Zonder deze
     regel bestaat er geen container om tegen te meten en slaat zo'n blok
     stil nooit aan - dat was hier het geval: de plaat bleef ook op 200px
     gewoon staan. De lijst meet zichzelf, dus de regels hieronder kijken
     naar de breedte van de foto en niet naar die van het scherm. Een foto
     in een smalle kolom op een breed scherm krijgt daardoor dezelfde
     behandeling als op een telefoon. */
  container-type: inline-size;
}

/* ------------------------------------------------------------
   HET KADER
   ------------------------------------------------------------
   Twee gestapelde vormen: de buitenrand is een achthoek, en het
   beeld erbinnen is dezelfde achthoek maar kleiner. Wat overblijft
   is de lijst. De afschuining staat in pixels en niet in procenten,
   want procenten maken van een hoek van 45 graden een scheve hoek
   zodra de foto niet vierkant is.
   ------------------------------------------------------------ */
.apex-lijst__kader {
  position: relative;
  padding: var(--rand);
  /* Metaal: licht van boven, donker naar onderen, met een harde knik
     op een derde zodat het geborsteld aanvoelt in plaats van glad. */
  background:
    linear-gradient(180deg,
      #2c2c31 0%, #17171b 36%, #0d0d0f 37%, #131317 100%);
  clip-path: polygon(
    var(--schuin) 0,
    calc(100% - var(--schuin)) 0,
    100% var(--schuin),
    100% calc(100% - var(--schuin)),
    calc(100% - var(--schuin)) 100%,
    var(--schuin) 100%,
    0 calc(100% - var(--schuin)),
    0 var(--schuin)
  );
}

/* Een haarlijn langs de buitenrand. Zonder deze valt de lijst weg tegen
   de zwarte pagina en lijkt de foto te zweven. Ligt op de achtergrond,
   dus de rand zelf blijft antraciet. */
.apex-lijst__kader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(255,255,255,.20), rgba(255,255,255,.04) 32%,
    rgba(255,255,255,0) 55%, rgba(255,255,255,.07));
  clip-path: inherit;
  z-index: 0;
  pointer-events: none;
  /* Alleen de buitenste pixel tonen. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  padding: 1px;
}

/* De binnenrand: dezelfde achthoek, plus een inkeping midden op elke
   zijde. Die kerven maken de lijst technisch in plaats van alleen donker. */
.apex-lijst__beeld {
  position: relative;
  overflow: hidden;
  background: #050506;
  clip-path: polygon(
    var(--schuin) 0,
    calc(50% - var(--kerf) * 1.9) 0,
    calc(50% - var(--kerf)) var(--kerf),
    calc(50% + var(--kerf)) var(--kerf),
    calc(50% + var(--kerf) * 1.9) 0,
    calc(100% - var(--schuin)) 0,
    100% var(--schuin),
    100% calc(50% - var(--kerf) * 1.9),
    calc(100% - var(--kerf)) calc(50% - var(--kerf)),
    calc(100% - var(--kerf)) calc(50% + var(--kerf)),
    100% calc(50% + var(--kerf) * 1.9),
    100% calc(100% - var(--schuin)),
    calc(100% - var(--schuin)) 100%,
    calc(50% + var(--kerf) * 1.9) 100%,
    calc(50% + var(--kerf)) calc(100% - var(--kerf)),
    calc(50% - var(--kerf)) calc(100% - var(--kerf)),
    calc(50% - var(--kerf) * 1.9) 100%,
    var(--schuin) 100%,
    0 calc(100% - var(--schuin)),
    0 calc(50% + var(--kerf) * 1.9),
    var(--kerf) calc(50% + var(--kerf)),
    var(--kerf) calc(50% - var(--kerf)),
    0 calc(50% - var(--kerf) * 1.9),
    0 var(--schuin)
  );
}

/* Standaard bepaalt de foto zelf de hoogte. Dat is wat je wilt in een
   galerij waar beelden hun eigen verhouding houden.

   Eerder stond hier height: 100%. Dat werkt alleen als de omgeving een
   hoogte oplegt; in een gewone grid is de container auto-hoog en wordt
   100% van niets nul - de foto verdween dan volledig. */
.apex-lijst__beeld > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* Uitdrukkelijk geen filter. */
}

/* Legt de omgeving wel een verhouding of hoogte op, dan moet de foto die
   vullen. Zet aspect-ratio (of een hoogte) op .apex-lijst__beeld en geef
   hem deze modifier erbij. */
.apex-lijst__beeld--vullend > img { height: 100%; }

/* ------------------------------------------------------------
   DE RODE GLOED
   ------------------------------------------------------------
   Vier balken, een per zijde, elk met twee heldere zones en niets
   ertussen. Dat geeft het onderbroken patroon uit de referentie
   zonder acht losse elementen. De tweede blur eronder is de bloom.
   ------------------------------------------------------------ */
.apex-lijst__gloed {
  position: absolute;
  pointer-events: none;
  filter: blur(1.2px);
  opacity: .72;
  z-index: 1;
}
.apex-lijst__gloed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(7px);
  opacity: .7;
}

/* Horizontaal: helder bij beide uiteinden, donker in het midden waar
   de inkeping zit. */
.apex-lijst__gloed--boven,
.apex-lijst__gloed--onder {
  left: var(--schuin);
  right: var(--schuin);
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%, var(--rood) 5%, var(--rood) 30%, transparent 40%,
    transparent 60%, var(--rood) 70%, var(--rood) 95%, transparent 100%);
}
.apex-lijst__gloed--boven { top: calc(var(--rand) * .28); }
.apex-lijst__gloed--onder { bottom: calc(var(--rand) * .28); }

.apex-lijst__gloed--links,
.apex-lijst__gloed--rechts {
  top: var(--schuin);
  bottom: var(--schuin);
  width: 1.5px;
  background: linear-gradient(180deg,
    transparent 0%, var(--rood) 6%, var(--rood) 32%, transparent 43%,
    transparent 57%, var(--rood) 68%, var(--rood) 94%, transparent 100%);
}
.apex-lijst__gloed--links  { left: calc(var(--rand) * .28); }
.apex-lijst__gloed--rechts { right: calc(var(--rand) * .28); }

/* ------------------------------------------------------------
   DE MERKPLAAT
   ------------------------------------------------------------
   Zit buiten het kader, want het kader wordt geknipt en zou de plaat
   afsnijden. De chevron steekt bewust boven de plaat uit en valt over
   de onderrand het beeld in, zoals in de referentie.
   ------------------------------------------------------------ */
.apex-lijst__plaat {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(124px, 25%, 200px);
  height: var(--plaat-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(var(--plaat-h) * .13);
  z-index: 2;

  background: linear-gradient(180deg, #26262b 0%, #131317 45%, #08080a 100%);
  /* Zeshoekige tab: schuine schouders links en rechts. */
  clip-path: polygon(
    calc(var(--plaat-h) * .55) 0,
    calc(100% - var(--plaat-h) * .55) 0,
    100% 100%,
    0 100%
  );
}

/* Rode lijn over de bovenrand van de plaat, tussen de schouders. */
.apex-lijst__plaat::before {
  content: "";
  position: absolute;
  left: calc(var(--plaat-h) * .55);
  right: calc(var(--plaat-h) * .55);
  top: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--rood) 18%, var(--rood) 82%, transparent);
  box-shadow: 0 0 6px var(--rood);
}

/* LET OP: de chevron staat BUITEN de plaat, als direct kind van
   .apex-lijst. Een clip-path knipt ook de kinderen van het element, dus
   binnen de plaat werd precies het stuk dat boven de plaat uitsteekt
   weggesneden - het merk was daardoor half onzichtbaar. */
/* De selector is bewust zwaarder dan een enkele klasse. Een pagina heeft
   vaak een brede regel als ".gallery-page__grid img { width: 100% }", en
   die wint van ".apex-lijst__merk" - dan vult de chevron de hele foto.
   Met het element erbij (0,2,1) blijft het merk zijn eigen maat houden,
   op welke pagina de lijst ook belandt. */
.apex-lijst > img.apex-lijst__merk,
.apex-lijst__merk {
  position: absolute;
  left: 50%;
  bottom: calc(var(--plaat-h) * .55);
  transform: translateX(-50%);
  width: calc(var(--plaat-h) * 1.3);
  height: auto;
  max-width: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85));
  pointer-events: none;
  z-index: 3;
}

.apex-lijst__naam {
  font-family: var(--font-body, system-ui, sans-serif);
  /* Vast, geen clamp met procenten: een percentage in font-size rekent
     tegen de letterhoogte van de ouder en niet tegen de breedte, dus
     clamp(7.5px, 1.15%, 11px) kwam altijd op het minimum uit. */
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .2em;
  /* De letterspatie achter de laatste letter zou het woord anders
     links uit het midden trekken. */
  text-indent: .2em;
  line-height: 1;
  color: #e9e9ee;
  white-space: nowrap;
}
.apex-lijst__naam b {
  font-weight: 600;
  color: var(--rood);
}

/* ------------------------------------------------------------
   KLIKBARE FOTO
   ------------------------------------------------------------ */
a.apex-lijst .apex-lijst__kader,
.apex-lijst--link .apex-lijst__kader {
  transition: filter 240ms cubic-bezier(.2, .8, .3, 1);
}
a.apex-lijst:hover .apex-lijst__kader,
.apex-lijst--link:hover .apex-lijst__kader {
  filter: brightness(1.14);
}

@media (prefers-reduced-motion: reduce) {
  .apex-lijst__kader { transition: none; }
}

/* ------------------------------------------------------------
   KLEINE FORMATEN
   ------------------------------------------------------------
   De plaat heeft een minimumbreedte nodig om APEX CONTROLLERS
   leesbaar te houden. Op een grote foto is dat een kwart van de
   breedte, maar op een kaart van 350px wordt het ruim een derde en
   is de plaat het zwaarste onderdeel van de lijst geworden.

   Daarom valt de tekst eronder weg en blijft alleen de chevron over.
   Die is op elk formaat herkenbaar en heeft geen minimumbreedte nodig.
   ------------------------------------------------------------ */
@container (max-width: 360px) {
  .apex-lijst__naam { display: none; }
  .apex-lijst__plaat {
    /* Alleen nog een tab onder de chevron. */
    width: calc(var(--plaat-h) * 2.1);
    height: calc(var(--plaat-h) * .52);
  }
  .apex-lijst__plaat::before {
    left: calc(var(--plaat-h) * .3);
    right: calc(var(--plaat-h) * .3);
  }
  .apex-lijst > img.apex-lijst__merk,
  .apex-lijst__merk {
    bottom: calc(var(--plaat-h) * .3);
    width: calc(var(--plaat-h) * 1.15);
  }
}

/* Onder de 200 pixels wordt ook de chevron een vlekje en worden de
   kerven modder. Dan blijft alleen het kader over. */
@container (max-width: 200px) {
  .apex-lijst__plaat,
  .apex-lijst__merk { display: none; }
  .apex-lijst__beeld { clip-path: none; }
}