/* =============================================================================
   ALPHA EDUCATION - Course listing page
   Page-specific layer for resources/views/cras/program.blade.php only.
   Loaded after assets/css/alpha-theme.css, which owns every token and the
   canonical .a-course-card. Nothing here restyles a shared component and no
   colour is hardcoded: every value resolves to an alpha-theme.css token.
   Reference: DESIGN.md sections 3 to 8.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PAGE HEADER BAND
   -------------------------------------------------------------------------- */
.a-cl-head {
    padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px);
    background: var(--a-white);
    border-bottom: 1px solid var(--a-line);
}
.a-cl-head__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 384px);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
}
.a-cl-head .a-sec-head { margin-bottom: 0; }
.a-cl-search { display: flex; flex-direction: column; gap: var(--a-2); }
.a-cl-search__row { display: flex; gap: var(--a-2); }
.a-cl-search__row .a-input { flex: 1; min-width: 0; }

@media (max-width: 991px) {
    .a-cl-head__inner { grid-template-columns: minmax(0, 1fr); }
    .a-cl-search { max-width: 520px; }
}

/* -----------------------------------------------------------------------------
   2. LAYOUT: filter rail plus results
   -------------------------------------------------------------------------- */
/* Columns stretch to the row height on purpose: the rail is sticky and needs
   a full height track to travel along. */
.a-cl-layout {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: stretch;
}

/* The filter rail is a scripted control. Without script the full, server
   ordered catalogue is shown and only the search field is offered, so the
   grid takes the whole width. */
.no-js .a-cl-jsonly { display: none !important; }
.no-js .a-cl-layout,
.a-cl-layout--full { grid-template-columns: minmax(0, 1fr); }

/* -----------------------------------------------------------------------------
   3. FILTER RAIL
   -------------------------------------------------------------------------- */
.a-cl-filters {
    position: sticky;
    top: 104px;
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius-lg);
    padding: var(--a-5);
}
.a-cl-filters__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-3);
    padding-bottom: var(--a-3);
    border-bottom: 1px solid var(--a-line-soft);
}
.a-cl-filters__title {
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-h4); font-weight: 600; color: var(--a-navy);
    margin: 0;
}
.a-cl-reset {
    background: none; border: none; padding: 0;
    font-family: var(--a-font-ui); font-size: var(--a-fs-xs); font-weight: 600;
    color: var(--a-gold-ink); cursor: pointer;
    transition: color var(--a-fast) ease;
}
.a-cl-reset:hover { color: var(--a-navy); }
.a-cl-reset[hidden] { display: none; }

.a-cl-group { padding-top: var(--a-4); }
.a-cl-group + .a-cl-group {
    margin-top: var(--a-4);
    border-top: 1px solid var(--a-line-soft);
}
.a-cl-group__legend {
    display: block;
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-label); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--a-navy);
    margin-bottom: var(--a-2);
    padding: 0;
}
.a-cl-group fieldset { border: none; margin: 0; padding: 0; }

.a-cl-check {
    display: flex; align-items: center; gap: 10px;
    min-height: 34px;
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-xs); line-height: 1.4;
    color: var(--a-body);
    cursor: pointer;
}
.a-cl-check__box {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto;
    width: 16px; height: 16px; margin: 0;
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    position: relative;
    cursor: pointer;
    transition: background var(--a-fast) ease, border-color var(--a-fast) ease;
}
.a-cl-check:hover .a-cl-check__box { border-color: var(--a-gold); }
.a-cl-check__box:checked { background: var(--a-gold); border-color: var(--a-gold); }
.a-cl-check__box:checked::after {
    content: '';
    position: absolute; left: 4px; top: 1px;
    width: 5px; height: 9px;
    border: 2px solid var(--a-white);
    border-top: none; border-left: none;
    transform: rotate(42deg);
}
.a-cl-check__label { flex: 1; min-width: 0; }
.a-cl-check__box:checked ~ .a-cl-check__label { color: var(--a-navy); font-weight: 600; }
.a-cl-check__count { color: var(--a-muted); font-size: 0.75rem; }
.a-cl-check.is-empty { opacity: 0.45; }

/* Mobile disclosure for the rail */
.a-cl-mtoggle { display: none; }
.a-cl-mtoggle__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--a-radius-pill);
    background: var(--a-gold-tint); border: 1px solid var(--a-gold-line);
    color: var(--a-gold-ink); font-size: 0.6875rem; font-weight: 700;
}

@media (max-width: 991px) {
    .a-cl-layout { grid-template-columns: minmax(0, 1fr); }
    .a-cl-mtoggle { display: inline-flex; width: 100%; }
    .a-cl-filters { position: static; display: none; margin-top: var(--a-4); }
    .a-cl-filters.is-open { display: block; }
}

/* -----------------------------------------------------------------------------
   4. RESULT BAR: count and sort
   -------------------------------------------------------------------------- */
.a-cl-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--a-4); flex-wrap: wrap;
    padding-bottom: var(--a-3);
    border-bottom: 1px solid var(--a-line);
}
.a-cl-count { font-size: var(--a-fs-sm); color: var(--a-muted); margin: 0; }
.a-cl-count strong { color: var(--a-navy); font-weight: 600; }

.a-cl-sort { display: flex; align-items: center; gap: var(--a-2); }
.a-cl-sort__label {
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-xs); font-weight: 600; color: var(--a-navy);
    white-space: nowrap;
}
.a-cl-sort__field { position: relative; display: inline-flex; align-items: center; }
.a-cl-sort__field i {
    position: absolute; right: 12px;
    font-size: 0.6875rem; color: var(--a-muted);
    pointer-events: none;
}
.a-cl-select {
    appearance: none; -webkit-appearance: none;
    min-height: 40px;
    padding: 8px 34px 8px 12px;
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-xs); font-weight: 600;
    color: var(--a-navy);
    cursor: pointer;
    transition: border-color var(--a-fast) ease, box-shadow var(--a-fast) ease;
}
.a-cl-select:hover { border-color: var(--a-navy); }
.a-cl-select:focus {
    outline: none;
    border-color: var(--a-gold);
    box-shadow: 0 0 0 3px rgba(182, 138, 53, 0.18);
}

/* Applied filter chips */
.a-cl-chips {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2);
    margin-top: var(--a-4);
}
.a-cl-chips[hidden] { display: none; }
.a-cl-chip {
    display: inline-flex; align-items: center; gap: var(--a-2);
    min-height: 38px;
    padding: 6px 14px;
    background: var(--a-gold-tint);
    border: 1px solid var(--a-gold-line);
    border-radius: var(--a-radius-pill);
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-xs); font-weight: 600;
    color: var(--a-gold-ink);
    cursor: pointer;
    transition: background var(--a-fast) ease, color var(--a-fast) ease;
}
.a-cl-chip:hover { background: var(--a-white); color: var(--a-navy); }
.a-cl-chip i { font-size: 0.625rem; }
.a-cl-chips .a-cl-reset { margin-left: var(--a-2); }

/* -----------------------------------------------------------------------------
   5. RESULTS GRID
   -------------------------------------------------------------------------- */
.a-cl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--a-5);
    margin-top: var(--a-5);
}
.a-cl-grid[hidden] { display: none; }
.a-cl-item { display: block; }
.a-cl-item[hidden] { display: none; }

@media (max-width: 1199px) { .a-cl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .a-cl-grid { grid-template-columns: minmax(0, 1fr); } }

/* -----------------------------------------------------------------------------
   6. EMPTY STATE
   -------------------------------------------------------------------------- */
.a-cl-empty {
    margin-top: var(--a-5);
    padding: clamp(40px, 6vw, 72px) var(--a-5);
    text-align: center;
    background: var(--a-surface);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius-lg);
}
.a-cl-empty[hidden] { display: none; }
.a-cl-empty__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: var(--a-4);
    background: var(--a-gold-tint);
    border: 1px solid var(--a-gold-line);
    border-radius: 50%;
    color: var(--a-gold-ink);
    font-size: 1.125rem;
}
.a-cl-empty__text {
    font-size: var(--a-fs-sm); line-height: 1.7; color: var(--a-body);
    max-width: 48ch; margin: var(--a-3) auto var(--a-5);
}
.a-cl-empty__btns {
    display: flex; align-items: center; justify-content: center;
    gap: var(--a-3); flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   7. PAGINATION
   Hairline rectangles, gold marks the current page. No pill shapes.
   -------------------------------------------------------------------------- */
.a-cl-pag {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: var(--a-2);
    margin-top: var(--a-7);
    padding-top: var(--a-5);
    border-top: 1px solid var(--a-line);
}
.a-cl-pag[hidden] { display: none; }
.a-cl-pag__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
    min-width: 40px; min-height: 40px;
    padding: 8px 12px;
    background: var(--a-white);
    border: 1px solid var(--a-line);
    border-radius: var(--a-radius);
    font-family: var(--a-font-ui);
    font-size: var(--a-fs-xs); font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--a-navy);
    cursor: pointer;
    transition: border-color var(--a-fast) ease, color var(--a-fast) ease, background var(--a-fast) ease;
}
.a-cl-pag__btn:hover:not([disabled]):not([aria-current]) { border-color: var(--a-navy); }
.a-cl-pag__btn[aria-current] {
    background: var(--a-gold-tint);
    border-color: var(--a-gold);
    color: var(--a-gold-ink);
    cursor: default;
}
.a-cl-pag__btn[disabled] { opacity: 0.4; cursor: default; }
.a-cl-pag__btn i { font-size: 0.625rem; }
.a-cl-pag__gap {
    min-width: 24px; text-align: center;
    font-size: var(--a-fs-xs); color: var(--a-muted);
}
.a-cl-pag__ends span { display: inline; }

@media (max-width: 599px) {
    .a-cl-pag__ends span { display: none; }
}