/* Related topics (course/parts/topics.php) -- Figma 04.4, and the chip's states from 00.2 "related
   topics refinements": rest, hover, pressed, and the keyboard's focus ring. A wide page centres the
   title over a short bar and the chips under it; a phone keeps the sections' own title and lines the
   chips from the start edge. The states change only colours, never size or scale. */

.cil-course-topics__inner {
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 90px var(--cd-gutter) 96px;   /* 154px under the team's cards, as the design spaces them */
}


:is(.cil-course, .cil-tags) .cil-course-topics__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px 16px;
    max-width: 1242px;
    margin: 47px auto 0;
    padding: 0;
    list-style: none;
}
:is(.cil-course, .cil-tags) .cil-course-topics__chips li { max-width: 100%; margin: 0; padding: 0; }
:is(.cil-course, .cil-tags) .cil-course-topics__chips li::before { content: none; }

:is(.cil-course, .cil-tags) .cil-course-topic {
    --cd-topic-line: var(--cil-blue);
    --cd-topic-mark: var(--cil-blue-regular-7);
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px 0 14px;   /* the tag's side is the left, in either direction */
    border: 1px solid var(--cil-blue);
    border-radius: 22px;
    background: var(--cil-blue-light-1);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-blue-dark-1);
    text-decoration: none;
    max-width: 100%;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
/* The tag and its line sit on the chip's left (Oren): after the words in a right-to-left page. */
/* The same chip in the home page's tags stripe (stripe/renderers/tags.php, item 225). */
:is(.cil-course-topics[dir="rtl"], [dir="rtl"] .cil-tags) .cil-course-topic { flex-direction: row-reverse; }
.cil-course-topic__icon { flex: none; width: 14px; height: 14px; color: var(--cd-topic-mark); transition: color 0.2s ease; }
/* A name longer than a narrow screen -- a long institution's -- ends in "…" rather than overflowing. */
.cil-course-topic > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cil-course-topic__line { flex: none; width: 1px; height: 18px; background: var(--cd-topic-line); transition: background-color 0.2s ease; }

/* Hover, and the keyboard's focus: a deeper ground, the design's 1.5px teal edge (the half pixel
   drawn inside, so the chip keeps its size). */
:is(.cil-course, .cil-tags) .cil-course-topic:is(:hover, :focus-visible) {
    --cd-topic-line: var(--cil-blue-regular-7);
    --cd-topic-mark: var(--cil-blue-dark-3);
    border-color: var(--cil-blue-regular-7);
    background: var(--cil-blue-light-3);
    box-shadow: inset 0 0 0 0.5px var(--cil-blue-regular-7);
    color: var(--cil-blue-dark-3);
    text-decoration: none;
}
/* Pressed: deeper again, edged in the darkest blue. */
:is(.cil-course, .cil-tags) .cil-course-topic:active {
    --cd-topic-line: var(--cil-blue-dark-3);
    --cd-topic-mark: var(--cil-blue-dark-3);
    border-color: var(--cil-blue-dark-3);
    background: var(--cil-blue-light-7);
    box-shadow: inset 0 0 0 0.5px var(--cil-blue-dark-3);
    color: var(--cil-blue-dark-3);
}
/* The focus ring: 2px of teal, 2px clear of the chip. */
:is(.cil-course, .cil-tags) .cil-course-topic:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 2px; }

/* ---- a phone (04.4 mobile): the sections' title, smaller chips from the start edge ---- */
@media (max-width: 767px) {
    .cil-course-topics__inner { padding: 8px var(--cd-gutter) 32px; }
    :is(.cil-course, .cil-tags) .cil-course-topics__chips { justify-content: flex-start; gap: 8px; max-width: none; margin-top: 16px; }
    :is(.cil-course, .cil-tags) .cil-course-topic { gap: 8px; height: 34px; padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.cil-course, .cil-tags) .cil-course-topic, .cil-course-topic__icon, .cil-course-topic__line { transition: none; }
}