/* The page's skeleton (course/parts/skeleton.php) -- Figma 01.0 "loading": the hero's. While the page
   is marked .is-loading, the hero turns the design's light grey and its content waits unseen under grey
   shapes drawn from the design -- only the breadcrumbs stay. The parts below become their own
   skeletons (skeleton-parts.css). Every placeholder lies over its part, so the page keeps its height;
   and the skeleton comes in only after a moment, so a page that arrives at once never flashes it. */

.cil-course-skel { display: none; }

.cil-course-page.is-loading {
    --cd-skel: var(--cil-black-light-2);                                          /* Figma #ECEDED */
    --cd-skel-ground: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white));   /* #F6F6F6 */
    --cd-skel-hi: color-mix(in srgb, var(--cil-black-light-2) 15%, var(--cil-white));
    /* A light sweeps across every placeholder at once, from where reading starts (Oren: a pulse was
       too faint to see). Fixed to the window, so it is one light over the whole page, not one each. */
    --cd-skel-shine: linear-gradient(100deg, var(--cd-skel) 44%, var(--cd-skel-hi) 50%, var(--cd-skel) 56%) 0 0 / 200vw 100% no-repeat fixed var(--cd-skel);
}
/* The sweep: the light crosses the window in 1.6s, right to left in Hebrew and Arabic. */
@keyframes cil-course-skel-shine { from { background-position: 10vw 0; } to { background-position: -110vw 0; } }
@keyframes cil-course-skel-shine-ltr { from { background-position: -110vw 0; } to { background-position: 10vw 0; } }
.cil-course-page.is-loading { --cd-skel-sweep: cil-course-skel-shine 1.6s linear infinite; }
.cil-course-page.is-loading:has(> .cil-course[dir="ltr"]) { --cd-skel-sweep: cil-course-skel-shine-ltr 1.6s linear infinite; }
.cil-course-page.is-loading .cil-course-skel {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    animation: cil-course-skel-in 0.25s ease 0.15s both;
}
.cil-course-skel i { display: block; flex: none; background: var(--cd-skel); }
.cil-course-page.is-loading .cil-course-skel i { background: var(--cd-skel-shine); animation: var(--cd-skel-sweep); }
@keyframes cil-course-skel-in { from { opacity: 0; } to { opacity: 1; } }

/* What waits unseen under the hero's shapes. Hidden, not removed: it keeps its place. */
.cil-course-page.is-loading .cil-course-hero { background: var(--cd-skel-ground); }
.cil-course-page.is-loading .cil-course-hero__decor,
.cil-course-page.is-loading .cil-course-hero__inner { visibility: hidden; }
.cil-course-page.is-loading .cil-course-crumbs { visibility: visible; }
/* Shown after a wait: the content comes in as the skeleton had. */
.cil-course-page.is-revealed .cil-course-hero__inner { animation: cil-course-skel-in 0.3s ease backwards; }

/* ---- the hero: the design's 569px column of bars beside the 800 x 488 picture ---- */
.cil-course-skel__inner {
    display: grid;
    grid-template-columns: minmax(0, 569px) minmax(0, 800px);
    grid-template-areas: "title media" "type media" "summary media" "actions media";
    grid-template-rows: auto auto auto 1fr;
    justify-content: space-between;
    align-items: start;
    column-gap: 32px;
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 32px var(--cd-gutter) 0;
}
.cil-course-skel__title { grid-area: title; display: flex; flex-direction: column; align-items: flex-start; gap: 23px; margin-top: 59px; padding: 12px 0; }
.cil-course-skel__title i { width: 100%; height: 25px; border-radius: 12.5px; }
.cil-course-skel__title i + i { width: 60%; }
.cil-course-skel__type { grid-area: type; width: 77px; height: 66px; margin-top: 18px; border-radius: 4px; }
.cil-course-skel__summary { grid-area: summary; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 7px 0; }
.cil-course-skel__summary i { width: 100%; height: 15px; border-radius: 7.5px; }
.cil-course-skel__summary i:last-child { width: 60%; }
.cil-course-skel__actions { grid-area: actions; display: flex; align-items: center; gap: 21px; margin-top: 19px; }
.cil-course-skel__button { width: 258px; height: 46px; border-radius: 23px; }
.cil-course-skel__trailer { display: flex; align-items: center; gap: 10px; }
.cil-course-skel__trailer > span { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.cil-course-skel__trailer > span i { width: 72px; height: 9px; border-radius: 4.5px; }
.cil-course-skel__trailer > span i + i { width: 46px; height: 7px; }
.cil-course-skel__dot { width: 28px; height: 28px; border-radius: 50%; }
.cil-course-skel__media { grid-area: media; width: 100%; aspect-ratio: 800 / 488; border-radius: 14px; }
/* The hero's fixed size side by side (course.css), so the page does not jump when it is revealed. */
@media (min-width: 1280px) { .cil-course-skel__media { aspect-ratio: auto; height: 488px; } }
/* The shapes beside the content, where the window leaves room for them (as the hero's own). */
.cil-course-skel__decor { position: absolute; display: none !important; }
@media (min-width: 1700px) {
    .cil-course-skel__decor { display: block !important; }
    .cil-course-skel__decor--end   { inset-inline-end: 0; top: 66px; width: 73px; height: 247px; border-radius: 4px; }
    .cil-course-skel__decor--start { inset-inline-start: 0; top: 0; width: 109px; height: 296px; border-radius: 4px; }
}

/* ---- narrower: the phone's column, words above the picture, then the trailer and the button ---- */
@media (max-width: 1279px) {
    .cil-course-skel__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "type" "summary" "media" "actions"; padding: 16px var(--cd-gutter) 0; }
    .cil-course-skel__title { gap: 17px; margin-top: 17px; padding: 8px 0 0; }
    .cil-course-skel__title i { height: 17px; border-radius: 8.5px; }
    .cil-course-skel__type { margin-top: 16px; }
    .cil-course-skel__summary { gap: 9px; margin-top: 16px; padding: 5px 0 0; }
    .cil-course-skel__summary i { height: 10px; border-radius: 5px; }
    .cil-course-skel__summary i:nth-child(n + 3) { display: none; }
    .cil-course-skel__summary i:last-child { display: block; width: 60%; }
    .cil-course-skel__media { margin-top: 16px; aspect-ratio: 358 / 201; }
    .cil-course-skel__actions { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; }
    .cil-course-skel__trailer { align-self: flex-start; }
    .cil-course-skel__button { order: 1; width: 100%; height: 48px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .cil-course-page.is-loading .cil-course-skel,
    .cil-course-page.is-loading .cil-course-skel i,
    .cil-course-page.is-revealed .cil-course-hero__inner { animation: none; }
}