/* ─────────────────────────────────────────────────────────────────────
   ConferenceApp · Blockchain Education 2026
   Author: Viktor Georgiev
   ───────────────────────────────────────────────────────────────────── */
/* ============================================================
   lecturersStyle.css — the "Lecturers" page.
   The same visual language as stylesFAQ.css, attendStyle.css and
   scheduleStyle.css: Oswald, zero corner radius, hairline rules, the red
   accent, registration marks.

   IMPORTANT — the contract with scriptLecturers.js is unchanged:
     .filter-btn, .filter-btn.active, [data-filter],
     .speaker-card, [data-category], .speaker-card.hide
   The filtering works exactly as before.

   THE PATTERN OF THIS PAGE is diagonal hatching — a 45° hatch, the way a
   section is filled in a technical drawing. The FAQ and Attend pages carry a
   square grid and Schedule carries a time scale; this is a third mark, at the
   same density and with the same soft-light blend.

   As in attendStyle.css and scheduleStyle.css, .lecturers-page does NOT paint
   an opaque background: it comes from <body> (mainStyle.css), so that the
   global ambient layer can sit BEHIND the page.
   ============================================================ */

.lecturers-page {
    background: transparent;
    color: var(--text, #f4f2ec);
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 300;

    /* The real height of the top bar is measured by scriptLecturers.js and
       written here, so that the filter rail sits exactly below the fixed
       navigation. This value is only the fallback. */
    --lc-rail-top: 66px;
}

.lecturers-page ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.lecturers-page :focus-visible { outline: 2px solid var(--accent, #ff3636); outline-offset: 2px; }

.lc-pad { max-width: 1320px; margin: 0 auto; padding: 0 6vw; }
.lc-sec { padding: 56px 0 96px; }

/* ── The banner ──────────────────────────────────────────── */
.lc-banner { position: relative; width: 100%; overflow: hidden; }

/* The photograph stays in colour and bright, as on Schedule and Travel; only
   a slight contrast lift, so that it does not wash out under the overlays. */
.lc-banner img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    object-position: 50% 38%;
    filter: contrast(1.06) saturate(1.02);
}

.lc-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(var(--ink), 0.03) 0px, rgba(var(--ink), 0.03) 1px, transparent 1px, transparent 4px);
}

.lc-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent) 0%, rgba(5, 5, 5, 0) 20%, rgba(5, 5, 5, 0) 58%, color-mix(in srgb, var(--bg) 96%, transparent) 100%);
}

/* --- The pattern: diagonal hatching ---
   A 45° hatch at a 9px pitch, the way a section is filled in a drawing.
   The density is deliberately below that of the grid: a diagonal covers more
   area at the same interval, so 0.045 here weighs as much as 0.05 does for
   straight lines. The second layer is a sparse counter-hatch at 72px, which
   gives a shallow mesh only where the two cross. */
.lc-banner-hatch {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: var(--blend-soft, soft-light);
    background:
        repeating-linear-gradient(45deg, rgba(var(--ink), 0.045) 0px, rgba(var(--ink), 0.045) 1px, transparent 1px, transparent 9px),
        repeating-linear-gradient(-45deg, rgba(var(--ink), 0.03) 0px, rgba(var(--ink), 0.03) 1px, transparent 1px, transparent 72px);
}

.lc-banner-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: var(--blend-tint, overlay);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, rgba(255, 54, 54, 0) 30%);
}

.lc-frame {
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(var(--ink), 0.16);
    pointer-events: none;
}

.lc-frame span { position: absolute; background: var(--accent, #ff3636); }
.lc-frame .c-tl-h { top: -1px; left: -1px; width: 26px; height: 2px; }
.lc-frame .c-tl-v { top: -1px; left: -1px; width: 2px; height: 26px; }
.lc-frame .c-br-h { bottom: -1px; right: -1px; width: 26px; height: 2px; }
.lc-frame .c-br-v { bottom: -1px; right: -1px; width: 2px; height: 26px; }

/* The arrow keeps its class name — scriptLecturers.js does not touch it, but
   mainStyle.css and the other pages use the same name — while being a small
   technical caption at the bottom left rather than a centred bouncing
   chevron. */
.scroll-down-arrow {
    position: absolute;
    left: 6vw;
    bottom: 34px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    padding: 12px 0;
    transform: none;
    animation: none;
    color: var(--text, #f4f2ec);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.scroll-down-arrow span { position: relative; padding-bottom: 4px; }

.scroll-down-arrow span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--accent, #ff3636);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.scroll-down-arrow:hover { color: rgb(var(--ink)); transform: none; }
.scroll-down-arrow:hover span::after { transform: scaleX(1); }
.scroll-down-arrow.is-hidden { opacity: 0; pointer-events: none; }

.scroll-down-arrow svg {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: var(--accent, #ff3636);
    animation: lcNudge 2.6s ease-in-out infinite;
}

@keyframes lcNudge {
    0%, 62%, 100% { transform: translateY(0); }
    76%           { transform: translateY(6px); }
    88%           { transform: translateY(2px); }
}

/* ── The heading block ───────────────────────────────────── */
.lc-hero { position: relative; border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08)); }

.lc-hero-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 30px 6vw 26px;
}

.lc-topline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--ink), 0.14);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lc-wordmark {
    background: linear-gradient(100deg, var(--muted) 0%, var(--text) 42%, rgb(var(--ink)) 50%, var(--text) 58%, var(--muted) 100%) 0 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lcShimmer 14s ease-in-out infinite;
}

.lc-topline b {
    flex: none;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--accent, #ff3636);
    text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

@keyframes lcShimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
}

/* .page-header keeps its name, which mainStyle.css also uses, but here it is
   a left-aligned block rather than a centred title. */
.page-header { margin: 0; text-align: left; }

.lc-eyebrow,
.page-header .section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.lc-eyebrow::before,
.page-header .section-label::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--accent, #ff3636); }

.lc-title,
.page-header h2 {
    margin: 0 0 10px;
    max-width: 18ch;
    font-weight: 600;
    font-size: clamp(34px, 5vw, 62px);
    line-height: 1.06;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.lc-rule { display: block; width: 56px; height: 2px; background: var(--accent, #ff3636); }
.lc-title + .lc-rule,
.page-header h2 + .lc-rule { margin-bottom: 28px; }

.lc-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
    border-top: 1px solid rgba(var(--ink), 0.14);
}

.lc-meta > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.lc-meta b {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.lc-meta span { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── The filter rail ─────────────────────────────────────
   Sticky just below the fixed top bar, like the rail of days on Schedule: with
   twenty or more lecturers the filter has to be at hand rather than a scroll
   away. z-index 5 against the top bar's 20, so that the rail passes UNDER the
   navigation rather than over it.

   .filter-menu, .filter-btn and [data-filter] keep their names; the buttons
   are underline tabs now rather than pills with a background and a shadow —
   the same approach as .day-btn. */
.lc-rail {
    position: sticky;
    top: var(--lc-rail-top);
    z-index: 5;
    background: var(--bg, #050505);
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.lc-rail::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    height: 20px;
    background: var(--bg, #050505);
    pointer-events: none;
}

.lc-rail-inner {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 6vw;
}

.filter-menu {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
    max-width: none;
}

.filter-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 24px 16px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    box-shadow: none;
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.filter-btn:first-child { padding-left: 0; }
.filter-btn:last-child { border-right: 0; }

/* The number of lecturers in each category: without it, nobody knows whether
   a filter will show two people or twenty. */
.filter-btn i {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--text-faint);
    transition: color 0.25s ease;
}

.filter-btn:hover { color: var(--text, #f4f2ec); background: transparent; }

.filter-btn.active {
    background: transparent;
    box-shadow: none;
    color: rgb(var(--ink));
}

.filter-btn.active i { color: var(--accent, #ff3636); }

/* The rule under the active tab. Not a sliding indicator as on Schedule: the
   number of filters varies and on a phone the rail scrolls, so an ::after on
   the button itself is always right and needs no positions computed in
   JavaScript. */
.filter-btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent, #ff3636);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}

.filter-btn:first-child.active::after { left: 0; }

/* ── The count above the grid ────────────────────────────── */
.lc-count {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 26px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.lc-count b { color: var(--text, #f4f2ec); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── The lecturer grid ───────────────────────────────────
   Three equal cells of a visible grid: the hairlines are drawn from the edges
   of the cells rather than from gaps, so that the structure reads as a
   drawing. A subgrid aligns the portrait, the name and the biography row by
   row — without it every cell takes a different height and the grid falls
   apart.

   .speakers-grid and .speaker-card keep their names; the script reads
   .speaker-card and adds .hide. */
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid rgba(var(--ink), 0.14);
    border-left: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.speaker-card {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
    gap: 0;
    padding: 26px 26px 30px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    text-decoration: none;
    color: inherit;
    transition: background 0.32s ease;
}

/* Each card has four rows: portrait, name, role and organisation, and the
   body (the biography plus the link to the profile). The link sits INSIDE
   .lc-body for exactly that reason: only some lecturers have one, and the
   number of subgrid rows has to be the same for all of them. */
.lc-body { min-width: 0; }

.speaker-card:hover {
    transform: none;
    background: rgba(var(--ink), 0.014);
    box-shadow: none;
}

/* The accent rule along the top edge on hover — the same gesture as
   .fq-item, .at-row and .timeline-item. That is what ties the pages
   together. */
.speaker-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--accent, #ff3636);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.speaker-card:hover::after { transform: scaleX(1); }
.speaker-card.hide { display: none; }

/* The lecturer's index, top right, like the tier code on Attend. It gives the
   grid a count and a sense of scale. */
.lc-index {
    position: absolute;
    top: 26px;
    right: 26px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: #4d4a46;
    font-variant-numeric: tabular-nums;
}

/* The portrait is SQUARE and framed in hairlines with corner marks, rather
   than a round avatar: a circle would be the only rounded shape in the whole
   design and stands out. A square also shows more of the face. */
.avatar {
    position: relative;
    width: 100%;
    max-width: 168px;
    cursor: zoom-in;
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 0 0 20px;
    background: var(--surface);
    border: 1px solid var(--line, rgba(var(--ink), 0.08));
    border-radius: 0;
    overflow: hidden;
    display: block;
}

.avatar img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The portraits come from different sources and with different
       treatments; black and white brings them to one look. The colour returns
       on hover. */
    filter: grayscale(1) contrast(1.06);
    transition: filter 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.speaker-card:hover .avatar img {
    transform: scale(1.03);
    filter: grayscale(0) contrast(1.02);
}

/* The portrait is clickable in its own right — it opens the photograph large
   — while the whole card is an <a> to the profile. So the portrait has its OWN
   hover and focus state, to make clear that it is a separate target. */
.avatar:hover img { filter: grayscale(0) contrast(1.02); }
.avatar:hover::before,
.avatar:hover::after,
.avatar:focus-visible::before,
.avatar:focus-visible::after { width: 20px; height: 20px; }

.avatar::before,
.avatar::after { transition: width 0.28s ease, height 0.28s ease; }

/* The magnifier badge appears only on hover over the portrait, so that it
   does not compete with the index and the corner marks at rest. */
.lc-zoom {
    position: absolute;
    z-index: 3;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border: 1px solid rgba(var(--ink), 0.22);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.26s ease, transform 0.26s ease;
    pointer-events: none;
}

.lc-zoom svg { width: 15px; height: 15px; stroke: var(--accent, #ff3636); }

.avatar:hover .lc-zoom,
.avatar:focus-visible .lc-zoom { opacity: 1; transform: none; }

/* The registration marks on the portrait */
.avatar::before,
.avatar::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.avatar::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--accent, #ff3636);
    border-left: 2px solid var(--accent, #ff3636);
}

.avatar::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--accent, #ff3636);
    border-right: 2px solid var(--accent, #ff3636);
}

.speaker-card h4 {
    margin: 0 0 10px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.24;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
    text-wrap: pretty;
}

/* The role and the organisation are one block: as two separate lines with a
   gap between them they read as unrelated facts. */
.lc-ident {
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line, rgba(var(--ink), 0.08));
}

.speaker-card .role {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.speaker-card .org {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.speaker-card .bio {
    margin: 0;
    font-size: 14px;
    line-height: 1.62;
    color: var(--muted, #a7a39b);
    /* The biographies vary wildly in length; without a limit one card grows
       three times as tall as its neighbour and the grid falls apart. Eight
       lines are enough for the substance. */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The link to the profile appears only when ProfileUrl exists. The whole card
   is an <a> in that case, so this is a caption rather than a button inside a
   button. */
.lc-more {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.lc-more svg {
    width: 13px;
    height: 13px;
    flex: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.speaker-card:hover .lc-more svg { transform: translateX(4px); }

/* ── The portrait, shown large ───────────────────────────
   A square plate in the drawing language of the page: zero corner radius, a
   hairline frame, registration marks in the four corners. Here the photograph
   is in COLOUR and large — that is the whole point of opening it; the black
   and white in the grid serves uniformity, not looking.

   It is built by scriptLecturers.js on the first open, which is why there is
   no markup for it in the Razor page. */
.lc-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 6vw;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

/* The diagonal hatching of the banner returns here, much quieter: the plate
   sits on the same drawing rather than in an empty field. */
.lc-modal-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg, rgba(var(--ink), 0.022) 0px, rgba(var(--ink), 0.022) 1px, transparent 1px, transparent 9px);
}

.lc-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }

.lc-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(92vw, 540px);
    max-height: 90vh;
    background: var(--surface);
    border: 1px solid rgba(var(--ink), 0.16);
    border-radius: 0;
    overflow: hidden;
    transform: translateY(12px) scale(0.985);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease;
}

.lc-modal-backdrop.is-open .lc-modal { transform: none; opacity: 1; }

.lc-modal i.corner {
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.lc-modal i.tl { top: -1px; left: -1px; border-top: 2px solid var(--accent, #ff3636); border-left: 2px solid var(--accent, #ff3636); }
.lc-modal i.tr { top: -1px; right: -1px; border-top: 2px solid var(--accent, #ff3636); border-right: 2px solid var(--accent, #ff3636); }
.lc-modal i.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--accent, #ff3636); border-left: 2px solid var(--accent, #ff3636); }
.lc-modal i.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent, #ff3636); border-right: 2px solid var(--accent, #ff3636); }

/* A square image: the same proportion as the portrait in the grid, only
   large and in colour. */
.lc-modal-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* flex: 0 1 auto with min-height: 0 — the square is the PREFERRED
       proportion, but in a short window, or with a long name in the caption,
       it has to shrink rather than overflow the plate. The image is
       object-fit: cover, so shrinking only crops it. */
    flex: 0 1 auto;
    min-height: 0;
    background: var(--surface);
    overflow: hidden;
}

.lc-modal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.04);
}

/* The lecturer's index stays at the top left over the photograph — the same
   caption as in the grid, so that it is clear which card is open. */
.lc-modal-index {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    padding: 5px 9px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.lc-modal-close {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border: 1px solid rgba(var(--ink), 0.22);
    border-radius: 0;
    color: var(--text);
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.lc-modal-close svg { width: 17px; height: 17px; stroke: currentColor; }

.lc-modal-close:hover,
.lc-modal-close:focus-visible {
    background: rgb(var(--ink));
    border-color: rgb(var(--ink));
    color: var(--bg);
}

.lc-modal-body {
    flex: 0 0 auto;
    padding: 22px 24px 26px;
    border-top: 1px solid var(--line, rgba(var(--ink), 0.08));
    overflow-y: auto;
}

.lc-modal-body h3 {
    margin: 0 0 10px;
    font-family: "Oswald", Arial, sans-serif;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.22;
    letter-spacing: 0.015em;
    text-transform: uppercase;
    color: var(--text, #f4f2ec);
}

.lc-modal-role {
    margin: 0 0 4px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent, #ff3636);
}

.lc-modal-org {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.lc-modal-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--text, #f4f2ec);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.lc-modal-link svg { width: 13px; height: 13px; flex: none; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }

.lc-modal-link:hover,
.lc-modal-link:focus-visible {
    background: rgb(var(--ink));
    border-color: rgb(var(--ink));
    color: var(--bg);
    text-decoration: none;
}

.lc-modal-link:hover svg,
.lc-modal-link:focus-visible svg { transform: translateX(4px); }

/* The empty filter result */
.lc-empty {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 56px 0 10px;
}

.lc-empty.is-visible { display: flex; }
.lc-empty b { font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #ff3636); }
.lc-empty span { max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--text, #f4f2ec); }

@media (prefers-reduced-motion: reduce) {
    .lc-wordmark, .scroll-down-arrow svg { animation: none; }
    .speaker-card, .speaker-card::after, .avatar img, .lc-more svg { transition: none; }
    .lc-modal, .lc-modal-backdrop, .lc-zoom { transition: none; }
}

/* ── Tablet ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .speakers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
    .speakers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .avatar { max-width: 148px; }
}

@media (max-width: 980px) {
    .lc-banner img { max-height: 320px; }
}

/* ── Phone ───────────────────────────────────────────────── */
@media (max-width: 820px) {
    /* The top bar is shorter below 640px (see mainStyle.css); the script
       measures the real height and this is the fallback. */
    .lecturers-page { --lc-rail-top: 58px; }

    .lc-pad, .lc-hero-inner, .lc-rail-inner { padding-left: 22px; padding-right: 22px; }
    .scroll-down-arrow { left: 22px; bottom: 22px; }
    .lc-banner img { max-height: 230px; }
    .lc-frame { inset: 10px; }
    .lc-meta { grid-template-columns: 1fr; }
    .lc-meta > div { padding: 11px 0; }
    .lc-sec { padding: 36px 0 56px; }

    /* In one column the subgrid has nothing to align, and the four fixed
       rows fight the natural height. */
    .speakers-grid { grid-template-columns: minmax(0, 1fr); border-left: 0; }

    .speaker-card {
        grid-template-rows: none;
        grid-row: auto;
        padding: 26px 0 30px;
        border-right: 0;
    }

    /* The portrait moves beside the name instead of above it: a full-width
       square on a phone fills the screen before the first line of text. */
    .speaker-card h4 { font-size: 19px; }
    .avatar { max-width: 120px; margin-bottom: 18px; }
    .lc-index { top: 26px; right: 0; }
    .speaker-card .bio { -webkit-line-clamp: 10; }

    /* On a phone the plate fills almost the whole screen; the image stays
       square and the caption scrolls below it. */
    .lc-modal-backdrop { padding: 3vh 16px; }
    .lc-modal { width: 100%; max-height: 94vh; }
    .lc-modal-body { padding: 20px 18px 24px; }
    .lc-modal-body h3 { font-size: 20px; }

    /* The filter rail scrolls sideways: five categories do not fit in
       390px. */
    .lc-rail-inner { padding-left: 0; padding-right: 0; }

    .filter-menu {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .filter-menu::-webkit-scrollbar { display: none; }
    .filter-btn { padding: 15px 16px 13px; font-size: 12px; }
    .filter-btn:first-child { padding-left: 22px; }
    .filter-btn:last-child { padding-right: 22px; }
}