/* ---------------------------------------------------------------------
   1. LAYOUT CONTAINER
   --------------------------------------------------------------------- */
.hs-calendar-wrap {
    display: flex;
    gap: clamp(1.5rem, 2.5vw, 2.25rem);
    max-width: 1280px;
    margin: 0 auto;
    font-family: var(--pa-sans);
    color: var(--pa-ink);
    position: relative;
    overflow: visible !important;
}

/* Override any GeneratePress / GB ancestor overflow that kills sticky.
   #hs-browse-trainings reuses the same wrap class, so it gets the same
   treatment. */
#hs-training-calendar,
#hs-training-calendar .hs-calendar-wrap,
#hs-browse-trainings,
#hs-browse-trainings .hs-calendar-wrap {
    overflow: visible !important;
}

/* Browse trainings page — centred section head, mirrors the home upcoming
   calendar block. Only takes effect when the page is wrapped in pa-browse. */
.pa-browse .pa-section__head {
    margin-inline: auto;
    text-align: center;
}
.pa-browse .pa-section__head .pa-eyebrow    { justify-content: center; }
.pa-browse .pa-section__head .pa-section__intro {
    max-width: 56rem;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------
   2. SIDEBAR FILTERS  —  a sticky surface card
   --------------------------------------------------------------------- */
.hs-calendar-sidebar {
    width: 272px;
    min-width: 272px;
    flex-shrink: 0;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--pa-header-h, 92px) + 1rem);
    max-height: calc(100vh - var(--pa-header-h, 92px) - 2rem);
    overflow-y: auto;
    background: var(--pa-surface);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-soft);
    padding: 1.25rem;
}

.hs-calendar-sidebar .hs-search-box {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--pa-line-strong);
    border-radius: var(--pa-radius-sm);
    font-size: 14px;
    font-family: var(--pa-sans);
    color: var(--pa-ink);
    background: var(--pa-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2387849a' viewBox='0 0 24 24'%3E%3Cpath d='M21.71 20.29l-5.4-5.4A8 8 0 1 0 15 16.31l5.4 5.4a1 1 0 0 0 1.42-1.42ZM10 16a6 6 0 1 1 6-6 6 6 0 0 1-6 6Z'/%3E%3C/svg%3E") 12px center no-repeat;
    outline: none;
    transition: border-color .2s var(--pa-ease), box-shadow .2s var(--pa-ease);
}
.hs-calendar-sidebar .hs-search-box::placeholder { color: var(--pa-slate-soft); }
.hs-calendar-sidebar .hs-search-box:focus {
    border-color: var(--pa-indigo);
    box-shadow: 0 0 0 3px var(--pa-indigo-tint);
}

.hs-filter-group { border-bottom: 1px solid var(--pa-line); }
.hs-filter-group:last-child { border-bottom: none; }

.hs-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    background: transparent;
    border: none;
    font-family: var(--pa-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--pa-ink);
    cursor: pointer;
    transition: color .2s var(--pa-ease);
}
/* GeneratePress applies a dark hover/focus background AND a light text
   colour to <button> by default — the focused state lingers after click
   until blur, which left the toggle sitting on a gray slab (and, once
   the bg was nulled, made the text invisible because GP's focus colour
   was still white). Reset all theme button chrome on these states and
   pin the text colour back; keep the polished brass ring for keyboard
   focus only via :focus-visible. */
.hs-filter-toggle:hover,
.hs-filter-toggle:focus,
.hs-filter-toggle:active {
    background: transparent;
    box-shadow: none;
}
.hs-filter-toggle:focus,
.hs-filter-toggle:active { color: var(--pa-ink); }
.hs-filter-toggle:focus { outline: none; }
.hs-filter-toggle:hover { color: var(--pa-indigo); }
.hs-filter-toggle:focus-visible {
    outline: 2px solid var(--pa-brass);
    outline-offset: 2px;
}

.hs-filter-toggle svg {
    width: 15px;
    height: 15px;
    color: var(--pa-brass-deep);
    transition: transform .25s var(--pa-ease);
}
.hs-filter-toggle.is-open svg { transform: rotate(180deg); }

.hs-filter-options {
    display: none;
    padding-bottom: 12px;
    max-height: 220px;
    overflow-y: auto;
}
.hs-filter-options.is-open { display: block; }

.hs-filter-options label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--pa-slate);
    cursor: pointer;
    transition: color .15s var(--pa-ease);
}
.hs-filter-options label:hover { color: var(--pa-ink); }

.hs-filter-options input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--pa-indigo);
    flex-shrink: 0;
}

.hs-filter-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--pa-slate-soft);
}

/* Reset — kept red (deliberate "clear filters" affordance), polished radius */
.hs-reset-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    background: var(--pa-danger);
    color: #fff;
    border: none;
    border-radius: var(--pa-radius-sm);
    font-family: var(--pa-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s var(--pa-ease),
                transform .2s var(--pa-ease),
                box-shadow .2s var(--pa-ease);
}
.hs-reset-btn:hover {
    background: #a5301f;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -14px rgba(192,57,43,.9);
}
.hs-reset-btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------------
   3. MAIN CONTENT
   --------------------------------------------------------------------- */
.hs-calendar-main {
    flex: 1;
    min-width: 0;
}

/* Sort / Controls Bar */
.hs-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.hs-controls-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hs-results-count {
    font-size: 13px;
    color: var(--pa-slate-soft);
}

.hs-download-btn,
.hs-view-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--pa-line-strong);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface);
    cursor: pointer;
    color: var(--pa-slate);
    padding: 0;
    line-height: 1;
    transition: color .2s var(--pa-ease),
                border-color .2s var(--pa-ease),
                transform .2s var(--pa-ease),
                box-shadow .2s var(--pa-ease);
}

.hs-download-btn svg,
.hs-view-toggle-btn svg {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    min-height: 16px;
    stroke: currentColor;
    fill: none;
    visibility: visible !important;
    opacity: 1 !important;
}

.hs-view-toggle-btn .hs-icon-hidden { display: none !important; }

.hs-download-btn:hover,
.hs-view-toggle-btn:hover {
    color: var(--pa-indigo);
    border-color: var(--pa-indigo);
    transform: translateY(-1px);
    box-shadow: var(--pa-shadow-soft);
}
.hs-download-btn:active,
.hs-view-toggle-btn:active { transform: translateY(0); }

.hs-sort-select {
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--pa-line-strong);
    border-radius: var(--pa-radius-sm);
    font-family: var(--pa-sans);
    font-size: 14px;
    color: var(--pa-ink);
    background: var(--pa-surface);
    cursor: pointer;
    appearance: auto;
    transition: border-color .2s var(--pa-ease);
}
.hs-sort-select:hover { border-color: var(--pa-indigo); }

/* ---------------------------------------------------------------------
   4. TABLE  —  inside a rounded surface card
   --------------------------------------------------------------------- */
#hs-cal-table-wrap,
#hs-browse-table-wrap {
    background: var(--pa-surface);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-soft);
    overflow: hidden;
}

.hs-calendar-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--pa-surface);
    table-layout: fixed;
}

.hs-calendar-table thead th {
    padding: 13px 18px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: var(--pa-slate-soft);
    text-transform: uppercase;
    letter-spacing: .09em;
    background: var(--pa-paper);
    border-bottom: 1px solid var(--pa-line-strong);
    white-space: nowrap;
}

/* Fixed column widths — Training gets the room, rest share */
.hs-calendar-table colgroup .hs-col-w-training { width: 50%; }
.hs-calendar-table colgroup .hs-col-w-date     { width: 17%; }
.hs-calendar-table colgroup .hs-col-w-location { width: 16%; }
.hs-calendar-table colgroup .hs-col-w-venue    { width: 17%; }

/* Browse-trainings: 2-column layout */
.hs-calendar-table colgroup .hs-col-w-browse-training { width: 65%; }
.hs-calendar-table colgroup .hs-col-w-browse-category { width: 35%; }

.hs-calendar-table tbody tr {
    border-bottom: 1px solid var(--pa-line);
    transition: background-color .18s var(--pa-ease);
}
.hs-calendar-table tbody tr:last-child { border-bottom: none; }
.hs-calendar-table tbody tr:hover { background: var(--pa-indigo-tint); }

.hs-calendar-table tbody td {
    padding: 15px 18px;
    font-size: 14px;
    color: var(--pa-slate);
    vertical-align: top;
}

/* Brass edge-accent slides in on row hover */
.hs-calendar-table tbody td:first-child {
    box-shadow: inset 3px 0 0 transparent;
    transition: box-shadow .18s var(--pa-ease);
}
.hs-calendar-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--pa-brass);
}

/* Training name column */
.hs-calendar-table .hs-col-training {
    font-weight: 600;
    color: var(--pa-ink);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.hs-calendar-table .hs-col-training a {
    color: var(--pa-ink);
    text-decoration: none;
    transition: color .2s var(--pa-ease);
}
.hs-calendar-table .hs-col-training a:hover { color: var(--pa-indigo); }

/* Unlinked training name */
.hs-training-name-text {
    font-weight: 600;
    color: var(--pa-ink);
}

/* Sub-rows within cells for multiple events */
.hs-event-line {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 14px;
    line-height: 1.5;
}
.hs-event-line:first-child { padding-top: 0; }
.hs-event-line:last-child  { padding-bottom: 0; }
.hs-event-line + .hs-event-line { border-top: 1px dashed var(--pa-line); }

.hs-event-line .hs-line-icon,
.hs-card-detail .hs-line-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--pa-slate-soft);
}

/* Training badges — colours stay inline (data-driven from the CMS) */
.hs-training-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
.hs-training-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--pa-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    line-height: 1.5;
    border-width: 1.5px;
    border-style: solid;
    white-space: nowrap;
}

/* Online badge */
.hs-badge-online {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px;
    background: var(--pa-indigo-tint);
    color: var(--pa-indigo);
    border-radius: var(--pa-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   5. PAGINATION
   --------------------------------------------------------------------- */
.hs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 24px;
    padding: 16px 0;
}

.hs-pagination button {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--pa-line-strong);
    border-radius: var(--pa-radius-sm);
    background: var(--pa-surface);
    font-family: var(--pa-sans);
    font-size: 14px;
    color: var(--pa-slate);
    cursor: pointer;
    transition: color .2s var(--pa-ease),
                border-color .2s var(--pa-ease),
                background-color .2s var(--pa-ease),
                transform .2s var(--pa-ease);
}
.hs-pagination button:hover:not(:disabled):not(.is-active) {
    color: var(--pa-indigo);
    border-color: var(--pa-indigo);
    transform: translateY(-1px);
}
.hs-pagination button.is-active {
    background: var(--pa-indigo);
    color: #fff;
    border-color: var(--pa-indigo);
}
.hs-pagination button:disabled {
    opacity: .4;
    cursor: default;
}
.hs-pagination .hs-page-ellipsis {
    padding: 0 4px;
    color: var(--pa-slate-soft);
}

/* ---------------------------------------------------------------------
   6. LOADING & EMPTY STATES
   --------------------------------------------------------------------- */
.hs-loading {
    text-align: center;
    padding: 48px 16px;
    color: var(--pa-slate);
    font-size: 15px;
}
.hs-loading .hs-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--pa-line);
    border-top-color: var(--pa-indigo);
    border-radius: 50%;
    animation: hs-spin .6s linear infinite;
    margin-bottom: 12px;
}
@keyframes hs-spin { to { transform: rotate(360deg); } }

.hs-empty-state {
    text-align: center;
    padding: 48px 16px;
    color: var(--pa-slate);
}
.hs-empty-state p { font-size: 15px; margin: 0; }

.hs-retry-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 9px 22px;
    font-family: var(--pa-sans);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--pa-indigo);
    border: none;
    border-radius: var(--pa-radius-sm);
    cursor: pointer;
    transition: background-color .2s var(--pa-ease),
                transform .2s var(--pa-ease),
                box-shadow .2s var(--pa-ease);
}
.hs-retry-btn:hover {
    background: var(--pa-indigo-deep);
    transform: translateY(-1px);
    box-shadow: var(--pa-shadow-soft);
}
.hs-retry-btn:active { transform: translateY(0); }

/* ---------------------------------------------------------------------
   7. CARD VIEW
   --------------------------------------------------------------------- */
.hs-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.hs-card {
    background: var(--pa-surface);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-soft);
    padding: 22px;
    transition: transform .3s var(--pa-ease), box-shadow .3s var(--pa-ease);
}
.hs-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pa-shadow-card);
}

.hs-card-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pa-line);
}
.hs-card-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--pa-ink);
    text-decoration: none;
    line-height: 1.4;
    transition: color .2s var(--pa-ease);
}
a.hs-card-title:hover { color: var(--pa-indigo); }
.hs-card-header .hs-training-badges { margin-top: 8px; }

.hs-card-events {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hs-card-event {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}
.hs-card-event + .hs-card-event { border-top: 1px dashed var(--pa-line); }

.hs-card-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--pa-slate);
}

/* ---------------------------------------------------------------------
   8. ENTRANCE MICRO-INTERACTION
   Rows / cards are freshly inserted by training-calendar.js on every
   fetch, so this CSS animation re-runs as feedback that results updated.
   `backwards` fill holds the start frame through the stagger delay and
   then releases the element, so the card-hover transform still works.
   --------------------------------------------------------------------- */
@keyframes hs-cal-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hs-calendar-table tbody tr,
.hs-card {
    animation: hs-cal-rise .45s var(--pa-ease) backwards;
}

.hs-calendar-table tbody tr:nth-child(1), .hs-card:nth-child(1) { animation-delay: 0s; }
.hs-calendar-table tbody tr:nth-child(2), .hs-card:nth-child(2) { animation-delay: .045s; }
.hs-calendar-table tbody tr:nth-child(3), .hs-card:nth-child(3) { animation-delay: .09s; }
.hs-calendar-table tbody tr:nth-child(4), .hs-card:nth-child(4) { animation-delay: .135s; }
.hs-calendar-table tbody tr:nth-child(5), .hs-card:nth-child(5) { animation-delay: .18s; }
.hs-calendar-table tbody tr:nth-child(6), .hs-card:nth-child(6) { animation-delay: .225s; }
.hs-calendar-table tbody tr:nth-child(7), .hs-card:nth-child(7) { animation-delay: .27s; }
.hs-calendar-table tbody tr:nth-child(8), .hs-card:nth-child(8) { animation-delay: .315s; }

/* ---------------------------------------------------------------------
   9. MOBILE TOP BAR  (Filter + Reset)
   --------------------------------------------------------------------- */
.hs-mobile-top-bar {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.hs-mobile-filter-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--pa-indigo);
    color: #fff;
    border: none;
    border-radius: var(--pa-radius-sm);
    font-family: var(--pa-sans);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s var(--pa-ease);
}
.hs-mobile-filter-btn:hover { background: var(--pa-indigo-deep); }
.hs-mobile-filter-btn svg { width: 16px; height: 16px; }

.hs-mobile-reset-btn {
    display: none;
    padding: 9px 16px;
    background: var(--pa-danger);
    color: #fff;
    border: none;
    border-radius: var(--pa-radius-sm);
    font-family: var(--pa-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s var(--pa-ease);
}
.hs-mobile-reset-btn:hover { background: #a5301f; }

/* Mobile combined date+location separator */
.hs-mobile-separator {
    margin: 0 4px;
    color: var(--pa-slate-soft);
    font-weight: 700;
}
.hs-event-line-combined { flex-wrap: wrap; }

.hs-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 26, 44, .5);
    /* Sits below the sidebar (9999) but above GP's sticky-navigation, so
       the dim backdrop covers the page while the panel itself stays
       interactive. Overlay above the panel would intercept every click
       and trigger closeMobileFilters() — the symptom of the previous
       bug. */
    z-index: 9998;
}

.hs-sidebar-close {
    display: none;
    position: absolute;
    /* Clear the iOS notch / status-bar area when the panel covers it. */
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--pa-slate);
    cursor: pointer;
    line-height: 1;
    transition: color .15s var(--pa-ease);
}
.hs-sidebar-close:hover { color: var(--pa-indigo); }

/* ---------------------------------------------------------------------
   10. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hs-calendar-wrap { flex-direction: column; }

    .hs-mobile-top-bar    { display: flex; }
    .hs-mobile-filter-btn { display: inline-flex; }
    .hs-mobile-reset-btn  { display: inline-block; }

    /* Sidebar becomes an off-canvas panel.
       z-index sits above GP's sticky-navigation so the panel covers the
       header instead of tucking behind it. 100dvh tracks the visible
       viewport as the mobile browser chrome shows/hides, so the bottom
       no longer slides under the URL bar; safe-area padding clears the
       notch at top and the home indicator at bottom. */
    .hs-calendar-sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        background: var(--pa-surface);
        border: none;
        border-radius: 0;
        z-index: 9999;
        padding: 16px;
        padding-top: calc(65px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 4px 0 32px rgba(28, 26, 44, .22);
    }
    .hs-calendar-sidebar.is-open { display: block; }
    .hs-sidebar-close { display: block; }
    .hs-sidebar-overlay.is-open { display: block; }

    /* Stack table on mobile — reset fixed layout */
    .hs-calendar-table { table-layout: auto; }
    .hs-calendar-table colgroup { display: none; }
    .hs-calendar-table thead { display: none; }

    .hs-calendar-table tbody tr {
        display: block;
        padding: 14px 0;
    }
    .hs-calendar-table tbody td {
        display: block;
        padding: 4px 16px;
        width: 100% !important;
    }
    .hs-calendar-table tbody td:first-child { box-shadow: none; }
    .hs-calendar-table tbody tr:hover { background: transparent; }
    .hs-calendar-table tbody tr:hover td:first-child { box-shadow: none; }

    .hs-calendar-table tbody td:before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--pa-slate-soft);
        margin-bottom: 2px;
    }

    .hs-calendar-table .hs-col-training { font-size: 15px; }

    .hs-card-grid { grid-template-columns: 1fr; }

    .hs-controls-bar { flex-wrap: wrap; gap: 8px; }
}

/* ---------------------------------------------------------------------
   11. MOTION PREFERENCES
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #hs-training-calendar *,
    #hs-training-calendar *::before,
    #hs-training-calendar *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}