/* @label.en Recording
   @description.en One recording to watch or listen to: its title, the player (a video, YouTube or
   audio), and a line about it — how long it is, where it's from.

   @label.he הקלטה
   @description.he הקלטה אחת לצפייה או להאזנה: הכותרת, הנגן (וידאו, יוטיוב או אודיו), ושורה עליה — כמה
   זמן היא נמשכת, מאיפה היא.

   @example
   <div class="block-style-recording"><p><strong>תרגול נשימה להפחתת מתח והרדמות</strong></p><p>הקלטה של תרגיל נשימה מונחה הנמשך כ 15 דקות.</p></div> */
@layer components {
  .lexxy-content div.block-style-recording {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block: var(--block-space);
    padding: 1rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    > * { margin: 0; }
    > :first-child { font-size: var(--text-large); line-height: 1.3; }
    /* Lexxy sizes the figure to its content, and a player yet to load its metadata is 300×150. */
    figure { margin: 0; padding: 0; inline-size: 100%; }
    :is(video, .video-embed, audio) { display: block; inline-size: 100%; margin: 0; border-radius: var(--radius); }
    video { block-size: auto; max-block-size: 70vh; background: #000; }
  }
}