/* ==========================================================================
   AutomatorsX LMS — public catalogue
   Course cards, catalogue filters, course detail, paths and instructors.
   Card styles are shared with the homepage's inline block by class name.
   ========================================================================== */

/* --- Page header -------------------------------------------------------- */
.cat-header { padding: 44px 0 30px; background: var(--surface-1); border-bottom: 1px solid var(--border); }
.cat-header h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem);
    letter-spacing: -.03em; margin-bottom: 8px; }
.cat-header p { color: var(--text-secondary); max-width: 640px; }
.cat-crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.cat-crumbs a { color: var(--text-secondary); }
.cat-crumbs a:hover { color: var(--primary); }

/* --- Layout ------------------------------------------------------------- */
.cat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 32px 0 64px; align-items: start; }

/* --- Filter rail -------------------------------------------------------- */
.cat-filters { position: sticky; top: 84px; }
.cat-filter-toggle { display: none; }
.cat-filter-group { margin-bottom: 26px; }
.cat-filter-group h3 { font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); margin-bottom: 10px; }
.cat-filter-group a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-radius: 7px; font-size: 13.5px;
    color: var(--text-secondary); transition: all .15s ease;
}
.cat-filter-group a:hover { background: var(--surface-1); color: var(--text); }
.cat-filter-group a.active { background: var(--primary-surface, rgba(255,0,0,.06)); color: var(--primary); font-weight: 600; }
.cat-filter-group a span { font-size: 12px; opacity: .7; }

.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
    padding: 5px 11px; border-radius: 999px; font-size: 12.5px;
    border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface);
    transition: all .15s ease;
}
.cat-chip:hover { border-color: var(--text-disabled); color: var(--text); }
.cat-chip.active { background: var(--text); border-color: var(--text); color: #fff; }

/* --- Results bar -------------------------------------------------------- */
.cat-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin-bottom: 22px; }
.cat-count { font-size: 13.5px; color: var(--text-secondary); }
.cat-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.cat-sort select { padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
    font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }

.cat-searchbar { display: flex; gap: 8px; margin-bottom: 22px; }
.cat-searchbar input {
    flex: 1; padding: 11px 15px; border: 1px solid var(--border); border-radius: 9px;
    font: inherit; font-size: 14px; background: var(--surface); color: var(--text);
}
.cat-searchbar input:focus { outline: 0; border-color: var(--primary); }

/* --- Course cards (shared with the homepage) ---------------------------- */
.lms-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 22px; }

.lms-course-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    overflow: hidden; display: flex; flex-direction: column;
    transition: border-color .18s, transform .18s, box-shadow .18s;
}
.lms-course-card:hover { border-color: var(--primary); transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,.08); }

.lms-course-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.lms-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lms-course-thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--text-disabled); font-size: 30px; }
.lms-badge-level { position: absolute; top: 10px; left: 10px; background: rgba(15,15,15,.82);
    color: #fff; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px; }

.lms-course-body { padding: 17px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lms-course-cat { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--primary); }
.lms-course-body h3 { font-size: 1.04rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.lms-course-sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lms-course-tools { display: flex; flex-wrap: wrap; gap: 5px; }
.lms-course-tools span { font-size: 11px; padding: 2px 8px; border-radius: 5px;
    background: var(--surface-2); color: var(--text-secondary); }
.lms-course-meta { display: flex; gap: 13px; flex-wrap: wrap; font-size: 12.5px;
    color: var(--text-muted); margin-top: auto; }
.lms-course-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding-top: 12px; border-top: 1px solid var(--border-light, var(--border)); }
.lms-course-instructor { font-size: 12.5px; color: var(--text-secondary); }
.lms-course-price s { font-size: 12.5px; color: var(--text-disabled); margin-right: 6px; }
.lms-course-price strong { font-size: 1.05rem; font-family: var(--font-display); }
.lms-course-price .is-free { color: var(--success, #10B981); }

/* --- Course detail ------------------------------------------------------ */
/*
 * The dark band holds the course's identity only; the buy card lives in the
 * body's right rail below it.
 *
 * They used to share a two-column grid, which meant the band was always as tall
 * as the card — and the card, with its preview video, price, button and six
 * feature lines, is roughly twice the height of a title and a meta row. Every
 * course page opened on 400px of empty black beside the title, and the rail the
 * card was supposed to occupy sat empty further down the page.
 *
 * The measure is capped so the headline and summary stay readable now that
 * nothing else is claiming the right-hand side.
 */
/*
 * The band is light, and its text is coloured for a light background.
 *
 * It used to paint var(--surface-dark) and set color: #fff on everything
 * inside. On the admin and student layouts --surface-dark really is #0F0F0F,
 * but the public site declares it #F9F9F9 — so the hero rendered near-white
 * with white text, and the breadcrumb, the meta row (students, lessons,
 * duration, level, instructor) and the tool chips were invisible. The heading
 * and summary survived only because other rules happened to recolour them.
 */
.cd-hero {
    background: var(--surface-1, #F9F9F9); color: var(--text); padding: 40px 0;
    border-bottom: 1px solid var(--border);
}
.cd-hero-grid { display: grid; grid-template-columns: minmax(0, 760px); gap: 40px; align-items: start; }
.cd-crumbs { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.cd-crumbs a { color: var(--text-secondary); }
.cd-crumbs a:hover { color: var(--primary); }
.cd-hero h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -.03em; line-height: 1.15; margin-bottom: 14px; color: var(--text); }
.cd-hero .cd-sub { font-size: 1.02rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.cd-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--text-secondary); }
.cd-meta strong { color: var(--text); }
.cd-meta i { color: var(--text-muted); margin-right: 5px; }
.cd-meta a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.cd-meta a:hover { color: var(--primary); }

/* Tool chips — n8n, Make, OpenAI. */
.cd-hero .lms-course-tools span {
    background: var(--surface-2); color: var(--text-secondary);
    border: 1px solid var(--border);
}

.cd-rail { min-width: 0; }

.cd-buybox {
    background: var(--surface); color: var(--text); border-radius: 14px; overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 20px 40px rgba(0,0,0,.10); position: sticky; top: 84px;
}
.cd-buybox-media { aspect-ratio: 16/9; background: #000; position: relative; }
.cd-buybox-media img, .cd-buybox-media iframe, .cd-buybox-media video { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.cd-buybox-body { padding: 20px; }
.cd-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.cd-price strong { font-family: var(--font-display); font-size: 2rem; letter-spacing: -.03em; }
.cd-price s { color: var(--text-disabled); font-size: 1.05rem; }
.cd-price .save { font-size: 12px; font-weight: 700; color: var(--success); background: var(--success-bg);
    padding: 3px 8px; border-radius: 5px; }
.cd-buybox .btn { width: 100%; justify-content: center; margin-bottom: 9px; }
.cd-includes { list-style: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cd-includes li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px;
    color: var(--text-secondary); padding: 5px 0; }
.cd-includes i { color: var(--text-muted); width: 16px; text-align: center; margin-top: 3px; }

.cd-body { padding: 44px 0 64px; }
.cd-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.cd-section { margin-bottom: 38px; }
.cd-section h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; margin-bottom: 16px; }
.cd-prose { font-size: 15px; line-height: 1.75; color: var(--text-secondary); }
.cd-prose p { margin-bottom: 14px; }
.cd-prose h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 20px 0 8px; }

.cd-learn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px 24px; }
.cd-learn li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px;
    line-height: 1.55; color: var(--text-secondary); padding: 4px 0; }
.cd-learn i { color: var(--success); margin-top: 4px; font-size: 12px; }

/*
 * Long outcome lists fold after the eighth point (see course-detail.php), so a
 * course with twenty of them does not bury the curriculum below the fold.
 *
 * The checkbox drives it rather than a script: the points past the fold are in
 * the markup either way, and the toggle keeps working if JavaScript does not.
 * It is moved off-screen instead of hidden so it stays keyboard-reachable.
 */
.cd-learn-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cd-learn-toggle:not(:checked) ~ .cd-learn .cd-learn-extra { display: none; }

.cd-learn-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
    padding: 9px 16px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 13.5px; font-weight: 600; color: var(--primary);
    background: var(--surface-2); cursor: pointer; transition: border-color .18s, background .18s; }
.cd-learn-more:hover { border-color: var(--primary); background: var(--primary-surface); }
.cd-learn-more i { font-size: 11px; }
.cd-learn-toggle:focus-visible ~ .cd-learn-more { outline: 2px solid var(--primary); outline-offset: 2px; }

/* One label, two captions: whichever matches the current state is the one shown. */
.cd-learn-more .cd-learn-open,
.cd-learn-more .cd-learn-close { display: inline-flex; align-items: center; gap: 8px; }
.cd-learn-more .cd-learn-close { display: none; }
.cd-learn-toggle:checked ~ .cd-learn-more .cd-learn-open { display: none; }
.cd-learn-toggle:checked ~ .cd-learn-more .cd-learn-close { display: inline-flex; }

/* --- Curriculum accordion ----------------------------------------------- */
.cd-curriculum { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cd-sec { border-bottom: 1px solid var(--border); }
.cd-sec:last-child { border-bottom: 0; }
.cd-sec-head {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px;
    background: var(--surface-1); border: 0; font: inherit; text-align: left; cursor: pointer;
}
.cd-sec-head:hover { background: var(--surface-2); }
.cd-sec-head .chev { transition: transform .2s ease; color: var(--text-muted); font-size: 12px; }
.cd-sec.open .chev { transform: rotate(90deg); }
.cd-sec-head strong { flex: 1; font-size: 14.5px; font-weight: 700; }
.cd-sec-head span { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.cd-sec-body { display: none; }
.cd-sec.open .cd-sec-body { display: block; }
.cd-les { display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 26px;
    border-top: 1px solid var(--border-light, var(--border)); font-size: 13.5px; }
.cd-les i.type { color: var(--text-muted); font-size: 12px; width: 16px; text-align: center; }
.cd-les .title { flex: 1; color: var(--text-secondary); }
.cd-les .dur { font-size: 12.5px; color: var(--text-muted); }
.cd-les a { color: var(--primary); font-weight: 600; font-size: 12.5px; }

/* --- Reviews ------------------------------------------------------------ */
.cd-rating { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.cd-rating-big { text-align: center; }
.cd-rating-big strong { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.cd-rating-bars { flex: 1; min-width: 230px; }
.cd-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.cd-bar { flex: 1; height: 7px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.cd-bar div { height: 100%; background: #F59E0B; }
.cd-review { padding: 16px 0; border-bottom: 1px solid var(--border-light, var(--border)); }
.cd-review:last-child { border-bottom: 0; }
.cd-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.cd-review-head strong { font-size: 13.5px; }
.cd-review-head .stars { color: #F59E0B; font-size: 12px; }
.cd-review p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.cd-review-reply { margin-top: 10px; padding: 10px 13px; background: var(--surface-1);
    border-radius: 8px; font-size: 13px; color: var(--text-secondary); }

/* --- Write a review -----------------------------------------------------
   Shown only to enrolled students. The star picker is five radio buttons
   drawn in reverse order, so the CSS sibling selector can light up every
   star to the left of the hovered one without a line of JavaScript — and it
   still submits correctly with scripting turned off. */
.cd-review-form {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 26px;
}
.cd-review-form-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cd-review-form-head strong { font-size: 14px; }
.cd-pending { font-size: 11.5px; padding: 3px 8px; border-radius: 20px; background: var(--warning-bg, rgba(245,158,11,.12)); color: #92610a; }
.cd-live { font-size: 11.5px; padding: 3px 8px; border-radius: 20px; background: var(--success-bg, rgba(16,185,129,.12)); color: var(--success, #059669); }

.cd-stars-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; margin-bottom: 12px; }
.cd-stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.cd-stars-input label { font-size: 20px; color: var(--text-disabled, #cbd5e1); cursor: pointer; line-height: 1; }
.cd-stars-input label:hover,
.cd-stars-input label:hover ~ label,
.cd-stars-input input:checked ~ label { color: #F59E0B; }
.cd-stars-input input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }

.cd-review-form input[type=text],
.cd-review-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    margin-bottom: 10px;
}
.cd-review-form textarea { resize: vertical; line-height: 1.6; }
.cd-review-form input:focus, .cd-review-form textarea:focus { outline: 0; border-color: var(--primary); }
.cd-review-form-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-review-note { font-size: 12px; color: var(--text-muted); }

/* --- Instructor card ---------------------------------------------------- */
.cd-instructor { display: flex; gap: 16px; align-items: flex-start; }
.cd-instructor img, .cd-instructor .initial {
    width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none;
    background: var(--surface-2); display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.6rem; color: var(--text-secondary);
}

/* --- Paths -------------------------------------------------------------- */
/*
 * Same correction as the course hero: this card asked for --surface-dark and
 * painted white text on it, but the public palette declares that token as
 * #F9F9F9. Every learning path was a white-on-white card — title, summary and
 * course list all invisible.
 */
.path-card { background: var(--surface); color: var(--text); border-radius: 16px;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.path-card h2 { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -.02em;
    color: var(--text); }
.path-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.path-courses { list-style: none; margin: 6px 0; }
.path-courses li { display: flex; align-items: center; gap: 10px; padding: 7px 0;
    border-bottom: 1px solid var(--border-light, var(--border)); font-size: 13.5px;
    color: var(--text-secondary); }
.path-courses li:last-child { border-bottom: 0; }
.path-courses i { color: var(--success); font-size: 11px; }

/* --- Empty state -------------------------------------------------------- */
.cat-empty { text-align: center; padding: 70px 20px; }
.cat-empty i { font-size: 40px; color: var(--text-disabled); margin-bottom: 16px; }
.cat-empty h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; }
.cat-empty p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }

/* --- Pagination --------------------------------------------------------- */
.cat-pages { display: flex; gap: 6px; justify-content: center; margin-top: 34px; }
.cat-pages a { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border);
    font-size: 13.5px; color: var(--text-secondary); background: var(--surface); }
.cat-pages a:hover { border-color: var(--primary); color: var(--primary); }
.cat-pages a.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }

@media (max-width: 980px) {
    .cat-layout { grid-template-columns: 1fr; }
    .cat-filters { position: static; }
    .cd-hero-grid, .cd-layout { grid-template-columns: 1fr; }
    .cd-buybox { position: static; }

    /* Single column: the price and the enrol button belong above a long page of
       curriculum, not under it. */
    .cd-layout { display: flex; flex-direction: column; }
    .cd-rail { order: -1; }
}

/* On a phone the filter rail used to push the first course far below the
   fold. Keep the controls available, but let the learner open them only when
   needed. The content remains visible without JavaScript. */
@media (max-width: 768px) {
    .cat-layout { gap: 16px; padding-top: 20px; }
    .cat-layout .cat-filters { padding: 0; border: 0; background: transparent; box-shadow: none; }
    .cat-filter-toggle {
        width: 100%; display: flex; align-items: center; justify-content: space-between;
        padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
        background: var(--surface-2); color: var(--text); font: inherit; font-size: 14px;
        font-weight: 700; cursor: pointer; box-shadow: var(--shadow-sm);
    }
    .cat-filter-toggle > span { display: inline-flex; align-items: center; gap: 8px; }
    .cat-filter-toggle > span:first-child i { color: var(--primary); }
    .cat-filter-toggle-meta { color: var(--text-muted); font-size: 12px; font-weight: 600; }
    .cat-filter-toggle-meta i { transition: transform .18s ease; }
    .cat-filters.is-open .cat-filter-toggle-meta i { transform: rotate(180deg); }
    .cat-filter-options { margin-top: 8px; padding: 18px; background: var(--surface-2);
        border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
    html.catalogue-filters-ready .cat-filter-options { display: none; }
    html.catalogue-filters-ready .cat-filters.is-open .cat-filter-options { display: block; }
    .cat-filter-group { margin-bottom: 20px; }
    .cat-filter-group:last-child { margin-bottom: 0; }
    .cat-searchbar { margin-bottom: 16px; }
}

/* Homepage-aligned catalogue and course sales layer --------------------- */
.lms-course-grid { gap: 20px; }
.lms-course-card { background: var(--surface-2); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.lms-course-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.lms-course-thumb { background: var(--surface-1); }
.lms-course-thumb-fallback { color: var(--primary); background: var(--primary-surface); }
.lms-badge-level { background: var(--secondary); color: var(--surface-2); }
.lms-course-body { padding: 20px; }
.lms-course-body h3 { font-size: 1.05rem; letter-spacing: -.02em; }
.lms-course-tools span { background: var(--primary-surface); color: var(--primary); border: 1px solid var(--primary-glow); }
.lms-course-foot { border-top-color: var(--border-light); }
.lms-course-price strong { color: var(--text); }
.lms-course-price .is-free { color: var(--success); }

.cd-hero { background: var(--bg-gradient); padding: 72px 0 64px; }
.cd-hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.055em; line-height: 1.04; }
.cd-hero .cd-sub { max-width: 680px; font-size: 17px; line-height: 1.7; }
.cd-meta { gap: 16px; }
.cd-meta i { color: var(--primary); }
.cd-hero .lms-course-tools span { background: var(--primary-surface); color: var(--primary); border-color: var(--primary-glow); }
.cd-buybox { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.cd-buybox-body { padding: 24px; }
.cd-price strong { font-size: 2.15rem; }
.cd-includes i { color: var(--primary); }
.cd-body { padding: 72px 0 88px; }
.cd-section h2 { font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.04em; }
.cd-curriculum { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cd-sec-head { padding: 17px 20px; }
.cd-sec-head:hover { background: var(--primary-surface); }
.cd-review-form { border-radius: var(--radius-lg); }

.path-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.path-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.path-courses li i { color: var(--primary); }

@media (max-width: 680px) {
    .cd-hero { padding: 54px 0 44px; }
    .cd-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
    .cd-body { padding: 52px 0 64px; }
}