/* ═══ TAG/NACHT (VERGE Line interior light switch) ═══ */
.vl-light-section{padding-bottom:clamp(40px,6vh,72px)}
.vl-light-section .section-header{margin-bottom:clamp(20px,3vh,36px)}
.vl-light-section .section-sub{margin:0 auto;max-width:620px}

/* both photos share the same 2400x1350 canvas, so stacking them keeps them pixel-aligned */
/* height-capped so photo and switch fit on one screen */
.vl-light-frame{position:relative;aspect-ratio:2400/1350;margin:0 auto;
  max-width:min(1320px,max(720px,calc((100vh - 260px) * 16 / 9)));
  border-radius:28px;overflow:hidden;background:#1d1b18}
.vl-light-view,.vl-light-view img{position:absolute;inset:0;width:100%;height:100%}
.vl-light-view img{object-fit:cover;object-position:50% 50%;display:block}
.vl-light-night{opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1)}
[data-vl-light].is-night .vl-light-night{opacity:1}

.vl-light-control{display:flex;flex-direction:column;align-items:center;margin-top:clamp(20px,3vh,32px)}

/* pill toggle: knob slides right and swaps sun for moon when the lights go on */
.vl-switch{display:inline-flex;padding:0;border:0;background:none;cursor:pointer;border-radius:100px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.vl-switch:focus{outline:none}
.vl-switch:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.vl-switch-track{position:relative;display:block;width:84px;height:44px;border-radius:100px;
  background:#ece8e1;box-shadow:inset 0 0 0 1px var(--border);
  transition:background .4s ease,box-shadow .4s ease}
.vl-switch-knob{position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:50%;
  background:#fff;color:var(--txt);box-shadow:0 2px 6px rgba(0,0,0,.14);
  transition:transform .35s cubic-bezier(.4,0,.2,1),background .4s ease,color .4s ease,box-shadow .4s ease}
.vl-switch-knob svg{position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s ease,transform .35s cubic-bezier(.4,0,.2,1)}
.vl-icon-moon{opacity:0;transform:rotate(-45deg) scale(.6)}
.vl-switch:hover .vl-switch-track{box-shadow:inset 0 0 0 1px var(--muted-2)}

.vl-switch[aria-pressed="true"] .vl-switch-track{background:var(--txt);
  box-shadow:inset 0 0 0 1px var(--txt),0 0 0 4px rgba(200,169,110,.18),0 8px 24px -6px rgba(200,169,110,.55)}
.vl-switch[aria-pressed="true"] .vl-switch-knob{transform:translateX(40px);background:var(--accent-l);color:#fff;
  box-shadow:0 0 12px 1px rgba(200,169,110,.6)}
.vl-switch[aria-pressed="true"] .vl-icon-sun{opacity:0;transform:rotate(45deg) scale(.6)}
.vl-switch[aria-pressed="true"] .vl-icon-moon{opacity:1;transform:none}

.vl-light-caption{margin:16px auto 0;text-align:center;max-width:520px;min-height:3.2em}
.vl-light-state{display:block;font-size:clamp(1rem,1.3vw,1.15rem);font-weight:600;color:var(--txt);letter-spacing:-.2px}
.vl-light-note{display:block;margin-top:4px;font-size:.86rem;font-weight:400;color:var(--muted)}

@media(max-width:768px){
  /* full-bleed at the photo's own ratio so the whole interior stays visible on a phone */
  .vl-light-frame{width:100vw;margin-left:calc(50% - 50vw);max-width:none;border-radius:0;aspect-ratio:2400/1350}
  .vl-light-caption{min-height:4.2em}
}
@media(prefers-reduced-motion:reduce){
  .vl-light-night,.vl-switch-track,.vl-switch-knob,.vl-switch-knob svg{transition:none}
}