/**
 * PTST Schedule Page — /training-schedule/
 *
 * Hero + view toggle + filter tabs + design-system list rows + embedded
 * calendar (FullCalendar via the [training_calendar] shortcode, which
 * already has its own ptst-training-calendar-css bundle).
 */

/* ── Breadcrumb (matches other content pages) ────────────────────────── */
.ptst-schedule .schedule__crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
    padding: 18px 0 6px;
}
.ptst-schedule .schedule__crumb a {
    color: var(--ink-3);
    text-decoration: none;
}
.ptst-schedule .schedule__crumb a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ptst-schedule .schedule__crumb-sep    { color: var(--ink-4, #889AB7); }
.ptst-schedule .schedule__crumb-current { color: var(--ink); }

/* ── Chrome row (view toggle + filter tabs) ─────────────────────────── */
/* Override the .section helper's 80px top/bottom padding so the chrome
   sits tight under the breadcrumb. Same for the view panels below — we
   want the three blocks (chrome, list, calendar) to read as one unit,
   not as three distinct sections with big air between them.
   NOTE: we set view-panel padding here too (not in the .schedule-view
   block below) because .section.schedule-view has higher specificity
   than .schedule-view alone and would otherwise win. */
.ptst-schedule .section.schedule__chrome {
    padding-top: 12px;
    padding-bottom: 0;
}
.ptst-schedule .section.schedule-view {
    padding-top: 32px;
    padding-bottom: 80px;
}
.ptst-schedule .schedule__chrome-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0;     /* tabs sit on the border */
}

/* View toggle pill — two buttons sharing one pill */
.ptst-schedule .schedule__view-toggle {
    display: inline-flex;
    background: var(--bg-soft, #F4F6FB);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    align-self: flex-start;
}
.ptst-schedule .schedule__view-btn {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    transition: background .15s, color .15s, box-shadow .15s;
}
.ptst-schedule .schedule__view-btn svg {
    stroke: currentColor;
    fill: none;
    display: block;
}
.ptst-schedule .schedule__view-btn:hover:not(.is-active) {
    color: var(--brand-blue, #0E4A9C);
}
.ptst-schedule .schedule__view-btn.is-active {
    background: #fff;
    color: var(--brand-blue, #0E4A9C);
    box-shadow: var(--shadow-sm);
}

/* Filter tabs — underline-on-active style, like the design system */
.ptst-schedule .schedule__filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Sit on the chrome-row border-bottom so the active underline aligns */
    margin-bottom: -1px;
}
.ptst-schedule .schedule__filter-tab {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-3);
    border-bottom: 3px solid transparent;
    transition: color .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ptst-schedule .schedule__filter-tab:hover {
    color: var(--brand-blue, #0E4A9C);
}
.ptst-schedule .schedule__filter-tab.is-active {
    color: var(--brand-blue, #0E4A9C);
    font-weight: 700;
    border-bottom-color: var(--brand-gold, #F5A823);
}
.ptst-schedule .schedule__filter-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-4, #889AB7);
    background: var(--bg-soft, #F4F6FB);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.ptst-schedule .schedule__filter-tab.is-active .schedule__filter-count {
    color: var(--brand-blue, #0E4A9C);
    background: var(--brand-blue-50, #EEF4FB);
}

/* ── View panels ─────────────────────────────────────────────────────── */
/* (Padding handled above on .section.schedule-view to beat specificity.) */
.ptst-schedule .schedule-view[hidden] { display: none; }

/* ── List view ───────────────────────────────────────────────────────── */
.ptst-schedule .schedule__month-group {
    margin-bottom: 40px;
}
.ptst-schedule .schedule__month-group[hidden] { display: none; }
.ptst-schedule .schedule__month-heading {
    color: var(--brand-blue, #0E4A9C);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.012em;
}

.ptst-schedule .schedule__rows {
    display: flex;
    flex-direction: column;
    background: var(--line);     /* hairline divider colour */
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    gap: 1px;                    /* the gap shows the bg through */
}

.ptst-schedule .schedule-row {
    display: grid;
    grid-template-columns: 86px 1fr 130px 90px;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}
.ptst-schedule .schedule-row:hover {
    background: var(--brand-blue-50, #EEF4FB);
}
.ptst-schedule .schedule-row[hidden] { display: none; }

/* Date block */
.ptst-schedule .schedule-row__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--brand-blue-50, #EEF4FB);
    color: var(--brand-blue, #0E4A9C);
    padding: 10px 8px;
    border-radius: 10px;
    line-height: 1;
}
.ptst-schedule .schedule-row__d {
    font-size: 22px;
    font-weight: 800;
}
.ptst-schedule .schedule-row__m {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* Main content */
.ptst-schedule .schedule-row__main {
    min-width: 0;     /* prevents overflow when title wraps */
}
.ptst-schedule .schedule-row__code {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-blue-700, #08528F);
    background: var(--brand-blue-50, #EEF4FB);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}
.ptst-schedule .schedule-row__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 6px 0 4px;
    letter-spacing: -0.005em;
}
.ptst-schedule .schedule-row__meta {
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.4;
}
.ptst-schedule .schedule-row__sep {
    color: var(--ink-4, #889AB7);
    margin: 0 6px;
}

/* Status chip column */
.ptst-schedule .schedule-row__chip {
    display: flex;
    justify-content: flex-end;
}
.ptst-schedule .chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.ptst-schedule .chip--green { background: var(--success, #1F8A5B); color: #fff; }
.ptst-schedule .chip--gold  { background: var(--warning, #D88E11); color: #fff; }
.ptst-schedule .chip--red   { background: var(--danger,  #C0392B); color: #fff; }

/* CTA column */
.ptst-schedule .schedule-row__cta {
    text-align: right;
    color: var(--brand-blue, #0E4A9C);
    font-weight: 700;
    font-size: 13px;
    transition: transform .12s;
}
.ptst-schedule .schedule-row:hover .schedule-row__cta {
    transform: translateX(2px);
}

/* Empty state */
.ptst-schedule .schedule-empty {
    padding: 56px 32px;
    text-align: center;
    color: var(--ink-3);
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--bg-soft, #F4F6FB);
}
.ptst-schedule .schedule-empty p { margin: 0; font-size: 15px; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ptst-schedule .schedule__chrome-row {
        align-items: stretch;
    }
    .ptst-schedule .schedule__view-toggle {
        align-self: center;
    }
    /* Filter tabs scroll horizontally on narrow viewports rather than
       wrapping into 3+ rows. */
    .ptst-schedule .schedule__filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px -1px;
        padding: 0 16px;
    }
    .ptst-schedule .schedule__filter-tab {
        flex-shrink: 0;
        padding: 12px 14px;
    }
}

@media (max-width: 640px) {
    .ptst-schedule .schedule-row {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "date main"
            "date chip"
            "date cta";
        row-gap: 8px;
        padding: 14px;
    }
    .ptst-schedule .schedule-row__date {
        grid-area: date;
        align-self: start;
        padding: 8px 6px;
    }
    .ptst-schedule .schedule-row__d { font-size: 18px; }
    .ptst-schedule .schedule-row__main { grid-area: main; }
    .ptst-schedule .schedule-row__chip {
        grid-area: chip;
        justify-content: flex-start;
    }
    .ptst-schedule .schedule-row__cta {
        grid-area: cta;
        text-align: left;
    }
    .ptst-schedule .schedule-row__title { font-size: 15px; }
}