/* Every episode of the course's podcast (course/parts/podcast-episodes.php) -- Figma 13 · 04.14:
   "לשאר הפרקים" under the cards, and the dialog it opens -- the page's dialog card (dialog.css) on a wide
   screen, a sheet rising from the bottom of a phone. A row per episode scrolls under the title on a
   thin blue bar, and a row playing in the site's player shows the player's bar in its meta line's place. */

/* At the far end of the cards -- the left on a Hebrew page (Oren, 2026-09-30). */
.cil-course .cil-course-podcasts__all {
    display: block;
    width: fit-content;
    margin: 15px 0 0;   /* its words 18px under the cards; the 3px of padding makes a 24px target */
    margin-inline-start: auto;
    padding: 3px 0;
    border: 0;
    background: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    /* The design's blue-regular-7 is 3.9:1 on the page; the links of the page's sections read in blue-dark-1. */
    color: var(--cil-blue-dark-1);
    cursor: pointer;
}
.cil-course .cil-course-podcasts__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.cil-course .cil-course-podcasts__all:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 3px; border-radius: 2px; }

/* ---- the dialog ---- */
.cil-course-episodes {
    --cd-dialog-w: 760px;
    padding: 32px 32px 28px;
    text-align: start;
    box-shadow: 0 12px 40px color-mix(in srgb, var(--cil-black) 18%, transparent);
}
.cil-course-episodes[open] { display: flex; flex-direction: column; gap: 16px; }
.cil-course-episodes::backdrop { background: color-mix(in srgb, var(--cil-blue-dark-5) 60%, transparent); }
.cil-course .cil-course-episodes .cil-course-dialog__close { top: 32px; inset-inline-end: 32px; }
.cil-course-episodes__handle { display: none; }
.cil-course-episodes__head { display: flex; flex-direction: column; gap: 4px; padding-inline-end: 60px; }
.cil-course .cil-course-episodes__heading { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--cil-black-dark-4); }
.cil-course .cil-course-episodes__summary { margin: 0; font-size: 16px; line-height: 1.2; color: var(--cil-black-regular-7); }
/* The design's black-regular-3 is 3.6:1; one step darker than it reads, at 4.6:1. */
.cil-course .cil-course-episodes__seen { margin: 0; font-size: 14px; line-height: 1.2; color: var(--cil-black-regular-5); }

/* The rows scroll on a 4px blue bar at the far side, 10px from them. */
.cil-course .cil-course-episodes__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 1 auto;
    min-height: 0;   /* a short window takes it from the list, not from the player */
    max-height: 528px;
    margin: 0;
    padding: 0;
    padding-inline-end: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}
.cil-course-episodes__list:focus { outline: none; }
.cil-course-episodes__list::-webkit-scrollbar { width: 4px; }
.cil-course-episodes__list::-webkit-scrollbar-track { border-radius: 2px; background: var(--cil-black-light-2); }
.cil-course-episodes__list::-webkit-scrollbar-thumb { border-radius: 2px; background: var(--cil-blue); }
@supports not selector(::-webkit-scrollbar) {
    .cil-course-episodes__list { scrollbar-width: thin; scrollbar-color: var(--cil-blue) var(--cil-black-light-2); }
}

/* ---- a row ---- */
.cil-course .cil-course-episodes__row {
    --cd-track: var(--cil-black-light-4);
    --cd-seek-colour: var(--cil-blue-regular-7);   /* 3.9:1 on white, where the card's light blue is 1.9 */
    position: relative;
    flex: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cil-black-light-2);
    border-radius: 10px;
    background: var(--cil-white);
    transition: border-color 0.2s ease;
}
.cil-course .cil-course-episodes__row::before { content: none; }
.cil-course-episodes__face { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 9px 14px; }   /* 58px with the border, as the design's rows */
.cil-course-episodes__cover { flex: none; width: 36px; height: 36px; overflow: hidden; border-radius: 6px; box-shadow: 0 5px 15px color-mix(in srgb, var(--cil-black) 20%, transparent); }
.cil-course-episodes__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cil-course-episodes__words { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
/* Every row one size, with a length or without and playing or not (Oren, 2026-09-30): a title longer
   than its line is cut with "…". */
.cil-course .cil-course-episodes__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-black-dark-4);
}
.cil-course .cil-course-episodes__meta { margin: 0; overflow: hidden; font-size: 14px; font-weight: 400; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; color: var(--cil-black-regular-7); }

.cil-course .cil-course-episodes__play {
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--cil-blue);
    cursor: pointer;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}
/* The whole row is the mark's to press. */
.cil-course-episodes__play::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.cil-course .cil-course-episodes__row:hover { border-color: var(--cil-black-light-4); }
.cil-course .cil-course-episodes__row:hover .cil-course-episodes__play,
.cil-course .cil-course-episodes__play:focus-visible { color: var(--cil-blue-regular-7); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cil-blue) 24%, transparent); }
.cil-course .cil-course-episodes__play:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 4px; }
.cil-course-episodes__row.is-playing .cil-course-episode__playIcon { display: none; }
.cil-course-episodes__row.is-playing .cil-course-episode__pauseIcon { display: block; }
.cil-course-episodes__row.is-waiting .cil-course-episodes__play { animation: cil-course-episode-wait 1.2s ease-in-out infinite; }

/* The row chosen last -- playing, paused, or on a provider's player -- keeps an outline. */
.cil-course .cil-course-episodes__row:is(.is-current, .is-embedded) { border-color: var(--cil-blue-regular-7); }

/* ---- the dialog's one player, at its foot: always shown, still until a row plays (Oren, 2026-09-30) ---- */
.cil-course .cil-course-episodes__player {
    --cd-track: var(--cil-black-light-4);
    --cd-seek-colour: var(--cil-blue-regular-7);   /* 3.9:1 on white, where the card's light blue is 1.9 */
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--cil-black-light-2);
}
/* No row here can play in it: it stays away until a provider's player takes its place. */
.cil-course-episodes__player:not(.has-player):not(.is-embedded) { display: none; }
.cil-course-episodes__now { display: flex; align-items: center; gap: 12px; }
.cil-course .cil-course-episodes__toggle {
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--cil-blue);
    cursor: pointer;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}
.cil-course .cil-course-episodes__toggle:hover,
.cil-course .cil-course-episodes__toggle:focus-visible { color: var(--cil-blue-regular-7); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cil-blue) 24%, transparent); }
.cil-course .cil-course-episodes__toggle:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 4px; }
.cil-course-episodes__toggle svg { width: 100%; height: 100%; }   /* which mark shows: podcast.css and the two rules below */
.cil-course-episodes__player.is-playing .cil-course-episode__playIcon { display: none; }
.cil-course-episodes__player.is-playing .cil-course-episode__pauseIcon { display: block; }
.cil-course-episodes__player.is-waiting .cil-course-episodes__toggle { animation: cil-course-episode-wait 1.2s ease-in-out infinite; }
.cil-course-episodes__nowWords { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.cil-course .cil-course-episodes__nowTitle,
.cil-course .cil-course-episodes__nowMeta { margin: 0; overflow: hidden; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.cil-course .cil-course-episodes__nowTitle { font-size: 16px; font-weight: 600; color: var(--cil-black-dark-4); }
.cil-course .cil-course-episodes__nowMeta { font-size: 14px; color: var(--cil-black-regular-7); }
/* The card's bar and second row, set in the player's own flow and drawn dark on the dialog's white. */
.cil-course .cil-course-episodes__player .cil-course-episode__progress,
.cil-course .cil-course-episodes__player .cil-course-episode__controls { margin: 0; }
.cil-course .cil-course-episodes__player .cil-course-episode__time { color: var(--cil-black-regular-7); }
.cil-course .cil-course-episodes__player .cil-course-episode__control { color: var(--cil-black-dark-4); }
.cil-course .cil-course-episodes__player .cil-course-episode__control:hover { background: var(--cil-black-light-2); }
.cil-course .cil-course-episodes__player .cil-course-episode__control:focus-visible { outline-color: var(--cil-blue-regular-7); }
/* The sound marks are drawn white in their files; here they take the player's ink. */
.cil-course-episodes__player .cil-course-episode__control svg path { fill: currentColor; }
.cil-course-episodes__player .cil-course-episode__control .is-muted,
.cil-course-episodes__player.is-muted .cil-course-episode__control .is-sound { display: none; }
.cil-course-episodes__player.is-muted .cil-course-episode__control .is-muted { display: block; }
.cil-course .cil-course-episodes__player .cil-course-episode__level { --cd-level-ink: var(--cil-black-dark-4); }
.cil-course-episodes__player .cil-course-episode__levelValue { color: var(--cil-black-dark-4); }
.cil-course-episodes__player.is-fixed-volume .cil-course-episode__loudness { display: none; }
/* Still until a row plays: shown, not yet pressable. */
.cil-course .cil-course-episodes__player [data-cd-episodes-control]:disabled { opacity: 0.4; cursor: default; }
.cil-course .cil-course-episodes__player .cil-course-episode__control:disabled:hover { background: transparent; }
/* No sound file of its own: the provider's player in the player's place. */
.cil-course-episodes__player.is-embedded > :not(.cil-course-episode__player) { display: none; }
.cil-course-episodes__player .cil-course-episode__player { border-radius: 9px; }

/* ---- a phone: a sheet from the bottom ---- */
@media (max-width: 767px) {
    .cil-course .cil-course-podcasts__all { margin-top: 13px; font-size: 16px; }
    .cil-course-episodes:modal {
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: 85dvh;
        margin: 0;
        padding: 10px 16px 28px;
        border-radius: 20px 20px 0 0;
    }
    .cil-course-episodes[open] { gap: 14px; }
    .cil-course-episodes__handle { display: block; flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--cil-black-light-2); }
    .cil-course .cil-course-episodes .cil-course-dialog__close { top: 28px; inset-inline-end: 16px; }
    .cil-course .cil-course-episodes__heading { font-size: 20px; }
    /* Two lines of title on a phone, as the design wraps them; every row as tall as two. */
    .cil-course .cil-course-episodes__title { -webkit-line-clamp: 2; }
    .cil-course-episodes__face { min-height: 73px; }
    .cil-course .cil-course-episodes__summary { font-size: 14px; }
    .cil-course .cil-course-episodes__list { flex: 1 1 auto; min-height: 0; max-height: none; }
    .cil-course .cil-course-episodes__meta,
    .cil-course .cil-course-episodes__nowMeta,
    .cil-course .cil-course-episodes__player .cil-course-episode__time { font-size: 12px; }
    .cil-course .cil-course-episodes__player { gap: 8px; padding-top: 12px; }
    .cil-course .cil-course-episodes__toggle { width: 36px; height: 36px; }
}

/* A short window -- a phone on its side: the list alone would have under a row's room, so the whole
   dialog scrolls instead, the heading going by, and the player holds on at its foot. */
@media (max-height: 520px) {
    .cil-course-episodes[open] { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 0; }
    .cil-course .cil-course-episodes__list { flex: none; max-height: none; overflow: visible; }
    .cil-course .cil-course-episodes__player { position: sticky; bottom: 0; z-index: 1; padding-bottom: 16px; background: var(--cil-white); }
}

@media (prefers-reduced-motion: reduce) {
    .cil-course .cil-course-episodes__row, .cil-course .cil-course-episodes__play, .cil-course .cil-course-episodes__toggle { transition: none; }
    .cil-course-episodes__row.is-waiting .cil-course-episodes__play,
    .cil-course-episodes__player.is-waiting .cil-course-episodes__toggle { animation: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cil-blue) 30%, transparent); }
}