/* LUNARTECH Academy: /courses, every course and certification with search and filters, in the design of /certifications. Generated by tools/catalog/build.mjs.
   The banner, section bar, section headings, course cards and certification rows are the hub's own (lunartech-course.css, lunartech-certs.css). This file is the catalogue that sits inside them, and the three home page sections under it.
   The template restyles h1, h2, p, a, label and input, so every rule that touches them names its own font, size, spacing and colour.
   Nothing is clamped or cut: a long title takes more lines. Nothing here uses 100vw, so the page never scrolls sideways. */

html:has(body.cat-page) { background-color: #000; }
body.cat-page { margin: 0; background-color: #000; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.cat-page ::selection { background: #fff; color: #000; }
body.cat-locked { overflow: hidden; }
body.cat-locked .lc-main { z-index: 100000; } /* the filter sheet has to cover the header, and .lc-main is a layer of its own */

.cat { --cat-line: rgba(255, 255, 255, 0.1); --cat-dim: rgba(255, 255, 255, 0.52); --cat-body: rgba(255, 255, 255, 0.78); --cat-gutter: 24px; --cat-below-bars: calc(var(--lc-nav) + 68px); display: block; font-family: 'Geist', 'Inter', sans-serif; font-weight: 300; color: #fff; }
.cat :focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.cat [hidden] { display: none !important; }
.cat button { font-family: inherit; }

/* the hub keeps its section titles to 30rem; these are longer, and sit on two lines */
.cat-page .lc-why-title .lc-h2 { max-width: none; }

.cat-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); column-gap: clamp(2rem, 3.4vw, 3.25rem); align-items: start; }

/* ───────────── the left column: search, courses or certifications, filters. It stays in reach while the results scroll ───────────── */
.cat-side { position: sticky; top: var(--cat-below-bars); display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - var(--cat-below-bars) - 20px); min-width: 0; }

.cat-search { position: relative; flex: none; color: var(--cat-dim); }
.cat-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; transition: color 0.2s; }
.cat-search:focus-within { color: #fff; }
.cat .cat-search input { display: block; width: 100%; height: 44px; margin: 0; padding: 0 38px 0 40px; box-sizing: border-box; border: 0; border-radius: 12px; outline: 0; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--cat-line); font-family: 'Geist', sans-serif; font-size: 13.5px; font-weight: 300; line-height: 1; color: #fff; -webkit-appearance: none; appearance: none; transition: box-shadow 0.2s, background-color 0.2s; }
.cat .cat-search input::placeholder { color: var(--cat-dim); opacity: 1; }
.cat .cat-search input:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.cat .cat-search input:focus { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.cat-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.cat-q-clear { position: absolute; right: 7px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cat-dim); cursor: pointer; transform: translateY(-50%); transition: color 0.2s, background-color 0.2s; }
.cat-q-clear:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Courses or certifications: the home page's subject tabs (.lt-cc-tab, .lt-cc-ink), words on one hairline with a line that glides to the chosen one. Each number is that side's results, so nothing above the cards repeats it */
.cat-show { position: relative; flex: none; display: flex; gap: 6px; border-bottom: 1px solid var(--cat-line); }
.cat-show button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 300; line-height: 1; white-space: nowrap; color: var(--cat-dim); cursor: pointer; transition: color 0.3s; }
.cat-show button + button { margin-left: 8px; }
.cat-show button:hover, .cat-show button[aria-pressed="true"] { color: #fff; }
.cat .cat-show button:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -6px; }
.cat-show-n { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: 0.62; }
.cat-show-ink { position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background-color: #e6e8ec; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), width 0.7s cubic-bezier(0.16, 1, 0.3, 1); }

.cat-filters { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.cat-filters-head { flex: none; display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin-top: 6px; }
.cat-filters-title { font-size: 11px; font-weight: 400; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: var(--cat-dim); }
.cat-clear { padding: 4px 0; border: 0; background: none; font-size: 12.5px; font-weight: 300; line-height: 1.2; color: #fff; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.35); transition: text-decoration-color 0.2s; }
.cat-clear:hover { text-decoration-color: #fff; }
.cat-close, .cat-filters-foot { display: none; }
.cat-filters-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }

.cat-lead { padding: 0 0 8px; } /* "New releases", above the groups, on its own */
.cat .lc-rel-meta .lt-cert-flag { margin-left: 8px; }
.cat-group { border-top: 1px solid var(--cat-line); }
.cat-set > .cat-group:first-child { border-top: 0; } /* the switch's hairline is just above */
.cat-group summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font-size: 13.5px; font-weight: 400; line-height: 1.2; color: #f5f5f5; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.cat-group summary::-webkit-details-marker { display: none; }
.cat-chev { color: var(--cat-dim); transition: transform 0.2s; }
.cat-group[open] .cat-chev { transform: rotate(180deg); }
.cat-opts { display: flex; flex-direction: column; padding-bottom: 4px; }
.cat .cat-opt { display: flex; align-items: center; gap: 10px; min-height: 30px; margin: 0; padding: 3px 0; font-family: 'Geist', sans-serif; font-size: 13px; font-weight: 300; line-height: 1.3; color: var(--cat-body); cursor: pointer; transition: color 0.15s, opacity 0.15s; }
.cat .cat-opt:hover { color: #fff; }
.cat .cat-opt input { flex: none; position: relative; width: 15px; height: 15px; margin: 0; border: 0; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.15s, box-shadow 0.15s; }
.cat .cat-opt:hover input { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
.cat .cat-opt input:checked { background: #fff; box-shadow: none; }
.cat .cat-opt input:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #000; border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }
.cat .cat-opt:has(input:checked) { color: #fff; }
.cat-opt-label { flex: 1 1 auto; min-width: 0; }
.cat-opt-n { flex: none; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--cat-dim); }
.cat .cat-opt.is-none { opacity: 0.34; cursor: default; }
.cat .cat-opt.is-none input { cursor: default; }
.cat-group:not(.is-all) .cat-opt.is-extra:not(:has(input:checked)) { display: none; }
.cat-more { margin: 0 0 12px 25px; padding: 3px 0; border: 0; background: none; font-size: 12.5px; font-weight: 300; line-height: 1.2; color: var(--cat-dim); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.22); transition: color 0.2s; }
.cat-more:hover { color: #fff; }

/* ───────────── the results ───────────── */
.cat-results { min-width: 0; scroll-margin-top: var(--cat-below-bars); }
.cat-bar { position: relative; z-index: 5; display: flex; align-items: flex-start; gap: 14px; min-height: 44px; }
.cat .cat-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* read out, not shown: the switch has the number */
.cat-open { display: none; }

/* sorting: dim words beside the current choice, and a small list in the site's dark, muted colours */
.cat-sort { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; font-size: 13px; font-weight: 300; line-height: 1; color: var(--cat-dim); }
.cat .cat-sort-btn:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -6px; }
.cat-sort-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 300; line-height: 1; white-space: nowrap; color: var(--cat-body); cursor: pointer; transition: color 0.2s; }
.cat-sort-btn:hover, .cat-sort-btn[aria-expanded="true"] { color: #fff; }
.cat-sort-btn[aria-expanded="true"] .cat-chev { transform: rotate(180deg); }
.cat-sort-btn:hover .cat-chev { color: #fff; }
.cat-sort-list { position: absolute; right: 0; top: calc(100% + 2px); width: 184px; padding: 6px; box-sizing: border-box; border-radius: 14px; background: #0c0c0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 44px -10px rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.16s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
.cat-sort.is-open .cat-sort-list { opacity: 1; visibility: visible; transform: none; transition: opacity 0.16s ease, transform 0.2s ease; }
.cat-sort-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; font-size: 13px; font-weight: 300; line-height: 1; text-align: left; white-space: nowrap; color: var(--cat-body); cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.cat-sort-list button:hover, .cat .cat-sort-list button:focus-visible { background: rgba(255, 255, 255, 0.07); color: #fff; outline: 0; }
.cat-sort-list button[aria-selected="true"] { color: #fff; }
.cat-sort-list button svg { flex: none; visibility: hidden; }
.cat-sort-list button[aria-selected="true"] svg { visibility: visible; }

/* what's chosen, beside the sort. Its 7px lines the first row up with the sort's words */
.cat-chips { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 0; }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 7px 0 12px; border: 0; border-radius: 9999px; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); font-size: 12.5px; font-weight: 300; line-height: 1; color: #fff; cursor: pointer; transition: box-shadow 0.2s, background-color 0.2s; }
.cat-chip:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.cat-chip svg { color: var(--cat-dim); }

.cat .cat-sec-head { margin: 2.5rem 0 1.2rem; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; color: #f5f5f5; }
.cat-js .cat-sec-head { display: none; }
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; }
.cat-js .cat-card:not(.is-shown) { display: none; }
.cat-js .cat-sec[data-sec="certs"] { display: none; }
.cat-js .cat-sec.is-active { display: block; }
.cat-js .cat-sec:not(.is-active) { display: none; }
.cat .cat-card { min-width: 0; color: inherit; text-decoration: none; }
.cat .cat-card:focus-visible { outline-offset: 4px; border-radius: 26px; }

/* courses: the hub's card. Its blur has nothing to blur on pure black and would cost a frame on a list this long, so it goes; its title isn't cut at three lines here */
.cat .lc-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.cat .lc-rel-img { display: block; }
.cat .lc-rel-title { display: block; overflow: visible; -webkit-line-clamp: unset; text-wrap: pretty; }

/* certifications: the hub's row (.lt-cert-item a), on the link itself so a row can be moved by sorting without its list item */
.cat-grid.cat-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 3vw, 3rem); margin-top: 6px; }
.cat .cat-row { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 0 13px; border-bottom: 1px solid var(--lc-hair); }
.cat .cat-row:focus-visible { border-radius: 6px; }
.cat-row .lt-cert-thumb { width: 96px; }
@media (max-width: 639px) { .cat-row .lt-cert-thumb { width: 76px; } }
.cat-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: rgba(255, 255, 255, 0.34); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--lc-ease); }
.cat-row:hover::after, .cat-row:focus-visible::after { transform: scaleX(1); }
.cat-row:hover .lt-cert-thumb img { opacity: 1; }
.cat-row:hover .lt-cert-item-title { color: #fff; }
.cat-row:hover .lt-cert-item-sub, .cat-row:hover .lt-cert-code { color: rgba(255, 255, 255, 0.66); }

/* more cards */
.cat-next-row { display: flex; align-items: center; gap: 22px; margin-top: 2rem; }
.cat .cat-next { color: var(--lc-ink); }
.cat-next-all { padding: 4px 0; border: 0; background: none; font-size: 13px; font-weight: 300; line-height: 1.2; color: var(--cat-dim); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.22); transition: color 0.2s; }
.cat-next-all:hover { color: #fff; }

.cat-empty { max-width: 34rem; padding: clamp(3rem, 8vw, 6rem) 0; }
.cat .cat-empty-title { margin: 0; font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; color: #f5f5f5; overflow-wrap: anywhere; }
.cat-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.2rem; }
.cat-empty-actions button { display: inline-flex; align-items: center; height: 38px; padding: 0 15px; border: 0; border-radius: 9999px; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); font-size: 13px; font-weight: 300; line-height: 1; color: #fff; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; }
.cat-empty-actions button:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.cat-empty-actions button:first-child { background: #fff; color: #000; font-weight: 400; box-shadow: none; }

.cat-float, .cat-scrim { display: none; }
.cat-open-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9999px; background: #fff; font-size: 11px; font-weight: 400; line-height: 1; color: #000; }

/* no script: both lists in full, nothing that needs one */
html:not(.cat-js) .cat-side, html:not(.cat-js) .cat-bar, html:not(.cat-js) .cat-float, html:not(.cat-js) .cat-next-row { display: none; }
html:not(.cat-js) .cat-layout { display: block; }

/* ───────────── narrower ───────────── */
@media (max-width: 1279px) {
  .cat-layout { grid-template-columns: 240px minmax(0, 1fr); column-gap: 2rem; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* with the filters beside them, two columns of rows leave too little room for a title below here */
@media (min-width: 992px) and (max-width: 1199px) {
  .cat-grid.cat-rows { grid-template-columns: minmax(0, 1fr); }
}

/* below 992 the left column stacks, and the filters become a sheet opened from a button that stays in reach */
@media (max-width: 991px) {
  .cat-layout { display: block; }
  .cat-side { position: static; max-height: none; gap: 10px; margin-bottom: 18px; }
  .cat .cat-search input { height: 48px; font-size: 16px; } /* 16px stops iPhones zooming in on focus */
  .cat-show button { height: 48px; font-size: 14px; }
  .cat-show-n { font-size: 12px; }
  .cat-bar { flex-wrap: wrap; gap: 8px 14px; align-items: center; }
  .cat-chips { order: 3; flex: 1 0 100%; padding: 0; }
  .cat-sort-btn { font-size: 14px; }
  .cat-sort-list button { height: 44px; font-size: 14px; }

  .cat-filters { position: fixed; inset: 0; z-index: 100001; background: #000; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s; }
  .cat-filters.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.25s ease; }
  .cat-filters-head { min-height: 64px; margin: 0; padding: 0 12px 0 var(--cat-gutter); gap: 14px; border-bottom: 1px solid var(--cat-line); }
  .cat-filters-title { flex: 1 1 auto; font-size: 12px; }
  .cat-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
  .cat-filters-body { margin: 0; padding: 0 var(--cat-gutter) 12px; }
  .cat-group summary { min-height: 52px; font-size: 15px; }
  .cat .cat-opt { min-height: 44px; font-size: 15px; }
  .cat .cat-opt input { width: 18px; height: 18px; border-radius: 5px; }
  .cat .cat-opt input:checked::after { left: 6px; top: 3px; width: 5px; height: 9px; }
  .cat-opt-n { font-size: 13px; }
  .cat-more { min-height: 40px; margin: 0 0 8px 28px; font-size: 14px; }
  .cat-filters-foot { flex: none; display: block; padding: 12px var(--cat-gutter) calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cat-line); }
  .cat-apply { display: block; width: 100%; height: 50px; border: 0; border-radius: 9999px; background: #fff; font-size: 15px; font-weight: 400; color: #000; cursor: pointer; }

  .cat-open { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 9999px; background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); font-size: 13.5px; font-weight: 300; line-height: 1; color: #fff; cursor: pointer; }
  .cat-float { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 100000; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border: 0; border-radius: 9999px; background: #101012; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 12px 34px -8px rgba(0, 0, 0, 0.9); font-size: 14px; font-weight: 300; line-height: 1; color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
  .cat-float.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.2s ease, transform 0.2s ease; }
}

@media (max-width: 767px) {
  .cat { --cat-gutter: 16px; }
  .cat-grid.cat-rows { grid-template-columns: minmax(0, 1fr); }
}

/* phones: rows, so more fit on a screen. The picture sits left and a long title still takes as many lines as it needs */
@media (max-width: 599px) {
  .cat-sort-by { display: none; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
  .cat .cat-card.lc-rel { flex-direction: row; align-items: flex-start; padding: 8px; border-radius: 18px; }
  .cat .lc-rel-img { flex: none; width: 116px; border-radius: 11px; }
  .cat .lc-rel-body { gap: 6px; padding: 3px 6px 3px 12px; }
  .cat .cat-card.lc-rel:focus-visible { border-radius: 18px; }
  .cat .lc-rel-meta { margin-top: 0; }
  .cat-next-row { flex-wrap: wrap; gap: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-filters, .cat-float, .cat-chev, .cat-show-ink, .cat-sort-list, .cat-sort.is-open .cat-sort-list, .cat-row::after { transition: none; }
  .cat .lc-rel:hover, .cat .lc-rel:hover .lc-rel-img img { transform: none; }
}

/* ───────────── under the list: the home page's numbers, logo wall and learners, read from it by the build, with the hub's headings ───────────── */
/* User, 2026-11-07: "add space between the sections". The hub's 120px on its own felt cramped here; with this the gap matches the home page's 204px at 1673 wide.
   A margin rather than more padding: the section bar's tabs scroll to a section's top edge, so they still land with the heading just under the bars. */
.cat-numbers, .cat-names, .cat-learners { margin-top: clamp(1.5rem, 5vw, 5.5rem); }
.cat-learners { padding-bottom: clamp(0px, 2.6vw, 2.75rem); } /* the footer brings 160px of its own */
.cat-numbers .lc-why-title { grid-column: 1 / -1; } /* nothing sits beside this title, so it doesn't need to break */
.cat-numbers .lt-metrics { margin-top: 0.4rem; }
.cat-names .lc-why-head, .cat-learners .lc-why-head { margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.cat-page .lt-cert-fine { margin-top: clamp(3rem, 5vw, 4.5rem); } /* the disclaimer: small, last, and never left out while vendors' names and marks are on the page */
.cat-page .footer-section::before { display: none; } /* the footer's 180px fade would swallow the last row of quotes, which run right up to it; on pure black it has nothing else to do */