/* The course page's facts card (course/parts/facts.php): the card and its key facts, the details'
 * chips and the lists behind them, and the phone's single card. The second line under the card, the
 * tabs under that and the card's opening are in facts-line.css.
 */

/* ---- the facts card --------------------------------------------------------------------------
   One white shape -- the card, the line under it, the tabs under that -- with the shadow drawn
   around the whole of it. */

.cil-course-facts {
    position: relative;
    z-index: 2;
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: -45px auto 0;
    padding: 0 var(--cd-gutter);
}
/* A list the card opens (prior knowledge, programmes, institutions, subtitles) reaches below it, over the anchor menu
   that follows -- which stands at 999 to pass over the page as it pins: the card is lifted above it while one is
   open, still under the site's header (item 343). */
.cil-course-facts:has(.cil-course-pop__panel:not([hidden])) { z-index: 1000; }
.cil-course-facts__shape {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--cil-black-dark-4) 14%, transparent));
}
.cil-course-facts__card { align-self: stretch; padding: 0 24px; border-radius: 15px; background: var(--cil-white); }
.cil-course-facts__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 90px;
    padding-inline-end: 78px;
}

.cil-course-facts__orgs { --cd-logo-max: 130px; position: relative; display: flex; align-items: center; gap: 8px; }
.cil-course-facts__logo { display: flex; align-items: center; height: 48px; max-width: var(--cd-logo-max); color: var(--cil-black-dark-4); font-weight: 600; }
.cil-course-facts__logo img { display: block; max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }

/* The other institutions (item 338). Closed, "+x"; open, their small logos -- laid over the row, out of its flow,
   so opening the card moves and resizes nothing. They stand in one place on every course, just past the widest
   the main logo can be, not after this one's own width (item 340): one line for two, two to a line past that. */
.cil-course-facts__more { display: inline-flex; align-items: center; }
.cil-course-facts__more > .cil-course-pop,
.cil-course-facts__partners { transition: opacity var(--cd-time) var(--cd-ease), visibility 0s linear var(--cd-time); }
.cil-course-facts__partners {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--cd-logo-max) + 8px);
    display: grid;
    grid-auto-flow: column;
    gap: 4px;
    translate: 0 -50%;
    opacity: 0;
    visibility: hidden;
}
.cil-course-facts__partners.is-grid { grid-auto-flow: row; grid-template-columns: repeat(2, 16px); }
.cil-course-facts[data-state="more"] .cil-course-facts__more > .cil-course-pop { opacity: 0; visibility: hidden; }
.cil-course-facts[data-state="more"] .cil-course-facts__partners { opacity: 1; visibility: visible; transition-delay: 0s; }
.cil-course-facts__partner { position: relative; display: flex; border-radius: 3px; }
/* The cards' partner box (course-card/card.php), held whole here: the card styles are not on every page. */
.cil-course-facts__partners .cil-card__logo,
.cil-course-facts__partnersMore {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    overflow: hidden;
    width: 16px;
    min-width: 0;
    max-width: none;
    height: 16px;
    border: 1px solid var(--cil-black-light-4);
    border-radius: 3px;
    background: var(--cil-black-light-2);
}
.cil-course-facts__partners .cil-card__logo--image { background: var(--cil-white); }
.cil-course-facts__partners .cil-card__logo img { display: block; width: 100%; max-width: none; height: 100%; object-fit: contain; }
.cil-course-facts__partnersMore { background: var(--cil-white); color: var(--cil-black-regular-6); font-size: 9px; font-weight: 600; line-height: 1; }
/* A logo is its link: too small to underline, it rises a little when pointed at, as on the cards. */
.cil-course .cil-course-facts__partnerLink { display: flex; border-radius: 3px; color: inherit; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.cil-course .cil-course-facts__partnerLink:is(:hover, :focus-visible) { color: inherit; transform: translateY(-2px); }
.cil-course-facts__partnerLink:focus-visible, .cil-course-facts__partner[tabindex]:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 2px; }
/* Its name, in the page's tooltip (.cil-course-tip__text). */
.cil-course-facts__partnerTip {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 50%;
    z-index: 5;
    width: max-content;
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cil-black-dark-4);
    color: var(--cil-white);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(50%);
    transition: opacity 0.15s ease;
}
.cil-course[dir="ltr"] .cil-course-facts__partnerTip { transform: translateX(-50%); }
.cil-course-facts__partner:is(:hover, :focus-within) .cil-course-facts__partnerTip { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .cil-course .cil-course-facts__partnerLink { transition: none; }
    .cil-course .cil-course-facts__partnerLink:is(:hover, :focus-visible) { transform: none; }
}

.cil-course-fact { display: flex; align-items: center; gap: 24px; }
.cil-course-fact__tile {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--cil-blue) 50%, transparent);
}
.cil-course-fact__text { display: flex; flex-direction: column; font-weight: 600; }
.cil-course-fact__label { font-size: 14px; color: var(--cil-black-regular-3); }
.cil-course-fact__value { display: flex; align-items: center; gap: 6px; font-size: 18px; color: var(--cil-black-dark-4); }

.cil-course-tip { position: relative; display: inline-flex; }
.cil-course .cil-course-tip__button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.cil-course-tip__text {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-start: 50%;
    z-index: 5;
    width: max-content;
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cil-black-dark-4);
    color: var(--cil-white);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    transform: translateX(50%);
    transition: opacity 0.15s ease;
}
.cil-course[dir="ltr"] .cil-course-tip__text { transform: translateX(-50%); }
.cil-course-tip:hover .cil-course-tip__text,
.cil-course-tip:focus-within .cil-course-tip__text { opacity: 1; visibility: visible; }

.cil-course-meta { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.cil-course-meta--chips { gap: 8px; }
.cil-course-meta__label { font-size: 14px; color: var(--cil-black-regular-7); }
.cil-course-meta__value { font-size: 16px; color: var(--cil-black-dark-4); }
.cil-course-meta__count { font-size: 12px; color: var(--cil-black-regular-3); }


.cil-course .cil-course-facts__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cil-blue-dark-1); }
.cil-course .cil-course-facts__toggle:hover span { text-decoration: underline; text-underline-offset: 3px; }
.cil-course .cil-course-facts__toggle .is-less { display: none; }
/* One pair of arrows, turned over for "fewer" as the card opens. */
.cil-course .cil-course-facts__toggle .is-more { transition: rotate var(--cd-time) var(--cd-ease); }
.cil-course .cil-course-facts__toggle[aria-expanded="true"] .is-more { rotate: 180deg; }

.cil-course .cil-course-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border: 1px solid var(--cil-blue-light-7);
    border-radius: 14px;
    background: var(--cil-blue-light-1);
    font-size: 14px;
    color: var(--cil-blue-dark-1);
}
.cil-course[dir="rtl"] .cil-course-chip { padding: 4px 8px 4px 10px; }
.cil-course .cil-course-chip:hover { background: var(--cil-blue-light-2); }
/* In the closed card the chip goes straight to its course or programme. */
.cil-course a.cil-course-chip { text-decoration: none; }
.cil-course a.cil-course-chip:focus-visible, .cil-course .cil-course-chip:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
.cil-course-chip__name { font-weight: 600; }
/* The chip's arrow turns over as its list opens, as the card's own arrows do. */
.cil-course .cil-course-chip__caret { transition: rotate var(--cd-time) var(--cd-ease); }
/* The open card's arrow in the chip and count beside it fold to nothing closed; the space before each
   is folded with it, so the closed chip ends at its name. */
.cil-course .cil-course-chip > .cil-course-facts__grow { margin-inline-start: -6px; --cd-gap-x: 6px; }
.cil-course-meta--chips > .cil-course-facts__grow { margin-inline-start: -8px; --cd-gap-x: 8px; }
.cil-course .cil-course-chip[aria-expanded="true"] .cil-course-chip__caret { rotate: 180deg; }
.cil-course .cil-course-pop__count { font-size: 12px; color: var(--cil-black-regular-3); padding: 2px 4px; border-radius: 6px; }
.cil-course .cil-course-pop__count:hover { color: var(--cil-blue-dark-1); }
/* The two small marks keep their drawn size, but a finger gets a full 36px to press. */
.cil-course .cil-course-tip__button, .cil-course .cil-course-pop__count { position: relative; }
.cil-course .cil-course-tip__button::after, .cil-course .cil-course-pop__count::after { content: ''; position: absolute; inset: -8px; }

.cil-course-pop { position: relative; display: inline-flex; }
.cil-course-pop__panel {
    position: absolute;
    top: calc(100% + 8px);
    /* Lined up with the chip's far edge, opening back under it (Figma 02.3, 02.4). */
    inset-inline-end: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
    padding: 12px 18px 14px;
    border-radius: 12px;
    background: var(--cil-white);
    box-shadow: 0 6px 18px 0 color-mix(in srgb, var(--cil-black-dark-4) 18%, transparent);
    white-space: nowrap;
}
.cil-course-pop__panel[hidden] { display: none; }
/* A list opened by a resting pointer: the gap above it still counts as over it, so the pointer can cross. */
.cil-course-pop[data-cd-pop-hover] .cil-course-pop__panel::before { content: ''; position: absolute; inset-inline: 0; bottom: 100%; height: 8px; }
.cil-course-pop__head { font-size: 14px; color: var(--cil-black-regular-7); }
.cil-course-pop__item { font-size: 16px; color: var(--cil-blue-dark-1); }
/* The theme greens every hovered link (a:hover); the list keeps its own colour in every state. */
.cil-course a.cil-course-pop__item:is(:hover, :focus, :active) { color: var(--cil-blue-dark-1); }
.cil-course a.cil-course-pop__item:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1180px) {
    .cil-course-facts__row { flex-wrap: wrap; justify-content: flex-start; gap: 16px 32px; padding: 16px 0; }
}

@media (max-width: 767px) {
    .cil-course-facts { margin-top: 16px; }
    .cil-course-facts__shape {
        display: block;
        padding: 16px;
        border: 1px solid var(--cil-black-light-2);
        border-radius: 12px;
        background: var(--cil-white);
        filter: none;
    }
    .cil-course-facts__card { padding: 0; border-radius: 0; }
    .cil-course-facts__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 0 0 14px;
        border-bottom: 1px solid var(--cil-black-light-2);
    }
    .cil-course-fact { gap: 10px; padding: 8px 0; }
    /* A card with nothing under its facts -- no language, no details, no app -- ends without a rule. */
    .cil-course-facts__shape:not(:has(.cil-course-facts__line)) .cil-course-facts__row { padding-bottom: 0; border-bottom: 0; }
    .cil-course-meta { white-space: normal; flex-wrap: wrap; }
    /* A chip keeps its line -- label, chip, count -- and a long name is cut with "…" (Figma 02.2 mobile). */
    .cil-course-meta--chips { flex-wrap: nowrap; max-width: 100%; }
    .cil-course-meta--chips .cil-course-meta__label, .cil-course-meta--chips .cil-course-meta__count { flex: none; white-space: nowrap; }
    .cil-course-meta--chips .cil-course-pop, .cil-course .cil-course-meta--chips .cil-course-chip { min-width: 0; }
    .cil-course-chip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cil-course-chip__kind, .cil-course-chip__caret { flex: none; white-space: nowrap; }
    /* The open card's arrow and count keep their width; only the name gives way. */
    .cil-course-meta--chips > .cil-course-facts__grow, .cil-course .cil-course-chip > .cil-course-facts__grow { flex: none; }
    .cil-course-pop__panel { max-width: calc(100vw - 64px); white-space: normal; }
    /* Names and a count on one line: the names wrap in their place, the count stays at their end. */
    .cil-course-meta--more { flex-wrap: nowrap; align-items: flex-start; }
    .cil-course-meta--more .cil-course-meta__value { min-width: 0; }
    .cil-course-meta--more > :not(.cil-course-meta__value) { flex: none; }
    /* The institutions share half the row with their logo here: the small logos stand one above another, in
       the count's width, instead of running into the fact beside them. */
    .cil-course-facts__partners, .cil-course-facts__partners.is-grid { grid-auto-flow: row; grid-template-columns: 16px; }
    /* The programmes, the card's last list, open upward over the lines above (Figma 02.4 mobile). */
    #cil-course-pop-programs { top: auto; bottom: calc(100% + 8px); }
}

/* On a phone a fact's note, kept laid out while hidden, reached past the window's edge near the
   card's side and let the page scroll sideways. The head holds its parts to the window instead. */
@media (max-width: 767px) {
    .cil-course-head { overflow-x: clip; }
}