/* ==========================================================================
   SmartPresent · De spiegels (SP-004)
   Conceptvisualisatie: verhoudingen zijn geen productspecificaties.
   ========================================================================== */
.spiegels__kop{max-width:46rem;margin-bottom:clamp(24px,4vw,44px)}
.spiegels__kop .lead{margin-top:14px}

/* ---------- twee spiegels, vrijstaand ---------- */
.spiegel-duo{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.spiegel-kaart{display:grid;align-content:start;gap:10px}
.spiegel-kaart__beeld{position:relative;margin:0 0 8px}
.spiegel-kaart__tag{top:12px;left:12px;z-index:6}
.spiegel-studio{
  position:relative;aspect-ratio:4/5;container-type:size;overflow:hidden;border-radius:16px;
  background:
    radial-gradient(70% 55% at 50% 30%,rgba(255,255,255,.07),transparent 70%),
    linear-gradient(180deg,#24272D 0%,#17191D 80%,#0C0D10 80%,#08090A 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
.spiegel-studio::after{content:"";position:absolute;left:0;right:0;top:80%;height:2px;background:#26282E}
.spiegel-studio__device{position:absolute;left:50%;transform:translateX(-50%);z-index:2}
.spiegel-kaart--groot .spiegel-studio__device{width:30cqh;bottom:12cqh}
.spiegel-kaart--klein .spiegel-studio__device{width:38cqh;top:18cqh}
/* zachte schaduw op de vloer onder de vrijstaande spiegel */
.spiegel-kaart--groot .spiegel-studio__device::before{content:"";position:absolute;left:4%;right:4%;bottom:-2cqh;height:3cqh;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.spiegel-kaart__naam{font-family:var(--f-label);font-weight:800;font-size:clamp(1.2rem,1.8vw,1.45rem)}
.spiegel-kaart__zin{color:var(--c-soft);max-width:34rem}
.spiegel-kaart__prijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:4px}
.spiegel-kaart__bedrag{font-family:var(--f-display);font-size:clamp(2rem,3vw,2.6rem);line-height:1;color:var(--c-ink)}
.spiegel-kaart__btw{font-size:.88rem;color:var(--c-muted)}
.spiegel-duo__onder{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin-top:clamp(24px,3vw,36px)}
.spiegel-duo__noten{display:grid;gap:8px;max-width:46rem;color:var(--c-soft)}
.spiegel-duo__noten strong{color:var(--c-ink)}
.spiegel-duo__noten a{color:var(--c-ink);text-decoration:underline;text-underline-offset:.2em}

/* ---------- media-slot: later de OpenMotion-clip, zelfde vak ---------- */
.spiegel-media{position:absolute;inset:0}
.spiegel-media__video{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(.95)}
.spiegel-media:not(.heeft-video) .spiegel-media__video{visibility:hidden}
.spiegel-media.heeft-video .scene{visibility:hidden}

/* ---------- toepassingen ---------- */
.toep__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.spiegel-podium{
  position:relative;aspect-ratio:16/10;container-type:size;overflow:hidden;border-radius:16px;background:#121317;
  box-shadow:0 0 0 1px rgba(255,255,255,.07);--x:1170;
}
.spiegel-podium__ruimte{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;user-select:none}
.spiegel-podium__tag{top:12px;left:12px;z-index:6}
/* positie in de ruimte: x in ruimte-eenheden (1600 breed), ruimte schaalt op de hoogte */
.spiegel-podium__device{position:absolute;margin:0;z-index:2;left:calc(50cqw + (var(--x) - 800) * .1cqh);transform:translateX(-50%);transition:width .4s var(--ease-out),top .4s var(--ease-out),bottom .4s var(--ease-out)}
.spiegel-podium[data-maat="groot"] .spiegel-podium__device{width:22cqh;bottom:13cqh}
.spiegel-podium[data-maat="groot"] .spiegel-podium__device::before{content:"";position:absolute;left:4%;right:4%;bottom:-1.6cqh;height:2.6cqh;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.spiegel-podium[data-maat="klein"] .spiegel-podium__device{width:22cqh;top:24cqh}
.spiegel-podium[data-toepassing="kapsalon"]{--x:1170}
.spiegel-podium[data-toepassing="sport"]{--x:1000}
.spiegel-podium[data-toepassing="hotel"]{--x:1150}
.spiegel-podium[data-toepassing="showroom"]{--x:1080}
.spiegel-podium[data-toepassing="paskamer"]{--x:1000}
/* weerspiegeling: de ruimte, gespiegeld en vaag, zwak over de presentatie (leesbaarheid blijft) */
.spiegel-podium .device__scherm::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background-size:cover;background-position:50% 100%;transform:scaleX(-1);filter:blur(3px);opacity:.16;mix-blend-mode:screen}
.spiegel-podium[data-toepassing="entree"] .device__scherm::before{background-image:url("../img/omgevingen/entree.svg")}
.spiegel-podium[data-toepassing="kapsalon"] .device__scherm::before{background-image:url("../img/omgevingen/kapsalon.svg")}
.spiegel-podium[data-toepassing="sport"] .device__scherm::before{background-image:url("../img/omgevingen/sport.svg")}
.spiegel-podium[data-toepassing="hotel"] .device__scherm::before{background-image:url("../img/omgevingen/hotel.svg")}
.spiegel-podium[data-toepassing="showroom"] .device__scherm::before{background-image:url("../img/omgevingen/showroom.svg")}
.spiegel-podium[data-toepassing="paskamer"] .device__scherm::before{background-image:url("../img/omgevingen/paskamer.svg")}
.toep__onder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px}
.toep__status{font-size:.92rem;color:var(--c-soft)}
.toep__keuze{display:grid;gap:22px}
.toep__uitleg{color:var(--c-soft);padding-top:14px;border-top:1px solid var(--c-line)}
.toep__lijst{list-style:disc;padding-left:1.2em;margin-top:18px;color:var(--c-soft);display:grid;gap:4px}

@media (max-width:899px){
  .toep__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .spiegel-duo{grid-template-columns:minmax(0,1fr)}
  /* hoger podium: de ruimte schaalt op de hoogte, de zijkanten vallen weg (x 300..1300 blijft zichtbaar) */
  .spiegel-podium{aspect-ratio:1/1}
  .spiegel-podium[data-maat="groot"] .spiegel-podium__device,.spiegel-podium[data-maat="klein"] .spiegel-podium__device{width:25cqh}
  /* altijd wat lucht tot de rand (vierkant podium: 25cqh = 25cqw) */
  .spiegel-podium__device{left:min(calc(50cqw + (var(--x) - 800) * .1cqh),84cqw)}
}
@media (prefers-reduced-motion:reduce){
  .spiegel-podium__device{transition:none}
}
/* direct onder de donkere hero: geen dubbele witruimte */
.spiegels-duo{padding-top:0}