/* The facts card's second line and what hangs under it (course/parts/facts.php, Figma 02.1-02.6).
 *
 * The line stays where it is, closed and open. Closed, its white ground reaches only as far as the
 * details, so they read as a tab under the card's leading end, with "all the details" in a smaller tab
 * under that. Open, the ground is the card's full width, the open card's own details (the subtitles,
 * "none" rows, the lists' arrows and counts) open out in their places, "available in" sits at the
 * line's far end, and the app's stores hang in a tab under the far end. course.js measures the closed
 * details (--cd-tab-w), where the icon above "available in" starts (--cd-avail-w), and switches
 * data-state.
 *
 * Opening and closing are the same movement run each way: one length (--cd-time) and one curve
 * (--cd-ease), everything moving together -- the white coming down from the card or drawing back up,
 * the details opening out or folding in, the stores dropping or lifting. Only the fades lean: in a
 * moment after the start when opening, out at once when closing, so nothing is seen before it has
 * room or after it has gone.
 */

.cil-course-facts {
    --cd-time: 0.42s;
    --cd-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- the card above the line: its corners square where the line meets it ---- */
.cil-course-facts__card { transition: border-radius 0.1s ease var(--cd-time); }
.cil-course-facts[data-state="more"] .cil-course-facts__card { transition: border-radius 0.1s ease; }
.cil-course-facts__shape:has(.cil-course-facts__line:not(.is-bare)) .cil-course-facts__card { border-end-start-radius: 0; }
.cil-course-facts[data-state="more"] .cil-course-facts__card { border-end-start-radius: 0; border-end-end-radius: 0; }

/* ---- the line ---- */
.cil-course-facts__line {
    /* The ground's lower corners: square where a tab hangs under them. */
    --cd-r-start: 15px;
    --cd-r-end: 15px;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.cil-course-facts__shape:has(.cil-course-facts__tabs) .cil-course-facts__line { --cd-r-start: 0px; }
.cil-course-facts.has-store[data-state="more"] .cil-course-facts__line { --cd-r-end: 0px; }
.cil-course-facts__line::before,
.cil-course-facts__line::after {
    content: "";
    position: absolute;
    /* 1px up under the card, so no seam shows where the two whites meet. */
    inset: -1px 0 0;
    z-index: -1;
    background: var(--cil-white);
}
/* The tab: the closed details' width, from the leading edge -- there closed and open alike. */
.cil-course-facts__line::before {
    clip-path: inset(0 calc(100% - var(--cd-tab-w, 100%)) 0 0 round 0 0 15px var(--cd-r-start));
}
.cil-course[dir="rtl"] .cil-course-facts__line::before {
    clip-path: inset(0 0 0 calc(100% - var(--cd-tab-w, 100%)) round 0 0 var(--cd-r-start) 15px);
}
/* The open card's second line: the card's full width, let down from its top edge. */
.cil-course-facts__line::after {
    clip-path: inset(0 0 100% 0 round 0 0 var(--cd-r-end) var(--cd-r-start));
    transition: clip-path var(--cd-time) var(--cd-ease);
}
.cil-course[dir="rtl"] .cil-course-facts__line::after { clip-path: inset(0 0 100% 0 round 0 0 var(--cd-r-start) var(--cd-r-end)); }
.cil-course-facts[data-state="more"] .cil-course-facts__line::after { clip-path: inset(0 0 0 0 round 0 0 var(--cd-r-end) var(--cd-r-start)); }
.cil-course[dir="rtl"] .cil-course-facts[data-state="more"] .cil-course-facts__line::after { clip-path: inset(0 0 0 0 round 0 0 var(--cd-r-start) var(--cd-r-end)); }

/* Where the closed tab meets the card, a rounded inside corner just past its end: gone as the white
   comes down, back once it is up again. */
.cil-course-facts__corner {
    position: absolute;
    top: 0;
    inset-inline-start: var(--cd-tab-w, 0);
    width: 15px;
    height: 15px;
    background: radial-gradient(circle at 100% 100%, transparent 14.5px, var(--cil-white) 15px);
    transition: opacity 0.1s ease var(--cd-time);
}
.cil-course[dir="rtl"] .cil-course-facts__corner { background: radial-gradient(circle at 0 100%, transparent 14.5px, var(--cil-white) 15px); }
.cil-course-facts[data-state="more"] .cil-course-facts__corner { transition: opacity 0.1s ease; }
.cil-course-facts[data-state="more"] .cil-course-facts__corner,
.cil-course-facts__line.is-bare .cil-course-facts__corner { opacity: 0; }

/* A course with nothing to name closed: no line under the card until it opens. The line itself
   grows then (course.js), so its white fills it all the way down from the start and the tab under
   it moves with its lower edge, never apart from it. */
.cil-course[dir] .cil-course-facts[data-state] .cil-course-facts__line.is-bare::after {
    clip-path: none;
    border-end-start-radius: var(--cd-r-start);
    border-end-end-radius: var(--cd-r-end);
    transition: none;
}
.cil-course-facts[data-state="less"] .cil-course-facts__line.is-bare { height: 0; }

/* ---- the details: one set, its open-only parts opening out in place ---- */
.cil-course-facts__details { min-width: 0; padding: 6px 24px 12px; }
/* One row while it fits, wrapping when the page is narrower. The space between items is each item's
   own leading space (not the row's gap), so an item folded to nothing leaves no space behind. Every
   item carries it, the first too, and the set is drawn back by the same 20px: whichever item a
   wrapped row starts with, it starts where the rows above do (Oren, 2026-09-27). */
.cil-course-facts__set { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; margin-inline-start: -20px; }
.cil-course-facts__set > * { margin-inline-start: 20px; }
.cil-course-facts__set > .cil-course-facts__grow { margin-inline-start: 0; --cd-gap-x: 20px; }
/* The line keeps to one row (Oren, 2026-09-27): long prior-course and programme names give way first,
   cut with "…" -- the list behind the chip still names them whole. A chip is laid out from a 260px
   start and grows back to its full name where there is room, so the row breaks only when even that
   does not fit, on a narrow window. Everything else keeps its width. (The phone lists the details
   one under another, facts.css.) */
@media (min-width: 768px) {
    .cil-course-facts__set > * { flex: none; }
    .cil-course-facts__set > .cil-course-meta--chips { flex: 1 1 260px; max-width: max-content; min-width: 0; }
    .cil-course-facts__set .cil-course-pop, .cil-course .cil-course-facts__set .cil-course-chip { min-width: 0; }
    .cil-course-facts__set .cil-course-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cil-course-facts__set .cil-course-chip > :not(.cil-course-chip__name),
    .cil-course-facts__set .cil-course-meta--chips > :not(.cil-course-pop) { flex: none; }
}

/* Open-only: folded to no width closed, opening to its own width as the card opens. */
.cil-course-facts__grow {
    display: inline-grid;
    grid-template-columns: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-columns var(--cd-time) var(--cd-ease), opacity 0.15s ease, visibility 0s linear var(--cd-time);
}
/* The space before it is inside it (a spacer, not padding or margin, which would keep a width of their
   own when folded), so it folds with it. */
.cil-course-facts__grow > * { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.cil-course-facts__grow > *::before { content: ""; flex: none; width: var(--cd-gap-x, 0px); }
/* A list opened from inside an open-only part (the subtitles' count) shows past its edge. */
.cil-course-facts__grow > :has(.cil-course-pop__panel:not([hidden])) { overflow: visible; }
.cil-course-facts[data-state="more"] .cil-course-facts__grow {
    grid-template-columns: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-columns var(--cd-time) var(--cd-ease), opacity 0.28s ease 0.1s, visibility 0s;
}

/* "Available in": open only, at the line's far end, starting where the icon of the fact above it
   starts (--cd-avail-w, measured) -- not the tile around that icon. Until measured, 24px in. */
.cil-course-facts__avail {
    flex: none;
    box-sizing: border-box;
    width: var(--cd-avail-w, auto);
    margin-inline-start: auto;
    padding: 6px 0 12px;
    padding-inline-end: var(--cd-avail-pad, 24px);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity 0.15s ease, translate var(--cd-time) var(--cd-ease), visibility 0s linear var(--cd-time);
}
.cil-course-facts[data-state="more"] .cil-course-facts__avail {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition: opacity 0.28s ease 0.1s, translate var(--cd-time) var(--cd-ease), visibility 0s;
}

/* ---- the tabs under the line ---- */
.cil-course-facts__tabs { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; align-self: stretch; }
/* 1px up over the line, so no seam shows where a tab meets it -- still or moving. */
.cil-course-facts__tabs { margin-top: -1px; }
.cil-course-facts__tab {
    position: relative;
    display: flex;
    align-items: center;
    border-end-start-radius: 15px;
    border-end-end-radius: 15px;
    background: var(--cil-white);
}
.cil-course-facts__tab::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: -15px;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle at 100% 100%, transparent 14.5px, var(--cil-white) 15px);
}
.cil-course[dir="rtl"] .cil-course-facts__tab::after { background: radial-gradient(circle at 0 100%, transparent 14.5px, var(--cil-white) 15px); }
.cil-course-facts__tab--toggle { padding: 4px 24px 14px; }
/* With no details line above it, the toggle's tab hangs straight from the card. */
.cil-course-facts[data-state="less"] .cil-course-facts__line.is-bare + .cil-course-facts__tabs .cil-course-facts__tab--toggle { padding-top: 10px; }

/* The far end's tab mirrors the leading one: its inside corner on its leading side. It drops and
   lifts with the rest, its contents easing down into it. */
.cil-course-facts__tab--end {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--cd-time) var(--cd-ease), opacity 0.2s ease, visibility 0s linear var(--cd-time);
}
.cil-course-facts[data-state="more"] .cil-course-facts__tab--end {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows var(--cd-time) var(--cd-ease), opacity 0.25s ease 0.08s, visibility 0s;
}
.cil-course-facts__tab--end::after { inset-inline-end: auto; inset-inline-start: -15px; background: radial-gradient(circle at 0 100%, transparent 14.5px, var(--cil-white) 15px); }
.cil-course[dir="rtl"] .cil-course-facts__tab--end::after { background: radial-gradient(circle at 100% 100%, transparent 14.5px, var(--cil-white) 15px); }
.cil-course-facts__drop { min-height: 0; overflow: hidden; }
.cil-course-facts__tab--end .cil-course-app { translate: 0 -8px; transition: translate var(--cd-time) var(--cd-ease); }
.cil-course-facts[data-state="more"] .cil-course-facts__tab--end .cil-course-app { translate: 0 0; }

.cil-course-app {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 24px 20px;
    padding: 16px 18px;
    border: 1px solid var(--cil-black-light-3);
    border-radius: 12px;
    /* Figma's "Black - Light 1" is #F6F6F6; the palette's --cil-black-light-1 is a bluer #E7EBEF. Mixed
       from the palette to the design's grey. */
    background: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white));
}
/* The stores' own badges (../app-stores.php) at the design's height, each at its own width -- the two
   are not the same shape -- with a quarter of that height between them, the clear space they ask for. */
.cil-course-app__stores { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cil-course-app__stores img { display: block; width: auto; height: 47px; }
.cil-course-app__qr { display: block; width: 96px; height: 96px; object-fit: contain; background: var(--cil-white); }

/* ---- the phone: one bordered card, the line's details one under another ---- */
@media (max-width: 767px) {
    .cil-course-facts__line { flex-direction: column; align-items: stretch; gap: 0; padding-top: 14px; }
    .cil-course-facts__line::before, .cil-course-facts__line::after, .cil-course-facts__corner, .cil-course-facts__tab::after { display: none; }
    .cil-course-facts[data-state="less"] .cil-course-facts__line.is-bare { padding-top: 0; }
    .cil-course-facts__details { padding: 0; }
    /* A list: each item on its own line, the open-only lines opening down in their places. */
    .cil-course-facts__set { flex-direction: column; align-items: flex-start; row-gap: 0; margin-inline-start: 0; }
    .cil-course-facts__set > * { margin-inline-start: 0; }
    .cil-course-facts__set > * + * { margin-top: 10px; }
    .cil-course-facts__set > .cil-course-facts__grow { margin-top: 0; }
    .cil-course-facts__set > .cil-course-facts__grow > * { display: block; }
    .cil-course-facts__set > .cil-course-facts__grow > *::before { display: block; width: auto; height: 10px; }
    .cil-course-facts__set > .cil-course-facts__grow:first-child > *::before { height: 0; }
    .cil-course-facts__set > .cil-course-facts__grow {
        display: grid;
        grid-template-columns: none;
        grid-template-rows: 0fr;
        align-self: stretch;
        transition: grid-template-rows var(--cd-time) var(--cd-ease), opacity 0.15s ease, visibility 0s linear var(--cd-time);
    }
    .cil-course-facts[data-state="more"] .cil-course-facts__set > .cil-course-facts__grow {
        grid-template-columns: none;
        grid-template-rows: 1fr;
        transition: grid-template-rows var(--cd-time) var(--cd-ease), opacity 0.28s ease 0.1s, visibility 0s;
    }
    .cil-course-facts__set > .cil-course-facts__grow > * { min-height: 0; white-space: normal; }
    /* "Available in" joins the list as its last line, opening down with the rest. */
    .cil-course-facts__avail {
        display: grid;
        grid-template-rows: 0fr;
        width: auto;
        margin: 0;
        padding: 0;
        transition: grid-template-rows var(--cd-time) var(--cd-ease), padding-top var(--cd-time) var(--cd-ease), opacity 0.15s ease, translate var(--cd-time) var(--cd-ease), visibility 0s linear var(--cd-time);
    }
    .cil-course-facts[data-state="more"] .cil-course-facts__avail {
        grid-template-rows: 1fr;
        padding-top: 10px;
        transition: grid-template-rows var(--cd-time) var(--cd-ease), padding-top var(--cd-time) var(--cd-ease), opacity 0.28s ease 0.1s, translate var(--cd-time) var(--cd-ease), visibility 0s;
    }
    .cil-course-facts__avail > .cil-course-meta { min-height: 0; overflow: hidden; }
    .cil-course-facts__tabs { flex-direction: column-reverse; align-items: stretch; gap: 0; margin-top: 0; }
    .cil-course-facts__tab { padding: 0; border-radius: 0; background: none; }
    .cil-course-facts__tab--toggle { align-self: flex-end; padding: 14px 0 0; }
    /* Its own width, centred under the list (Figma 02.5 mobile). */
    .cil-course-app { width: fit-content; max-width: 100%; box-sizing: border-box; margin: 14px auto 0; }
    /* Narrower than the panel (a 320px phone): the code goes under the badges. */
    @media (max-width: 359px) { .cil-course-app { flex-direction: column; } }
}

@media (prefers-reduced-motion: reduce) {
    .cil-course-facts__line::after, .cil-course-facts__corner, .cil-course-facts__avail, .cil-course-facts__tab--end,
    .cil-course-facts__card, .cil-course-facts__tab--end .cil-course-app, .cil-course-facts__grow,
    .cil-course .cil-course-facts__toggle svg, .cil-course .cil-course-chip__caret { transition: none !important; }
}