/* ============================================================
   /courses catalog — best-seller spotlight, sticky filter bar, results
   ------------------------------------------------------------
   Mobile-first. Colours only from theme.css tokens. Selectors are
   jm-catalog* / jm-best* so the shared jm-hero--compact, jm-toolbar
   and jm-filter rules used by other pages stay untouched.

   The page has no visible header any more: the H1 is sr-only and the
   catalog opens on the spotlight band (when an admin set one) and then
   the toolbar. The old .jm-hero--catalog / .jm-catalog-md rules were
   removed with that markup rather than left as dead CSS.
   ============================================================ */

/* ---------- best-seller spotlight ---------- */
/* One wide card above the toolbar. Not a grid card: it keeps its own layout so it reads as editorial
   promotion rather than "the first result", and so the results grid stays untouched by it. */
.jm-best { padding: 0 0 4px; }
.jm-best__label {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent-ink);
}
.jm-best__label svg { width: 15px; height: 15px; flex: none; }

.jm-best__card {
    display: grid; grid-template-columns: 1fr; gap: 0;
    background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--shadow);
    /* A warm wash from the accent so it separates from the plain cards below without shouting. */
    background-image: linear-gradient(135deg, rgba(249, 161, 27, .07), transparent 55%);
}

.jm-best__thumb {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
    background: var(--thumb-bg);
}
.jm-best__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jm-best__thumb .jm-cthumb-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); }
.jm-best__thumb .jm-cthumb-ph svg { width: 38px; height: 38px; }

.jm-best__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; min-width: 0; }
.jm-best__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.jm-best__title { margin: 0; font-size: 1.15rem; line-height: 1.35; font-weight: 700; }
.jm-best__title a { color: var(--text); text-decoration: none; }
.jm-best__title a:hover { color: var(--accent-ink); }
.jm-best__desc {
    margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.65;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jm-best__stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: .86rem; color: var(--muted); }
.jm-best__stat { display: inline-flex; align-items: center; gap: 5px; }
.jm-best__stat b { color: var(--text); }
.jm-best__star { width: 14px; height: 14px; color: var(--accent2); flex: none; }
.jm-best__foot {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-top: 4px;
}
.jm-best__price { display: inline-flex; align-items: baseline; gap: 9px; }

/* From md the thumbnail sits beside the copy, which is what makes it read as a wide banner. */
@media (min-width: 768px) {
    .jm-best { padding: 0 0 8px; }
    .jm-best__card { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: stretch; }
    .jm-best__thumb { aspect-ratio: auto; height: 100%; min-height: 210px; }
    .jm-best__body { padding: 22px 26px; gap: 11px; justify-content: center; }
    .jm-best__title { font-size: 1.35rem; }
}

@media (min-width: 1024px) {
    .jm-best__card { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
    .jm-best__title { font-size: 1.45rem; }
}

/* ---------- page top spacing ---------- */
/* The visible header is gone, so without this main starts flush against the site header. Lives on the
   container rather than on "whichever element happens to be first", so it holds whether or not the
   spotlight band renders. */
.jm-catalog { padding-top: 14px; }
@media (min-width: 768px) { .jm-catalog { padding-top: 22px; } }

/* ---------- sticky filter bar ---------- */
.jm-catalog-bar {
    position: sticky; z-index: 40;
    /* JS measures the real header bottom into --jm-catalog-top; the fallback covers no-JS. */
    top: var(--jm-catalog-top, calc(var(--ann-bar-h, 0px) + 71px));
    background: var(--hdr-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hdr-border);
    padding: 10px 0 8px;
}
.jm-catalog-bar::after {
    content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
    background: var(--grad); transform: scaleX(0); transform-origin: var(--jm-catalog-origin, left); opacity: 0;
}
[dir="rtl"] .jm-catalog-bar { --jm-catalog-origin: right; }
.jm-catalog-bar.is-loading::after { opacity: 1; animation: jm-catalog-load 1.1s ease-in-out infinite; }
@keyframes jm-catalog-load {
    0% { transform: scaleX(0); }
    60% { transform: scaleX(.85); }
    100% { transform: scaleX(1); opacity: 0; }
}

.jm-catalog-bar__form {
    display: grid; gap: 8px 10px; align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "search search" "sort levels";
}
.jm-catalog-search { grid-area: search; }
.jm-catalog-sort { grid-area: sort; }
.jm-catalog-levels { grid-area: levels; min-width: 0; }
.jm-catalog-bar__form noscript { grid-column: 1 / -1; }

@media (min-width: 768px) {
    .jm-catalog-bar { padding: 12px 0; }
    .jm-catalog-bar__form { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "search sort" "levels levels"; gap: 10px 12px; }
}
@media (min-width: 1024px) {
    .jm-catalog-bar__form {
        grid-template-columns: minmax(240px, 380px) minmax(0, 1fr) auto;
        grid-template-areas: "search levels sort";
        gap: 14px;
    }
}

/* ---------- search field: icon · input · clear · live count ---------- */
.jm-catalog-search {
    display: flex; align-items: center; gap: 8px; min-width: 0;
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding-inline: 12px 8px; height: 46px;
    transition: border-color .18s, box-shadow .18s;
}
.jm-catalog-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(249, 161, 27, .18); }
.jm-catalog-search__icon { flex: none; width: 18px; height: 18px; color: var(--faint); }
body.jm-site .jm-catalog-search__input {
    flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text);
    font: inherit; font-size: 1rem; /* ≥16px keeps iOS from zooming on focus */
    padding: 0; outline: none; box-shadow: none; appearance: none; -webkit-appearance: none;
}
.jm-catalog-search__input::placeholder { color: var(--faint); }
.jm-catalog-search__input::-webkit-search-cancel-button,
.jm-catalog-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
body.jm-site .jm-catalog-search__input:focus-visible { outline: none; }
.jm-catalog-search__clear {
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer;
}
.jm-catalog-search__clear:hover { color: var(--text); background: var(--card2); }
.jm-catalog-search__clear[hidden] { display: none; }
.jm-catalog-search__clear svg { width: 16px; height: 16px; }
.jm-catalog-count {
    flex: none; font-size: .76rem; font-weight: 700; line-height: 1; white-space: nowrap;
    color: var(--muted); background: var(--card2); border-radius: 999px; padding: 6px 10px;
    font-variant-numeric: tabular-nums;
}

/* ---------- combined sort / free dropdown ---------- */
.jm-catalog-sort { position: relative; }
.jm-catalog-sort__select {
    height: 36px; max-width: 46vw; padding-block: 0; padding-inline: 12px 32px;
    field-sizing: content; /* shrink to the chosen option where supported */
    font: inherit; font-size: .84rem; font-weight: 700; color: var(--text);
    background-color: var(--bg2); border: 1px solid var(--border); border-radius: 999px;
    appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fb0cc' stroke-width='2.4'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
    transition: border-color .18s, box-shadow .18s;
}
[dir="rtl"] .jm-catalog-sort__select { background-position: left 11px center; }
.jm-catalog-sort__select:hover { border-color: var(--border2); }
body.jm-site .jm-catalog-sort__select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(249, 161, 27, .18); }
@media (min-width: 768px) {
    .jm-catalog-sort__select { height: 46px; max-width: none; border-radius: var(--r-sm); font-size: .9rem; padding-inline: 14px 36px; }
}

/* ---------- level chips: one scrollable row, edge fades follow the scroll ---------- */
.jm-catalog-levels__rail {
    --fade-s: 0px; --fade-e: 0px;
    display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: none;
    padding: 4px; margin: -4px; /* room for focus rings inside the scroller */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
}
[dir="rtl"] .jm-catalog-levels__rail {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent 100%);
}
.jm-catalog-levels__rail::-webkit-scrollbar { display: none; }
.jm-catalog-levels__rail[data-fade-start] { --fade-s: 32px; }
.jm-catalog-levels__rail[data-fade-end] { --fade-e: 32px; }
.jm-catalog-levels__rail .jm-chip {
    flex: none; white-space: nowrap; scroll-snap-align: start;
    height: 36px; padding: 0 14px; font-size: .84rem;
}
.jm-catalog-levels__rail .jm-chip:not([aria-current]) { color: var(--muted); background: var(--card); border-color: var(--border); }
.jm-catalog-levels__rail .jm-chip:not([aria-current]):hover { color: var(--text); border-color: var(--border2); }
@media (min-width: 768px) {
    .jm-catalog-levels__rail .jm-chip { height: 40px; padding: 0 16px; }
}

/* ---------- results ---------- */
.jm-catalog-main.jm-sec--tight { padding: 14px 0 48px; }
.jm-catalog-main .jm-cgrid { gap: 14px; }
@media (min-width: 641px) { .jm-catalog-main .jm-cgrid { gap: 20px; } }
@media (min-width: 768px) { .jm-catalog-main.jm-sec--tight { padding: 26px 0 64px; } }

/* Phones: full-width 16:9 image on top, tight text below (2 columns once each image stays large) */
@media (max-width: 640px) {
    .jm-catalog-main .jm-ccard:hover { transform: none; }
    .jm-catalog-main .jm-cthumb .jm-cbadge { top: 10px; font-size: .72rem; padding: 4px 10px; }
    .jm-catalog-main .jm-cbody { padding: 12px 14px 14px; gap: 6px; }
    .jm-catalog-main .jm-cbody h3 {
        font-size: .98rem; line-height: 1.45;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .jm-catalog-main .jm-clevel { font-size: .76rem; }
    .jm-catalog-main .jm-cbody p {
        font-size: .84rem; line-height: 1.6; flex: none;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .jm-catalog-main .jm-cprice { margin-top: 2px; padding-top: 8px; gap: 8px; }
    .jm-catalog-main .jm-price { font-size: .98rem; }
    .jm-catalog-main .jm-cmore { font-size: .84rem; margin-top: 0; margin-inline-start: auto; }
    .jm-catalog-main .jm-cactions { margin-top: 4px; gap: 6px; }
    .jm-catalog-main .jm-cactions .jm-btn { padding: 8px 10px; font-size: .84rem; border-radius: 9px; }
    .jm-catalog-main .jm-cprogress { margin-top: 4px; gap: 5px; }
}
@media (min-width: 560px) and (max-width: 640px) {
    .jm-catalog-main .jm-cgrid { grid-template-columns: 1fr 1fr; }
}

/* .jm-course-item is display:contents (site.css), which would override the UA [hidden] rule */
.jm-course-item[hidden], .jm-catalog-empty[hidden] { display: none; }
.jm-catalog-results { transition: opacity .18s; }
.jm-catalog-results.is-loading { opacity: .55; pointer-events: none; }
.jm-catalog-empty { padding: 40px 20px; }
.jm-catalog-empty h2 { font-size: 1.05rem; }
.jm-catalog-empty .jm-mt { margin-top: 20px; }

/* Anchor jumps (skip link, pagination focus) should clear the sticky header + bar */
.jm-catalog { scroll-margin-top: 140px; }
#catalog-results { scroll-margin-top: calc(var(--jm-catalog-top, 71px) + 130px); }

@media (prefers-reduced-motion: reduce) {
    .jm-catalog-bar.is-loading::after { animation: none; transform: scaleX(1); opacity: .6; }
}
html.no-animations .jm-catalog-bar.is-loading::after { animation: none; transform: scaleX(1); opacity: .6; }