/* Oplossingen en branches (Taak 8). Sjablonen: site/partials/sjabloon-oplossing.html en sjabloon-branche.html.
   Bouwt op tokens, basis, componenten, beweging, blokken (stapel, voorna, branches) en paginas.css (paginakop, statement, pillen).
   Mobiel eerst; geen icoontjes, wel foto's, echte voorbeelden en gelabelde voorbeeldcijfers. */

/* ---------- Het probleem: groot statement + korte uitleg ---------- */
.probleem { display: grid; gap: var(--s-6); align-items: start; }
.probleem .statement { max-width: 22ch; }
.probleem__uitleg { max-width: 58ch; }
.probleem__uitleg p { color: var(--ink-zacht); }
.probleem__uitleg p:first-child { margin-top: 0; }
.herkenbaar { display: grid; gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.herkenbaar li {
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 18px);
  border-radius: var(--r-sm);
  background: var(--vlak);
  font-weight: 600;
  color: var(--ink);
}
.herkenbaar li::before {
  content: "";
  position: absolute;
  left: var(--s-5);
  top: 1.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verloop);
}
@media (min-width: 960px) { .probleem { grid-template-columns: 6fr 5fr; gap: var(--s-8); } }

/* ---------- Zo lost Aigenix het op: foto (plakt) + genummerde stappen ---------- */
.aanpak { display: grid; gap: var(--s-7); align-items: start; }
.aanpak__beeld { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-kaart); aspect-ratio: 4 / 3; background: var(--nacht-700); box-shadow: var(--sch-kaart); }
.aanpak__beeld img { position: absolute; inset: -14% 0; width: 100%; height: 128%; max-width: none; object-fit: cover; }
.aanpak__bijschrift {
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: var(--s-4);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: rgba(18, 12, 43, .72);
  color: var(--op-donker);
  font-size: var(--t-klein);
  font-weight: 600;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .aanpak__bijschrift { background: rgba(18, 12, 43, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.aanpak__stappen { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: aanpak; }
.aanpak__stap { counter-increment: aanpak; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); padding: var(--s-6) 0; border-top: 1px solid var(--lijn); }
.aanpak__stap:last-child { border-bottom: 1px solid var(--lijn); }
.aanpak__stap::before {
  content: counter(aanpak, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 6px;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .08em;
  color: var(--violet);
}
.aanpak__stap h3 { margin: 0; }
.aanpak__stap p { margin: 0; color: var(--ink-zacht); }
.aanpak__noot { margin: var(--s-6) 0 0; padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); background: var(--violet-50); font-size: var(--t-klein); color: var(--ink); }
.aanpak__noot strong { color: var(--violet-700); }
@media (min-width: 960px) {
  .aanpak { grid-template-columns: 5fr 6fr; gap: var(--s-8); }
  .aanpak__beeld { position: sticky; top: 120px; aspect-ratio: 4 / 5; }
}

/* ---------- Wat het oplevert: donker blok met rekenvoorbeeld en glaskaarten ---------- */
.opbrengst { position: relative; isolation: isolate; display: grid; gap: var(--s-7); }
.opbrengst .gloed { z-index: -1; }
.opbrengst__kop h2 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.035em; margin-bottom: var(--s-5); }
.voorbeeld {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-kaart);
  background: var(--glas);
}
.voorbeeld__label {
  justify-self: start;
  margin: 0 0 var(--s-2) !important;
  padding: 2px 10px;
  border-radius: var(--r-pil);
  background: var(--glas);
  box-shadow: 0 0 0 1px var(--glas-rand) inset;
  color: var(--violet-200) !important;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.voorbeeld__bedrag { margin: 0; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--op-donker) !important; }
.voorbeeld__bedrag > span:not([data-optellen]) { font-size: var(--t-klein); font-weight: 600; letter-spacing: 0; color: var(--op-donker-zacht); }
.voorbeeld__som { margin: 0; font-family: var(--f-mono); font-size: var(--t-klein); color: var(--op-donker-zacht); overflow-wrap: anywhere; }
.voorbeeld__noot { margin: var(--s-3) 0 0; font-size: var(--t-klein); }
.opbrengst .glasraster { margin: 0; }
@media (min-width: 640px) { .opbrengst .glasraster { grid-template-columns: 1fr; } }
@media (min-width: 960px) {
  .opbrengst { grid-template-columns: 6fr 5fr; align-items: center; gap: var(--s-8); }
  .opbrengst .glasraster { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ---------- Past bij: pillen naar branches en andere oplossingen ---------- */
.past { display: grid; gap: var(--s-7); }
.past__groep h2 { font-size: var(--t-h3); margin-bottom: var(--s-4); }
.past__groep > p { margin: 0 0 var(--s-5); color: var(--ink-zacht); max-width: 52ch; }
@media (min-width: 960px) { .past { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

/* ---------- Overzichtspagina's ---------- */
/* Kaarten in de stapel zijn hier een link naar de oplossing */
.oplossing__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.stapel .oplossing { position: relative; }
.stapel .oplossing:has(.oplossing__link:hover) { box-shadow: 0 1px 0 var(--lijn), 0 30px 70px -36px rgba(18, 12, 43, .45); }
.oplossing__wat { margin: var(--s-4) 0 var(--s-5); padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.oplossing__wat li { padding: 4px 12px; border-radius: var(--r-pil); background: var(--chip); font-size: var(--t-klein); font-weight: 600; color: var(--ink-zacht); }

/* Niet in de lijst? Blok met foto en twee routes */
.meer { display: grid; gap: var(--s-6); align-items: center; padding: var(--s-4); border: 1px solid var(--lijn); }
.meer__beeld { position: relative; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 16 / 10; background: var(--nacht-700); }
.meer__beeld img { position: absolute; inset: -12% 0; width: 100%; height: 124%; max-width: none; object-fit: cover; }
.meer__tekst { padding: var(--s-2) var(--s-3) var(--s-3); }
.meer__tekst h2 { font-size: var(--t-h2); margin-bottom: var(--s-4); }
.meer__tekst p { color: var(--ink-zacht); }
.meer__tekst .knoppen { margin-top: var(--s-5); }
@media (min-width: 960px) {
  .meer { grid-template-columns: 5fr 6fr; padding: var(--s-5); }
  .meer__beeld { aspect-ratio: auto; min-height: 360px; height: 100%; }
  .meer__tekst { padding: var(--s-5) var(--s-6); }
}

/* Branches-overzicht: twee kolommen, grotere kaarten */
.branches--groot .branche h3 { font-size: var(--t-h3); }
.branches--groot .branche p { font-size: var(--t-tekst); }
@media (min-width: 1100px) { .branches--groot { grid-template-columns: repeat(2, 1fr); } .branches--groot .branche__beeld { aspect-ratio: 16 / 9; } }