/*-- schedule stylesheet (for schedule.qmd only) --*/

/* Outer wrapper: two days side by side, stacking to one column on narrow screens */
.conf-calendar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5em;
    width: min(100%, 760px);
    margin: 2em auto;
}

/* A single day column */
.conf-day {
    break-inside: avoid;
}

/* Day heading (Friday / Saturday) */
.conf-day h3 {
    margin: 0 0 0.75em 0;
    padding-bottom: 0.35em;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid currentColor;
}

/*
 * Each day is a table: time in the left column (<th scope="row">),
 * the event in the right column (<td>). Fixed table layout keeps the
 * two time gutters aligned within a day and prevents the event column
 * from stretching the time column.
 *
 * .conf-slots still carries the Bootstrap `table` class and its rows carry
 * odd/even classes, so we force a transparent cell background and a
 * grey separator to override any Bootstrap table theming and
 * adapt cleanly to the @media (prefers-color-scheme: dark) colors from
 * custom.scss.
 */
.conf-slots {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.conf-slots th,
.conf-slots td {
    background-color: transparent;
    border-color: rgba(128, 128, 128, 0.35);
}

/*
 * Time column heading / cell.
 *
 * A percentage width (not a fixed em) keeps the two-column ratio sane at
 * every viewport and lets the table auto-layout hand the remaining space to
 * the event column. white-space: normal + overflow-wrap: anywhere let an
 * unusually long time range wrap inside its own cell instead of overflowing
 * rightward into the event column -- the cause of the "event overwrites time"
 * collision on narrow windows.
 */
.conf-slots th {
    text-align: left;
    font-weight: normal;
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: top;
    width: 40%;
    padding: 0.55em 0.75em 0.55em 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}

/*
 * Event cell. Left padding gives a visible gutter so the event text never
 * starts at the same x-position as the time text (two distinct columns);
 * overflow-wrap keeps a long event title inside its own column.
 */
.conf-slots td {
    vertical-align: top;
    padding: 0.55em 0 0.55em 0.75em;
    overflow-wrap: anywhere;
    border-bottom: 1px solid rgba(128, 128, 128, 0.35);
}

/* Last row flush */
.conf-slots tr:last-child th,
.conf-slots tr:last-child td {
    border-bottom: none;
}

/*
 * Responsive: stack the two days into one column. Each day then gets the
 * full page width, so a 40% time column is already generous -- shrinking it
 * further (the old 6.5em override) is what caused the mobile column collision,
 * so no conf-slots width override is applied here.
 */
@media (max-width: 600px) {
    .conf-calendar {
        grid-template-columns: 1fr;
        gap: 1.5em;
        width: 100%;
    }
}