/* BannerBazen · decor.css (v16, 3 november)
   Een scherm in een foto: de abri bovenaan DOOH en de etalage op /narrowcasting/ (b_decor.py, decor.js). Het doek is de
   hele foto; het vak (.decor__beeld) snijdt bij naar --fa (2:1 op een groot scherm, 5:4 op een tablet, 4:5 op een
   telefoon), met het scherm in het midden (--ia: de verhouding van de foto; --cx en --cy: het midden van het scherm, als
   deel van de foto). --zoom zet het scherm groter in beeld. De video staat in het vak om het scherm heen (.decor__scherm);
   decor.js geeft hem de vier hoeken van het scherm (matrix3d). De selectors hebben twee klassen: in de tekst van een gids
   (kennis.css) houden ze zo hun eigen maten. */
.decor{--fa:2;--zoom:1}
.decor .decor__beeld{position:relative;overflow:hidden;aspect-ratio:var(--fa);border-radius:8px;background:#26251f}
.decor .decor__doek{position:absolute;
  --dw:calc(max(100%, calc(var(--ia) / var(--fa) * 100%)) * var(--zoom));
  --dh:calc(max(100%, calc(var(--fa) / var(--ia) * 100%)) * var(--zoom));
  width:var(--dw);height:var(--dh);
  left:clamp(calc(100% - var(--dw)), calc(50% - var(--cx) * var(--dw)), 0%);
  top:clamp(calc(100% - var(--dh)), calc(50% - var(--cy) * var(--dh)), 0%)}
.decor .decor__doek picture img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none}
.decor .decor__scherm{position:absolute;transform-origin:0 0;overflow:hidden;background:var(--rand,#121212);backface-visibility:hidden}
/* is het scherm in de foto hoger dan 9:16, dan staat de video erin met stroken in de kleur van de rand (--mx, --my) */
.decor .decor__scherm video{position:absolute;left:var(--mx,0%);top:var(--my,0%);display:block;width:calc(100% - 2 * var(--mx,0%));height:calc(100% - 2 * var(--my,0%));max-width:none;object-fit:fill}
/* het glas: een flauwe weerschijn en een randje schaduw, zodat de video in het scherm zit en er niet op ligt */
.decor .decor__scherm::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 46%,rgba(255,255,255,0) 78%,rgba(255,255,255,.05) 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset 0 0 18px rgba(0,0,0,.16)}
.decor .decor__voor{position:absolute;display:block;max-width:none;pointer-events:none}
/* eronder: de knop, wat er speelt, en de uitingen (de oranje lijn loopt mee met de uiting die speelt) */
.decor .decor__onder{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"knop nu" "lijst lijst";align-items:center;gap:14px 12px;margin-top:20px}
/* de maat van .label (site.css), ook in de tekst van een gids, waar p groter is (kennis.css) */
.decor p.decor__nu{grid-area:nu;margin:0;font-size:12px;line-height:1.2;color:var(--fg-3)}
.decor .decor__knop{grid-area:knop;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--lijn-2);border-radius:50%;color:var(--fg);background:none;cursor:pointer;transition:border-color .2s}
.decor .decor__knop:hover{border-color:var(--fg)}
.decor .decor__knop svg{width:12px;height:12px}
.decor .decor__knop svg+svg,.decor.is-stil .decor__knop svg:first-child{display:none}
.decor.is-stil .decor__knop svg+svg{display:block}
.decor .decor__lijst{grid-area:lijst;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:0 clamp(12px,1.6vw,24px);list-style:none;margin:0;padding:0}
.decor .decor__lijst>li.decor__item{margin:0;padding:0;font-size:inherit;line-height:inherit}
.decor .decor__item button{position:relative;display:grid;align-content:start;gap:4px;width:100%;height:100%;padding:14px 0 0;border:0;border-top:1px solid var(--lijn-2);background:none;color:var(--fg-3);font:inherit;text-align:left;cursor:pointer}
.decor .decor__item button::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--or);transform:scaleX(var(--p,0));transform-origin:0 50%}
.decor .decor__item button[aria-current="false"]::before{transform:scaleX(0)}
.decor .decor__item b{font-weight:500;font-size:15px;line-height:1.25;color:var(--fg-2);transition:color .2s}
.decor .decor__item span{font-size:14px;line-height:1.35}
.decor .decor__item button:hover b,.decor .decor__item button[aria-current="true"] b{color:var(--fg)}
.decor .decor__item button[aria-current="true"]{color:var(--fg-2)}
.decor p.decor__noot{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--fg-3);max-width:62ch}
@media (max-width:900px){
  .decor{--fa:1.25}
  .decor .decor__lijst{grid-template-columns:minmax(0,1fr)}
  .decor .decor__item button{grid-template-columns:7.5em minmax(0,1fr);gap:12px;padding:12px 0}
  .decor .decor__lijst>li.decor__item:last-child button{border-bottom:1px solid var(--lijn-2)}
}
@media (max-width:600px){.decor{--fa:.8}}
.rustig .decor .decor__item b{transition:none}

/* de etalage op /narrowcasting/: in de tekst van de gids, breder dan de tekst (zoals de beelden), en het scherm dichterbij */
.decor--etalage{--zoom:1.3}
@media (min-width:901px){.decor--etalage{--fa:1.6}}
.pagina-gids .art--gids .art__tekst>div.decor[data-decor]{max-width:min(100%,1040px);margin-top:2em;margin-bottom:2.4em}

/* 10 november: een uiting die nog niet is opgeleverd (uit=True in teksten.py): grijs, niet te kiezen */
.decor__item.is-uit button{opacity:.38;filter:grayscale(1);cursor:default}