/**
 * PTST Course Archive — /course/
 *
 * Two-column layout: sticky sidebar filters + search/list area.
 * Each row is a clickable card with thumbnail, abbreviation,
 * accred + partner + next-date pills, and an options line.
 *
 * Loaded only on the course post-type archive (see inc/content-pages.php).
 *
 * Layout reuses the .ptst-content-page hero scrim so the catalogue header
 * matches every other content page.
 */

/* ── Hero ──────────────────────────────────────────────────────────────────
   The base .page-hero / .page-hero__bg / .page-hero__scrim layout already
   lives in ptst-content-pages.css. We add the archive-specific tuning here:
   a darker scrim (the catalogue is text-dense, the photo should recede),
   and stronger drop shadows on each text element so they pop against any
   busy region of the background photo. */
.ptst-course-archive .course-archive__hero {
    /* Fallback colour shown until the bg image finishes loading. */
    background-color: var(--brand-blue-deep, #08316B);
    color: #fff;
}
/* Darker scrim — mirrors the override we use on the single-course hero. */
.ptst-course-archive .course-archive__hero .page-hero__scrim {
    background: linear-gradient(105deg,
        rgba(11,27,51,0.92) 0%, rgba(11,27,51,0.78) 45%, rgba(11,27,51,0.55) 100%);
}
.ptst-course-archive .course-archive__hero .container {
    position: relative;
    z-index: 2;
    padding-top: 70px;
    padding-bottom: 64px;
}
.ptst-course-archive .course-archive__eyebrow {
    /* Inherit the page sans-serif (Inter) to stay consistent with the
       site-wide .eyebrow utility. The hero text in our other pages all
       uses Inter — switching this one to mono made it stand out. */
    display: inline-block;
    color: var(--brand-gold, #F2B500);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
}
.ptst-course-archive .course-archive__hero h1 {
    color: #fff;
    font-size: clamp(34px, 4.4vw, 50px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.022em;
    max-width: 24ch;
    margin: 0 0 14px;
    /* Layered shadow — close inner shadow for legibility, longer outer
       shadow for separation from the photo. Same recipe used on the
       single-course hero h1. */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.4);
}
.ptst-course-archive .course-archive__hero .lead {
    color: rgba(255, 255, 255, 0.94);
    font-size: 17px;
    line-height: 1.55;
    max-width: 62ch;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ── Breadcrumb (under the hero, matches single-class/single-course) ────── */
.ptst-course-archive .course-archive__crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-3);
    padding: 18px 0 6px;
}
.ptst-course-archive .course-archive__crumb a {
    color: var(--ink-3);
    text-decoration: none;
}
.ptst-course-archive .course-archive__crumb a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ptst-course-archive .course-archive__crumb-sep    { color: var(--ink-4, #889AB7); }
.ptst-course-archive .course-archive__crumb-current { color: var(--ink); }

/* ── Catalogue layout ───────────────────────────────────────────────────── */
.ptst-course-archive .course-archive__section { padding: 24px 0 80px; }
.ptst-course-archive .course-archive__layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 36px;
}
@media (max-width: 900px) {
    .ptst-course-archive .course-archive__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* ── Sidebar filters ────────────────────────────────────────────────────── */
.ptst-course-archive .course-archive__filters {
    align-self: start;
    position: sticky;
    top: 100px;
}
@media (max-width: 900px) {
    .ptst-course-archive .course-archive__filters {
        position: static;
    }
}
/* Collapsible filter section — each filter group lives inside a
   <details> so users can collapse the groups they don't need. The
   <summary> is the heading row; we use a CSS pseudo-element for
   the chevron + a rotation transform driven by [open]. */
.ptst-course-archive .course-archive__filter-section {
    margin-bottom: 18px;
}
.ptst-course-archive .course-archive__filter-section[open] {
    margin-bottom: 24px;
}
.ptst-course-archive .course-archive__filter-section > summary {
    list-style: none;          /* hide default disclosure triangle */
    cursor: pointer;
    user-select: none;
}
.ptst-course-archive .course-archive__filter-section > summary::-webkit-details-marker {
    display: none;
}

.ptst-course-archive .course-archive__filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 10px;
    padding: 6px 4px;
    border-radius: 6px;
    transition: background .12s, color .12s;
}
.ptst-course-archive .course-archive__filter-section > summary:hover .course-archive__filter-heading {
    background: var(--bg-soft, #F4F6FB);
    color: var(--ink-2, #2A3D5C);
}
/* Chevron — small caret that rotates 180° when the section opens. */
.ptst-course-archive .course-archive__filter-heading::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
    flex-shrink: 0;
    margin-right: 4px;
    opacity: 0.7;
}
.ptst-course-archive .course-archive__filter-section[open] > summary .course-archive__filter-heading::after {
    transform: rotate(-135deg);
    margin-top: 4px;
}

.ptst-course-archive .course-archive__filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ptst-course-archive .course-archive__filter-item {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: left;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    /* Long category names wrap to a second line instead of overflowing into
       the count; <button> would otherwise keep them on one line. */
    white-space: normal;
    line-height: 1.3;
    transition: background .12s, color .12s;
}
.ptst-course-archive .course-archive__filter-item:hover {
    background: var(--brand-blue-50, #EEF4FB);
    color: var(--brand-blue, #0E4A9C);
}
.ptst-course-archive .course-archive__filter-item.is-active {
    background: var(--brand-blue, #0E4A9C);
    color: #fff;
    font-weight: 600;
}
.ptst-course-archive .course-archive__filter-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
    flex-shrink: 0;
    /* Nudge the count down to sit on the label's first line now that the row
       is top-aligned for wrapping. */
    padding-top: 1px;
}
.ptst-course-archive .course-archive__filter-item.is-active .course-archive__filter-count {
    opacity: 0.85;
}

/* ── Search bar ─────────────────────────────────────────────────────────── */
.ptst-course-archive .course-archive__searchbar {
    position: relative;
    margin-bottom: 14px;
}
.ptst-course-archive .course-archive__search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--ink-3);
    pointer-events: none;
    stroke: currentColor;
    fill: none;
}
.ptst-course-archive .course-archive__search {
    width: 100%;
    font: inherit;
    font-size: 15px;
    padding: 13px 16px 13px 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    outline: none;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.ptst-course-archive .course-archive__search::placeholder { color: var(--ink-3); }
.ptst-course-archive .course-archive__search:focus {
    border-color: var(--brand-blue-500, #2E8FD0);
    box-shadow: 0 0 0 4px rgba(46, 143, 208, 0.25);
}

/* ── Meta row (count) ───────────────────────────────────────────────────── */
.ptst-course-archive .course-archive__meta {
    font-size: 13px;
    color: var(--ink-3);
    margin-bottom: 14px;
    padding: 0 4px;
}

/* ── Course list / rows ─────────────────────────────────────────────────── */
.ptst-course-archive .course-archive__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;                       /* hairline divider via parent bg */
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
}

/* Row anchor */
.ptst-course-archive .course-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.ptst-course-archive .course-row:hover {
    background: var(--brand-blue-50, #EEF4FB);
}
.ptst-course-archive .course-row[hidden] { display: none; }

/* Thumbnail */
.ptst-course-archive .course-row__thumb {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--brand-blue, #0E4A9C) 0%, var(--brand-blue-deep, #08316B) 100%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.ptst-course-archive .course-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder thumb (no featured image yet) — small icon centred over the
   accred-tinted gradient. Keeps the layout consistent without duplicating
   the abbreviation badge that already lives in the head row. */
.ptst-course-archive .course-row__thumb--placeholder {
    /* Subtle inner gradient overlay on top of the inline-styled background
       so even solid-colour brand tints get a hint of depth. */
    background-image: linear-gradient(160deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(0, 0, 0, 0.18) 100%);
    background-blend-mode: overlay;
}
.ptst-course-archive .course-row__thumb-icon {
    color: rgba(255, 255, 255, 0.55);
    stroke: currentColor;
    fill: none;
}

/* Body (right of thumb) */
.ptst-course-archive .course-row__body {
    min-width: 0;     /* prevents overflow when name wraps */
}
.ptst-course-archive .course-row__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-bottom: 6px;
}

/* Abbreviation badge — sits above the title in the head row */
.ptst-course-archive .course-row__abbr {
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--brand-blue-700, #08528F);
    background: var(--brand-blue-50, #EEF4FB);
    padding: 3px 8px;
    border-radius: 4px;
}

/* Pills — generic */
.ptst-course-archive .course-row__pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 999px;
    line-height: 1.4;
}
/* Accreditor + partner names are already stored in their preferred
   casing in term meta (e.g. "OPITO", "Samson Tiara"). Don't force
   uppercase — let the data drive the display. */
.ptst-course-archive .course-row__pill--accred,
.ptst-course-archive .course-row__pill--partner {
    text-transform: none;
}

/* Status row — date pill sits on its own line below the options. Keeps
   the identity row (abbrev + accred + partner) uncluttered. */
.ptst-course-archive .course-row__status {
    margin-top: 10px;
}

/* Next-class pill — solid status backgrounds with white text so the
   chip reads as a strong visual cue rather than a faint label. Mirrors
   the .status-pill convention used on the class hero. */
.ptst-course-archive .course-row__pill--date {
    text-transform: none;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
}
.ptst-course-archive .course-row__pill--state-open      { background: var(--success, #1F8A5B); }
.ptst-course-archive .course-row__pill--state-elearning { background: var(--success, #1F8A5B); }
.ptst-course-archive .course-row__pill--state-filling   { background: var(--warning, #D88E11); }
.ptst-course-archive .course-row__pill--state-full      { background: var(--danger,  #C0392B); }
.ptst-course-archive .course-row__pill--state-request   { background: var(--brand-blue-700, #08528F); }

/* Course name */
.ptst-course-archive .course-row__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
    margin: 0 0 6px;
    letter-spacing: -0.005em;
}

/* Options line — flex row of icon+label segments. The icon stands in
   for the dot-separator that used to live between segments. Each segment
   stays whole on its own line when the list wraps. */
.ptst-course-archive .course-row__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;       /* row-gap col-gap */
    font-size: 13px;
    color: var(--ink-3);
    line-height: 1.45;
}
.ptst-course-archive .course-row__opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    /* Allow the venue list (longest content) to wrap if it has to. */
    min-width: 0;
}
.ptst-course-archive .course-row__opt-icon {
    color: var(--brand-blue-500, #2E8FD0);
    font-size: 12px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
/* Long venue lists need to wrap rather than overflow. */
.ptst-course-archive .course-row__opt:first-child {
    white-space: normal;
}

/* Arrow chevron on the right */
.ptst-course-archive .course-row__arrow {
    color: var(--ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, transform .15s;
}
.ptst-course-archive .course-row:hover .course-row__arrow {
    color: var(--brand-blue, #0E4A9C);
    transform: translateX(2px);
}
.ptst-course-archive .course-row__arrow svg {
    stroke: currentColor;
    fill: none;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.ptst-course-archive .course-archive__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 28px 0 8px;
    flex-wrap: wrap;
}
.ptst-course-archive .course-archive__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-2, #2A3D5C);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.ptst-course-archive .course-archive__page:hover:not(.is-current):not(.is-disabled) {
    background: var(--brand-blue-50, #EEF4FB);
    color: var(--brand-blue, #0E4A9C);
}
.ptst-course-archive .course-archive__page.is-current {
    background: var(--brand-blue, #0E4A9C);
    color: #fff;
    cursor: default;
}
.ptst-course-archive .course-archive__page.is-disabled {
    color: var(--ink-4, #889AB7);
    cursor: not-allowed;
    opacity: 0.55;
}
.ptst-course-archive .course-archive__page--ellipsis {
    cursor: default;
    color: var(--ink-3);
}
.ptst-course-archive .course-archive__page--prev,
.ptst-course-archive .course-archive__page--next {
    padding: 0 8px;
}
.ptst-course-archive .course-archive__page svg {
    stroke: currentColor;
    fill: none;
}

/* ── Loading state ──────────────────────────────────────────────────────── */
/* Subtle fade on the list while a fetch is in flight — gives feedback
   without a heavy spinner that would jump the layout. */
.ptst-course-archive.is-loading .course-archive__list {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity .15s;
}
.ptst-course-archive.is-loading .course-archive__pagination,
.ptst-course-archive.is-loading .course-archive__meta {
    opacity: 0.55;
    transition: opacity .15s;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.ptst-course-archive .course-archive__empty {
    padding: 60px 40px;
    text-align: center;
    color: var(--ink-3);
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--bg-soft, #F4F6FB);
}
.ptst-course-archive .course-archive__empty p {
    margin: 0 0 16px;
    font-size: 15px;
}

/* ── Small-viewport tweaks ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ptst-course-archive .course-row {
        grid-template-columns: 72px 1fr;
        gap: 14px;
        padding: 14px 14px;
    }
    .ptst-course-archive .course-row__thumb {
        width: 72px; height: 72px;
    }
    /* Arrow drops on tiny screens — the row is already a clickable card. */
    .ptst-course-archive .course-row__arrow { display: none; }
    .ptst-course-archive .course-row__head {
        gap: 4px 6px;
    }
    .ptst-course-archive .course-row__options {
        font-size: 12px;
    }
}


/* ──────────────────────────────────────────────────────────────────────── *
 * TAXONOMY ARCHIVES                                                         *
 * /accrediting_body/{slug}/ and /delivery_partner/{slug}/                  *
 *                                                                          *
 * Same layout as /course/ below the hero, but the hero has a dual-colour   *
 * brand overlay layered over the photo, the term's display name as the    *
 * H1, the rich description as the lead, and the body/partner logo         *
 * vertically centred to the right of the text column.                     *
 * ──────────────────────────────────────────────────────────────────────── */

.ptst-tax-archive .tax-hero {
    background-color: var(--brand-blue-deep, #08316B);
    color: #fff;
    isolation: isolate;
}
.ptst-tax-archive .tax-hero .page-hero__scrim {
    /* Strong on the text side so the title + lead stay legible over bright
       hero photos, holding ~0.65 across the left ~45% where the text sits,
       then fading to ~0.32 on the right so the photo still reads.
       (Was 0.55→0.35→0.20, which washed out the text over light images.) */
    background: linear-gradient(105deg,
        rgba(11,27,51,0.85) 0%, rgba(11,27,51,0.65) 45%, rgba(11,27,51,0.32) 100%);
}
/* Brand overlay — a coloured tint that sits above the photo+scrim but
   BELOW the text container. We layer with normal alpha (no mix-blend
   tricks) so the text and logo render at full saturation on top.
   `isolate` on the .tax-hero parent keeps the blend math local. */
.ptst-tax-archive .tax-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.ptst-tax-archive .tax-hero .container {
    position: relative;
    z-index: 2;
    padding-top: 64px;
    padding-bottom: 64px;
}

/* Layout — text column + (optional) logo column, vertically centred. */
.ptst-tax-archive .tax-hero__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
}
.ptst-tax-archive .tax-hero__layout--has-logo {
    grid-template-columns: 1fr minmax(160px, 240px);
}
@media (max-width: 800px) {
    .ptst-tax-archive .tax-hero__layout--has-logo {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.ptst-tax-archive .tax-hero__eyebrow {
    display: inline-block;
    color: var(--brand-gold, #F2B500);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
}
.ptst-tax-archive .tax-hero__title {
    color: #fff;
    font-size: clamp(34px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.022em;
    margin: 0 0 18px;
    max-width: 22ch;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Rich description column — caps width so multi-paragraph content stays
   comfortable to read on wide screens. Tones the body copy slightly so it
   reads as a lead rather than competing with the H1. */
.ptst-tax-archive .tax-hero__rich-description {
    color: rgba(255, 255, 255, 0.93);
    font-size: 16px;
    line-height: 1.6;
    max-width: 62ch;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ptst-tax-archive .tax-hero__rich-description p {
    margin: 0 0 12px;
}
.ptst-tax-archive .tax-hero__rich-description p:last-child { margin-bottom: 0; }
.ptst-tax-archive .tax-hero__rich-description a {
    color: var(--brand-gold, #F2B500);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ptst-tax-archive .tax-hero__rich-description strong,
.ptst-tax-archive .tax-hero__rich-description b { color: #fff; }
.ptst-tax-archive .tax-hero__rich-description ul,
.ptst-tax-archive .tax-hero__rich-description ol {
    margin: 8px 0 12px;
    padding-left: 22px;
}
.ptst-tax-archive .tax-hero__rich-description li { margin: 4px 0; }

/* Logo column. Two flavours:
     - .tax-hero__logo--light → the term provided a light-on-dark logo;
       it sits naked on the dark hero (OPITO style).
     - .tax-hero__logo--dark  → the term only ships a dark-on-light logo;
       we wrap it in a soft white card so it reads on the dark hero
       (Aberdeen / Wild Geese style).
   PHP picks the modifier based on the term's `light_logo_needed` flag
   AND the actual logo we ended up using. */
.ptst-tax-archive .tax-hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ptst-tax-archive .tax-hero__logo img {
    max-width: 100%;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Light-on-dark logo — naked, drop-shadow for separation. */
.ptst-tax-archive .tax-hero__logo--light img {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

/* Dark-on-light logo — wrap in a soft white card. */
.ptst-tax-archive .tax-hero__logo--dark {
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    padding: 20px 24px;
    min-height: 160px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.ptst-tax-archive .tax-hero__logo--dark img {
    max-height: 120px;
}

@media (max-width: 800px) {
    .ptst-tax-archive .tax-hero__logo {
        justify-self: flex-start;
    }
    .ptst-tax-archive .tax-hero__logo img {
        max-height: 120px;
    }
    .ptst-tax-archive .tax-hero__logo--dark {
        min-height: 100px;
        padding: 16px 20px;
    }
    .ptst-tax-archive .tax-hero__logo--dark img {
        max-height: 88px;
    }
}