/* The course card.
 *
 * One card in two arrangements. Everything that is the same in both — the surface, the type, the
 * pills, the facts — is written once here; the grid and list blocks below say only what differs.
 *
 * Written in logical properties throughout. The site runs in four languages, two of which read
 * right to left, and a card that used `left` would need a mirror-image copy of itself for English.
 */

.cil-card {
    position: relative;
    display: flex;
    flex-direction: column;
    /* The width a layout gives the card includes its padding. The theme sizes the old way, so the
       list card's 12px of padding made two half-width cards 24px too wide for one row, and the
       catalogue's list view at full width fell to a single column of half-width cards. */
    box-sizing: border-box;
    /* Not overflow:hidden. The picture rounds its own corners below, and a card that clipped its
       overflow would also clip the menu that opens out of it. */
    border-radius: 10px;
    background: var(--cil-white);
    /* Its own words' colour and line height, not the page's: the page around it set them -- 24px lines
       on the home page, 1.2 on the catalogue's pages, 1.5 on landing pages -- so the same card stood
       349, 344 or 355px tall, and on the catalogue the institution's underline fell outside its
       clipped name and never showed (Oren, 2026-10-07). The home page's are the card's own. */
    color: var(--cil-black);
    line-height: 24px;
    /* The design's two shadows: a wide soft one that lifts the card off the page, and a hairline
       under it that keeps the edge legible where the page behind is the same white. */
    box-shadow: 0 8px 24px -4px rgba(31, 32, 32, 0.16), 0 1px 3px 0 rgba(31, 32, 32, 0.08);
}

/* ---- the picture ---------------------------------------------------------------------------- */

.cil-card__image {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
}
.cil-card__image a { display: block; height: 100%; }
.cil-card__image a:hover { color: inherit; }   /* the theme's green `a:hover` has nothing to colour here */
.cil-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    /* Course pictures arrive in whatever shape the editor uploaded; the card decides the frame. */
    object-fit: cover;
}

/* ---- the body ------------------------------------------------------------------------------- */

.cil-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

/* The institution row is in card-institution.css, which loads after this file. */

.cil-card__titleRow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cil-space-3, 12px);
    width: 100%;
}
.cil-card__title { margin: 0; min-width: 0; flex: 1 1 auto; font-weight: 600; }
.cil-card__title a {
    display: block;
    overflow: hidden;
    color: var(--cil-black-dark-4);
    text-decoration: none;
    overflow-wrap: anywhere;
}
/* The title runs right to left when it holds any Hebrew (items 277, 281): a Hebrew title shown on the English page reads right to
   left, "AI" and "(וורד)" in their places. Its lines still start at the page's own edge, with the facts under it
   (design-system/text-direction.php). */
.cil-card__title a:hover,
.cil-card__title a:focus-visible { color: var(--cil-black-dark-4); text-decoration: underline; text-underline-offset: 3px; }

/* The menu. A 24px glyph in the 32px circle the design draws behind it, without the circle changing
   the row's height — hence the negative margin rather than a taller button. */
.cil-card__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -4px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--cil-black-regular-6);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.cil-card__more:hover,
.cil-card__more[aria-expanded="true"] { background: var(--cil-blue-light-1); color: var(--cil-blue-dark-1); }
/* Focus is a ring and nothing else: the design keeps the glyph its resting grey, so a keyboard user
   can tell "here" from "open". */
.cil-card__more:focus-visible {
    outline: 2px solid var(--cil-blue-regular-7);
    outline-offset: 3px;
}

.cil-card__divider {
    width: 100%;
    height: 1px;
    background: var(--cil-black-light-2);
}

/* ---- the facts ------------------------------------------------------------------------------ */

.cil-card__lower {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cil-space-3, 12px);
    width: 100%;
    /* The facts' height whether it holds the facts, the progress bar in their place, or nothing. */
    height: 24px;
}
/* One line in every language. A duration can run to "4 hours per week · 6 weeks", which fits in Hebrew
   and wraps in English, Arabic and Russian -- and a second line made those cards taller. So the row
   never wraps: the duration gives way with an ellipsis, while pace and price, the short facts, stay
   whole. The full wording is still what a screen reader hears. */
.cil-card__meta {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--cil-space-4, 16px);
    min-width: 0;
    height: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.cil-card__fact {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
}
.cil-card__fact--clock { flex: 0 100000 auto; }
/* On a phone the pace too can be longer than its share ("Самостоятельно" ran a Russian card 49px
   past the screen): it gives way only once the duration has, which shrinks so much faster that the
   pace's part before then stays under a pixel. */
.cil-card__fact--footprints { flex: 0 1 auto; }
.cil-card__factIcon { display: inline-flex; flex: 0 0 auto; color: var(--cil-blue-regular-7); }
.cil-card__factLabel {
    overflow: hidden;
    min-width: 0;
    color: var(--cil-black);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- the pills ------------------------------------------------------------------------------ */

.cil-card__badges {
    display: flex;
    align-items: center;
    gap: var(--cil-space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cil-card__badge {
    display: flex;
    align-items: center;
    gap: var(--cil-space-2, 8px);
    /* Shrinkable: a card in a stripe is narrower than one in the catalogue grid, and two long
       badges do not always fit. The label gives way before the row does. */
    min-width: 0;
    height: 28px;
    padding-inline: 10px 12px;
    border: 1px solid var(--cil-blue-regular-7);
    border-radius: 16px;
    background: var(--cil-blue-light-1);
    color: var(--cil-blue-dark-1);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
/* One mark box for every pill: the same size, so the words start in the same place on each. */
.cil-card__badgeIcon { display: inline-flex; flex: 0 0 auto; width: 12px; height: 12px; }
.cil-card__badgeIcon svg { width: 12px; height: 12px; }
.cil-card__badge > span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* The count is a statement, not an offer — no tint, so it reads as quieter than the badges it
   stands in for. */
/* Never the one that gives way: the count is the whole reason the row is honest about what it is
   not showing, so it keeps its width and the badges beside it shorten instead. */
.cil-card__badge--count {
    flex: 0 0 auto;
    padding-inline: 10px;
    background: var(--cil-white);
}

/* ---- how far through it the reader is -------------------------------------------------------- */

/* One line where the facts would be: how far, then the bar, filling from the reading start. */
.cil-card__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 17px;
}
.cil-card__progressLabel {
    flex: 0 0 auto;
    margin: 0;
    color: var(--cil-black-regular-6);
    font-size: 12px;
    white-space: nowrap;
}
.cil-card__progressTrack {
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
    height: 6px;
    border-radius: 3px;
    background: var(--cil-black-light-4);
}
.cil-card__progressFill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--cil-blue-dark-1);
}

/* "Continue learning": the enrolled card's one call to action, full width under the bar. The design
   draws it 44px tall in the grid and 36px in the list, where the row is short. */
.cil-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding-inline: 12px;
    border-radius: 8px;
    background: var(--cil-blue-dark-1);
    color: var(--cil-white);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}
.cil-card__cta:hover { background: var(--cil-blue-dark-2); color: var(--cil-white); }
.cil-card__cta:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 2px; }
.cil-card--list .cil-card__cta { height: 36px; }
/* Not open yet: the same button, standing disabled with the day it opens -- nothing to press, no hover. */
.cil-card__cta--waiting,
.cil-card__cta--waiting:hover { background: var(--cil-black-light-3); color: var(--cil-black-dark-4); cursor: default; }

/* ---- grid ------------------------------------------------------------------------------------ */

.cil-card--grid .cil-card__image {
    height: 184px;
    /* The card's own top corners, since the card no longer clips what sits inside it. */
    border-start-start-radius: 10px;
    border-start-end-radius: 10px;
}
.cil-card--grid .cil-card__body {
    gap: var(--cil-space-3, 12px);
    padding: 16px 20px;
    align-items: flex-start;
}
.cil-card--grid .cil-card__title a {
    font-size: 18px;
    /* Two lines, then an ellipsis: a long title should not push the facts out of a grid row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* And two lines' room even for a title that needs one. Otherwise that card comes out a line
       shorter than the ones beside it, and its rule and facts sit higher than theirs. `lh` follows
       whatever line height the page gives the title; the em value is for browsers without it. */
    min-height: 2.6em;
    min-height: 2lh;
}
/* The pills belong to the picture here. They are written in the row below it — one place in the
   markup for both shapes — and lifted onto the image, which is a fixed height in this view. */
.cil-card--grid .cil-card__badges {
    position: absolute;
    inset-block-start: 144px;
    inset-inline-end: 12px;
    inset-inline-start: 12px;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.cil-card--grid .cil-card__lower { justify-content: flex-start; }

/* ---- list ------------------------------------------------------------------------------------ */

.cil-card--list {
    flex-direction: row;
    align-items: center;
    gap: var(--cil-space-4, 16px);
    padding: 12px;
}
/* No order juggling: the picture is first in the markup, so the writing direction puts it on the
   side the design draws it — the right in Hebrew and Arabic, the left in English and Russian. */
.cil-card--list .cil-card__image {
    width: 180px;
    height: 96px;
    border-radius: 8px;
}
.cil-card--list .cil-card__body {
    gap: 6px;
    align-items: flex-start;
}
.cil-card--list .cil-card__title a {
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* A press 25px tall on a one-line title (WCAG 2.5.8), the line itself not moving. */
    margin-block: -3px;
    padding-block: 3px;
}
/* Facts and badges share one row here, as tall as a badge whether or not the course has any. Both
   sides can give way, so a long duration next to long badges shortens rather than pushes. */
/* Packed from where reading starts, the badges following the facts — not pushed to the far end,
   which in Hebrew put them hard against the left as if the row read the other way. */
.cil-card--list .cil-card__lower { height: 28px; justify-content: flex-start; }
/* When the row runs short the badges give way first: a trimmed badge still says what it is, a
   duration cut to its ellipsis says nothing. */
.cil-card--list .cil-card__badges { flex: 0 4 auto; min-width: 0; }
/* One badge and a count on this shape, two and a count on the grid (card.php writes both counts). */
.cil-card--list .cil-card__badge--second,
.cil-card--list .cil-card__badge--countGrid,
.cil-card--grid .cil-card__badge--countList { display: none; }
/* No rule under the title in this shape: the card is short enough that the row of facts reads as
   its own line without one. */
.cil-card--list .cil-card__divider { display: none; }

/* ---- narrow screens --------------------------------------------------------------------------- */

/* The design draws both shapes again at phone width. Only two measurements move: the grid's
   picture grows, because a card that fills the screen can afford it, and the list's shrinks, because
   the words beside it cannot. 768px is the width the rest of the theme calls mobile. */
@media (max-width: 768px) {
    .cil-card--grid .cil-card__image { height: 200px; }

    .cil-card--list .cil-card__image { width: 140px; height: 88px; }
    /* Badges give up their place beside the facts and follow underneath, rather than squeezing
       both onto a line that is now half as wide. */
    .cil-card--list .cil-card__lower {
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: flex-start;
        gap: 6px var(--cil-space-3, 12px);
        /* Always two lines -- the facts, then the badges -- so a card without badges keeps the same
           height as one with them: 24 + 6 + 28. */
        height: 58px;
    }
    .cil-card--list .cil-card__meta { flex: 0 1 100%; }
}

/* Below the narrowest frame the design draws, the list card's picture would take more of the row
   than the words it belongs to. */
@media (max-width: 380px) {
    .cil-card--list .cil-card__image { width: 104px; height: 72px; }
}

/* ---- where the old templates sized the card themselves ---------------------------------------- */

/* The catalogue lays its results out with `.newCatalogResults > div`, a selector written when the
   card was a div; this card is an article, so it kept its shape but lost its width. Rather than
   reshape the card to fit an old selector, the two widths it used are restated for the new element.
   These four lines retire with the catalogue template — they are a bridge, not a design decision. */
.newCatalogResults > .cil-card--grid { width: calc(25% - 18px); }
.newCatalogResults > .cil-card--list { width: calc(50% - 12px); }

@media (max-width: 1100px) {
    .newCatalogResults > .cil-card--grid { width: calc(33.333% - 16px); }
    .newCatalogResults > .cil-card--list { width: 100%; }
}
@media (max-width: 780px) {
    .newCatalogResults > .cil-card--grid { width: calc(50% - 12px); }
}
@media (max-width: 520px) {
    .newCatalogResults > .cil-card--grid { width: 100%; }
}