/* ============================================================
   Page — Course catalog (pages/catalog.css)
   Overview/category/search/all share one hero on the dark band (surface-dark/eyebrow-dark
   from main.css), light results grid. Tokens only; raw px only
   where documented. Form controls keep >= 44px targets.
   ============================================================ */

/* ── Hero: dark band with H1 + search form ─────────────────── */
.catalog-hero { padding-block: var(--space-2xl); text-align: center; }
.catalog-hero__eyebrow { margin-bottom: var(--space-md); }
.catalog-hero__headline { margin-bottom: var(--space-sm); }
.catalog-hero__sub {
    font-size: var(--text-lg);
    color: var(--ink-inverse-muted);
    max-width: 44em;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .catalog-hero { padding-block: var(--space-3xl) var(--space-2xl); }
}

/* Overview: plain link to the all-courses page under the search */
.catalog-hero__all { margin-top: var(--space-md); font-weight: 600; }

/* Category / search / all: left-aligned band with the breadcrumb on top */
.catalog-hero--page { text-align: left; padding-block: var(--space-xl) var(--space-xl); }
.catalog-hero--page .catalog-hero__sub { margin-inline: 0; }
.catalog-hero--page .catalog-search { margin-inline: 0; }
.catalog-hero .breadcrumb { color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }
.catalog-hero .breadcrumb__trail a { color: var(--cyan-300); }
.catalog-hero .breadcrumb__trail a:hover { color: var(--surface-0); }
.catalog-hero .breadcrumb__trail [aria-current="page"] { color: var(--ink-inverse); }
.catalog-hero .breadcrumb__sep { color: var(--ink-inverse-muted); }

/* ── Search form (GET, no-JS first) ────────────────────────── */
/* One layout on overview, all courses, search page and category pages (components/catalog-search):
   row 1 the field (full width, the live preview drops below it), row 2 select or scope hint on
   the left and the submit button on the right; stacked on phones. */
.catalog-search {
    margin-top: var(--space-lg);
    max-width: 640px; /* raw px: comfortable search width */
    margin-inline: auto;
    text-align: left;
}
.catalog-search__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}
.catalog-search__scope { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink-inverse); }
@media (max-width: 599px) {
    .catalog-search__actions { grid-template-columns: minmax(0, 1fr); }
    .catalog-search__submit { width: 100%; }
}
/* input sits on the dark band — keep the light field, kill UA search quirks */
.catalog-search__input { -webkit-appearance: none; appearance: none; }

/* ── Results: count line + card grid ───────────────────────── */
.catalog-results { padding-block: var(--space-xl); }
.catalog-results__count {
    font-family: var(--font-body);
    font-size: var(--text-md); font-weight: 600;
    color: var(--ink-600);
    text-align: left;
    margin-bottom: var(--space-lg);
}

.catalog-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Course card (article-card treatment, catalog flavor) ───── */
.course-card {
    position: relative; /* anchor of the stretched title link */
    display: flex; flex-direction: column;
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.course-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Stretched link: the title link's ::after covers the whole card, so the
   entire card is one click target without nesting links. */
.course-card__link { color: inherit; text-decoration: none; }
.course-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.course-card__link:hover { color: var(--blue-700); }
.course-card__link:focus-visible { outline: none; box-shadow: none; }
.course-card__link:focus-visible::after { box-shadow: var(--focus-ring); border-radius: var(--radius-lg); }


/* Thumb: mirrored course image, or the brand tile fallback in the
   illustration style (cyan mark on dark navy; fixed ratio = CLS 0) */
.course-card__thumb {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(18rem 10rem at 80% 0%, rgba(49, 187, 216, .16), transparent 60%),
        linear-gradient(160deg, #0C2036 0%, var(--navy-950) 85%);
    color: var(--cyan-300);
}
.course-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-card__thumb-mark { opacity: .85; }

.course-card__body {
    display: flex; flex-direction: column; gap: var(--space-xs);
    padding: var(--space-lg);
    flex: 1;
}
.course-card__topline {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-sm);
}
.course-card__type {
    display: inline-flex; align-items: center;
    background: var(--blue-100);
    color: var(--blue-700);
    border-radius: var(--radius-full);
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text-xs); font-weight: 600;
}
.course-card__duration { font-size: var(--text-xs); color: var(--ink-600); white-space: nowrap; }
/* With a badge in the topline, badge (and type pill) sit left, duration
   keeps to the right edge; without one, space-between behaves as before. */
.course-card__topline .course-card__duration { margin-left: auto; }
/* Language chips: always the course's languages, pinned to the card bottom so
   cards of one row end alike; the shown language is filled when it differs from the page language. */
.course-card__langs { margin: auto 0 0; padding-top: var(--space-sm); }
.lang-chips__list { display: inline-flex; flex-wrap: wrap; gap: var(--space-2xs); }
.lang-chip {
    display: inline-flex; align-items: center;
    border: 1px solid var(--ink-600);
    color: var(--ink-600);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-xs);
    font-size: var(--text-2xs); font-weight: 700; line-height: 1.6;
    letter-spacing: .06em;
}
.lang-chip--shown { background: var(--blue-100); border-color: var(--blue-700); color: var(--blue-700); }
.lang-chips--dark .lang-chip { border-color: var(--ink-inverse-muted); color: var(--ink-inverse-muted); }
.lang-chips--dark .lang-chip--shown { background: var(--ink-inverse); border-color: var(--ink-inverse); color: var(--navy-950); }
.course-meta__languages { display: inline-flex; align-items: center; }
.catalog-preview__langs { display: inline-flex; gap: var(--space-3xs); margin-inline-end: var(--space-2xs); vertical-align: middle; }
.catalog-preview__langs .lang-chip { padding: 0 var(--space-3xs); }
.course-card__title { font-family: var(--font-body); font-size: var(--text-lg); color: var(--ink-900); }
.course-card__desc {
    font-size: var(--text-sm); color: var(--ink-600);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* clamp long repo descriptions */
    line-clamp: 3;
    overflow: hidden;
}

/* ── Pagination (?q&page links, 44px targets) ───────── */
.catalog-pagination { margin-top: var(--space-xl); }
.catalog-pagination__list {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--space-xs);
    list-style: none; padding: 0;
}
.catalog-pagination__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; /* touch target */
    padding-inline: var(--space-sm);
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    color: var(--blue-700);
    font-size: var(--text-sm); font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);
}
.catalog-pagination__gap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; min-height: 44px;
    color: var(--ink-500, currentColor);
    font-size: var(--text-sm); font-weight: 600;
}
.catalog-pagination__link:hover { border-color: var(--blue-500); color: var(--blue-700); }
.catalog-pagination__link[aria-current="page"] {
    background: var(--blue-900);
    border-color: var(--blue-900);
    color: var(--ink-inverse);
}

/* ── Empty states (locale without courses / query without hits) ─ */
.catalog-empty { text-align: center; }
.catalog-empty__heading { margin-bottom: var(--space-sm); }
.catalog-empty__body { color: var(--ink-600); margin-bottom: var(--space-lg); }
.catalog-empty__actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-sm);
}
.catalog-empty--query { padding-block: var(--space-xl); }
.catalog-empty--query .catalog-empty__body { margin-bottom: var(--space-xs); }

/* ── Content partners (overview): calm logo row, grey via the shared .logo-tint ─ */
.catalog-partners { padding-block: var(--space-xl); border-top: 1px solid var(--line-200); text-align: center; }
.catalog-partners__heading { margin-bottom: var(--space-lg); }
.catalog-partners__list {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--space-lg) var(--space-xl); list-style: none; margin: 0; padding: 0;
}
.catalog-partners__item img {
    display: block; height: auto; width: auto;
    max-height: 64px; max-width: min(100%, 200px);
    --logo-tint-opacity: .8; mix-blend-mode: multiply; /* the opaque white of a JPEG/PNG logo blends into the section */
}
.catalog-partners__link { display: inline-block; }

/* ── Category tiles (overview entry grid, one link per category page) ─ */
.catalog-categories { padding-block: var(--space-xl); }
.catalog-categories__heading { margin-bottom: var(--space-lg); }
.catalog-tiles {
    display: grid; gap: var(--space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none; margin: 0; padding: 0;
}
@media (max-width: 479px) { .catalog-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .catalog-tiles { gap: var(--space-lg); } }
@media (min-width: 1024px) { .catalog-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.catalog-tile {
    display: flex; flex-direction: column; overflow: hidden;
    height: 100%; /* equal heights within a row */
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: inherit; text-decoration: none;
    transition: box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.catalog-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.catalog-tile:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
/* Image on top, text below: nothing is ever laid over the picture. Fixed 3:2
   (the stored variants are exactly 3:2), so the box is reserved before load.
   Without an image: the brand panel (same fallback as .course-card__thumb). */
.catalog-tile__media {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 3 / 2;
    background:
        radial-gradient(18rem 10rem at 80% 0%, rgba(49, 187, 216, .16), transparent 60%),
        linear-gradient(160deg, #0C2036 0%, var(--navy-950) 85%);
    color: var(--cyan-300);
}
.catalog-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-tile__mark { opacity: .85; }
.catalog-tile__body {
    display: flex; flex-direction: column; gap: var(--space-3xs);
    padding: var(--space-md);
}
.catalog-tile__name {
    font-family: var(--font-heading, inherit);
    font-size: var(--text-lg); font-weight: 700; line-height: 1.2;
    color: var(--ink-900);
    overflow-wrap: break-word; hyphens: auto;
}
.catalog-tile:hover .catalog-tile__name { color: var(--blue-700); }
.catalog-tile__count { font-size: var(--text-sm); color: var(--ink-600); }

/* ── Course detail page (templates/pages/course.php) ───────── */
.course-hero { padding-block: var(--space-xl) var(--space-2xl); }
.course-hero .breadcrumb { color: var(--ink-inverse-muted); margin-bottom: var(--space-lg); }
.course-hero .breadcrumb__trail a { color: var(--cyan-300); }
.course-hero .breadcrumb__trail a:hover { color: var(--surface-0); }
.course-hero .breadcrumb__trail [aria-current="page"] { color: var(--ink-inverse); }
.course-hero .breadcrumb__sep { color: var(--ink-inverse-muted); }
.course-hero__title { margin-bottom: var(--space-md); overflow-wrap: anywhere; }
.course-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-sm) var(--space-md);
    font-size: var(--text-sm); color: var(--ink-inverse-muted);
}
.course-meta__type {
    display: inline-flex; align-items: center;
    background: var(--blue-100); color: var(--blue-700);
    border-radius: var(--radius-full);
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text-xs); font-weight: 600;
}
.course-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); list-style: none; padding: 0; }
.course-chip {
    display: inline-flex; align-items: center;
    min-height: 32px; /* raw px: compact chip, link variant gets padding below */
    padding: var(--space-3xs) var(--space-sm);
    border: 1px solid rgba(159, 177, 196, .45);
    border-radius: var(--radius-full);
    color: var(--ink-inverse);
    font-size: var(--text-sm);
    text-decoration: none;
}
.course-chip--primary { background: rgba(230, 237, 245, .1); font-weight: 600; }
/* `.surface-dark a:not(.btn):hover` (main.css) turns every link on the dark band white, which on the
   white hover background of the chip was invisible. The selectors below out-rank it:
   resting ink-inverse on the dark band, hover/focus blue-900 on white (>= 15:1). */
.course-hero .course-chips a.course-chip { color: var(--ink-inverse); }
.course-hero .course-chips a.course-chip:hover,
.course-hero .course-chips a.course-chip:focus-visible {
    background: var(--surface-0); color: var(--blue-900); border-color: var(--surface-0);
}

.course-body { padding-block: var(--space-xl); }
.course-body__figure { margin: 0 0 var(--space-lg); }
.course-body__img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-200);
}
.course-body__text p { margin-bottom: var(--space-md); max-width: 70ch; color: var(--ink-900); }
.course-body__back { margin-top: var(--space-lg); }

.course-related { background: var(--surface-50); padding-block: var(--space-xl); }
.course-related__heading { margin-bottom: var(--space-lg); }
.course-related__more { margin-top: var(--space-lg); text-align: center; }
.course-related__all { margin-top: var(--space-md); }

/* ── Live preview (combobox popup, see js/pages/catalog-search.js) ─────────
   The popup hangs under the whole search row (input and button) as a light
   card on the dark band. The listbox is the scroller: height-bounded (the
   script narrows the bound to the visual viewport, e.g. above a soft
   keyboard), the "all results" row sticks to its bottom so it is always
   reachable. axe exempts a combobox listbox from scrollable-region-focusable
   (its options are reached with aria-activedescendant). Active option = the
   aria-selected one, marked by tint AND a left bar, never colour alone. */
.catalog-search__row--combo { position: relative; text-align: left; }
.catalog-preview {
    position: absolute; inset-inline: 0; top: calc(100% + var(--space-2xs)); z-index: 30;
    overflow: hidden;
    background: var(--surface-0); color: var(--ink-900);
    border: 1px solid var(--line-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.catalog-preview__list {
    max-height: min(70vh, 28rem, var(--preview-room, 100vh)); overflow-y: auto; overscroll-behavior: contain;
    scroll-padding-block: 2rem 3.25rem; /* keep the active option clear of the sticky rows */
}
.catalog-preview[hidden], .catalog-preview__list[hidden], .catalog-preview__empty[hidden] { display: none; }
.catalog-preview__group + .catalog-preview__group { border-top: 1px solid var(--line-200); }
.catalog-preview__group--all { position: sticky; bottom: 0; background: var(--surface-0); }
.catalog-preview__heading {
    padding: var(--space-xs) var(--space-md) var(--space-3xs);
    font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-600);
}
.catalog-preview__option {
    display: flex; align-items: center; gap: var(--space-sm);
    min-height: 44px; /* raw px: touch target */
    padding: var(--space-xs) var(--space-md);
    cursor: pointer; border-inline-start: 3px solid transparent;
}
.catalog-preview__option[aria-selected="true"] { background: var(--surface-50); border-inline-start-color: var(--blue-700); }
.catalog-preview__thumb { flex: none; width: 56px; height: 32px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-50); }
.catalog-preview__text { display: flex; flex-direction: column; min-width: 0; }
.catalog-preview__title {
    font-weight: 600; font-size: var(--text-sm); overflow-wrap: anywhere;
    /* at most two lines per title, the full text stays the accessible name */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.catalog-preview__meta { font-size: var(--text-xs); color: var(--ink-600); }
.catalog-preview__option > .catalog-preview__title { flex: 1 1 auto; min-width: 0; }
.catalog-preview__option > .catalog-preview__meta { flex: none; }
/* phones: no thumbnails, the title gets the whole row */
@media (max-width: 30rem) {
    .catalog-preview__thumb { display: none; }
    .catalog-preview__option { padding-inline: var(--space-sm); }
}
.catalog-preview__option--all .catalog-preview__title { color: var(--blue-700); }
.catalog-preview__empty { margin: 0; padding: var(--space-md); font-size: var(--text-sm); color: var(--ink-600); }
.catalog-preview__mark { background: var(--accent-100); color: inherit; border-radius: var(--radius-sm); }

/* Category select, left of the button in row 2 */
.catalog-search__filter { min-width: 0; }
.catalog-search__select { width: 100%; min-width: 0; }
.catalog-preview__heading--note { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }

/* Hits from other categories: the category named above the card title, and the link below */
.course-card__category { margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--blue-700); }
.catalog-results__more { margin-top: var(--space-lg); text-align: center; }

/* Category hits above the course results */
.catalog-catmatch { margin-bottom: var(--space-xl); }
.catalog-catmatch__heading { font-family: var(--font-body); font-size: var(--text-md); font-weight: 600; color: var(--ink-600); margin-bottom: var(--space-sm); text-align: left; }
.catalog-catmatch__list { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; }
.catalog-catmatch__link {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs);
    min-height: 44px; padding: var(--space-xs) var(--space-md); /* raw px: touch target */
    background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); color: var(--ink-900); text-decoration: none;
}
.catalog-catmatch__link:hover { box-shadow: var(--shadow-md); color: var(--blue-700); }
.catalog-catmatch__name { font-weight: 600; }
.catalog-catmatch__count { font-size: var(--text-sm); color: var(--ink-600); }

/* Active filter: removable chip */
.catalog-filter { margin: 0 0 var(--space-md); }
.catalog-chip {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    min-height: 44px; padding: var(--space-2xs) var(--space-md); /* raw px: touch target */
    background: var(--blue-100); color: var(--ink-900);
    border: 1px solid var(--line-200); border-radius: var(--radius-full);
    font-weight: 600; font-size: var(--text-sm); text-decoration: none;
}
.catalog-chip:hover { border-color: var(--blue-700); color: var(--blue-700); }
.catalog-chip__x { font-size: var(--text-lg); line-height: 1; }
.catalog-empty--query .btn + .btn { margin-inline-start: var(--space-sm); }