/* The teaching team (course/parts/team.php) -- Figma "Staff Cards", 02 · Course & programme page, D:
   portrait cards for the first lecturers, the rest of the team as a tile (a strip on a phone) that
   opens the compact list, and each card's biography in a popover (a bottom sheet on a phone). */

.cil-course-team {
    --cd-staff-shadow: 0 8px 24px -4px color-mix(in srgb, var(--cil-black) 16%, transparent), 0 1px 3px color-mix(in srgb, var(--cil-black) 8%, transparent);
}
.cil-course-team__inner {
    max-width: calc(var(--cd-width) + 2 * var(--cd-gutter));
    margin: 0 auto;
    padding: 81px var(--cd-gutter) 64px;   /* 145px under the description, as the course page spaces them */
}

/* ---- the row: three portraits and the tile, four equal columns ---- */
.cil-course-team__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; align-items: start; }
.cil-course .cil-course-team__strip { display: none; }

.cil-course-staff {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 10px;
    background: var(--cil-white);
    box-shadow: var(--cd-staff-shadow);
}
/* The card whose biography is open is marked (b · Bio popover). */
/* The ring is drawn over the card's contents, so the photo does not hide its upper part. */
.cil-course-staff.is-active::after { content: ''; position: absolute; inset: 0; z-index: 1; border: 1px solid var(--cil-blue-regular-7); border-radius: inherit; pointer-events: none; }
.cil-course-staff__photo { position: relative; display: block; height: 240px; overflow: hidden; border-radius: 10px 10px 0 0; background: var(--cil-blue-light-5); }
.cil-course-staff__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cil-course-staff__photo.is-missing { display: grid; place-items: center; color: var(--cil-blue-dark-5); }
.cil-course-staff__photo.is-missing svg { width: 96px; height: 96px; }
.cil-course-staff__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px 16px; }
.cil-course .cil-course-staff__name { max-width: 100%; margin: 0; overflow: hidden; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--cil-black); white-space: nowrap; }
.cil-course .cil-course-staff__role { height: 2.4em; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.2; color: var(--cil-black-regular-7); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Every card one height (Oren): a longer role is cut after two lines with "…". */

/* "Read more", "to the profile": the design's small blue link with a caret pointing onward. */
.cil-course .cil-course-staff__more, .cil-course .cil-course-staff-row__link, .cil-course .cil-course-bio__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px 0 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-blue-regular-7);
    text-decoration: none;
    white-space: nowrap;
}
.cil-course .cil-course-staff__more:is(:hover, :focus, :active), .cil-course .cil-course-staff-row__link:is(:hover, :focus, :active), .cil-course .cil-course-bio__link:is(:hover, :focus, :active) { background: none; color: var(--cil-blue-regular-7); }
.cil-course-staff__caret { width: 14px; height: 14px; }
.cil-course[dir="ltr"] .cil-course-staff__caret { transform: scaleX(-1); }

/* These hovers move only what paints -- colours, shadows, offsets -- never scale, opacity or
   translate: those lift the link onto the GPU, where its words lose their sharp anti-aliasing for the
   length of the hover and look to change colour. */

/* "Read more" opens the biography over its card: a soft disc swells in behind the caret, which
   dips toward where the biography opens. Open, the words underline as the design draws it. */
.cil-course-staff__more .cil-course-staff__caret {
    position: relative;
    top: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
    transition: background-color 0.3s ease, box-shadow 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), top 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cil-course-staff__more:is(:hover, :focus-visible) .cil-course-staff__caret,
.cil-course-staff.is-active .cil-course-staff__more .cil-course-staff__caret { top: 1px; background: var(--cil-blue-light-2); box-shadow: 0 0 0 4px var(--cil-blue-light-2); }
.cil-course .cil-course-staff.is-active .cil-course-staff__more span { text-decoration: underline; text-underline-offset: 3px; }

/* "To the profile" in the list: a soft pill swells in behind it and the caret leans onward. */
.cil-course .cil-course-staff-row__link { position: relative; isolation: isolate; }
.cil-course-staff-row__link::before {
    content: '';
    position: absolute;
    inset: -1px -3px;
    z-index: -1;
    border-radius: 999px;
    background: transparent;
    transition: background-color 0.25s ease, inset 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.cil-course-staff-row__link:is(:hover, :focus-visible)::before { inset: -5px -10px; background: var(--cil-blue-light-2); }
/* Onward is toward the line's end: an offset from its start edge, so one rule serves both directions. */
.cil-course-staff-row__link .cil-course-staff__caret, .cil-course-bio__link .cil-course-staff__caret { position: relative; inset-inline-start: 0; transition: inset-inline-start 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); }
.cil-course-staff-row__link:is(:hover, :focus-visible) .cil-course-staff__caret { inset-inline-start: 2px; }

/* ---- the rest of the team: a tile (a strip on a phone) ---- */
.cil-course .cil-course-team__tile, .cil-course .cil-course-team__strip {
    width: 100%;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--cil-blue-light-1);
    font: inherit;
    color: inherit;
    text-align: center;
}
.cil-course .cil-course-team__tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; align-self: stretch; padding: 20px; }
.cil-course .cil-course-team__tile:hover, .cil-course .cil-course-team__strip:hover { background: var(--cil-blue-light-1); }
.cil-course .cil-course-team__tile[aria-expanded="true"], .cil-course .cil-course-team__strip[aria-expanded="true"] { border-color: var(--cil-blue-regular-7); }
.cil-course-team__words { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.cil-course-team__count { max-width: 100%; overflow: hidden; font-size: 18px; font-weight: 700; line-height: 1.2; color: var(--cil-blue-dark-3); text-overflow: ellipsis; white-space: nowrap; }
.cil-course-team__names { max-width: 100%; overflow: hidden; font-size: 14px; line-height: 1.2; color: var(--cil-black-regular-7); text-overflow: ellipsis; white-space: nowrap; }
.cil-course-team__toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--cil-blue-regular-7); }
.cil-course-team__caret { width: 14px; height: 14px; transition: rotate 0.5s cubic-bezier(0.45, 0, 0.2, 1); }
[aria-expanded="true"] .cil-course-team__caret { rotate: 180deg; }
/* Both words share one cell, so the button keeps the longer one's width whichever is showing. */
.cil-course-team__label { display: inline-grid; }
.cil-course-team__show, .cil-course-team__hide { grid-area: 1 / 1; text-align: start; }
.cil-course-team__hide, [aria-expanded="true"] .cil-course-team__show { visibility: hidden; }
[aria-expanded="true"] .cil-course-team__hide { visibility: visible; }
/* The faces overlap, each ringed in white. */
.cil-course-team__faces { display: flex; }
.cil-course-team__face { position: relative; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 3px solid var(--cil-white); border-radius: 50%; background: var(--cil-blue-light-5); color: var(--cil-blue-dark-5); }
.cil-course-team__face + .cil-course-team__face { margin-inline-start: -14px; }
.cil-course-team__face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cil-course-team__face svg { width: 34px; height: 34px; }

/* ---- the compact list (c · Expanded) ---- */
.cil-course-team__list { margin: 24px 0 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--cil-black-light-2); border-radius: 12px; background: var(--cil-white); }
.cil-course-team__list[hidden] { display: none; }
.cil-course-staff-row { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 16px 20px; }
.cil-course-staff-row::before { content: none; }
.cil-course-staff-row + .cil-course-staff-row { border-top: 1px solid var(--cil-black-light-2); }
/* Beside a wide page these lecturers are portraits already; only a phone lists them. With four,
   all are, and the list is the phone's alone. */
@media (min-width: 1024px) { .cil-course-team__list.is-phone-only { display: none; } }
.cil-course-staff-row.is-lead-wide { display: none; }
.cil-course-staff-row.is-lead-wide + .cil-course-staff-row { border-top: 0; }
.cil-course-staff-row__photo { position: relative; display: grid; place-items: center; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--cil-blue-light-5); color: var(--cil-blue-dark-5); }
.cil-course-staff-row__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cil-course-staff-row__photo svg { width: 34px; height: 34px; }
.cil-course-staff-row__details { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.cil-course .cil-course-staff-row__details p { margin: 0; overflow: hidden; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.cil-course .cil-course-staff-row__name { font-size: 16px; font-weight: 700; color: var(--cil-black); }
.cil-course .cil-course-staff-row__role { font-size: 14px; color: var(--cil-black-regular-7); }
.cil-course .cil-course-staff-row__bio { font-size: 14px; color: var(--cil-black); }
.cil-course .cil-course-staff-row__link { flex: none; padding-top: 0; }

/* ---- a biography: a popover over the lower half of its card (b · Bio popover) ---- */
.cil-course-bio {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    z-index: 20;
    width: 380px;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 20px;
    border: 1px solid var(--cil-black-light-2);
    border-radius: 12px;
    background: var(--cil-white);
    color: var(--cil-black);
    text-align: start;
    box-shadow: 0 12px 16px color-mix(in srgb, var(--cil-black) 20%, transparent), 0 2px 3px color-mix(in srgb, var(--cil-black) 10%, transparent);
}
.cil-course-bio[open] { display: flex; flex-direction: column; gap: 10px; }
.cil-course-bio__handle { display: none; }
.cil-course-bio__head { display: flex; align-items: center; gap: 12px; }
.cil-course-bio__photo { display: none; }
.cil-course-bio__who { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.cil-course .cil-course-bio__name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cil-black); }
/* The years of a lecturer marked as deceased, beside the name on the card, the list and the biography:
   the name's size and colour, without its weight. */
.cil-course .cil-lecturer-years { font-weight: 400; white-space: nowrap; }
/* On the one-line card and row the name alone gives way to "…": the years beside it are read in full. */
.cil-course :is(.cil-course-staff__name, .cil-course-staff-row__name) { display: flex; align-items: baseline; gap: 0.3em; }
.cil-course .cil-course-staff-name__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cil-course :is(.cil-course-staff__name, .cil-course-staff-row__name) .cil-lecturer-years { flex: none; }
.cil-course .cil-course-bio__role { margin: 0; font-size: 14px; line-height: 1.2; color: var(--cil-black-regular-7); }
.cil-course .cil-course-bio__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white));   /* Figma's #F6F6F6 */
    color: var(--cil-red);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.cil-course .cil-course-bio__close:hover { background: var(--cil-red); color: var(--cil-white); }
.cil-course .cil-course-bio__close:focus-visible { outline: 3px solid var(--cil-yellow); outline-offset: 2px; }
.cil-course-bio__close svg { width: 14px; height: 14px; }
/* The biography in full would be a page; the popover keeps the first lines, and "the full profile" is the page. */
.cil-course-bio__text { max-height: calc(6 * 1.2em); overflow: hidden; font-size: 16px; line-height: 1.2; color: var(--cil-black); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.cil-course .cil-course-bio__text p { display: inline; margin: 0; }
.cil-course .cil-course-bio__text p + p::before { content: ' '; }
.cil-course .cil-course-bio__link { padding-top: 0; }
/* "The full profile" leaves the page: it darkens and its caret steps onward, rather than underlining
   as "read more" does when its card is open. */
.cil-course .cil-course-bio__link:is(:hover, :focus-visible) { color: var(--cil-blue-dark-1); }
.cil-course-bio__link:is(:hover, :focus-visible) .cil-course-staff__caret { inset-inline-start: 3px; }

/* ---- narrower: the phone's arrangement (i · Base), two portraits and the strip ---- */
@media (max-width: 1023px) {
    .cil-course-team__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cil-course-staff.is-wide-only, .cil-course .cil-course-team__tile { display: none; }
    .cil-course .cil-course-team__strip { display: flex; grid-column: 1 / -1; align-items: center; gap: 12px; padding: 12px; text-align: start; }
    .cil-course-team__strip .cil-course-team__words { flex: 1 1 auto; align-items: flex-start; gap: 2px; }
    .cil-course-team__strip .cil-course-team__count { font-size: 16px; }
    .cil-course-team__strip .cil-course-team__names { font-size: 12px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .cil-course-team__strip .cil-course-team__toggle { padding-top: 2px; }
    .cil-course-team__strip .cil-course-team__face { width: 40px; height: 40px; }
    .cil-course-team__strip .cil-course-team__face + .cil-course-team__face { margin-inline-start: -10px; }
    .cil-course-team__strip .cil-course-team__face svg { width: 24px; height: 24px; }
    .cil-course-staff-row.is-lead-wide { display: flex; }
    .cil-course-staff-row.is-lead-wide + .cil-course-staff-row { border-top: 1px solid var(--cil-black-light-2); }
    .cil-course-team__list { margin-top: 16px; }
}
@media (max-width: 767px) {
    .cil-course-team__inner { padding: 8px var(--cd-gutter) 32px; }
    .cil-course-team__row { margin-top: 16px; }
    .cil-course-staff__photo { height: 150px; }
    .cil-course-staff__photo.is-missing svg { width: 64px; height: 64px; }
    .cil-course-staff__body { padding: 12px 12px 14px; }
    .cil-course .cil-course-staff__name { font-size: 16px; }
    .cil-course .cil-course-staff__role { font-size: 12px; }
    /* k · Expanded: a smaller row, the link under the words. */
    .cil-course-staff-row { flex-wrap: wrap; gap: 12px; padding: 12px; }
    .cil-course-staff-row__photo { width: 48px; height: 48px; }
    .cil-course-staff-row__photo svg { width: 29px; height: 29px; }
    .cil-course .cil-course-staff-row__role, .cil-course .cil-course-staff-row__bio { font-size: 12px; }
    .cil-course-staff-row__details { flex-basis: calc(100% - 60px); }
    .cil-course .cil-course-staff-row__link { margin-inline-start: 60px; margin-top: -8px; padding-top: 0; }

    /* j · Bio sheet: the biography rises from the bottom of the screen over a dimmed page. */
    .cil-course-bio:modal {
        position: fixed;
        inset: auto 0 0;
        width: 100%;
        max-width: none;
        max-height: 85dvh;
        padding: 10px 16px 28px;
        border: 0;
        border-radius: 20px 20px 0 0;
        gap: 12px;
        overflow: auto;
    }
    .cil-course-bio::backdrop { background: color-mix(in srgb, var(--cil-black-dark-4) 60%, transparent); }
    .cil-course-bio:modal .cil-course-bio__handle { display: block; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--cil-black-light-3); }
    .cil-course-bio:modal .cil-course-bio__photo { position: relative; display: block; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 50%; background: var(--cil-blue-light-5); color: var(--cil-blue-dark-5); }
    .cil-course-bio:modal .cil-course-bio__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .cil-course-bio:modal .cil-course-bio__photo.is-missing { display: grid; place-items: center; }
    .cil-course-bio:modal .cil-course-bio__photo svg { width: 34px; height: 34px; }
    .cil-course .cil-course-bio:modal .cil-course-bio__role { font-size: 12px; }
    .cil-course-bio:modal .cil-course-bio__text { max-height: none; display: block; -webkit-line-clamp: unset; }
    .cil-course .cil-course-bio:modal .cil-course-bio__text p { display: block; margin: 0 0 8px; }
    .cil-course .cil-course-bio:modal .cil-course-bio__text p + p::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-course-team__caret, .cil-course .cil-course-bio__close, .cil-course-staff__caret, .cil-course-staff-row__link::before { transition: none; }
}