/* ═══════════════════════════════════════════════════════════
   COURSE VIDEO: the embedded lesson recordings.

   A separate file, loaded after the main stylesheet, because
   course.css now ships from assets.beoflow.com (the R2 bucket)
   and is no longer editable in this repo. Adding the rules here
   keeps the CDN migration intact: nothing about this file makes
   a lesson page point back at a local course.css.

   If and when these rules move into the CDN copy of course.css,
   delete this file and the eight <link> tags that load it.

   youtube-nocookie is already in the CSP frame-src, so the
   embeds needed no header change. It also holds YouTube's
   cookies back until someone presses play, which keeps the
   cookie policy on this site honest.
   ═══════════════════════════════════════════════════════════ */

figure.video{ margin:22px 0 30px; }

/* The wrapper owns the 16:9 box rather than the iframe, so the player
   scales with the column at every width without the padding-bottom
   trick. */
.vframe{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); border-radius:12px; background:var(--cream);
}
.vframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
figure.video figcaption{ margin-top:12px; }

/* Access page: the video takes the slot the photograph held. That slot
   is portrait on desktop and a player is 16:9, so it is centred in a
   padded panel with a caption rather than stretched out of ratio, and
   the space reads as a frame rather than a gap where an image failed. */
.ap-photo .vframe{ border:0; border-radius:0; }

/* Above the player, not below it: this is the reason to press play, so it
   has to be read before the decision rather than after it. Set in the
   body face at reading size instead of the small mono caption style,
   because a credential nobody can read is not a credential. */
.ap-vtitle{
  font-family:var(--ral); font-weight:400; line-height:1.35;
  font-size:clamp(18px, 1.15vw + 12px, 27px);
  color:var(--ink); text-align:center; margin:0;
  max-width:46ch; text-wrap:balance; letter-spacing:-.01em;
}
/* The name is the credential, so it carries the weight. Kept unbroken so
   it never wraps between first and last name. */
.ap-vtitle b{ font-weight:600; white-space:nowrap; }
/* Below 900px .ap-photo is not the flex column, so it contributes no gap
   and the title sat directly on the top edge of the player. */
@media (max-width:899px){ .ap-vtitle{ padding:22px var(--gutter) 18px; margin:0 auto; } }
@media (min-width:900px){
  .ap-photo{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; padding:32px; background:var(--cream);
  }
  .ap-photo .vframe{ width:100%; border-radius:8px; }
}