/* A programme's courses as a bento (course/parts/program-bento.php, Figma "Program Page" P04.1, P04.2):
 * folded, the large tile beside a 2x2 of smaller ones -- the courses nearest it and the count of the
 * rest; open, every course as a small tile, six to a row.
 */

.cil-program-bento__inner {
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 48px var(--cd-gutter) 64px;
}
.cil-program-bento__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cil-course .cil-program-bento__count { margin: 6px 0 0; font-size: 16px; line-height: 1.2; color: var(--cil-black-regular-7); }
.cil-course .cil-program-bento__less {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--cil-blue-regular-7);
    border-radius: 18px;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-blue-dark-1);
    cursor: pointer;
}
.cil-program-bento__less[hidden] { display: none; }
.cil-program-bento__lessIcon { width: 12px; height: 12px; }
.cil-course[dir="ltr"] .cil-program-bento__lessIcon { transform: scaleX(-1); }

/* ---- folded: the large tile, and beside it the 2x2 ---- */
.cil-program-bento__fold { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 802fr); gap: 20px; }
.cil-program-bento__fold[hidden] { display: none; }
.cil-program-bento__beside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 200px); gap: 20px; }
/* Fewer than four beside it: the 2x2 still filled, the last ones taking the room left. */
.cil-program-bento__beside.is-n3 > :last-child { grid-column: 1 / -1; }
.cil-program-bento__beside.is-n2 > * { grid-column: 1 / -1; }
.cil-program-bento__beside.is-n1 > * { grid-column: 1 / -1; grid-row: 1 / -1; }
.cil-program-bento__beside.is-n0 { display: none; }
.cil-program-bento__fold:has(.is-n0) { grid-template-columns: minmax(0, 1fr); }

/* ---- a tile: the picture, the shade, the words at its foot ---- */
.cil-course .cil-program-bento__tile,
.cil-program-bento__large {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--cil-blue-dark-1);
    color: var(--cil-white);
    text-decoration: none;
}
.cil-program-bento__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cil-program-bento__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--cil-blue-dark-5) 0%, transparent) 20%, color-mix(in srgb, var(--cil-blue-dark-5) 90%, transparent));
}
.cil-program-bento__body { position: absolute; inset-inline: 20px; bottom: 19px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cil-program-bento__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cil-program-bento__step { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--cil-blue-light-7); }
.cil-program-bento__name { display: -webkit-box; overflow: hidden; font-size: 18px; font-weight: 600; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cil-course .cil-program-bento__tile:focus-visible { outline: 3px solid var(--cil-yellow); outline-offset: 2px; }

/* Where the learner stands. */
.cil-program-bento__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--cil-white-light-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-black-dark-4);
    white-space: nowrap;
}
.cil-program-bento__pill.is-next     { background: var(--cil-blue-light-3); }
.cil-program-bento__pill.is-progress { background: var(--cil-blue); }
.cil-program-bento__pill.is-done     { background: var(--cil-green); }
.cil-program-bento__pill.is-locked   { background: var(--cil-black-regular-3); color: var(--cil-white); }
.cil-program-bento__pillIcon { width: 12px; height: 12px; }

/* The count of the rest: opens every course. */
.cil-course .cil-program-bento__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--cil-blue-dark-1);
    font: inherit;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.cil-program-bento__moreCount { font-size: 48px; font-weight: 700; color: var(--cil-white); }
.cil-program-bento__moreText { font-size: 16px; color: var(--cil-blue-light-3); }
/* "All N courses", said as the button it is: a pill with the caret that says it opens downward. */
.cil-program-bento__moreAll {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 14px;
    border: 1px solid var(--cil-blue-light-7);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cil-blue-light-7);
}
/* The grid it opens into; its four squares draw apart as the tile is pointed at. */
.cil-program-bento__moreIcon { width: 12px; height: 12px; overflow: visible; }
.cil-program-bento__moreIcon rect { transform-box: fill-box; transition: transform 0.25s ease; }
/* The courses behind the count: three of their pictures, overlapping, fanned out when pointed at. */
.cil-program-bento__peek { display: flex; justify-content: center; margin-bottom: 4px; }
.cil-program-bento__peekImg {
    width: 36px;
    height: 36px;
    border: 2px solid var(--cil-blue-dark-1);
    border-radius: 50%;
    object-fit: cover;
    background: var(--cil-blue-regular-7);
}
.cil-program-bento__peekImg + .cil-program-bento__peekImg { margin-inline-start: -12px; }
.cil-course .cil-program-bento__more:focus-visible { outline: 3px solid var(--cil-yellow); outline-offset: 2px; }
/* Pointed at (or reached by keyboard): the tile brightens, the pictures fan out, the pill fills and its
   caret dips -- the tile is a button that opens the rest of the list here. */
@media (hover: hover) {
    .cil-course .cil-program-bento__more:hover { background: var(--cil-blue-regular-10); }
    .cil-program-bento__more:hover .cil-program-bento__peekImg + .cil-program-bento__peekImg { margin-inline-start: -4px; }
    .cil-program-bento__more:hover .cil-program-bento__moreAll { border-color: var(--cil-blue-light-3); background: var(--cil-blue-light-3); color: var(--cil-blue-dark-1); }
    .cil-program-bento__more:hover .cil-program-bento__moreIcon .is-a { transform: translate(-1.5px, -1.5px); }
    .cil-program-bento__more:hover .cil-program-bento__moreIcon .is-b { transform: translate(1.5px, -1.5px); }
    .cil-program-bento__more:hover .cil-program-bento__moreIcon .is-c { transform: translate(-1.5px, 1.5px); }
    .cil-program-bento__more:hover .cil-program-bento__moreIcon .is-d { transform: translate(1.5px, 1.5px); }
}
.cil-course .cil-program-bento__more:focus-visible { background: var(--cil-blue-regular-10); }
.cil-program-bento__more:focus-visible .cil-program-bento__moreAll { border-color: var(--cil-blue-light-3); background: var(--cil-blue-light-3); color: var(--cil-blue-dark-1); }
.cil-course .cil-program-bento__more,
.cil-program-bento__peekImg,
.cil-program-bento__moreAll { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, margin 0.25s ease, transform 0.25s ease; }

/* A course's tile, pointed at: its picture draws in a little, the shade deepens, and "to the course"
   comes in at its top -- the tile is a way to that course's page. */
.cil-program-bento__img { transition: transform 0.4s ease; }
.cil-program-bento__open {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--cil-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-blue-dark-1);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.cil-program-bento__openArrow { width: 12px; height: 12px; }
.cil-course[dir="ltr"] .cil-program-bento__openArrow { transform: scaleX(-1); }
@media (hover: hover) {
    .cil-program-bento__tile:hover .cil-program-bento__img { transform: scale(1.05); }
    .cil-program-bento__tile:hover .cil-program-bento__open { opacity: 1; transform: none; }
}
.cil-program-bento__tile:focus-visible .cil-program-bento__open { opacity: 1; transform: none; }
/* The large tile (the first course) answers the pointer as the small ones do (Oren 2026-10-15): its picture draws in,
   and its name is underlined -- the whole tile reads as the way to the course. */
@media (hover: hover) {
    .cil-program-bento__large:hover .cil-program-bento__img { transform: scale(1.04); }
    .cil-course .cil-program-bento__large:hover .cil-program-bento__largeName a { text-decoration: underline; text-underline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .cil-program-bento__img, .cil-program-bento__open, .cil-program-bento__peekImg, .cil-program-bento__moreIcon rect { transition: none; }
    .cil-program-bento__tile:hover .cil-program-bento__img, .cil-program-bento__large:hover .cil-program-bento__img { transform: none; }
}

/* ---- the large tile ---- */
.cil-program-bento__large { min-height: 420px; border-radius: 18px; }
.cil-program-bento__large .cil-program-bento__scrim {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--cil-blue-dark-5) 0%, transparent) 30%, color-mix(in srgb, var(--cil-blue-dark-5) 92%, transparent));
}
.cil-program-bento__largeBody { position: absolute; inset-inline: 24px; bottom: 25px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cil-course .cil-program-bento__largeName { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.2; }
.cil-course .cil-program-bento__largeName a { color: var(--cil-white); text-decoration: none; }
.cil-course .cil-program-bento__largeName a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cil-course .cil-program-bento__largeMeta { margin: 0; font-size: 16px; line-height: 1.2; color: var(--cil-black-light-2); }
.cil-program-bento__track { position: relative; align-self: stretch; height: 6px; overflow: hidden; border-radius: 3px; background: var(--cil-black-regular-7); }
.cil-program-bento__track > span { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; background: var(--cil-blue); }
.cil-course .cil-program-bento__go { min-width: 170px; height: 44px; min-height: 0; padding: 0 24px; font-size: 18px; text-decoration: none; }
/* The large tile's button (Oren 2026-10-15): the events page's main-call hover -- a band of light crosses it once in
   the reading direction, the words step back and an arrow steps forward in after them. The fill stays: no colour wash.
   Words move by their offset, never a transform (a moving transform greys the glyphs' edges, ERRORS-event-editor.md). */
.cil-course .cil-program-bento__go { --go-fwd: -1; position: relative; overflow: hidden; isolation: isolate; }
.cil-course[dir="ltr"] .cil-program-bento__go { --go-fwd: 1; }
.cil-course .cil-program-bento__go:hover:not(:disabled) { background: var(--cil-blue); }
.cil-program-bento__go::before {
    content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(calc(var(--go-fwd) * 75deg), transparent 30%, color-mix(in srgb, var(--cil-white) 70%, transparent) 50%, transparent 70%);
    transform: translateX(calc(var(--go-fwd) * -110%));
}
.cil-program-bento__go:is(:hover, :focus-visible)::before { transform: translateX(calc(var(--go-fwd) * 110%)); transition: transform 0.9s cubic-bezier(.45, 0, .25, 1); }
.cil-program-bento__goWords { position: relative; inset-inline-end: 0; transition: inset-inline-end 0.35s cubic-bezier(.22, 1, .36, 1); }
.cil-program-bento__go::after {
    content: ""; position: absolute; top: 50%; inset-inline-end: 16px; width: 16px; height: 16px; margin-top: -8px; background: currentColor;
    -webkit-mask: url("../../../../images/podcasts-page/caret-left.svg") center / contain no-repeat; mask: url("../../../../images/podcasts-page/caret-left.svg") center / contain no-repeat;
    opacity: 0; transform: translateX(calc(var(--go-fwd) * -10px)) scaleX(calc(var(--go-fwd) * -1));
    transition: opacity 0.2s ease, transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.cil-program-bento__go:is(:hover, :focus-visible) .cil-program-bento__goWords { inset-inline-end: 10px; }
.cil-program-bento__go:is(:hover, :focus-visible)::after { opacity: 1; transform: translateX(0) scaleX(calc(var(--go-fwd) * -1)); }
@media (prefers-reduced-motion: reduce) {
    .cil-program-bento__go:is(:hover, :focus-visible)::before { transform: translateX(calc(var(--go-fwd) * -110%)); transition: none; }
    .cil-program-bento__goWords { transition: none; }
    .cil-program-bento__go:is(:hover, :focus-visible) .cil-program-bento__goWords { inset-inline-end: 0; }
    .cil-program-bento__go::after { transform: scaleX(calc(var(--go-fwd) * -1)); transition: opacity 0.2s ease; }
}

/* ---- open: every course, six to a row ---- */
.cil-program-bento__all { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cil-program-bento__all[hidden] { display: none; }
.cil-program-bento__all .cil-program-bento__tile { height: 136px; border-radius: 12px; }
.cil-program-bento__all .cil-program-bento__body { inset-inline: 12px; bottom: 12px; gap: 3px; }
.cil-program-bento__all .cil-program-bento__row { gap: 6px; }
.cil-program-bento__all .cil-program-bento__name { font-size: 16px; -webkit-line-clamp: 1; }
/* The course the learner is on, framed. */
.cil-program-bento__all .cil-program-bento__tile.is-current { box-shadow: inset 0 0 0 3px var(--cil-blue); }

@media (max-width: 1279px) {
    .cil-program-bento__all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .cil-program-bento__fold { grid-template-columns: minmax(0, 1fr); }
    .cil-program-bento__all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* The phone (P04.1 mobile): the large tile on its own, the 2x2 under it, smaller; open, two to a row. */
@media (max-width: 767px) {
    .cil-program-bento__inner { padding: 32px var(--cd-gutter) 40px; }
    .cil-program-bento__head { margin-bottom: 16px; }
    .cil-course .cil-program-bento__count { margin-top: 4px; font-size: 14px; }
    .cil-program-bento__fold { gap: 12px; }
    .cil-program-bento__large { min-height: 268px; border-radius: 16px; }
    .cil-program-bento__largeBody { inset-inline: 16px; bottom: 16px; }
    .cil-course .cil-program-bento__largeName { font-size: 20px; }
    .cil-course .cil-program-bento__largeMeta { font-size: 14px; }
    .cil-course .cil-program-bento__go { font-size: 16px; }
    .cil-program-bento__beside { grid-template-rows: repeat(2, 108px); gap: 12px; }
    .cil-program-bento__body { inset-inline: 12px; bottom: 12px; gap: 3px; }
    .cil-program-bento__name { font-size: 16px; -webkit-line-clamp: 1; }
    .cil-program-bento__moreCount { font-size: 28px; }
    .cil-program-bento__moreText { font-size: 12px; }
    .cil-program-bento__moreAll { margin-top: 2px; padding: 3px 10px; font-size: 14px; }
    .cil-program-bento__peek { display: none; }
    .cil-program-bento__open { display: none; }
    .cil-course .cil-program-bento__more { gap: 2px; }
    .cil-program-bento__all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cil-program-bento__all .cil-program-bento__tile { height: 108px; }
}

/* ---- between the two states (program-bento.js) ----
   Where the browser can, each course's tile travels from its place in one state to its place in the
   other -- the large tile shrinks into its square in the grid, the squares slide into rows -- while
   the count tile and the "show less" button fade out and in. */
.cil-program-bento__tile, .cil-program-bento__large, .cil-course .cil-program-bento__more, .cil-course .cil-program-bento__less { view-transition-class: cil-bento; }
.cil-course .cil-program-bento__more { view-transition-name: cil-bento-more; }
.cil-course .cil-program-bento__less { view-transition-name: cil-bento-less; }
::view-transition-group(*.cil-bento) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(*.cil-bento), ::view-transition-new(*.cil-bento) { block-size: 100%; object-fit: cover; }
/* The page around it cross-fades over the same half second, so what follows the section eases to its
   new place rather than jumping while the tiles are still on their way. */
:root.cil-bento-swapping::view-transition-old(root), :root.cil-bento-swapping::view-transition-new(root) { animation-duration: 0.5s; }
/* Where it cannot: the state that arrives rises into place, the grid's tiles one after another. */
@keyframes cil-bento-arrive { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
.cil-program-bento__fold.is-arriving > *,
.cil-program-bento__all.is-arriving > li { animation: cil-bento-arrive 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 25ms); }
@media (prefers-reduced-motion: reduce) {
    .cil-program-bento__fold.is-arriving > *, .cil-program-bento__all.is-arriving > li { animation: none; }
}