/* Video stories on the public pages (stories.php, the home page, About): real students on camera, no
   profile pictures. Upright 9:16 cards, the first frame as the cover, a lime play button, the pull
   quote underneath. Markup: render_video_story_card() in includes/stories.php. Script: assets/js/stories.js. */
.vs-wall, .vs-page {
  --vs-deep: #070b24; --vs-deep-2: #0e1540; --vs-on: #f4f5fb; --vs-on-2: rgba(244, 245, 251, .72); --vs-line-d: rgba(244, 245, 251, .12);
  --vs-ink: #0d1024; --vs-ink-2: #3a3e55; --vs-muted: #6b6f85; --vs-line: #e3e5ee; --vs-surface: #fff;
  --vs-lime: #cdfb5e; --vs-lime-ink: #0a0d1c; --vs-brand: #3b33ff;
  --vs-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --vs-spring: cubic-bezier(.2, 1.4, .35, 1);
}
.vs-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 290px)); justify-content: center; gap: 22px; }
.vs-wall.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }

.vs-card { margin: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vs-media { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--vs-deep); isolation: isolate; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 50px -30px rgba(7, 11, 36, .7); transition: transform .5s var(--vs-spring), box-shadow .5s ease; }
.vs-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--vs-deep); }
.vs-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 11, 36, .45), transparent 22%, transparent 62%, rgba(7, 11, 36, .7)); transition: opacity .35s ease; }
.vs-card:hover .vs-media { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--vs-lime), 0 30px 60px -28px rgba(59, 51, 255, .55); }

.vs-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border: 0; border-radius: 50%; background: var(--vs-lime); color: var(--vs-lime-ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(205, 251, 94, .18), 0 14px 30px -10px rgba(0, 0, 0, .6); transition: transform .4s var(--vs-spring), box-shadow .4s ease, opacity .3s ease; }
.vs-play svg { width: 26px; height: 26px; fill: currentColor; margin-left: 4px; }
.vs-play:hover, .vs-card:hover .vs-play { transform: scale(1.1); box-shadow: 0 0 0 16px rgba(205, 251, 94, .16), 0 18px 36px -10px rgba(0, 0, 0, .6); }
.vs-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.vs-len, .vs-campus { position: absolute; z-index: 2; top: 12px; height: 26px; padding: 0 10px; border-radius: 20px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; pointer-events: none; transition: opacity .3s ease; }
.vs-campus { left: 12px; max-width: calc(100% - 90px); background: rgba(7, 11, 36, .6); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-len { right: 12px; background: rgba(255, 255, 255, .92); color: var(--vs-ink); font-variant-numeric: tabular-nums; }

/* playing: the overlays step aside for the native controls */
.vs-card.playing .vs-play, .vs-card.playing .vs-len, .vs-card.playing .vs-campus, .vs-card.playing .vs-media::after { opacity: 0; pointer-events: none; }
.vs-card.playing .vs-media { transform: none; box-shadow: 0 0 0 2px var(--vs-lime), 0 30px 60px -28px rgba(59, 51, 255, .55); }

.vs-card figcaption { display: flex; flex-direction: column; gap: 12px; padding-inline: 4px; }
.vs-card q { font-family: var(--vs-serif); font-size: 19px; line-height: 1.4; color: var(--vs-ink); quotes: "\201C" "\201D"; }
.vs-who b { display: block; font-size: 14.5px; font-weight: 700; color: var(--vs-ink); }
.vs-who small { display: block; margin-top: 1px; font-size: 13px; color: var(--vs-muted); }
.vs-dark .vs-card q, .vs-dark .vs-who b { color: var(--vs-on); }
.vs-dark .vs-who small { color: var(--vs-on-2); }

/* stories.php */
.vs-page { background: var(--vs-deep); color: var(--vs-on); }
.vs-hero { position: relative; overflow: hidden; text-align: center; padding: 84px 24px 56px; }
.vs-hero::before { content: ""; position: absolute; left: 50%; top: -340px; width: 900px; height: 700px; margin-left: -450px; background: radial-gradient(closest-side, rgba(59, 51, 255, .5), transparent 70%); pointer-events: none; }
.vs-hero > * { position: relative; }
.vs-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--vs-lime); display: inline-flex; align-items: center; gap: 9px; }
.vs-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 4px rgba(255, 59, 59, .2); }
.vs-hero h1 { margin: 20px auto 0; max-width: 820px; font-family: var(--vs-serif); font-weight: 400; font-size: clamp(42px, 7vw, 86px); line-height: .98; letter-spacing: -.03em; color: var(--vs-on); text-wrap: balance; }
.vs-hero h1 em { font-style: italic; color: var(--vs-lime); }
.vs-hero p { margin: 22px auto 0; max-width: 560px; font-size: 18px; line-height: 1.6; color: var(--vs-on-2); }
.vs-body { max-width: 1180px; margin: 0 auto; padding: 8px 28px 90px; }
.vs-empty { max-width: 560px; margin: 0 auto; padding: 44px 30px; border: 1px dashed var(--vs-line-d); border-radius: 22px; text-align: center; color: var(--vs-on-2); }
.vs-empty svg { width: 38px; height: 38px; fill: none; stroke: var(--vs-lime); stroke-width: 1.5; stroke-linejoin: round; }
.vs-empty b { display: block; margin-top: 14px; font-size: 18px; color: var(--vs-on); }
.vs-empty p { margin: 8px 0 0; font-size: 15px; }
.vs-share { margin: 0 auto; max-width: 1180px; padding: 0 28px 96px; }
.vs-share > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 34px 38px; border-radius: 24px; background: var(--vs-deep-2); border: 1px solid var(--vs-line-d); }
.vs-share h2 { margin: 0; font-family: var(--vs-serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; color: var(--vs-on); letter-spacing: -.02em; }
.vs-share p { margin: 10px 0 0; color: var(--vs-on-2); font-size: 15.5px; max-width: 560px; }
.vs-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 12px; background: var(--vs-lime); color: var(--vs-lime-ink) !important; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; transition: transform .35s var(--vs-spring), box-shadow .35s ease; }
.vs-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(205, 251, 94, .7); }
.vs-cta svg { width: 18px; height: 18px; }
.vs-more { text-align: center; margin-top: 36px; }

@media (prefers-reduced-motion: no-preference) {
  .vs-wall .vs-card { animation: vsRise .9s cubic-bezier(.2, 1, .3, 1) backwards; }
  .vs-wall .vs-card:nth-child(6n+2) { animation-delay: 90ms; } .vs-wall .vs-card:nth-child(6n+3) { animation-delay: 180ms; } .vs-wall .vs-card:nth-child(6n+4) { animation-delay: 270ms; } .vs-wall .vs-card:nth-child(6n+5) { animation-delay: 360ms; } .vs-wall .vs-card:nth-child(6n) { animation-delay: 450ms; }
  @keyframes vsRise { from { opacity: 0; transform: translateY(36px) scale(.96); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) {
  .vs-wall.three { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .vs-share > div { grid-template-columns: 1fr; padding: 28px 24px; }
}
@media (max-width: 600px) {
  .vs-body { padding-inline: 16px; }
  .vs-share { padding-inline: 16px; }
  .vs-hero { padding: 64px 16px 40px; }
  .vs-wall { grid-template-columns: minmax(0, 340px); justify-content: center; }
}

/* home page: the link under the three stories */
.vs-more .hx-more { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--hx-line, #e3e5ee); font-weight: 700; font-size: 15px; color: var(--hx-ink, #0d1024) !important; transition: border-color .3s ease, transform .35s cubic-bezier(.2, 1.4, .35, 1); }
.vs-more .hx-more:hover { border-color: var(--hx-ink, #0d1024); transform: translateY(-2px); }
.vs-more .hx-more svg { width: 17px; height: 17px; }
.hx .vs-wall { margin-top: 52px; }

/* the join button under each story: dark on light pages, lime on the dark stories page. Pinned to the
   bottom of the card so the buttons line up across a row whatever the quote length. */
.vs-card figcaption { flex: 1; }
.vs-join { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px 0 18px; border-radius: 12px; background: var(--vs-deep); color: var(--vs-lime) !important; font-size: 14.5px; font-weight: 700; line-height: 1.25; text-decoration: none; transition: transform .35s var(--vs-spring), box-shadow .35s ease, background-color .35s ease; }
.vs-join span { padding-block: 10px; }
.vs-join svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--vs-spring); }
.vs-join:hover { transform: translateY(-2px); background: var(--vs-brand); color: #fff !important; box-shadow: 0 14px 30px -14px rgba(59, 51, 255, .8); }
.vs-join:hover svg { transform: translateX(4px); }
.vs-join:focus-visible { outline: 3px solid var(--vs-brand); outline-offset: 3px; }
.vs-dark .vs-join { background: var(--vs-lime); color: var(--vs-lime-ink) !important; }
.vs-dark .vs-join:hover { background: #dcff86; color: var(--vs-lime-ink) !important; box-shadow: 0 14px 34px -12px rgba(205, 251, 94, .7); }