/* ============================================================================
   Help center → Video tutorials
   (/de/hilfecenter/video-tutorials, /en/help-center/video-tutorials)

   Scoped to page-id-107195 — the DE original's id. WPML stamps that same id onto
   the translated EN twin's <body>, so this ONE rule set covers both language
   twins and reaches no other page. Verified on both rendered twins: DE carries
   page-id-107195; EN carries page-id-107195 and page-id-293879.

   The page is a stack of video rows: each row is a YouTube preview in one half
   column beside a heading + "Zu den Playlists" block in the other.

   1. Embed cards — the previews render as hard-edged rectangles. The redesign
      gives every video card the rounded, borderless treatment the help center
      landing page uses (Figma: 24px radius). The 16:9 `embed-responsive` box is
      untouched, so the card stays fully fluid and cannot cause a horizontal
      scrollbar.

   2. Vertical rhythm — every section paints its rows with the theme default
      `section > .container` padding (4rem top + 4rem bottom on desktop), so each
      video row sat ~128px away from the next with the short text column leaving
      even more air. Halving that padding on the video rows pulls them together
      without touching any other section (hero, banner) or page.
   ============================================================================ */

/* --- 1. Rounded, borderless video cards (Figma 24px radius) ----------------- */
body.page-id-107195 .youtube-standard {
    border: 0 !important;
    border-radius: 24px;
    overflow: hidden;   /* clip the thumbnail + play cover to the rounded corners */
}

/* --- 2. Tighten the space around each video row ---------------------------- */
/* Each video section paints ~64px (4rem) of top and bottom padding, so adjacent
   rows sat ~128px apart. Pull that in to 1rem. The padding sits on the <section>
   element itself here (a rule on `> .container` has no effect), so the section is
   the target. Only sections that actually hold a video are touched (`:has`), so
   the hero and the connect banner keep their own spacing, and both language twins
   are covered by the page-id scope. */
body.page-id-107195 #content section:has(.youtube-standard) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}