/* The page body's sections in the new design (Figma 04): the title every section shares, and the
   sections themselves as they are built -- 04.1, what the course teaches (parts/learn.php); 04.2,
   the description (parts/about.php, sections.js). The teaching team, 04.3, has its own (team.css). */

/* ---- a section's title: the heading, a blue tick at its start (04.x) ---- */
.cil-course .cil-course-section-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-black);
}
.cil-course-section-title::before { content: ''; flex: none; width: 5px; height: 30px; background: var(--cil-blue-regular-7); }
/* Centred, the bar under it -- the tick, turned (Figma 04.4, 04.7). A phone keeps the tick. */
.cil-course .cil-course-section-title--centred { flex-direction: column; gap: 13px; text-align: center; }
.cil-course-section-title--centred::before { order: 1; width: 93px; height: 5px; }

/* ---- 04.1: what the course teaches ---- */
.cil-course-learn {
    --cd-grey-1: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white));   /* Figma's #F6F6F6 */
    margin-top: 28px;
    background: var(--cd-grey-1);
}
.cil-course-learn__inner {
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 48px var(--cd-gutter) 64px;
}
/* The points take the design's 1174px from the start edge: two columns, the first half on the start
   side, 215px apart. */
.cil-course-learn__points { display: flex; gap: clamp(48px, 11.2vw, 215px); max-width: 1174px; margin-top: 17px; }
/* The design's widths, 486 and 473, shared out as the window narrows. */
.cil-course-learn__points ul { flex: 486 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.cil-course-learn__points ul + ul { flex-grow: 473; }
.cil-course-learn__points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 0 0 17px;
    font-size: 24px;
    line-height: 1.2;
    color: var(--cil-black-dark-4);
    break-inside: avoid;
}
.cil-course-learn__points li::before { content: none; }
/* The mark sits on the point's first line (the design's 24px circle in a 29px line). */
.cil-course-learn__check { width: 24px; height: 24px; margin-top: 2.5px; color: var(--cil-blue-regular-7); }
.cil-course-learn__points p { margin: 0; }

/* ---- 04.2: the description ---- */
.cil-course-about__inner {
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 64px var(--cd-gutter);
}
/* The design's measure: 868px of 24px text from the start edge. Folded, it shows four lines -- when
   there are more -- and sections.js moves its height open and closed. */
.cil-course-about__text {
    --cd-about-lines: 4;
    max-width: 868px;
    margin-top: 18px;
    overflow: hidden;
    font-size: 24px;
    line-height: 1.2;
    color: var(--cil-black);
    transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Every blank is one line, so a fold always falls between lines and counts them as the reader sees
   them: a line break is a line, the space after a paragraph or a list is a line, and an empty
   paragraph (parts/about.php marks it) is one line more. A division is a line of its own, no space. */
.cil-course .cil-course-about__text p { margin: 0 0 1.2em; }
.cil-course .cil-course-about__text p.cil-course-about__blank { height: 1.2em; margin: 0; }
.cil-course .cil-course-about__text div { margin: 0; }
.cil-course .cil-course-about__text > :last-child { margin-bottom: 0; }
.cil-course-about__text ul, .cil-course-about__text ol { margin: 0 0 1.2em; padding-inline-start: 1.2em; }
.cil-course .cil-course-about__more {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-blue-regular-7);
}
.cil-course .cil-course-about__more[hidden] { display: none; }
.cil-course .cil-course-about__more:hover { background: none; }
.cil-course .cil-course-about__more:hover span { text-decoration: underline; text-underline-offset: 3px; }
/* The facts card's pair of arrows (facts.css), turned over for "less" as the text opens. */
.cil-course-about__caret { flex: none; width: 10px; height: 10px; transition: rotate 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
.cil-course-about__more[aria-expanded="true"] .cil-course-about__caret { rotate: 180deg; }
@media (prefers-reduced-motion: reduce) { .cil-course-about__text, .cil-course-about__caret { transition: none; } }

/* ---- the phone (04.1 mobile): no band, one column, a small dot for each point ---- */
@media (max-width: 767px) {
    .cil-course .cil-course-section-title { gap: 10px; font-size: 20px; }
    .cil-course-section-title::before { width: 4px; height: 20px; }
    .cil-course .cil-course-section-title--centred { flex-direction: row; gap: 10px; text-align: start; }
    .cil-course-section-title--centred::before { order: 0; }
    .cil-course-learn { margin-top: 0; background: none; }
    .cil-course-learn__inner { padding: 32px var(--cd-gutter); }
    /* The two columns one after the other: a single list. */
    .cil-course-learn__points { flex-direction: column; gap: 12px; margin-top: 16px; }
    .cil-course-learn__points li { gap: 10px; padding-bottom: 12px; font-size: 14px; color: var(--cil-black); }
    .cil-course-learn__points ul:last-child li:last-child { padding-bottom: 0; }
    .cil-course-learn__points ul:not(:last-child) li:last-child { padding-bottom: 0; }
    /* On the point's first line (a 17px line). */
    .cil-course-learn__check { width: 8px; height: 8px; margin: 4.5px 0 0; border-radius: 50%; background: var(--cil-blue-regular-7); }
    .cil-course-learn__check path { display: none; }
    /* 04.2 mobile: 14px grey text, five lines before it folds. */
    .cil-course-about__inner { padding: 8px var(--cd-gutter) 32px; }
    .cil-course-about__text { --cd-about-lines: 5; margin-top: 16px; font-size: 14px; color: var(--cil-black-regular-7); }
    .cil-course .cil-course-about__more { margin-top: 12px; font-size: 14px; }
}