/* Why a recommended card is here (topic.php): "the topic this course shares with the page", the learning path
 * or a shared lecturer. A note on the picture, not a button (Oren 2026-10-22, item 283): the solid dark pill read
 * as a chip to press, so it is a light caption fixed into the picture's top corner where reading starts -- no
 * fill of its own colour, no pill, ordinary weight, the mark leading in the brand's blue. It still says the same
 * thing in the same place. Figma 04.5 "Shared topic" drew the pill. */

.cil-card__topicTag {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    box-sizing: border-box;
    height: 26px;
    padding-inline: 10px 12px;
    border-end-end-radius: 10px;          /* tucked into the corner: only the inner corner rounds */
    background: color-mix(in srgb, var(--cil-white) 90%, transparent);
    backdrop-filter: blur(6px);
    color: var(--cil-black-dark-4);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}
.cil-card__topicIcon { display: inline-flex; flex: 0 0 auto; color: var(--cil-blue-dark-1); }
/* A long topic ends in "…" at the picture's edge, as every other line on the card does. */
.cil-card__topicLabel { overflow: hidden; min-width: 0; text-overflow: ellipsis; }

.cil-card--grid .cil-card__topicTag,
.cil-card--list .cil-card__topicTag {
    inset-block-start: 0;
    inset-inline-start: 0;
    max-width: calc(100% - 24px);
}
/* A programme's card has its own pill in that corner (card-program.css, 28px tall): the note keeps the corner
   and the pill steps under it, 8px apart. The list card keeps the programme's pill at the foot. */
.cil-card--grid .cil-card__programTag:has(+ .cil-card__topicTag) {
    inset-block-start: calc(26px + 8px);
}