/* The course page's own design: the hero and the facts card (course/parts/).
 *
 * Measurements are the design's, at its 1920 frame: a 1382 content width, the text column 569 wide
 * beside an 800 by 488 picture, the facts card overlapping the dark band by 45. Below 768 the page
 * takes the design's 390 frame. Written in logical properties: Hebrew and Arabic read from the right,
 * English and Russian from the left, and the page is the same page either way.
 */

.cil-course {
    --cd-width: 1382px;
    --cd-gutter: 16px;
    font-family: Assistant, 'Assistant-Regular', Arial, sans-serif;
    line-height: 1.2;
    color: var(--cil-black-dark-4);
}
/* Resets at no specificity, so every rule below wins over them without a fight. */
:where(.cil-course) *, :where(.cil-course) *::before, :where(.cil-course) *::after { box-sizing: border-box; }
:where(.cil-course) svg { display: block; flex: none; }
:where(.cil-course) p { margin: 0; }
.cil-course p { margin-bottom: 0; }   /* the theme gives every paragraph 16px under it */
:where(.cil-course) button { cursor: pointer; }
/* The theme styles every button green and padded, at a specificity :where() cannot beat. Undone
   here once; the page's own buttons are written as .cil-course .x, so each still wins over this. */
.cil-course button {
    display: inline-flex; gap: 0; padding: 0; border: 0; background: transparent; color: inherit;
    font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; transition: none;
}
.cil-course button:hover { background: transparent; }
:where(.cil-course) a { text-decoration: none; }
.cil-course :focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; border-radius: 4px; }

/* ---- the hero ------------------------------------------------------------------------------ */

/* The header is fixed over the page, so the hero starts under it: its height, less the admin bar's
   when one pushes the whole page down already (the rule the catalogue's subject hero uses). */
.cil-course-hero {
    margin-top: var(--cil-hdr-height, 64px);
    position: relative;
    background: var(--cil-black);
    color: var(--cil-white);
    overflow: hidden;
}
/* The design's shapes sit in the margins beside the content; where the window leaves no margin,
   they would run under the words, so they wait for a window wide enough to hold them. */
.cil-course-hero__decor { position: absolute; top: 1px; pointer-events: none; display: none; }
@media (min-width: 1700px) { .cil-course-hero__decor { display: block; } }
/* A colour a badge wears leaves the shapes beside the badges (Figma 01.2-01.6). */
.cil-course-hero.wears-blue   .cil-course-hero__decor--start [data-tone="blue"],
.cil-course-hero.wears-red    .cil-course-hero__decor--start [data-tone="red"],
.cil-course-hero.wears-green  .cil-course-hero__decor--start [data-tone="green"],
.cil-course-hero.wears-yellow .cil-course-hero__decor--start [data-tone="yellow"],
.cil-course-hero.wears-white  .cil-course-hero__decor--start [data-tone="white"] { display: none; }
html:has(#wpadminbar) .cil-course-hero { margin-top: calc(var(--cil-hdr-height, 64px) - 32px); }
@media (max-width: 782px) { html:has(#wpadminbar) .cil-course-hero { margin-top: calc(var(--cil-hdr-height, 62px) - 46px); } }
.cil-course-hero__decor--end   { inset-inline-end: 0; }
.cil-course-hero__decor--start { inset-inline-start: 0; }

.cil-course-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 569px) minmax(0, 800px);
    grid-template-areas: "text media";
    justify-content: space-between;
    column-gap: 32px;
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 32px var(--cd-gutter) 77px;
}
.cil-course-hero__text {
    grid-area: text;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 5px;
}

/* One line, always. The page's own name takes the room the others leave and is cut with "…" when it
   does not fit -- it is the title just below, in full. */
.cil-course-crumbs { max-width: 100%; }
.cil-course-crumbs ol { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cil-course-crumbs ol { overflow: hidden; }
.cil-course-crumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 0 auto; font-size: 18px; color: var(--cil-black-light-5); white-space: nowrap; }
.cil-course-crumbs li[aria-current] { flex: 0 1 auto; }
/* A category keeps its whole name up to a length; one longer than that is cut there. */
.cil-course-crumbs li:not([aria-current]) .cil-course-crumbs__name { max-width: 14em; }
.cil-course-crumbs a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: inherit; }
.cil-course-crumbs__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cil-course-crumbs__home, .cil-course-crumbs__sep { flex: none; }
.cil-course-crumbs a:hover { color: var(--cil-white); text-decoration: underline; text-underline-offset: 3px; }
.cil-course-crumbs [aria-current] { font-weight: 600; color: var(--cil-white); }
.cil-course-crumbs__home path { fill: currentColor; }
.cil-course-crumbs__sep path { fill: var(--cil-black-regular-3); }
.cil-course[dir="ltr"] .cil-course-crumbs__sep { transform: scaleX(-1); }

.cil-course-hero__title {
    margin: 32px 0 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-white);
    /* Each line filled before the next begins, as the design sets it -- not balanced. */
    text-wrap: wrap;
}
.cil-course-hero__type { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 20px; font-weight: 700; line-height: 1.4; }
.cil-course-hero__summary { margin-top: 18px; font-size: 24px; line-height: 1.2; }

.cil-course-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; margin-top: 19px; }

/* Side by side, the hero is one size on every page (Oren, 2026-10-03): the design's 488px row, the
   picture filling its side (covering), and every part of the words in a place of its own -- the
   title in a two-line slot, the type row, the summary cut with "…" to the lines the actions leave
   room for, and the actions at the foot, on the picture's bottom line. Nothing a page holds moves it. */
@media (min-width: 1280px) {
    .cil-course-hero__inner { grid-template-rows: 488px; }
    .cil-course-hero__text { min-height: 0; }
    /* A playing trailer sets the box's height to the video's (media.js); the row still bounds it. */
    .cil-course-hero__media { align-self: stretch; justify-self: stretch; max-height: 100%; aspect-ratio: auto; }
    .cil-course-crumbs li { line-height: 22px; }
    .cil-course-crumbs, .cil-course-hero__typeRow { flex: none; }
    .cil-course-hero__title { display: -webkit-box; flex: none; height: 2.4em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .cil-course-hero__summary { display: -webkit-box; flex: none; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
    /* The entry bar, or the trailer on a line above the tile and the button, takes more than a button;
       with a line under the actions, more still. */
    .cil-course-hero__text:has(.cil-course-hero__actions--entry, .cil-course-hero__actions--pair) .cil-course-hero__summary { -webkit-line-clamp: 3; }
    .cil-course-hero__text:has(.cil-course-entry__note, .cil-course-hero__note:not([hidden])) .cil-course-hero__summary { -webkit-line-clamp: 2; }
    .cil-course-hero__actions { margin-top: auto; padding-top: 19px; }
}

.cil-course .cil-course-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 258px;
    min-height: 48px;
    padding: 12px 32px;
    border-radius: 24px;
    background: var(--cil-blue);
    font-size: 18px;
    font-weight: 700;
    color: var(--cil-black);
    transition: background-color 0.2s ease;
}
.cil-course .cil-course-cta { background: var(--cil-blue); color: var(--cil-black); }
.cil-course .cil-course-cta:hover { background: var(--cil-blue); }
.cil-course .cil-course-cta:hover:not(:disabled) { background: var(--cil-blue-light-7); }
.cil-course .cil-course-cta:disabled, .cil-course .cil-course-cta.is-dim { opacity: 0.5; cursor: default; }
.cil-course .cil-course-cta--notice, .cil-course .cil-course-cta--notice:hover:not(:disabled) { margin: 0; background: var(--cil-blue); cursor: default; }

/* Registered, the course open (Figma 01.11): the day beside the type; the trailer, then the bar. */
.cil-course-hero__typeRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 28px; margin-top: 18px; }
.cil-course-hero__typeRow .cil-course-hero__type { margin-top: 0; }
.cil-course-hero__registered { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--cil-green); white-space: nowrap; }
.cil-course-hero__actions--entry { flex-direction: column; align-items: stretch; }
.cil-course-hero__actions--entry .cil-course-hero__trailer { order: -1; align-self: flex-start; }
/* Running with an end in sight (Figma 01.23): the trailer on its own line, then the tile and the button. */
@media (min-width: 768px) {
    .cil-course-hero__actions--pair { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; }
    .cil-course-hero__actions--pair .cil-course-hero__trailer { grid-column: 1 / -1; order: -1; justify-self: start; }
}

/* Registered before the course starts (Figma 01.10): the confirmation in place of the button, and
   under the actions the line about the email that will follow. */
.cil-course-done { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: var(--cil-white); white-space: nowrap; }
.cil-course-hero__note { margin-top: 16px; font-size: 16px; color: var(--cil-black-light-10); }
/* Registering failed: said under the button, on the hero's dark ground. */
.cil-course .cil-course-hero__note--error { color: var(--cil-red-light-6); }
/* The same course in other languages (parts/versions.php, item 285): a quiet line under the actions, each language a
   link that lifts its underline on hover rather than changing colour. */
.cil-course-hero__versions { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 16px; color: var(--cil-black-light-10); }
.cil-course-hero__versionsIcon { flex: none; width: 20px; height: 20px; }
.cil-course-hero__versionsIcon path { fill: currentColor; }   /* the line's own light colour, not the file's dark one (item 286) */
/* A faint line under the name always says it is a link; on hover a full one draws in over it from the start of the
   word -- the right in Hebrew -- and nothing drops or recolours (item 287). */
.cil-course-hero__version {
    color: var(--cil-blue);
    text-decoration: none;
    padding-bottom: 2px;
    background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat,
                linear-gradient(color-mix(in srgb, currentColor 45%, transparent), color-mix(in srgb, currentColor 45%, transparent)) 0 100% / 100% 1px no-repeat;
    transition: background-size 0.25s ease;
}
.cil-course-hero__version:dir(ltr) { background-position: 0 100%, 0 100%; }
.cil-course-hero__version:hover, .cil-course-hero__version:focus-visible { color: var(--cil-blue); text-decoration: none; background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) { .cil-course-hero__version { transition: none; } }

/* Not open yet (Figma 01.7, 01.8): when registration and the course open, in place of the button.
   The mark and year lead each tile -- on the right in Hebrew -- and the words follow. */
.cil-course-opening { display: flex; gap: 12px; }
.cil-course-opening__tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--cil-black-regular-10); }
.cil-course-opening__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; white-space: nowrap; }
.cil-course-opening__label { font-size: 14px; color: var(--cil-black-light-6); }
.cil-course-opening__day { font-size: 18px; font-weight: 700; color: var(--cil-white); }
.cil-course-opening__mark { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* Every mark in a tile is white on the dark ground; the wrench (maintenance) is drawn dark for the facts card. */
.cil-course-opening__mark svg path { fill: var(--cil-white); }
.cil-course-opening__year { font-size: 14px; line-height: 1.2; color: var(--cil-black-light-6); }
.cil-course .cil-course-hero__trailer { display: inline-flex; align-items: center; gap: 10px; }
.cil-course-hero__trailerText { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; font-weight: 600; color: var(--cil-white); }
.cil-course-hero__trailerTime { font-size: 12px; font-weight: 400; color: var(--cil-black-light-6); }
.cil-course-hero__trailerBadge { display: inline-grid; place-items: center; width: 28px; height: 28px; }
.cil-course-hero__trailerBadge .is-stop {
    display: none; place-items: center; width: 28px; height: 28px;
    border: 1px solid var(--cil-white); border-radius: 50%;
}
.cil-course-hero__trailerBadge .is-stop svg { width: 14px; height: 14px; }
.cil-course .cil-course-hero__trailer[aria-pressed="true"] .is-play { display: none; }
.cil-course .cil-course-hero__trailer[aria-pressed="true"] .is-stop { display: grid; }
.cil-course .cil-course-hero__trailer:hover [data-cd-trailer-label] { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the badges ------------------------------------------------------------------------------
   On the picture's leading edge, in the phone's size, until the page is wide enough to give them
   the margin beside the content, where the design draws them large at the window's edge. Placed as
   the design places them (01.2-01.6): the first 89px below the hero's top edge -- 57px below the
   picture's -- and one every 70px; on the phone, centred on the picture's height, one every 42px. */

.cil-course-badges {
    grid-area: media;
    justify-self: start;
    align-self: start;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 57px 0 0;
    padding: 0;
    list-style: none;
}
.cil-course-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-start-end-radius: 48px;
    border-end-end-radius: 48px;
    box-shadow: 0 6px 18px 0 color-mix(in srgb, var(--cil-black-dark-4) 22%, transparent);
    font-size: 14px;
    font-weight: 700;
    color: var(--cil-black);
    white-space: nowrap;
}
/* One mark box for every badge: the same size, so the words start in the same place on each. */
.cil-course-badge svg { flex: none; width: 16px; height: 16px; }
.cil-course-badge--green  { background: var(--cil-green); }
.cil-course-badge--blue   { background: var(--cil-blue); }
.cil-course-badge--yellow { background: var(--cil-yellow); }
.cil-course-badge--red    { background: var(--cil-red); }
.cil-course-badge--white  { background: var(--cil-white); }

/* Off the picture while the trailer plays over it. */
.cil-course-hero[data-playing] .cil-course-badges.is-compact { display: none; }
@media (max-width: 1759px) { .cil-course-hero[data-playing] .cil-course-badges { display: none; } }

@media (min-width: 1760px) {
    .cil-course-badges:not(.is-compact) { position: absolute; top: 89px; inset-inline-start: 0; gap: 9px; margin: 0; }
    .cil-course-badges:not(.is-compact) .cil-course-badge { gap: 12px; padding: 16px 28px; font-size: 24px; }
    .cil-course-badges:not(.is-compact) .cil-course-badge svg { width: 22px; height: 22px; }
}

/* ---- between the design's two frames ------------------------------------------------------- */

@media (max-width: 1180px) {
    .cil-course-hero__summary { font-size: 20px; }
}

/* ---- the tablet: one column, as on the phone, at a size between the two ----------------------
   The design draws the desktop and the phone only. Below 1280px the two columns leave the picture
   too narrow beside the words of a fixed-height hero (Oren, 2026-10-03), so the page takes the
   phone's order: words, picture, actions. The title and the summary keep fixed slots here too, so
   the picture and the actions stand where they do on every page of that width. */

@media (max-width: 1279px) {
    .cil-course-hero__decor { display: none; }
    .cil-course-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "crumbs" "title" "type" "summary" "media" "actions" "note" "versions";
        padding: 24px var(--cd-gutter) 77px;   /* the facts card rises 45px into it, as on the desktop */
    }
    .cil-course-hero__text { display: contents; }
    .cil-course-crumbs { grid-area: crumbs; }
    .cil-course-hero__title { grid-area: title; margin-top: 24px; font-size: 32px; }
    .cil-course-hero__typeRow { grid-area: type; }
    .cil-course-hero__summary { grid-area: summary; font-size: 18px; }
    .cil-course-hero__title { display: -webkit-box; height: 2.4em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .cil-course-hero__summary { display: -webkit-box; height: 4.8em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
    /* No wider than the design draws it, at the words' edge: a picture the window's full width would
       stand taller than the screen. */
    .cil-course-hero__media { justify-self: start; width: 100%; max-width: 800px; margin-top: 24px; }
    .cil-course-hero__actions { grid-area: actions; margin-top: 24px; }
    .cil-course-hero__note { grid-area: note; }
    .cil-course-hero__versions { grid-area: versions; }
}

/* ---- the phone ------------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .cil-course-hero__inner { padding: 16px var(--cd-gutter) 24px; }
    /* The day they registered on a line of its own under the type (Figma 01.11-01.14 mobile). */
    .cil-course-hero__typeRow { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cil-course-crumbs li { font-size: 14px; color: var(--cil-black-light-6); }
    .cil-course-crumbs li:not(:nth-last-child(2)) { display: none; }
    .cil-course-hero__title { grid-area: title; margin-top: 16px; font-size: 28px; }
    .cil-course-hero__typeRow { grid-area: type; margin-top: 16px; }
    .cil-course-hero__summary { grid-area: summary; margin-top: 16px; font-size: 16px; color: var(--cil-black-light-6); }
    /* The picture's cell starts 16px above the picture (its margin): the same margin here centres
       the badges on the picture rather than on the cell. */
    .cil-course-badges { align-self: center; gap: 12px; margin: 16px 0 0; margin-inline-start: calc(-1 * var(--cd-gutter)); }
    .cil-course-badge { min-height: 30px; padding: 6px 12px; }
    .cil-course-hero__actions { grid-area: actions; flex-direction: column; align-items: stretch; gap: 16px; margin-top: 16px; }
    .cil-course-hero__actions .cil-course-cta { order: 3; width: 100%; min-width: 0; }
    .cil-course-opening { order: 2; }
    .cil-course-done { order: 3; }
    .cil-course-hero__note { grid-area: note; }
    /* Each tile keeps its own width, at the leading edge (Figma 01.7-01.9, 01.18, 01.21-01.24 mobile). */
    .cil-course-opening { align-self: flex-start; flex-wrap: wrap; }
    .cil-course-opening__tile { flex: 0 0 auto; }
    /* An end or a close in sight (01.23, 01.24): the button first, the tile under it. */
    .cil-course-hero__actions--pair .cil-course-opening { order: 4; }
    .cil-course .cil-course-hero__trailer { order: 1; align-self: flex-start; }
    /* Registered, the trailer comes before the bar, as it does beside the picture (Figma 01.13 mobile). */
    .cil-course .cil-course-hero__actions--entry .cil-course-hero__trailer { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-course *, .cil-course *::before { transition: none !important; }
}

/* ---- press areas: a small text link takes a press 24px tall (WCAG 2.5.8) without anything moving --
   a band above and below it, as the facts' info marks already have (facts.css). The breadcrumbs'
   row cuts its overflow, so it lends its own room instead. ---- */
.cil-course :is(.cil-course-facts__toggle, .cil-course-about__more, .cil-course-staff__more, .cil-course-testimonial__more) { position: relative; }
.cil-course :is(.cil-course-facts__toggle, .cil-course-about__more, .cil-course-staff__more, .cil-course-testimonial__more)::before { content: ''; position: absolute; inset: -4px 0; }
.cil-course-crumbs ol { margin-block: -4px; padding-block: 4px; }
.cil-course .cil-course-crumbs a { margin-block: -4px; padding-block: 4px; }


/* Opened through its review link (course-record/review-link.php): the line across the top, under the
   fixed header -- it takes the header's room from the hero, which then sits right under it. */
.cil-course-page:has(> .cil-course-review) .cil-course-hero { margin-top: 0; }
.cil-course-review {
    margin: var(--cil-hdr-height, 64px) 0 0;
    padding: 10px 16px;
    background: var(--cil-yellow-light-2);
    border-bottom: 1px solid var(--cil-yellow-regular-4);
    color: var(--cil-yellow-deep);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}