/* The programme card's pill: "Programme · 6 courses", on the picture.
 *
 * The only thing the design draws differently for a programme. It sits where reading starts -- the
 * top corner in the grid, above the pills on the picture's foot; the bottom corner in the list, whose
 * picture is too short to carry it at the top as well as look like a picture.
 *
 * A label, not a control: clicks go through it to the picture's link beneath.
 */

.cil-card__programTag {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    height: 28px;
    padding-inline: 10px 12px;
    border-radius: 16px;
    background: var(--cil-blue-dark-5);
    color: var(--cil-white);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}
.cil-card__programIcon { display: inline-flex; flex: 0 0 auto; }
/* A narrow list picture in a long language can be shorter than the words; they end in "…" rather than
   run past the picture's edge, as every other line on the card does. */
.cil-card__programLabel { overflow: hidden; min-width: 0; text-overflow: ellipsis; }

.cil-card--grid .cil-card__programTag {
    inset-block-start: 12px;
    inset-inline-start: 12px;
    max-width: calc(100% - 24px);
}
.cil-card--list .cil-card__programTag {
    inset-block-end: 8px;
    inset-inline-start: 8px;
    max-width: calc(100% - 16px);
}

/* The phone's list picture is 140px wide, and the design draws the pill smaller to fit it: 24px tall,
   12px words in the regular weight, a 12px glyph. Same 768px the card's own phone rules use. */
@media (max-width: 768px) {
    .cil-card--list .cil-card__programTag {
        height: 24px;
        padding-inline: 8px;
        font-size: 12px;
        font-weight: 400;
    }
    .cil-card--list .cil-card__programIcon svg { width: 12px; height: 12px; }
}