/* Foodnu — duo-bollen: links de ondernemer in een ronde foto, rechts een oranje
 * bol met het echte scherm in een toestelframe, en een tegel die eruit steekt.
 *
 * De .duo*-regels zijn dezelfde als in tools/oplossing-sjabloon.html (de zestien
 * oplossingspagina's, via DuoBollen in product-page.js). Dit bestand is voor de
 * pagina's die met de hand geschreven zijn en geen React-hero hebben:
 *
 *   .lp-hero.met-duo   de landingspagina's (/tafels-en-qr/, /kassa-voor-bezorgen/, …):
 *                      tekst links, bollen rechts, de cijferrij eronder over de volle breedte
 *   .story.met-duo     het klantverhaal-blok op de Voor wie-pagina's: de foto wordt de duo,
 *                      de twee zwevende kaartjes gaan naar de hoeken zonder gezicht of scherm
 *   beheer.html        de hero van Beheer (beheer-page.js), via tools/beheer-sjabloon.html
 *
 * Verander je de bollen zelf (maten, posities), verander dan ook het oplossing-sjabloon —
 * anders lopen de zestien oplossingspagina's en deze pagina's uit elkaar.
 */
.duo{position:relative;width:100%;max-width:580px;aspect-ratio:1.38;margin-inline:auto}
.duo-foto{position:absolute;left:0;top:0;width:70%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 30px 70px -40px rgba(28,12,24,.45)}
.duo-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 30%);display:block}
/* De bol overlapt de foto: waar ze elkaar raken kleurt de foto oranje mee. */
.duo-bol{position:absolute;right:0;top:16%;width:56%;aspect-ratio:1;border-radius:50%;background:var(--tangerine,#eb6640);mix-blend-mode:multiply;opacity:.94}
/* Het scherm staat vóór de bol (niet geblend), in een toestelframe. */
.duo-scherm{position:absolute;z-index:2;filter:drop-shadow(0 30px 40px rgba(28,12,24,.35));border:5px solid #1c0c18;background:#1c0c18;overflow:hidden}
.duo-scherm img{display:block;width:100%;height:auto}
.duo-scherm.telefoon{right:15%;top:24%;width:27%;border-radius:9%/4.2%}
.duo-scherm.zuil{right:13%;top:22%;width:31%;border-radius:5%/2.8%;border-width:6px}
.duo-scherm.tablet{right:4%;top:36%;width:50%;border-radius:4%/5.5%;border-width:6px}
.duo-tegel{position:absolute;z-index:3;left:-4%;bottom:8%;background:#fff;border:1px solid #e4d9d3;border-radius:16px;padding:12px 14px;box-shadow:0 24px 60px -34px rgba(76,26,69,.5);font-size:13px;color:#5e4d57;white-space:nowrap}
.duo-tegel b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:22px;letter-spacing:-.02em;color:#4c1a45;margin-top:4px}
@media(max-width:640px){.duo-tegel{left:0;bottom:0;font-size:12px}.duo-tegel b{font-size:18px}}

/* ── Landingspagina's: hero in twee kolommen ─────────────────────────────────── */
.lp-hero.met-duo .wrap{max-width:1200px}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,4vw,56px);align-items:center}
.lp-hero-grid .lp-hero-tekst{min-width:0}
/* De cijferrij hoort niet bij één kolom: hij loopt onder tekst én bollen door. */
.lp-hero-grid .lp-stats{grid-column:1/-1;margin-top:0}
.lp-hero.met-duo .duo{max-width:540px}
@media(max-width:900px){
  .lp-hero-grid{grid-template-columns:1fr;gap:36px}
  .lp-hero.met-duo .duo{max-width:480px}
}

/* ── Voor wie-pagina's: de foto in het klantverhaal wordt de duo ─────────────── */
/* De figure verliest kader, bijsnijding en kleurwaas; de bollen bepalen zelf hun hoogte. */
.story .story-visual .story-photo.duo-los{aspect-ratio:auto;border-radius:0;overflow:visible;box-shadow:none}
.story .story-visual .story-photo.duo-los::after{display:none}
.story .story-visual .story-photo.duo-los .duo{max-width:none}
/* De pagina zet op elke img in .story-photo cover + een eigen object-position + saturate; hier terugnemen. */
.story .story-visual .story-photo.duo-los .duo-foto img{height:100%;object-fit:cover;object-position:var(--focus,50% 30%);filter:none}
.story .story-visual .story-photo.duo-los .duo-scherm img{height:auto;object-fit:fill;object-position:center;filter:none}
/* De kaartjes zweven alleen boven 1024px (daaronder zet de pagina ze static in een rij). De figure
   krijgt dan ruimte boven en onder: het kleine kaartje hangt bóven de bol, het lange grotendeels
   ónder de foto — zo raakt geen van beide het gezicht, ook niet bij een close-up (cafetaria, 20 okt). */
@media(min-width:1024px){
  .story .story-visual .story-photo.duo-los{padding:34px 0 84px}
  .story.met-duo .story-visual .flc-row .flc:nth-child(1){left:auto;right:-10px;top:0;bottom:auto}
  .story.met-duo .story-visual .flc-row .flc:nth-child(2){right:auto;left:-14px;top:auto;bottom:0}
}