/* css/event-watch.css — the Watch section of an event page: a navy "screening room" with the reel in a phone-style frame, the Instagram
   tap-to-load card, and the hero pill that leads to it. Tokens, buttons and focus rings: events-shared.css. Markup: includes/event_view_watch.php. */

/* ---------- Hero pill (inside the kicker row) ---------- */
.ev-vhero__watch {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .85rem; border-radius: 999px;
  background: var(--ev-gold); color: var(--ev-ink); font-size: .84rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); transition: transform .2s var(--ev-ease), background-color .2s;
}
.ev-vhero__watch:hover { background: #dcc08f; transform: translateY(-1px); }
.ev-vhero__watch i { font-size: .7rem; }

/* ---------- Stage ---------- */
.ev-watch { scroll-margin-top: calc(var(--ev-hdr) + 4rem); }
.ev-stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.4rem, 3.4vw, 2.4rem); align-items: center;
  padding: clamp(1.3rem, 3.2vw, 2.2rem); border-radius: 28px; color: #fff;
  background:
    radial-gradient(34rem 20rem at 6% -8%, rgba(201, 164, 107, .34), transparent 62%),
    radial-gradient(30rem 18rem at 104% 108%, rgba(28, 74, 126, .6), transparent 60%),
    linear-gradient(160deg, #10325c, var(--ev-ink) 72%);
  box-shadow: var(--ev-shade-hi);
}
.ev-stage::before {                                /* film grain, so the dark surface is not flat */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ev-stage::after {                                 /* a gold hairline frame, like a mount around a print */
  content: ""; position: absolute; inset: 10px; border-radius: 19px; border: 1px solid rgba(231, 207, 159, .24); pointer-events: none;
}
.ev-stage :where(a, button):focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px rgba(201, 164, 107, .9); }

.ev-stage__device { position: relative; width: min(16rem, 72vw); justify-self: center; }
.ev-stage[data-orient="post"] .ev-stage__device { width: min(30rem, 100%); }
/* An uploaded clip: the frame is the clip's own shape. The page sets --ev-ar (width ÷ height, kept between 1:2 and 2:1); the frame is as tall as a
   9:16 reel (28.5rem), never wider than 24rem, and a landscape clip takes the whole column. No percentage here: the column beside the card is
   sized by this box, and a percentage of an auto-sized column collapses it to nothing (the one-column layout below can use 100%). */
.ev-watch[data-mode="video"] .ev-stage__device { width: min(24rem, calc(28.5rem * var(--ev-ar, .5625)), 72vw); }
.ev-stage[data-orient="landscape"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ev-stage[data-orient="landscape"] .ev-stage__device { width: 100%; }

/* ---------- Frame around the player / the Instagram card ----------
   The ring is a box-shadow, not a border, so the picture area is exactly the clip's shape and nothing is cropped. */
.ev-reel, .ev-ig {
  position: relative; overflow: hidden; border-radius: 28px; background: #050c16;
  box-shadow: 0 0 0 6px #0a1422, 0 40px 70px -30px rgba(0, 0, 0, .85), 0 0 0 7px rgba(231, 207, 159, .4), 0 0 0 15px rgba(255, 255, 255, .05);
  aspect-ratio: var(--ev-ar, 9 / 16);
}
.ev-stage[data-orient="landscape"] .ev-reel { border-radius: 18px; }
.ev-stage[data-orient="square"] .ev-reel { border-radius: 22px; }
.ev-stage[data-orient="post"] .ev-ig { aspect-ratio: auto; min-height: 36rem; border-radius: 20px; }

.ev-reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #050c16; }
.ev-reel__fallback { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; padding: 1.5rem; text-align: center; color: #e5e7eb; background: #050c16; }

/* With an Instagram link the whole clip is the link: no on-screen controls, just a pointer. */
.ev-reel__link { position: absolute; inset: 0; z-index: 1; display: block; cursor: pointer; }
.ev-reel__link:focus-visible { outline: 3px solid var(--ev-gold); outline-offset: -5px; }

/* The pause button exists for keyboard and screen-reader users (moving content that starts by itself must be pausable). It is invisible until
   it has focus, then it is a plain 44px pill over the bottom of the clip. */
.ev-reel__pause[hidden] { display: none; }
.ev-reel__pause:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ev-reel__pause:focus {
  position: absolute; left: 50%; bottom: .8rem; z-index: 3; translate: -50% 0; min-height: 44px; padding: .5rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(5, 12, 22, .88); color: #fff; font: 700 .86rem/1 var(--body-font, Lato, sans-serif); box-shadow: 0 0 0 3px var(--ev-gold);
}

/* ---------- Instagram: tap to load ---------- */
.ev-ig__start { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.ev-ig__start:disabled { cursor: progress; }
/* The tile clips its children, so the usual outline OUTSIDE the button would be cut off: draw the focus ring inside it. */
.ev-ig .ev-ig__start:focus-visible { outline: 3px solid #fff; outline-offset: -9px; box-shadow: inset 0 0 0 9px rgba(201, 164, 107, .95); }
.ev-ig__art { position: absolute; inset: 0; display: block; }
.ev-ig__art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ev-ig__bg { object-fit: cover; filter: blur(18px) saturate(1.2) brightness(.5); transform: scale(1.25); }              /* fills the frame, never read as content */
.ev-ig__fg { object-fit: contain; filter: brightness(.78); transition: transform .8s var(--ev-ease), filter .3s; }       /* the whole poster, nothing cropped */
.ev-ig__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 12, 22, .85), rgba(5, 12, 22, .1) 55%); }
.ev-ig__art--blank { display: grid; place-items: center; background: radial-gradient(22rem 14rem at 80% 0, rgba(201, 164, 107, .35), transparent 60%), linear-gradient(160deg, #123a6b, #0a2342 70%); }
.ev-ig__art--blank::before { content: "Geetanjali"; color: #e7cf9f; font: 700 clamp(1.8rem, 5vw, 2.4rem)/1 var(--heading-font, Georgia, serif); letter-spacing: -.01em; }
.ev-ig__disc {
  position: absolute; left: 50%; top: 46%; z-index: 1; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; translate: -50% -50%; border-radius: 50%;
  background: var(--ev-gold); color: var(--ev-ink); font-size: 1.3rem; padding-left: .2rem; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7), 0 0 0 8px rgba(201, 164, 107, .28);
  transition: transform .3s var(--ev-ease);
}
.ev-ig__note {
  position: absolute; left: 50%; bottom: 1.1rem; z-index: 1; translate: -50% 0; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .4rem .8rem; border-radius: 999px; background: rgba(5, 12, 22, .6); color: #fff; font: 700 .76rem/1 var(--body-font, Lato, sans-serif);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (hover: hover) { .ev-ig__start:hover .ev-ig__disc { transform: scale(1.08); } .ev-ig__start:hover .ev-ig__fg { transform: scale(1.03); filter: brightness(.9); } }
.ev-ig.is-loading .ev-ig__disc { animation: ev-pulse 1s ease-in-out infinite; }
.ev-ig.is-loaded { background: #fff; }
.ev-ig__frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: transparent; color-scheme: light; }
.ev-ig.is-loading .ev-ig__frame { opacity: 0; pointer-events: none; }   /* Instagram answers behind the cover: the cover stays, nothing blinks white or jumps */

/* ---------- The card beside it ---------- */
.ev-stage__card { min-width: 0; }
.ev-stage__label { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; color: #e7cf9f; font: 700 .74rem/1.2 var(--body-font, Lato, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.ev-stage__title { margin: 0 0 .7rem; color: #fff; font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.95rem)/1.15 var(--heading-font, Georgia, serif); letter-spacing: -.01em; text-wrap: balance; }
.ev-stage__lede { margin: 0 0 .5rem; color: #fff; font-size: 1.05rem; line-height: 1.55; }
.ev-stage__hint { margin: 0 0 1.4rem; color: rgba(255, 255, 255, .8); font-size: .92rem; line-height: 1.5; max-width: 38ch; }
.ev-stage__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.ev-stage__actions .ev-btn { min-height: 48px; }
.ev-stage__actions .ev-btn i:last-child:not(:first-child) { font-size: .75rem; opacity: .8; }

@media (prefers-reduced-motion: no-preference) {
  .ev-stage__device { animation: ev-rise .8s .05s var(--ev-ease) both; }
}
@keyframes ev-pulse { 50% { transform: scale(1.1); } }

/* ---------- Narrow screens: the card goes under the player ---------- */
@media (max-width: 820px) {
  .ev-stage, .ev-stage[data-orient="landscape"] { grid-template-columns: 1fr; gap: 1.6rem; border-radius: 22px; }
  .ev-watch[data-mode="video"] .ev-stage__device { width: min(100%, 24rem, calc(28.5rem * var(--ev-ar, .5625))); }
  .ev-stage__card { text-align: left; }
  .ev-stage[data-orient="post"] .ev-ig { min-height: 32rem; }
}
@media (max-width: 420px) {
  .ev-stage { padding: 1.2rem; }
  .ev-stage__device { width: min(16rem, 100%); }
  .ev-stage[data-orient="landscape"] .ev-stage__device, .ev-stage[data-orient="post"] .ev-stage__device { width: 100%; }
  .ev-stage__actions .ev-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-ig__disc, .ev-ig__fg, .ev-vhero__watch { transition: none !important; animation: none !important; }
  .ev-ig.is-loading .ev-ig__disc { animation: none !important; }
}

/* ---------- The featured Instagram player once it is there ----------
   Up to 21rem wide (Instagram's player lays itself out fluidly and looks right in narrower boxes too: checked live down to 251px), then exactly as
   tall as it reports (--ig-h from js/event-watch.js), or a fixed height if it never says. After the media queries above, so these win on every screen. */
.ev-watch[data-mode="embed"] .ev-stage__device { width: min(21rem, 72vw); }   /* no % here: the card beside it is sized by this box (see the note at the top) */
.ev-stage[data-orient="post"] .ev-ig.is-measured, .ev-stage .ev-ig.is-measured { aspect-ratio: auto; min-height: 0; height: var(--ig-h); }
.ev-stage .ev-ig.is-tall:not(.is-measured) { aspect-ratio: auto; min-height: 0; height: min(44rem, 88svh); }
@media (max-width: 820px) { .ev-watch[data-mode="embed"] .ev-stage__device { width: min(100%, 21rem); } }   /* one column: the box may follow its container */
@media (min-width: 821px) { .ev-watch[data-mode="embed"] .ev-stage { padding: 1.4rem; gap: 1.6rem; } }   /* the player takes 21rem: leave the card beside it as much room as possible */
@media (max-width: 420px) { .ev-watch[data-mode="embed"] .ev-stage { padding: .9rem; } }

/* ---------- A clip the admin turned, and the clip as the page banner ----------
   A quarter turn is done in the stylesheet, so the file is never touched: the picture's box is swapped (as wide as the frame is tall) and turned about its
   centre, and the frame itself (--ev-ar from the page) is already the turned shape. cq units need a size container, hence container-type: size. */
.ev-reel { container-type: size; }
.ev-reel__video[data-rot], .ev-vhero__video {
  position: absolute; inset: auto; left: 50%; top: 50%; width: 100cqw; height: 100cqh; translate: -50% -50%; object-fit: cover;
}
.ev-reel__video[data-rot="90"], .ev-vhero__video[data-rot="90"] { width: 100cqh; height: 100cqw; rotate: 90deg; }
.ev-reel__video[data-rot="180"], .ev-vhero__video[data-rot="180"] { rotate: 180deg; }
.ev-reel__video[data-rot="270"], .ev-vhero__video[data-rot="270"] { width: 100cqh; height: 100cqw; rotate: 270deg; }

.ev-vhero__bg--video { inset: 0; overflow: hidden; container-type: size; background: var(--ev-ink); }
.ev-vhero__video { background: var(--ev-ink); opacity: .6; }                    /* dimmed, then the hero's own gradient keeps the words readable */
.ev-vhero__bgpause {
  position: absolute; z-index: 3; left: max(20px, calc((100% - 1100px) / 2 + 20px)); bottom: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .95rem;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(10, 35, 66, .72); color: #fff; font: 700 .8rem/1 var(--body-font, Lato, sans-serif); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .2s, border-color .2s;
}
.ev-vhero__bgpause:hover { background: rgba(10, 35, 66, .92); border-color: #fff; }
.ev-vhero__bgpause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(201, 164, 107, .9); }
.ev-vhero__bgpause::before { content: ""; width: .7rem; height: .8rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }   /* two bars: pause */
.ev-vhero__bgpause[data-paused]::before { width: 0; height: 0; border: 0; border-top: .4rem solid transparent; border-bottom: .4rem solid transparent; border-left: .7rem solid currentColor; }   /* a triangle: play */
@media (prefers-reduced-motion: reduce) { .ev-vhero__bgpause { transition: none; } }
@media (forced-colors: active) { .ev-vhero__video { opacity: 1; } .ev-vhero__bgpause { border-color: ButtonText; } }