/* Pellio playlist + lightbox blocks. */
.pellio-playlist__title { margin: 0 0 .75em; }
.pellio-playlist__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 32%); gap: 0; background: #0d0c0f; border-radius: 10px; overflow: hidden; }
.pellio-playlist__stage { position: relative; aspect-ratio: 16 / 9; background: #000; }
.pellio-playlist__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pellio-playlist__items { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
/* The list takes the player's height (set by its aspect ratio) and scrolls. */
@media (min-width: 701px) { .pellio-playlist__body .pellio-playlist__items { height: 0; min-height: 100%; } }
.pellio-playlist__item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: none; color: #f4f2ef; text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.pellio-playlist__item:hover { background: rgba(255, 255, 255, .06); }
.pellio-playlist__item[aria-current="true"] { background: rgba(255, 255, 255, .12); }
.pellio-playlist__thumb { position: relative; display: block; flex: none; width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; background: #221f26 center / cover no-repeat; }
.pellio-playlist__time { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.pellio-playlist__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 700px) { .pellio-playlist__body { grid-template-columns: 1fr; } .pellio-playlist__body .pellio-playlist__items { max-height: 320px; } }
.pellio-playlist__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.pellio-playlist__card { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pellio-playlist__card .pellio-playlist__thumb { width: 100%; border-radius: 10px; }
.pellio-playlist__card .pellio-playlist__name { margin-top: 8px; font-weight: 600; }
.pellio-playlist__thumb--play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(0, 0, 0, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center / 26px no-repeat; transition: transform .15s ease, background-color .15s ease; }
.pellio-playlist__card:hover .pellio-playlist__thumb--play::after, .pellio-playlist__card:focus-visible .pellio-playlist__thumb--play::after { transform: scale(1.08); background-color: rgba(0, 0, 0, .8); }
.pellio-lightbox-dialog { width: min(92vw, calc(88vh * 16 / 9)); max-width: none; padding: 0; border: 0; border-radius: 12px; background: #000; overflow: visible; }
.pellio-lightbox-dialog::backdrop { background: rgba(0, 0, 0, .85); }
.pellio-lightbox-dialog__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.pellio-lightbox-dialog iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pellio-lightbox-dialog__close { position: absolute; top: -44px; right: 0; width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }