/* The 2026 endowment recipients' thank-you video.
   Layered on top of the compiled Astro bundle; uses the site's own tokens only.

   One player, three placements — home, the endowment page, and inside the
   giving argument on /give/ — so this file is class-based rather than scoped to
   a section id. It replaced two near-identical, id-scoped copies of itself
   (home-recipients.css and endowment-thanks.css), which were removed.

   The video arrives already composed — black field, its own title, Rob's
   portrait beside whoever is speaking. So a page deliberately does not frame it
   twice: the copy above stays short, and the player gets the brass hairline and
   the same coal glow the hero portrait sits in, so it reads as part of the page
   rather than an embed dropped onto it.

   Nothing here downloads the 9.6 MB video: the card is the 85 KB poster until
   someone presses play (preload on the element itself). */

/* --- the player -------------------------------------------------------- */

.rvid {
  /* the source is 960px wide; stretching much past that only softens the
     titles baked into the video, and the poster's titles go soft below about
     40rem, so every variant stays inside that band */
  --rvid-max: 46rem;

  margin: 0 auto;
  width: min(100%, var(--rvid-max));
  position: relative;
  isolation: isolate;
}

/* the endowment page gives the video a section of its own and can afford the
   extra width; /give/ sits it inside a text column and cannot */
.rvid--wide {
  --rvid-max: 56rem;
}

.rvid--inline {
  --rvid-max: 40rem;
  margin-inline: 0;
  margin-block: 1.9rem 1.75rem;
}

/* the same slow coal glow that sits behind the hero portrait, held tighter */
.rvid::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9%;
  background:
    radial-gradient(circle at 50% 42%, rgba(200, 162, 74, 0.2), transparent 64%),
    radial-gradient(circle at 46% 90%, rgba(180, 64, 44, 0.15), transparent 68%);
  pointer-events: none;
}

.rvid__frame {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  /* matches the video's own letterbox so there is never a seam at the edge */
  background: #000;
}

.rvid__frame video {
  display: block;
  width: 100%;
  /* height:auto is required — the width/height attributes are a presentational
     hint that otherwise beats aspect-ratio */
  height: auto;
  aspect-ratio: 4 / 3;
  background: #000;
}

/* brass hairline and inset shadow, clipped to the frame — same treatment as
   .hero__edge::after on the home page */
.rvid__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(200, 162, 74, 0.55);
  box-shadow: inset 0 0 0 4px rgba(20, 17, 15, 0.45);
  pointer-events: none;
}

.rvid__fallback {
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
}

.rvid figcaption {
  margin-top: 1.15rem;
  text-align: center;
}

/* inline, the caption is one more line of the argument, not a plate label */
.rvid--inline figcaption {
  text-align: left;
  margin-top: 0.9rem;
}

/* --- the band that carries it on home and /endowment/ ------------------ */

.rvid-band {
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
}

.rvid-band__head {
  max-width: 46ch;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.rvid-band--wide .rvid-band__head {
  max-width: 48ch;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

.rvid-band__head h2 {
  max-width: 20ch;
}

.rvid-band__head p {
  margin: 1.1rem 0 0;
}

.rvid-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (max-width: 34rem) {
  /* the titles baked into the video are small on a phone, and the --rvid-max
     cap is already inert at this width, so the only thing left to do is stop
     centring text against a full-bleed frame */
  .rvid-band .rvid figcaption {
    text-align: left;
  }
  .rvid-band__actions {
    justify-content: flex-start;
  }
}

/* --- the inline placement's one line of set-up -------------------------- */

/* On /give/ the surrounding option body is already doing the arguing, so the
   video gets a single sentence rather than its own heading, and the sentence
   is pulled tight to the frame so the two read as one unit. */
.rvid-lead {
  margin: 1.6rem 0 0;
  max-width: 56ch;
}

.rvid-lead + .rvid--inline {
  margin-top: 1.1rem;
}