/* The course card's institution row: the main institution's logo and name -- one link to its page --
   and, when the course is shared, its partners after a dot. Split out of card.css, which it follows. */

/* Every row of the card has a set height, in every language and every state: a card is the same size
   whatever its words, and whatever it has to say or leave out. Only the list card's two lines on a
   phone and the enrolled card's button add height, and they add it to every card that has them. */
.cil-card__institution {
    display: flex;
    align-items: center;
    gap: var(--cil-space-2, 8px);
    min-width: 0;
    /* Never wider than the card: a long name gives way with its ellipsis instead of pushing the
       partners' logos out past the card's edge. */
    max-width: 100%;
    /* Held empty too, for a course with no institution on record. */
    height: 24px;
}
.cil-card__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    /* Held whether or not a logo was uploaded, so a row of cards keeps one baseline. */
    background: var(--cil-black-light-2);
}
/* The main institution's logo sizes its own box: as tall as the row, and as wide as its shape asks,
   up to 40px. Most logos are wider than they are tall (the median is 1.67:1), and in a square they
   were drawn a third of the size they can be. A square logo stays 24 x 24; the widest stop at 40. */
.cil-card__logo--image { width: auto; min-width: 24px; max-width: 40px; background: none; }
.cil-card__logo img { display: block; width: auto; height: 100%; max-width: 40px; object-fit: contain; }
/* The main institution, logo and name together, as one link to its page. It keeps the row's spacing
   and still lets the name give way with its ellipsis. */
.cil-card__main {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: inherit;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
.cil-card__partner {
    overflow: hidden;
    min-width: 0;
    color: var(--cil-black-regular-6);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* It reads as a link by its colour (Oren, 2026-10-07: it looked like plain text): the name in the
   link's blue, with no underline until it is pointed at (Oren, later the same day) -- then the line
   comes in, in the name's own colour. The theme's `a:hover` would turn it green, so the colour is held. */
.cil-card__main .cil-card__partner {
    color: var(--cil-blue-dark-1);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color .2s ease;
}
.cil-card__main:hover, .cil-card__main:focus-visible { color: inherit; }
.cil-card__main:is(:hover, :focus-visible) .cil-card__partner { text-decoration-color: currentColor; }
.cil-card__main:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 2px; border-radius: 4px; }

/* Shared with other institutions: the row gains a quieter second half after a dot. Every logo takes
   a hairline frame in this state, because a partner's logo is often white on white. */
.cil-card__institution--partnered { gap: 6px; }
.cil-card__institution--partnered .cil-card__logo { border: 1px solid var(--cil-black-light-4); }
.cil-card__sep { flex: 0 0 auto; color: var(--cil-black-light-10); font-size: 11px; }
.cil-card__with,
.cil-card__partnersMore {
    flex: 0 0 auto;
    color: var(--cil-black-regular-6);
    font-size: 11px;
    white-space: nowrap;
}
.cil-card__partnerLogos { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
/* Partners keep the small square: their row is the tightest on the card, and every pixel given to
   them is taken from the institution's name. */
.cil-card__logo--partner { width: 16px; min-width: 0; max-width: none; height: 16px; border-radius: 3px; }
.cil-card__logo--partner img { width: 100%; max-width: none; }
/* A partner's logo is its link: too small to underline, it rises a little when pointed at, as the
   institution logo tiles do (entity-cards/assets/logo-tile.css). */
.cil-card__partnerLink { display: flex; border-radius: 3px; color: inherit; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.cil-card__partnerLink:is(:hover, :focus-visible) { color: inherit; transform: translateY(-2px); }
.cil-card__partnerLink:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .cil-card__main .cil-card__partner, .cil-card__partnerLink { transition: none; }
    .cil-card__partnerLink:is(:hover, :focus-visible) { transform: none; }
}