/* The course's notes (course/parts/notes.php) -- Figma 12. A banner across the content's width, its
   mark where reading starts, its title over its text; several stack 16px apart. 04.6, the special
   note: pale blue, heading the body. 04.8 / 04.9, the ordinary notes: grey, after the description. */

.cil-course-notes__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    /* As the design spaces it: 62px under the anchor menu (its body starts 52px below the menu, the
       note 10px into it), 100px above the next section. */
    padding: 62px var(--cd-gutter) 100px;
}
.cil-course-notes + .cil-course-learn { margin-top: 0; }
/* The ordinary notes: 85px under the description's own 64 (149 in all, as the design has it) and
   100px above the team's title, which brings 81 of its own. */
.cil-course-notes--plain .cil-course-notes__inner { padding-top: 85px; padding-bottom: 19px; }
/* Whatever follows -- the team, or with no team the podcast, topics or similar courses -- its title stands the
   same 100px below the note. */
@media (min-width: 768px) {
    .cil-course-notes--plain + :is(.cil-course-podcasts, .cil-course-topics, .cil-course-related) > [class$="__inner"] { padding-top: 81px; }
}
.cil-course-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border: 1px solid var(--cil-blue-light-7);
    border-radius: 16px;
    background: var(--cil-blue-light-1);
}
.cil-course-note__icon { flex: none; width: 24px; height: 24px; color: var(--cil-blue-dark-1); }
.cil-course-note__words { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.cil-course .cil-course-note__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cil-blue-dark-1); }
.cil-course-note__text { font-size: 14px; line-height: 1.2; color: var(--cil-black); overflow-wrap: anywhere; }
.cil-course .cil-course-note__text p { margin: 0; }
.cil-course-note__text strong { font-weight: 700; }
.cil-course-note__text a { color: var(--cil-blue-dark-1); text-decoration: underline; text-underline-offset: 2px; }
.cil-course-note__text img { display: block; max-width: 100%; height: auto; margin: 8px 0; }
.cil-course-note--plain { border-color: var(--cil-black-light-4); background: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white)); }   /* Figma's #F6F6F6 */
.cil-course-note--plain .cil-course-note__icon { color: var(--cil-black-regular-7); }
.cil-course .cil-course-note--plain .cil-course-note__title { color: var(--cil-black-regular-10); }
.cil-course-note--plain .cil-course-note__text a { color: var(--cil-black-regular-10); }
.cil-course-note__text :is(ul, ol) { margin: 0; padding-inline-start: 1.2em; }

@media (max-width: 767px) {
    .cil-course-notes__inner { padding: 32px var(--cd-gutter) 8px; }
    /* 40 from each neighbour; notes 12px apart, as the phone design stacks them (04.9). */
    .cil-course-notes__inner { gap: 12px; }
    .cil-course-notes--plain .cil-course-notes__inner { padding-top: 8px; padding-bottom: 32px; }
}