/* The course's podcast (course/parts/podcast.php) -- Figma 13 · 04.10. A dark card per episode: its
   picture where reading starts, the show, the title and the length beside it, the play mark at the
   far end. The whole card presses play. Playing in the site's own player (podcast.js), the mark turns
   to pause and a seek bar takes the length line's place, at the line's own height, so nothing moves;
   without a sound file the card holds the provider's player instead.
   04.11: with a QR picture, the card is a row -- the episode, a divider, the code on its white tile
   with its two lines; on a phone the code sits under the episode.
   The player's rows (the bar, the times, back/speed/forward, the sound) are the landing pages' episode
   cards' too (landing-page/stripe-episodes.php, its dark band in assets/stripes.css): their rules name
   both, :is(.cil-course, .cil-l-episode), at the specificity the course page always had. */

.cil-course-podcasts__inner {
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 36px var(--cd-gutter) 64px;   /* 100px under the team's cards, as the design spaces them */
}
.cil-course-podcasts__list { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }

.cil-course-episode {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 287px;
    padding: 20px 24px;
    border-radius: 10px;
    background: var(--cil-black);
    color: var(--cil-white);
}
/* The player's unfilled tracks: 3.4:1 on the card (and on the landing card's dark band). */
:is(.cil-course-episode, .cil-l-episode__player) { --cd-track: color-mix(in srgb, var(--cil-white) 40%, transparent); }
.cil-course-episode__face { display: flex; align-items: center; gap: 24px; }
.cil-course-episode__cover {
    flex: none;
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--cil-black) 20%, transparent);
}
.cil-course-episode__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cil-course-episode__words { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.cil-course .cil-course-episode__show,
.cil-course .cil-course-episode__meta { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.2; color: var(--cil-black-light-6); }
.cil-course .cil-course-episode__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--cil-white); }

.cil-course .cil-course-episode__play {
    flex: none;
    width: 64px;
    height: 64px;
    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-episode__playIcon,
.cil-course-episode__pauseIcon { display: block; width: 100%; height: 100%; }
.cil-course-episode__pauseIcon,
.cil-course-episode.is-playing .cil-course-episode__playIcon { display: none; }
.cil-course-episode.is-playing .cil-course-episode__pauseIcon { display: block; }
/* Waiting for the sound: the ring breathes around the mark. */
.cil-course-episode.is-waiting .cil-course-episode__play { animation: cil-course-episode-wait 1.2s ease-in-out infinite; }
@keyframes cil-course-episode-wait {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cil-blue) 40%, transparent); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cil-blue) 0%, transparent); }
}
/* The whole card is the button's to press. */
.cil-course-episode__play::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
/* Pointing at the card, the mark takes a ring and a lighter blue -- colours only, nothing moves. */
.cil-course :is(.cil-course-episode:not(.has-qr), .cil-course-episode__face):hover .cil-course-episode__play,
.cil-course .cil-course-episode__play:focus-visible {
    color: var(--cil-blue-light-9);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cil-blue) 24%, transparent);
}
.cil-course .cil-course-episode__play:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 8px; }
.cil-course .cil-course-episode__play:active { color: var(--cil-blue-regular-7); }

/* ---- 04.11: the QR code, past a divider (the episode alone presses play) ---- */
.cil-course-episode.has-qr { flex-direction: row; align-items: center; gap: 24px; }
.cil-course-episode.has-qr .cil-course-episode__face { position: relative; flex: 1 1 auto; min-width: 0; }
.cil-course-episode.has-qr .cil-course-episode__play::after { inset: -8px; }
.cil-course-episode__divider { flex: none; width: 1px; height: 140px; background: var(--cil-black-regular-3); }
.cil-course-episode__qr { display: flex; flex: none; align-items: center; gap: 14px; }
.cil-course-episode__qrWords { display: flex; flex-direction: column; gap: 4px; width: 150px; }
.cil-course .cil-course-episode__qrTitle { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--cil-white); }
.cil-course .cil-course-episode__qrHint { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.2; color: var(--cil-black-light-6); }
.cil-course-episode__qrTile { display: block; flex: none; width: 240px; height: 247px; padding: 20px; box-sizing: border-box; border-radius: 8px; background: var(--cil-white); }
.cil-course-episode__qrTile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cil-course-episode.is-embedded .cil-course-episode__player { flex: 1 1 auto; min-width: 0; }

/* ---- the site's player: the time played, the bar, the time left ---- */
.cil-course-episode.is-open .cil-course-episode__meta { display: none; }
.cil-course-episode__progress {
    position: relative;
    z-index: 1;   /* above the card-wide button, so the bar takes its own presses */
    display: flex;
    align-items: center;
    gap: 12px;
    height: calc(14px * 1.2);   /* the length line's height */
    /* Set lower, clear of the title (Oren, 2026-09-30); the negative margin gives the space back below,
       so the words above stay where they stood before play. */
    margin-block: var(--cd-seek-drop, 12px) calc(-1 * var(--cd-seek-drop, 12px));
}
.cil-course-episode__progress[hidden] { display: none; }
:is(.cil-course, .cil-l-episode) .cil-course-episode__time { flex: none; min-width: 3.4em; font-size: 14px; line-height: 1.2; color: var(--cil-black-light-6); font-variant-numeric: tabular-nums; }
.cil-course-episode__time[dir="ltr"] { text-align: end; }
:is(.cil-course, .cil-l-episode) .cil-course-episode__seek {
    --cd-seek: 0%;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
/* Filled from the reading start: the slider takes the page's direction (:dir, so a landing page's row
   turns as the course page's section does). */
.cil-course-episode__seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--cd-seek-colour, var(--cil-blue)) var(--cd-seek), var(--cd-track) var(--cd-seek));
}
.cil-course-episode__seek:dir(rtl)::-webkit-slider-runnable-track {
    background: linear-gradient(to left, var(--cd-seek-colour, var(--cil-blue)) var(--cd-seek), var(--cd-track) var(--cd-seek));
}
.cil-course-episode__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--cd-seek-colour, var(--cil-blue)); }
.cil-course-episode__seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--cd-track); }
.cil-course-episode__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--cd-seek-colour, var(--cil-blue)); }
.cil-course-episode__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--cd-seek-colour, var(--cil-blue)); }
:is(.cil-course, .cil-l-episode) .cil-course-episode__seek:focus-visible { outline: 2px solid var(--cd-seek-colour, var(--cil-blue)); outline-offset: 3px; border-radius: 4px; }

/* ---- the second row: 15 back, 15 on, the speed, the sound ---- */
.cil-course-episode__controls {
    --cd-control: 32px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    /* 10px under the bar (the words' 6px gap + 4), and like it hung into the card's free room -- the
       row, its margin and the gap before it given back below -- so the words above hold still. */
    margin-block: calc(var(--cd-seek-drop, 12px) + 4px) calc(-1 * (var(--cd-seek-drop, 12px) + 4px + var(--cd-control) + 6px));
}
.cil-course-episode__controls[hidden] { display: none; }
:is(.cil-course, .cil-l-episode) .cil-course-episode__control {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    min-width: var(--cd-control);
    height: var(--cd-control);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cil-white);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
:is(.cil-course, .cil-l-episode) .cil-course-episode__control:hover { background: color-mix(in srgb, var(--cil-white) 14%, transparent); }
:is(.cil-course, .cil-l-episode) .cil-course-episode__control:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }
.cil-course-episode__control svg { width: 24px; height: 24px; }
.cil-course-episode__skipIcon.is-forward { transform: scaleX(-1); }
/* Right to left, back sits on the right and forward on the left: each arrow turns the other way. */
:is(.cil-course-podcasts, .cil-l-episode__player)[dir="rtl"] .cil-course-episode__skipIcon { transform: scaleX(-1); }
:is(.cil-course-podcasts, .cil-l-episode__player)[dir="rtl"] .cil-course-episode__skipIcon.is-forward { transform: none; }
/* The seconds inside the turning arrow. */
.cil-course-episode__control > span[aria-hidden] { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 1px; font-size: 8px; font-weight: 700; line-height: 1; }
:is(.cil-course, .cil-l-episode) .cil-course-episode__speed { min-width: 48px; padding: 0 10px; border: 1px solid var(--cd-track); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The transport at the start and the sound at the end, both in the page's direction. */
.cil-course-episode__controls { justify-content: space-between; }
.cil-course-episode__transport { display: flex; align-items: center; gap: 8px; }
.cil-course-episode__sound { display: flex; align-items: center; gap: 6px; }
.cil-course-episode__control .is-muted,
:is(.cil-course-episode, .cil-l-episode).is-muted .cil-course-episode__control .is-sound { display: none; }
:is(.cil-course-episode, .cil-l-episode).is-muted .cil-course-episode__control .is-muted { display: block; }
.cil-course-episode__control .is-sound, .cil-course-episode__control .is-muted { line-height: 0; }
/* The sound goes out towards the level: in Hebrew and Arabic the speaker is mirrored, its waves facing left. */
.cil-course-episode__sound:dir(rtl) .cil-course-episode__control svg { transform: scaleX(-1); }
.cil-course-episode__loudness { display: flex; align-items: center; gap: 6px; height: 24px; }
/* How loud as a number: a fixed width ("100%"), so the level never shifts as it changes. */
.cil-course-episode__levelValue { flex: none; min-width: 5ch; font-size: 12px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
:is(.cil-course, .cil-l-episode) .cil-course-episode__level {
    --cd-fill: 100%;
    --cd-fill-to: to right;
    --cd-level-ink: var(--cil-white);
    flex: none;
    width: 72px;
    height: 4px;
    margin: 0;
    padding: 0;
    border-radius: 2px;
    background: linear-gradient(var(--cd-fill-to), var(--cd-level-ink) var(--cd-fill), var(--cd-track) var(--cd-fill));
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
/* Filled from the reading start, as the site player's level: its thumb starts on the right in Hebrew and
   Arabic, and the arrow keys follow the way it fills. */
:is(.cil-course, .cil-l-episode) .cil-course-episode__level:dir(rtl) { --cd-fill-to: to left; }
.cil-course-episode__level::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--cd-level-ink, var(--cil-white)); }
.cil-course-episode__level::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--cd-level-ink, var(--cil-white)); }
:is(.cil-course, .cil-l-episode) .cil-course-episode__level:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 4px; }
/* A device that sets loudness only with its own buttons: mute alone. */
:is(.cil-course-episode, .cil-l-episode).is-fixed-volume .cil-course-episode__loudness { display: none; }

/* No sound file of its own: the provider's player in the card's place. */
.cil-course-episode.is-embedded .cil-course-episode__face { display: none; }
.cil-course-episode__player { display: block; width: 100%; border: 0; border-radius: 6px; }

/* 04.11 below a wide screen, where the episode would be squeezed beside the code: the code under the
   episode, its words beside it, on the phone design's smaller tile. */
@media (max-width: 1199px) {
    .cil-course-episode.has-qr { flex-direction: column; align-items: stretch; gap: 14px; }
    .cil-course-episode__divider { display: none; }
    .cil-course-episode__qr { gap: 12px; }
    .cil-course-episode__qrWords { flex: 1 1 auto; width: auto; min-width: 0; }
    .cil-course-episode__qrTile { width: 120px; height: 124px; padding: 12px; }
    /* The code sits right under the episode here: the player's rows take their own room, not the code's. */
    .cil-course-episode.has-qr .cil-course-episode__progress { margin-block-end: 0; }
    .cil-course-episode.has-qr .cil-course-episode__controls { margin-block: 4px 0; }
}

@media (max-width: 767px) {
    .cil-course-podcasts__inner { padding: 8px var(--cd-gutter) 32px; }
    .cil-course-podcasts__list { gap: 12px; margin-top: 16px; }   /* 04.13: several episodes 12px apart on a phone */
    .cil-course-episode { min-height: 0; padding: 16px; }
    .cil-course-episode__face { gap: 12px; }
    .cil-course-episode__cover { width: 64px; height: 64px; }
    .cil-course-episode__words { gap: 4px; }
    .cil-course .cil-course-episode__show,
    .cil-course .cil-course-episode__meta { font-size: 12px; }
    .cil-course .cil-course-episode__title { font-size: 16px; }
    .cil-course .cil-course-episode__play { width: 44px; height: 44px; }
    /* The phone's card has no spare room below: it grows by the drop instead. */
    .cil-course-episode__progress { gap: 8px; height: calc(12px * 1.2); margin-block: 8px 0; }
    :is(.cil-course, .cil-l-episode) .cil-course-episode__time { font-size: 12px; }
    .cil-course .cil-course-episode__qrHint { font-size: 12px; }
    /* The phone's row grows the card too; its loudness is the phone's own buttons, so mute alone. */
    .cil-course-episode__controls { --cd-control: 30px; gap: 4px; margin-block: 8px 0; }
    .cil-course-episode__transport { gap: 4px; }
    :is(.cil-course, .cil-l-episode) .cil-course-episode__speed { min-width: 44px; padding: 0 8px; font-size: 12px; }
    .cil-course-episode__loudness { display: none; }
    .cil-course-episode__seek::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
    .cil-course-episode__seek::-moz-range-thumb { width: 12px; height: 12px; }
    .cil-course .cil-course-episode:hover .cil-course-episode__play,
    .cil-course .cil-course-episode__play:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cil-blue) 24%, transparent); }
}

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