/* Videos of the celebrations, in Visiting India (Shruti, 24–27 Oct): a "▶ Watch" button under each event in "The celebrations,
   explained", and one full-screen viewer with every video. Loaded after styles.css. */

/* the button: a small outlined pill with an ink play disc, under the event's text */
.v-watch{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:10px;padding:0 18px 0 6px;box-sizing:border-box;
  border:1.5px solid rgba(33,77,116,.55);border-radius:999px;background:rgba(255,253,248,.85);color:var(--ink);
  font:600 16px/1 var(--f-ui);letter-spacing:.01em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.v-watch > i{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#FFFDF8;font-style:normal}
.v-watch > i svg{display:block;width:8px;height:8.9px;margin-left:2px;fill:currentColor}
@media (hover:hover){ .v-watch:hover{background:#FFFDF8;border-color:var(--ink)} }
.v-watch:focus-visible{outline:2px solid var(--sindoor);outline-offset:3px}
.v-agenda li .v-watch{display:flex;width:max-content;margin-top:12px}
.v-agenda li:not(:last-child) .v-watch{margin-bottom:18px}   /* closer to its own event than to the next one */
.v-watch-all{margin:30px 0 0}

/* the viewer: one full-screen sheet with every video, grouped by event */
html.vw-open{overflow:hidden;overscroll-behavior:none;scrollbar-gutter:stable}
.vw{--vw-col:400px;position:fixed;inset:0;z-index:9999;width:100%;height:100%;max-width:none;max-height:none;margin:0;
  padding:env(safe-area-inset-top,0px) 0 0;border:0;background:#FBF6EC;color:var(--ink);overflow:hidden;overscroll-behavior:contain}
.vw:not([open]){display:none}
.vw[open]{display:grid;grid-template-rows:auto minmax(0,1fr);animation:vw-in .24s ease-out}
.vw::backdrop{background:transparent}   /* the sheet itself is opaque; this way it fades in over the page */
@keyframes vw-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.vw-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;width:100%;max-width:calc(var(--vw-col) + 40px);margin:0 auto;padding:18px 20px 12px}
.vw-bar h2{margin:0;font:italic 600 30px/1.1 var(--f-disp);color:var(--ink)}
.vw-bar p{margin:6px 0 0;font:500 18.5px/1.4 var(--f-disp);color:var(--ink)}
/* close: a round × only (Shruti, 26 Oct); its name, Close or Cerrar, is read out by screen readers */
.vw-x{flex:none;display:grid;place-items:center;width:48px;height:48px;margin:-2px -4px 0 0;padding:0;border:1.5px solid rgba(33,77,116,.7);border-radius:50%;
  background:#FFFDF8;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.vw-x svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (hover:hover){ .vw-x:hover{background:var(--ink);color:#FFFDF8} }
.vw-list{position:relative;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;
  padding:4px 20px calc(28px + env(safe-area-inset-bottom,0px))}
.vw-group{width:100%;max-width:var(--vw-col);margin:0 auto;display:grid;gap:12px}
.vw-group + .vw-group{margin-top:34px}
.vw-group h3{margin:0;font:italic 600 26px/1.15 var(--f-disp);color:var(--ink);text-wrap:balance}
.vw-group h3:focus{outline:none}
.vw-items{display:grid;gap:18px;justify-items:center;container-type:inline-size}
.vw-items iframe{display:block;width:100%;max-width:400px;height:640px;height:calc(min(100cqw,400px) * 1.25 + 208px);border:0;border-radius:12px;background:#fff}
.vw-items iframe.vw-tall{min-height:calc(min(100cqw,400px) * 1.25 + 64px)}   /* see 'tall' in videos.js */
/* where Instagram's player can't be shown: a card that opens the video on Instagram */
.vw-card{display:flex;align-items:center;gap:14px;box-sizing:border-box;width:100%;max-width:400px;min-height:64px;padding:12px 18px 12px 12px;
  border:1.5px solid rgba(33,77,116,.42);border-radius:14px;background:#FFFDF8;color:var(--ink);font:600 18px/1.3 var(--f-ui);text-decoration:none}
.vw-card > i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#FFFDF8}
.vw-card > i svg{display:block;width:12px;height:13px;margin-left:3px;fill:currentColor}
@media (hover:hover){ .vw-card:hover{border-color:var(--ink);background:#fff} }
@media (min-width:700px) and (min-aspect-ratio:1/1){
  .vw{--vw-col:1104px}
  .vw-bar{padding-top:24px}
  .vw-items{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
  .vw-items iframe{width:340px;max-width:100%;height:633px}
  .vw-items iframe.vw-tall{min-height:489px}
  .vw-card{width:auto;flex:0 0 100%;max-width:704px;order:2}   /* a card gets its own line after the players, never a half-empty column */
}
@media (prefers-reduced-motion:reduce){ .vw[open]{animation:none} }