/* dc-playlist.css — the YouTube playlist embed (dc-playlist.js), on WordPress
   pages and our own. Uses the tokens in dc-tokens.css, which loads first;
   never dc.css, whose base rules would restyle the WordPress theme. Every rule
   is scoped to .dc-playlist, and buttons, lists and images are reset here
   because the WordPress theme styles them; the font is the page's. */

.dc-playlist { color: var(--ink); margin: 0 0 var(--space-6); }
.dc-playlist[hidden] { display: none; }

.dc-playlist button { appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: inherit; font: inherit; line-height: inherit;
  letter-spacing: inherit; text-transform: none; text-align: inherit; width: auto; min-height: 0;
  cursor: pointer; }
/* The theme colors every button's background on hover and focus
   (.colors-custom :not( .mejs-button ) > button:hover, specificity 0,3,1);
   the doubled class matches that, and this sheet loads after the theme's. */
.dc-playlist.dc-playlist button:hover, .dc-playlist.dc-playlist button:focus { background: none; }
.dc-playlist img { display: block; max-width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.dc-playlist button:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }

/* The player: a 16:9 box holding the thumbnail with a play button, then the
   video itself. The colors on the thumbnail are fixed: they sit on a photo. */
.dc-playlist__player { position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--radius-sm); overflow: hidden; }
.dc-playlist .dc-playlist__poster { position: absolute; inset: 0; display: block; width: 100%; }
.dc-playlist .dc-playlist__poster-img { width: 100%; height: 100%; object-fit: cover; }
.dc-playlist__play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px;
  transform: translate(-50%, -50%); border-radius: var(--radius-md); background: rgba(0, 0, 0, 0.72); }
.dc-playlist__play::after { content: ""; position: absolute; left: 27px; top: 14px;
  border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.dc-playlist__poster:hover .dc-playlist__play { background: rgba(0, 0, 0, 0.88); }
.dc-playlist__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Page navigation, above and below the grid: ‹ 1 / 6 › */
.dc-playlist__pager { display: flex; justify-content: center; align-items: center; gap: var(--space-4);
  margin: var(--space-4) 0; }
.dc-playlist__pager[hidden] { display: none; }
.dc-playlist .dc-playlist__step { width: 36px; height: 36px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 22px; line-height: 1; text-align: center;
  border: 1px solid var(--control-border); border-radius: var(--radius-full); }
.dc-playlist .dc-playlist__step:hover:not(:disabled) { background: var(--surface-200); color: var(--brand-blue-text); }
.dc-playlist .dc-playlist__step:disabled { opacity: 0.35; cursor: default; }
.dc-playlist__count { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }

/* The grid: 3 columns, 2 on narrow screens. */
.dc-playlist__grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.dc-playlist__item { margin: 0; padding: 0; }
.dc-playlist__item::before { content: none; }
.dc-playlist .dc-playlist__tile { display: block; width: 100%; text-align: center; }
.dc-playlist .dc-playlist__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-sm); outline: 3px solid transparent; outline-offset: 2px; }
.dc-playlist__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; margin-top: var(--space-2); font-size: 0.9em; line-height: 1.5; }
.dc-playlist__date { display: block; margin-top: var(--space-2); font-size: 0.8em; line-height: 1.4;
  color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.dc-playlist__date + .dc-playlist__title { margin-top: 2px; }
.dc-playlist__tile:hover .dc-playlist__title { color: var(--brand-blue-text); }
.dc-playlist__tile:hover .dc-playlist__thumb { opacity: 0.85; }

/* The video in the player: outlined, its title in bold. */
.dc-playlist__tile[aria-current="true"] .dc-playlist__thumb { outline-color: var(--fill-primary); }
.dc-playlist__tile[aria-current="true"] .dc-playlist__title { font-weight: 700; color: var(--brand-blue-text); }

.dc-playlist__error { padding: var(--space-4) 0; }
.dc-playlist__error p { margin: 0; }

@media (max-width: 600px) {
  .dc-playlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
}