/* A lecturer's page (Figma 3769-3775): the hero, the bio and the empty list -- the list itself is the
   catalogue's (catalogue-pages/assets/). Logical properties and the brand's tokens throughout. */

/* ---- The hero: a dark band, the photo at the start, the person beside it ---- */
.cil-staff-hero { background: var(--cil-blue-dark-3); color: var(--cil-white); }
.cil-staff-hero__inner { display: flex; flex-direction: column; gap: 32px; max-width: calc(1420px + 48px); margin-inline: auto; padding: 32px 24px 56px; }

.cil-staff-hero__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cil-staff-hero__crumbs li { display: flex; align-items: center; gap: 8px; color: var(--cil-white); font-size: 14px; }
.cil-staff .cil-staff-hero__crumbs a { display: inline-flex; align-items: center; gap: 4px; color: var(--cil-blue-light-3); text-decoration: none; }
/* Pointed at, the trail's links are underlined; their colour stays. */
.cil-staff .cil-staff-hero__crumbs a:is(:hover, :focus-visible) { color: var(--cil-blue-light-3); text-decoration: underline; text-underline-offset: 3px; }

.cil-staff-hero__content { display: flex; align-items: center; gap: 40px; }
.cil-staff-hero__portrait { flex: none; width: 216px; height: 216px; overflow: hidden; border-radius: 50%; background: var(--cil-blue-light-5); }
.cil-staff-hero__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cil-staff-hero__identity { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.cil-staff-hero__role { margin: 0; color: var(--cil-blue-light-3); font-size: 18px; font-weight: 600; line-height: 1.2; }
.cil-staff-hero__name { margin: 0; color: var(--cil-white); font-size: 48px; font-weight: 700; line-height: 1.2; }
/* The years of a lecturer marked as deceased: quieter than the name, in its colour. */
.cil-staff-hero__name .cil-lecturer-years { font-size: .5em; font-weight: 400; white-space: nowrap; }

.cil-staff-hero__orgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cil-staff .cil-staff-hero__org {
    display: inline-flex; align-items: center; padding: 8px 16px;
    border: 1px solid var(--cil-blue-light-3); border-radius: 20px;
    color: var(--cil-white); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none;
    transition: box-shadow .2s ease;
}
/* Pointed at, the outline draws in thicker; the words keep their colour. */
.cil-staff .cil-staff-hero__org:is(:hover, :focus-visible) { color: var(--cil-white); box-shadow: inset 0 0 0 1px var(--cil-blue-light-3); }

.cil-staff-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 8px 0 0; list-style: none; }
.cil-staff-hero__stats li { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.cil-staff-hero__stats img { display: block; flex: none; }

.cil-staff-hero__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 8px; }
.cil-staff .cil-staff-hero__go {
    display: inline-flex; align-items: center; justify-content: center; height: 48px; padding-inline: 32px;
    border: 1px solid var(--cil-blue-dark-3); border-radius: 24px; background: var(--cil-blue);
    color: var(--cil-black); font-size: 16px; font-weight: 700; text-decoration: none;
    --staff-out: cubic-bezier(.22, 1, .36, 1); --staff-spring: cubic-bezier(.34, 1.56, .64, 1);
    transition: transform .2s ease;
}
.cil-staff-hero__share {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding-inline: 24px;
    border: 1px solid var(--cil-blue-regular-7); border-radius: 16px; background: var(--cil-white);
    color: var(--cil-blue-dark-3); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cil-staff-hero__share img { display: block; }
/* No ring and no colour change when pointed at (Oren 2026-10-15, item 81); the colours are pinned against the
   old site's green button:hover and a:hover (styles-rtl.css). The keyboard gets the same move and a focus ring. */
.cil-staff .cil-staff-hero__go:is(:hover, :focus-visible, :active) { background: var(--cil-blue); color: var(--cil-black); box-shadow: none; outline: none; text-decoration: none; }
.cil-staff-hero__share:is(:hover, :focus-visible, :active, [aria-expanded="true"]) { background: var(--cil-white); color: var(--cil-blue-dark-3); box-shadow: none; outline: none; }
.cil-staff .cil-staff-hero__go:focus-visible,
.cil-staff-hero__share:focus-visible { outline: 2px solid var(--cil-blue-light-3); outline-offset: 3px; }
/* "To the courses": the words step back and a caret drops in after them, settling with one small bob -- the courses
   are below. The words move by offset, not transform, so they keep their colour while they move. */
.cil-staff-hero__goWords { position: relative; inset-inline-end: 0; transition: inset-inline-end .35s var(--staff-out); }
.cil-staff-hero__goWords::after {
    content: ""; position: absolute; top: 50%; inset-inline-end: -22px; width: 16px; height: 16px; margin-top: -8px; background: currentColor;
    -webkit-mask: url("../../../images/podcasts-page/caret-down.svg") center / contain no-repeat; mask: url("../../../images/podcasts-page/caret-down.svg") center / contain no-repeat;
    opacity: 0; transform: translateY(-9px); transition: opacity .2s var(--staff-out), transform .4s var(--staff-spring);
}
.cil-staff .cil-staff-hero__go:is(:hover, :focus-visible) .cil-staff-hero__goWords { inset-inline-end: 11px; }
.cil-staff .cil-staff-hero__go:is(:hover, :focus-visible) .cil-staff-hero__goWords::after { opacity: 1; transform: translateY(1px); }
/* "Share": an underline draws in under its words from the reading start, held while its menu is open; the mark
   keeps still (Oren 2026-10-15). Drawn as a background, so nothing in the button moves. */
.cil-staff-hero__share > span {
    padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
    transition: background-size .3s cubic-bezier(.22, 1, .36, 1);
}
.lang-to-css-ltr .cil-staff-hero__share > span { background-position: left bottom; }
.cil-staff-hero__share:is(:hover, :focus-visible, [aria-expanded="true"]) > span { background-size: 100% 1px; }
.cil-staff .cil-staff-hero__go:active { transform: scale(.98); }

/* ---- The body: the bio, then the courses ---- */
.cil-staff__body { display: flex; flex-direction: column; gap: 88px; padding-block: 64px 96px; }
.cil-staff__section { display: flex; flex-direction: column; gap: 20px; }
.cil-staff__section:focus { outline: none; }
/* "לקורסים של המרצה" lands the title under the site's fixed header (64px), not behind it. */
.cil-staff__section { scroll-margin-top: 88px; }
.cil-staff__section .cil-ctl-chips { margin-top: 4px; }
.cil-staff__section .cil-ctl-results { padding-top: 4px; }
.cil-staff__section .cil-ctl-chips + .cil-ctl-results { padding-top: 24px; }

.cil-staff-about__text { max-width: 920px; color: var(--cil-black); font-size: 18px; line-height: 1.2; }
.cil-staff-about__text > :first-child { margin-top: 0; }
.cil-staff-about__text > :last-child { margin-bottom: 0; }
/* Three lines and the rest folded until "קריאה נוספת" (staff-page.js sets is-folded where it overflows,
   and eases the height between the two). */
.cil-staff-about__text.is-folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.cil-staff-about__text.is-folded > * { display: inline; margin: 0; }
/* A link, not a button: no fill in any state -- the old site paints every button green (styles-rtl.css
   button, button:hover) and fades all of it, so the look is pinned here. Pointed at, the underline thickens. */
.cil-staff .cil-staff-about__more,
.cil-staff .cil-staff-about__more:is(:hover, :focus-visible, :active) {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: -8px; padding: 0;
    border: 0; background: none; color: var(--cil-blue-dark-1); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: text-decoration-thickness .2s ease;
}
.cil-staff .cil-staff-about__more:is(:hover, :focus-visible) { text-decoration-thickness: 2px; }
.cil-staff .cil-staff-about__more[hidden] { display: none; }
.cil-staff-about__more svg { flex: none; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.cil-staff-about__more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---- Nothing taught yet ---- */
.cil-staff-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 40px; border-radius: 16px; background: var(--cil-blue-light-1); text-align: center; }
.cil-staff-empty__title { margin: 0; color: var(--cil-black); font-size: 24px; font-weight: 700; line-height: 1.2; }
.cil-staff-empty__text { margin: 0; color: var(--cil-black); font-size: 18px; line-height: 1.2; }
.cil-staff-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 8px; }

/* ---- A phone ---- */
@media (max-width: 767px) {
    .cil-staff-hero__inner { gap: 20px; padding: 20px 16px 32px; }
    .cil-staff-hero__content { flex-direction: column; align-items: flex-start; gap: 20px; }
    .cil-staff-hero__portrait { width: 136px; height: 136px; }
    .cil-staff-hero__identity { align-self: stretch; gap: 12px; }
    .cil-staff-hero__role { font-size: 16px; }
    .cil-staff-hero__name { font-size: 28px; }
    .cil-staff-hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .cil-staff .cil-staff-hero__go, .cil-staff-hero__share { width: 100%; }
    .cil-staff__body { gap: 56px; padding-block: 32px 64px; }
    .cil-staff-about__text { font-size: 16px; }
    .cil-staff-empty { padding: 32px 20px; }
    .cil-staff-empty__title { font-size: 20px; }
    .cil-staff-empty__text { font-size: 16px; }
    .cil-staff-empty__actions { flex-direction: column; align-self: stretch; }
    .cil-staff-empty__actions .cil-ctl-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-staff .cil-staff-hero__org, .cil-staff .cil-staff-hero__go, .cil-staff-hero__share,
    .cil-staff .cil-staff-about__more, .cil-staff-about__more svg { transition: none; }
    /* The caret fades in where it rests and the words stay; the share underline appears at once. */
    .cil-staff-hero__goWords, .cil-staff-hero__share > span { transition: none; }
    .cil-staff-hero__goWords::after { transition: opacity .2s ease; }
    .cil-staff .cil-staff-hero__go:is(:hover, :focus-visible) .cil-staff-hero__goWords { inset-inline-end: 0; }
    .cil-staff .cil-staff-hero__go:is(:hover, :focus-visible) .cil-staff-hero__goWords::after { transform: none; }
    .cil-staff .cil-staff-hero__go:active { transform: none; }
}