/* Speakers list table — the global directory at /conference/speakers and the
   edition list at /programme/speakers.

   Project root convention: html { font-size: 6.25% } → 1rem = 1px, so every
   rem value below is the desired pixel value itself. Borders / avatar sizes
   stay in px (equivalent here). */

.speakers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15rem;
}
.speakers-table thead th {
    text-align: left;
    border-bottom: 2px solid #333;
    padding: 10rem 8rem;
    background: #f8f8f8;
}
.speakers-table th.sortable {
    cursor: pointer;
    user-select: none;
}
.speakers-table th.sortable::after {
    content: " ↕";
    color: #999;
    font-size: 0.8em;
}
.speakers-table th.sortable[aria-sort="ascending"]::after  { content: " ↑"; color: #333; }
.speakers-table th.sortable[aria-sort="descending"]::after { content: " ↓"; color: #333; }
.speakers-table tbody tr {
    border-bottom: 1px solid #eee;
}
.speakers-table tbody tr:hover {
    background: #fafafa;
}
.speakers-table td {
    padding: 8rem;
    vertical-align: middle;
}
/* Mobile: collapse the table into a 2-column card grid (photo | text).
   `em` query respects the browser font-size, independent of the 6.25% root.
   37.5em ≈ 600px. */
@media (max-width: 37.5em) {
    .speakers-table thead { display: none; }
    .speakers-table tr {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 3rem 10rem;
        padding: 11rem 0;
        align-items: start;
    }
    .speakers-table td { display: block; padding: 0; border: 0; }
    .speakers-table td[data-cell="surname"]     { font-weight: 700; font-size: 17rem; grid-column: 2; }
    .speakers-table td[data-cell="first_name"]  { grid-column: 2; font-size: 15rem; color: #444; margin-top: -3rem; }
    .speakers-table td[data-cell="institution"] { grid-column: 2; color: #666; font-size: 14rem; }
    .speakers-table td[data-cell="country"]     { grid-column: 2; color: #999; font-size: 14rem; }
}

.speaker-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}
.speaker-link:hover { text-decoration: underline; }

/* Sessions column — comma-separated session-code links. Rendered only on the
   edition list (/programme/speakers); the global directory omits the column. */
.speakers-table td[data-cell="sessions"] {
    font-size: 14rem;
    color: #555;
    white-space: nowrap;
}
.speakers-table td[data-cell="sessions"] .speaker-session-code {
    color: #234a8a;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}
.speakers-table td[data-cell="sessions"] .speaker-session-code:hover {
    text-decoration: underline;
}
.speakers-table td[data-cell="sessions"] .speaker-session-code:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
@media (max-width: 37.5em) {
    .speakers-table td[data-cell="sessions"] { grid-column: 2; font-size: 13rem; white-space: normal; }
}

/* Photo column — narrow, no header label. */
.speakers-table__photo-col  { width: 56px; }
.speakers-table__photo-cell { padding: 5rem 6rem; }
.speakers-table__photo-cell img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
@media (max-width: 37.5em) {
    .speakers-table__photo-cell { grid-row: 1 / span 5; }
    .speakers-table__photo-cell img { width: 44px; height: 44px; }
}

/* Edition list (/programme/speakers): larger round portraits than the
   compact global data-store table. Scoped via the page wrapper so the global
   /conference/speakers table stays small. */
[data-comp="speakers-current"] .speakers-table__photo-col      { width: 116px; }
[data-comp="speakers-current"] .speakers-table__photo-cell img { width: 100px; height: 100px; }
@media (max-width: 37.5em) {
    /* Keep the compact avatar on mobile so it fits the reflowed 48px column. */
    [data-comp="speakers-current"] .speakers-table__photo-cell img { width: 44px; height: 44px; }
}

.speakers-empty {
    text-align: center;
    color: #999;
    padding: 32rem;
}