/* Villa Palmview — film262.css: het filmkader voor de homepage (zelfde regels als in v262.css, automatisch overgenomen) */
/* ---------- 6. filmkader ---------- */
.vstage.vs262{margin-top:22px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(18px,3.2vw,48px);align-items:center;background:var(--ink);color:var(--sand);
  border-radius:14px;padding:clamp(12px,2.2vw,26px)}
.vstage.vs262 .vframe{width:100%;height:auto;max-width:none;aspect-ratio:1/1;margin:0;border-radius:8px;box-shadow:none;background:#141110}
.vstage.vs262 .vtap-ico{display:none}
.vs262-play{position:absolute;left:50%;top:50%;z-index:3;width:84px;height:84px;margin:-42px 0 0 -42px;padding:0;border:0;border-radius:50%;
  background:rgba(255,253,249,.94);cursor:pointer;display:grid;place-items:center;transition:opacity .2s ease,transform .2s ease}
.vs262-play::before{content:"";margin-left:6px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #2C2620}
.vs262-play:hover{transform:scale(1.05)}
.vs262-play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.vs262.is-playing .vs262-play{opacity:0}
.vs262.is-playing .vs262-play::before{margin-left:0;width:6px;height:24px;border-width:0 7px;border-style:solid;border-color:transparent #2C2620}
.vs262.is-playing .vs262-play:focus-visible,.vs262.is-playing .vframe:hover .vs262-play{opacity:1}
.vs262-list{display:flex;flex-direction:column;margin:0;padding:0}
.vs262-item{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center;width:100%;min-height:44px;
  padding:12px 10px;border:0;border-top:1px solid rgba(244,239,230,.16);border-radius:0;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;transition:background .15s ease}
.vs262-item:first-child{border-top:0}
.vs262-item img{display:block;width:76px;height:76px;object-fit:cover;border-radius:6px;opacity:.62;transition:opacity .15s ease}
.vs262-item span{font-family:var(--serif);font-style:italic;font-size:1.04rem;line-height:1.35;opacity:.72}
.vs262-item:hover{background:rgba(244,239,230,.06)}
.vs262-item:hover img,.vs262-item[aria-current="true"] img{opacity:1}
.vs262-item[aria-current="true"] span{opacity:1}
.vs262-item[aria-current="true"]{background:rgba(244,239,230,.09)}
.vs262-item:focus-visible{outline:2px solid var(--sand);outline-offset:-2px}
@media(max-width:820px){
  .vstage.vs262{grid-template-columns:1fr;gap:10px;padding:10px;border-radius:12px}
  .vs262-list{flex-direction:row;gap:8px}
  .vs262-item{display:block;flex:1 1 0;padding:0;border:0;border-radius:6px;overflow:hidden;background:none}
  .vs262-item img{width:100%;height:auto;aspect-ratio:1/1;border-radius:6px}
  .vs262-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vs262-item[aria-current="true"]{background:none;outline:2px solid var(--sand);outline-offset:-2px}
  .vs262-play{width:72px;height:72px;margin:-36px 0 0 -36px}
}
