/* ==========================================================================
   CATEGORY PAGE — v3   (/{locale}/learn/category/{slug}/courses)

   Loaded by resources/views/lms/learn/category_courses_v3.blade.php alone,
   pushed into the head after front.css so its rules win on order as well as on
   specificity.

   Two donors, one file:
     - the shell and the furniture (.sec, .card, .kicker, .sec-head, toolbar,
       pager, FAQ, closing band, the .cc course card) are
       lms/css/all_courses_v3.css, so the catalogue and a category read as the
       same site;
     - the sections the catalogue has no equivalent for — the split hero, the
       stat band, the jump bar, the learning-path rail, the about panel, the
       review cards, the article row, the category pills — are the
       /en/learn/category-test twin's, repainted in these tokens.

   Neither file is imported: an @import would break this page the next time the
   catalogue retunes a shared name, and all_courses_v3.css scopes its rules to
   .nlp-courses, which never matches here.

   Three rules carried over from the catalogue, for the same reasons:

     1. SCOPE. Everything is under .nlp-category, the class on #page-content. Two
        classes deep beats every theme rule below it, so there is not one
        !important in this file.

     2. TOKENS ARE PREFIXED --ct-. front.css declares its own :root --green,
        --dark and --primary; an unprefixed token on a container here would
        silently repaint any front.css rule that reaches an element inside the
        page.

     3. BUTTONS ARE .ct-btn, NOT .btn.small. front.css declares
        .small { font-size: 11px !important } — a rule no amount of specificity
        can beat — so the theme's utility class is dropped from the markup
        rather than fought with a second !important. .btn itself is left alone:
        the layout's cart and header controls use it.

   Order matters: the shell primitives come before the page sections, because
   .ct-start-sec, .ct-grid-sec and .ct-cert-sec each re-set the padding .sec
   gives them at equal specificity. Keep the halves in this order.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-category {
  --ct-sky: #3FA9E8;
  --ct-sky-deep: #2286C7;
  --ct-sky-tint: #EDF6FC;
  --ct-sky-line: #D3E9F8;
  --ct-ink: #12303B;
  --ct-teal: #0F6E78;
  --ct-teal-deep: #0A4F57;
  --ct-teal-tint: #E7F3F2;
  --ct-teal-line: #CDE5E2;
  --ct-paper: #FDFEFE;
  --ct-mist: #F6FAFA;
  --ct-line: #E6EDEC;
  --ct-white: #ffffff;
  --ct-text: #3D5058;
  --ct-text-soft: #66787E;
  --ct-gold: #F0C033;
  --ct-green-soft: #DFF1E7;
  --ct-green-deep: #1F7A6F;
  --ct-radius: 18px;
  --ct-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --ct-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);
  /* The sticky v3 header's height. category_v3.js measures the real header and
     overwrites this, so the jump bar and every anchor follow the header instead
     of a number written down here; the value below is the fallback for a page
     that loads without the script. */
  --ct-head-h: 58px;
}

/* ============ reset ============ */
.nlp-category *,
.nlp-category *::before,
.nlp-category *::after { box-sizing: border-box; }

.nlp-category h1, .nlp-category h2, .nlp-category h3,
.nlp-category p, .nlp-category ul, .nlp-category ol,
.nlp-category figure, .nlp-category blockquote { margin: 0; padding: 0; }

.nlp-category {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ct-text);
  font-size: 16px;
  line-height: 1.65;
  background: var(--ct-paper);
  -webkit-font-smoothing: antialiased;
}

.nlp-category h1,
.nlp-category h2,
.nlp-category h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ct-ink);
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 600;
}
.nlp-category a { color: inherit; text-decoration: none; }
.nlp-category img { max-width: 100%; display: block; }
.nlp-category button { font-family: inherit; cursor: pointer; }
.nlp-category :focus-visible { outline: 2px solid var(--ct-sky-deep); outline-offset: 2px; border-radius: 6px; }

.nlp-category .ct-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============ theme neutralisers ============ */
/* front.css gives every .card an 8px radius, a grey shadow and 20px of bottom
   margin, and rounds the first and last child to 2px. The cards here take their
   radius and shadow from the tokens above and their spacing from the grid gaps
   around them, so all of that is undone once rather than in every component. */
.nlp-category .card {
  background: var(--ct-white);
  border: 1px solid var(--ct-line);
  border-radius: var(--ct-radius);
  box-shadow: var(--ct-shadow);
  margin-bottom: 0;
}
.nlp-category .card > :first-child,
.nlp-category .card > :last-child { border-radius: 0; }

/* Bootstrap makes every <label> bold, inline-block and 5px tall at the foot. */
.nlp-category label { font-weight: 400; margin-bottom: 0; max-width: none; }

/* ============ buttons ============ */
/* .ct-btn, not .btn.small — see note 3 in the file header. */
.nlp-category .ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; background: var(--ct-sky); color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 13px 26px; text-decoration: none; flex: 0 0 auto;
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px -6px rgba(63, 169, 232, .45);
}
.nlp-category .ct-btn:hover,
.nlp-category .ct-btn:focus { background: var(--ct-sky-deep); color: #fff; }
.nlp-category .ct-btn:active { transform: scale(.985); }
.nlp-category .ct-btn-sm { padding: 9px 18px; font-size: 13px; box-shadow: none; }
.nlp-category .ct-btn-gold { background: var(--ct-gold); color: #4A3A06; box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5); }
.nlp-category .ct-btn-gold:hover,
.nlp-category .ct-btn-gold:focus { background: #E5B62B; color: #4A3A06; }
.nlp-category .ct-btn-ghost {
  background: var(--ct-white); color: var(--ct-ink);
  border: 1px solid var(--ct-line); box-shadow: none;
}
.nlp-category .ct-btn-ghost:hover,
.nlp-category .ct-btn-ghost:focus { background: var(--ct-sky-tint); border-color: var(--ct-sky-line); color: var(--ct-sky-deep); }
/* The featured card's button is a <span> under the card's cover link, so it
   lights up with the card rather than on a hover of its own. */
.nlp-category .ct-feat:hover .ct-btn-gold { background: #E5B62B; }

/* ============ layout primitives ============ */
.nlp-category .wrap { max-width: 1320px; margin: 0 auto; padding: 0 30px; }
.nlp-category .sec { padding: 66px 0 10px; }
.nlp-category .kicker {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ct-sky-deep);
}
.nlp-category .sec-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 8px 0 26px; }
.nlp-category .sec-head h1,
.nlp-category .sec-head h2 { font-size: clamp(27px, 3.2vw, 38px); }
.nlp-category .sec-head h2 em { font-style: italic; color: var(--ct-teal); }
.nlp-category .sec-head .side { margin-left: auto; font-size: 13.5px; color: var(--ct-text-soft); max-width: 46ch; }
.nlp-category .sec-head .side a { color: var(--ct-sky-deep); font-weight: 700; }
.nlp-category .sec-head .side a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A lighter head for the two secondary rails (newest, other categories): a
   label and a note, no heading. */
.nlp-category .ct-ns-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.nlp-category .ct-ns-head .k {
  font-family: 'Poppins', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--ct-ink);
}
.nlp-category .ct-ns-head .side { margin-left: auto; font-size: 13px; color: var(--ct-text-soft); }

/* ============ hero ============ */
.nlp-category .ct-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 380px at 88% -10%, var(--ct-sky-tint) 0%, transparent 70%),
    linear-gradient(180deg, var(--ct-white) 0%, var(--ct-paper) 100%);
  border-bottom: 1px solid var(--ct-line);
}
.nlp-category .ct-hero-in {
  max-width: 1320px; margin: 0 auto; padding: 40px 30px 46px;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 34px; align-items: center;
}
/* No featured card beside the copy — a filtered page, a second page, or a
   category with nothing published. One column, and the copy stops at a readable
   measure rather than running the full 1320px. */
.nlp-category .ct-hero-solo { grid-template-columns: minmax(0, 1fr); }
.nlp-category .ct-hero-solo .ct-hero-copy { max-width: 900px; }

/* breadcrumb */
.nlp-category .ct-crumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ct-text-soft); margin-bottom: 18px;
}
.nlp-category .ct-crumb a:hover { color: var(--ct-sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.nlp-category .ct-crumb-on { color: var(--ct-ink); font-weight: 600; }
.nlp-category .ct-crumb-sep { color: var(--ct-sky-line); }

.nlp-category .ct-hero-copy h1 {
  font-size: clamp(32px, 4.2vw, 52px); font-weight: 500; margin: 12px 0 14px;
}
.nlp-category .ct-hero-sub { font-size: 17px; color: var(--ct-text); max-width: 46ch; }
.nlp-category .ct-hero-blurb {
  font-size: 14.5px; color: var(--ct-text-soft); max-width: 60ch;
  margin-top: 12px; line-height: 1.7;
}

/* fact chips */
.nlp-category .ct-chips {
  list-style: none; display: flex; gap: 9px; flex-wrap: wrap; margin-top: 20px;
}
.nlp-category .ct-chips li {
  background: var(--ct-white); border: 1px solid var(--ct-line); border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--ct-ink);
  box-shadow: var(--ct-shadow);
}
.nlp-category .ct-chips li:first-child {
  background: var(--ct-teal-tint); border-color: var(--ct-teal-line); color: var(--ct-teal-deep);
}
.nlp-category .ct-hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* ============ featured course ============ */
.nlp-category .ct-hero-art { min-width: 0; }
.nlp-category .ct-feat {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-category .ct-feat:hover { box-shadow: var(--ct-shadow-lift); transform: translateY(-3px); }
/* Whole-card link. The card carries no controls of its own, so the overlay can
   sit above everything — nothing under it needs to be clickable. */
.nlp-category .ct-cover-link { position: absolute; inset: 0; z-index: 3; }
.nlp-category .ct-feat-art { position: relative; aspect-ratio: 16 / 9.6; overflow: hidden; background: #F5F1E6; }
.nlp-category .ct-feat-art img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center top; transition: transform .4s ease;
}
.nlp-category .ct-feat:hover .ct-feat-art img { transform: scale(1.03); }
.nlp-category .ct-feat-flag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--ct-gold); color: #4A3A06; border-radius: 999px; padding: 4px 13px;
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; box-shadow: var(--ct-shadow);
}
/* Sits along the BOTTOM of the artwork: course covers carry the certification
   name baked into the image and a top-corner pill lands on it. */
.nlp-category .ct-feat-students {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(255, 255, 255, .94);
  font-size: 11px; font-weight: 700; color: var(--ct-ink);
  border-radius: 999px; padding: 3px 10px; box-shadow: var(--ct-shadow);
  font-variant-numeric: tabular-nums;
}
.nlp-category .ct-feat-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 9px; }
.nlp-category .ct-feat-body h2 { font-size: clamp(19px, 2vw, 24px); line-height: 1.28; }
.nlp-category .ct-feat:hover .ct-feat-body h2 { color: var(--ct-teal); }
.nlp-category .ct-feat-foot { display: flex; align-items: center; gap: 13px; padding-top: 6px; }
.nlp-category .ct-feat-foot .ct-btn { margin-left: auto; }

/* shared card furniture */
.nlp-category .ct-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ct-text-soft);
}
.nlp-category .ct-tag {
  background: var(--ct-sky-tint); color: var(--ct-sky-deep); font-weight: 700;
  border-radius: 999px; padding: 2px 10px;
}
.nlp-category .ct-price-row { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nlp-category .ct-price { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 600; color: var(--ct-ink); }
.nlp-category .ct-was { font-size: 13px; color: var(--ct-text-soft); text-decoration: line-through; }

/* ============ stat band ============ */
.nlp-category .ct-stats { border-bottom: 1px solid var(--ct-line); background: var(--ct-white); }
.nlp-category .ct-stats-in {
  padding: 22px 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px;
}
.nlp-category .ct-stat { text-align: center; }
.nlp-category .ct-stat b {
  display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--ct-ink); font-variant-numeric: tabular-nums;
}
.nlp-category .ct-stat span {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ct-text-soft);
}
.nlp-category .ct-stat + .ct-stat { border-left: 1px solid var(--ct-line); }

/* ============ jump bar ============ */
/* Parks directly under the sticky header. --ct-head-h is measured by
   category_v3.js, so this follows the header's real height. */
.nlp-category .ct-jump {
  position: sticky; top: var(--ct-head-h); z-index: 60;
  background: rgba(255, 255, 255, .93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ct-line);
}
.nlp-category .ct-jump-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nlp-category .ct-jump-in::-webkit-scrollbar { display: none; }
.nlp-category .ct-jump a {
  flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--ct-text-soft);
  padding: 12px 13px; white-space: nowrap; border-bottom: 2.5px solid transparent;
}
.nlp-category .ct-jump a:hover { color: var(--ct-ink); border-bottom-color: var(--ct-sky-line); }
.nlp-category .ct-jump a.is-on { color: var(--ct-ink); border-bottom-color: var(--ct-sky); }

/* Anchored sections clear both sticky bars when jumped to. */
.nlp-category .ct-start-sec,
.nlp-category .ct-about-sec,
.nlp-category .ct-grid-sec,
.nlp-category .ct-rev-sec,
.nlp-category .ct-faq-sec { scroll-margin-top: calc(var(--ct-head-h) + 60px); }

/* ============ learning-path rail ============ */
/* The shared "Not sure where to start? Follow a path" strip
   (lms/learn/_learning_paths_strip), same panel, heading, arrow pair and four-up
   rail — repainted in these tokens, and living here rather than in a <style>
   block inside the markup. */
.nlp-category .ct-start-sec { padding-top: 56px; }
.nlp-category .ct-lp {
  --ct-lp-gap: 16px;
  background: var(--ct-sky-tint); border: 1px solid var(--ct-sky-line);
  border-radius: 20px; padding: 24px 26px 26px;
}
.nlp-category .ct-lp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.nlp-category .ct-lp-head h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.25;
}
.nlp-category .ct-lp-ic { flex: 0 0 auto; width: 24px; height: 24px; color: var(--ct-sky); }
.nlp-category .ct-lp-head p { font-size: 14px; color: var(--ct-text-soft); margin-top: 7px; max-width: 78ch; }

/* Arrows appear only once the rail overflows — category_v3.js adds .is-scrollable. */
.nlp-category .ct-lp-nav { display: none; flex: 0 0 auto; gap: 8px; padding-bottom: 2px; }
.nlp-category .ct-lp.is-scrollable .ct-lp-nav { display: flex; }
.nlp-category .ct-lp-arrow {
  width: 36px; height: 36px; flex: 0 0 auto; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--ct-sky-line); border-radius: 50%;
  background: var(--ct-white); color: var(--ct-sky-deep);
  transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.nlp-category .ct-lp-arrow:hover:not(:disabled) { background: var(--ct-sky); border-color: var(--ct-sky); color: #fff; }
.nlp-category .ct-lp-arrow:disabled { opacity: .35; cursor: default; }
.nlp-category .ct-lp-arrow svg { width: 18px; height: 18px; }

.nlp-category .ct-lp-track {
  display: flex; gap: var(--ct-lp-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x proximity;
  padding: 4px 2px 12px; margin: -4px -2px -6px;
  -webkit-overflow-scrolling: touch;
}
.nlp-category .ct-lp-track::-webkit-scrollbar { height: 6px; }
.nlp-category .ct-lp-track::-webkit-scrollbar-track { background: var(--ct-sky-line); border-radius: 999px; }
.nlp-category .ct-lp-track::-webkit-scrollbar-thumb { background: #B7D4EA; border-radius: 999px; }
.nlp-category .ct-lp-track::-webkit-scrollbar-thumb:hover { background: var(--ct-sky); }

/* Four cards to a viewport, the rest reached by arrow, swipe or wheel. */
.nlp-category .ct-lp-card {
  flex: 0 0 calc((100% - var(--ct-lp-gap) * 3) / 4); scroll-snap-align: start;
  background: var(--ct-white); border: 1px solid var(--ct-line); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nlp-category .ct-lp-card:hover {
  border-color: var(--ct-sky-line); box-shadow: var(--ct-shadow-lift); transform: translateY(-3px);
}
.nlp-category .ct-lp-cover { position: relative; height: 120px; background: var(--ct-sky-tint); overflow: hidden; display: block; }
.nlp-category .ct-lp-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nlp-category .ct-lp-cover.is-empty { display: grid; place-items: center; padding: 0 16px; }
.nlp-category .ct-lp-cover-text {
  font-family: 'Fraunces', Georgia, serif; font-size: 15px; line-height: 1.3;
  color: var(--ct-sky-deep); text-align: center;
}
.nlp-category .ct-lp-pill {
  position: absolute; top: 9px; right: 9px; background: var(--ct-sky); color: #fff;
  border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600;
}
.nlp-category .ct-lp-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nlp-category .ct-lp-body h3 { font-size: 16.5px; line-height: 1.3; }
.nlp-category .ct-lp-blurb { font-size: 13px; color: var(--ct-text-soft); line-height: 1.6; flex: 1; }
.nlp-category .ct-lp-go { font-size: 12.5px; font-weight: 700; color: var(--ct-sky-deep); }
.nlp-category .ct-lp-card:hover .ct-lp-go { text-decoration: underline; text-underline-offset: 3px; }

/* ============ course grid ============ */
.nlp-category .ct-grid-sec { padding-top: 60px; }
.nlp-category .ct-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* The highlighted row is three-up whatever the grid below is doing. */
.nlp-category .ct-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- the card, ported from lms/css/all_courses_v3.css ------------------- */
.nlp-category .cc {
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease; position: relative;
}
.nlp-category .cc:hover { box-shadow: var(--ct-shadow-lift); transform: translateY(-3px); }
.nlp-category .cc .art { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #F5F1E6; display: block; }
.nlp-category .cc .art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.nlp-category .cc:hover .art img { transform: scale(1.035); }
/* Pills sit at the TOP of the artwork and are kept deliberately small because of
   what is underneath them: every cover carries the certification name baked into
   its top band, spanning the middle ~60% of the width. There is no free corner,
   so the pills are sized to fit the gutters either side of that title rather
   than moved off it. Every extra character eats into the course name — which is
   also why .students shows a glyph and a figure instead of "54 Students". */
.nlp-category .cc .flag {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  font-family: 'Poppins', sans-serif; font-size: 8.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; border-radius: 999px; padding: 2px 7px;
}
.nlp-category .cc .flag.best { background: var(--ct-gold); color: #4A3A06; }
.nlp-category .cc .flag.newc { background: var(--ct-green-soft); color: var(--ct-green-deep); }
.nlp-category .cc .students {
  position: absolute; right: 7px; top: 7px; z-index: 2; background: rgba(255, 255, 255, .94);
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--ct-ink); border-radius: 999px; padding: 2px 7px 2px 5px;
  font-variant-numeric: tabular-nums;
}
.nlp-category .cc .students svg { width: 10px; height: 10px; flex: none; fill: var(--ct-text-soft); }
.nlp-category .cc .cc-body { padding: 14px 17px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.nlp-category .cc .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ct-text-soft); }
.nlp-category .cc .meta .school { background: var(--ct-sky-tint); color: var(--ct-sky-deep); font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.nlp-category .cc h3 {
  font-size: 17px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nlp-category .cc .foot { margin-top: auto; display: flex; align-items: baseline; gap: 9px; padding-top: 5px; flex-wrap: wrap; }
.nlp-category .cc .price { font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--ct-ink); }
.nlp-category .cc .was { font-size: 13.5px; color: var(--ct-text-soft); text-decoration: line-through; }
/* The Pro badge renders only for a signed-in member. It is the widest thing that
   can land in the price row, so it takes a line of its own instead of pushing
   the price out of the card. */
.nlp-category .cc .foot .free-pro-badge { flex: 0 0 100%; margin-top: 4px; }

/* whole-card link, sitting under the hover overlay so the buttons stay clickable */
.nlp-category .cc .cc-link { position: absolute; inset: 0; z-index: 1; }

/* --- hover overlay -------------------------------------------------------
   Reuses the live class names (.show_add_cart / .learn-course-hover-content /
   .add_cart) so the delegated jQuery handler in learn_school.blade.php keeps
   working untouched. Only the look changes here.
   ------------------------------------------------------------------------ */
.nlp-category .cc.show_add_cart::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 0;
  background: rgba(10, 45, 55, .55); opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.nlp-category .cc.show_add_cart:hover::before { opacity: 1; }
.nlp-category .cc .learn-course-hover-content {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; display: flex; flex-direction: column; gap: 10px; width: calc(100% - 44px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.nlp-category .cc.show_add_cart:hover .learn-course-hover-content { opacity: 1; visibility: visible; }
.nlp-category .cc .learn-view-detail-btn,
.nlp-category .cc .learn-add-cart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; width: 100%;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px;
  padding: 11px 18px; text-decoration: none; transition: background .15s ease, color .15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nlp-category .cc .learn-view-detail-btn { background: var(--ct-white); color: var(--ct-ink); }
.nlp-category .cc .learn-view-detail-btn:hover,
.nlp-category .cc .learn-view-detail-btn:focus { background: var(--ct-sky-tint); color: var(--ct-sky-deep); }
.nlp-category .cc .learn-add-cart-btn { background: var(--ct-gold); color: #4A3A06; }
.nlp-category .cc .learn-add-cart-btn:hover,
.nlp-category .cc .learn-add-cart-btn:focus { background: #E5B62B; color: #4A3A06; }

/* ============ catalogue toolbar ============ */
.nlp-category .ct-toolbar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 13px 16px; margin-bottom: 22px;
  background: var(--ct-mist); border: 1px solid var(--ct-line); border-radius: 14px;
}
.nlp-category .ct-toolbar-label {
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ct-text-soft);
}
.nlp-category .ct-select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--ct-white);
  /* Inline caret: Nifty's selectpicker is not used on this page, and one more
     sprite request for a chevron is not worth it. */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366787E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  border: 1px solid var(--ct-line); border-radius: 999px;
  padding: 8px 36px 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ct-ink); cursor: pointer; height: auto; width: auto;
}
.nlp-category .ct-select:hover { border-color: var(--ct-sky-line); }
.nlp-category .ct-result { margin-left: auto; font-size: 12.5px; color: var(--ct-text-soft); }
.nlp-category .ct-clear { font-size: 12.5px; font-weight: 700; color: var(--ct-sky-deep); }
.nlp-category .ct-clear:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ pagination ============ */
.nlp-category .ct-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; flex-wrap: wrap; margin-top: 34px;
}
.nlp-category .ct-page {
  min-width: 38px; height: 38px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--ct-line); background: var(--ct-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; color: var(--ct-text);
  font-variant-numeric: tabular-nums;
}
.nlp-category .ct-page:hover { border-color: var(--ct-sky-line); background: var(--ct-sky-tint); color: var(--ct-sky-deep); }
.nlp-category .ct-page.is-on { background: var(--ct-teal); border-color: var(--ct-teal); color: #fff; }
.nlp-category .ct-page-arrow { font-weight: 700; }
.nlp-category .ct-gap { color: var(--ct-text-soft); padding: 0 2px; }

/* ============ empty state ============ */
.nlp-category .ct-empty { text-align: center; padding: 48px 30px; display: grid; justify-items: center; gap: 12px; }
.nlp-category .ct-empty img { opacity: .7; }
.nlp-category .ct-empty h3 { font-size: 22px; }
.nlp-category .ct-empty p { font-size: 14px; color: var(--ct-text-soft); max-width: 48ch; }
.nlp-category .ct-empty .ct-btn { margin-top: 6px; }

/* ============ newest strip ============ */
/* Mini cards keep their quarter-width column however few there are — a strip of
   one stretched across the page would read as a broken section. */
.nlp-category .ct-new-sec { padding-top: 46px; }
.nlp-category .ct-new-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nlp-category .ct-mini {
  display: flex; gap: 12px; align-items: center; padding: 11px 13px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.nlp-category .ct-mini:hover { box-shadow: var(--ct-shadow-lift); transform: translateY(-2px); }
.nlp-category .ct-mini-thumb {
  width: 52px; height: 52px; border-radius: 11px; overflow: hidden;
  flex: 0 0 auto; background: #F5F1E6;
}
.nlp-category .ct-mini-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.nlp-category .ct-mini-body { min-width: 0; line-height: 1.35; }
.nlp-category .ct-mini-body b {
  display: block; font-size: 13.5px; color: var(--ct-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nlp-category .ct-mini:hover .ct-mini-body b { color: var(--ct-sky-deep); }
.nlp-category .ct-mini-body span { font-size: 11.5px; color: var(--ct-text-soft); }
.nlp-category .ct-mini-new { color: var(--ct-green-deep); font-weight: 700; }

/* ============ about the subject ============ */
.nlp-category .ct-about {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 30px; align-items: start;
}
.nlp-category .ct-about-lead p { font-size: 15.5px; color: var(--ct-text); line-height: 1.75; max-width: 46ch; }
.nlp-category .ct-accred {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--ct-line);
}
.nlp-category .ct-accred span {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ct-text-soft); margin-bottom: 12px;
}
.nlp-category .ct-accred img { width: 100%; max-width: 420px; height: auto; }
.nlp-category .ct-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nlp-category .ct-about-card { padding: 18px 20px 19px; }
.nlp-category .ct-about-card b {
  display: block; font-family: 'Fraunces', Georgia, serif; font-size: 16px;
  font-weight: 600; color: var(--ct-ink); margin-bottom: 7px;
}
.nlp-category .ct-about-card p { font-size: 13.5px; color: var(--ct-text-soft); line-height: 1.68; }

/* ============ reviews ============ */
.nlp-category .ct-rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Fewer than three quotable reviews: narrow the grid instead of leaving gaps. */
.nlp-category .ct-rev-grid.ct-rev-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nlp-category .ct-rev-grid.ct-rev-1 { grid-template-columns: minmax(0, 620px); justify-content: center; }
.nlp-category .ct-rev { padding: 19px 21px 21px; display: flex; flex-direction: column; gap: 11px; }
.nlp-category .ct-rev-top { display: flex; align-items: center; gap: 13px; }
.nlp-category .ct-rev-top img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.nlp-category .ct-rev-top b { display: block; font-size: 15px; color: var(--ct-ink); }
.nlp-category .ct-rev-top span { font-size: 12px; color: var(--ct-text-soft); }
.nlp-category .ct-stars { display: flex; gap: 2px; font-size: 14px; color: var(--ct-line); line-height: 1; }
.nlp-category .ct-star.is-on { color: var(--ct-gold); }
/* nifty.css dresses the bare element with a left border, a 3ex first-line
   indent and bootstrap's own padding — undone here rather than avoided by not
   using a <blockquote>, because a review quote is what the element is for. */
.nlp-category .ct-rev blockquote {
  font-size: 14px; color: var(--ct-text); line-height: 1.72;
  border: 0; padding: 0; margin: 0; text-indent: 0;
}

/* ============ articles ============ */
.nlp-category .ct-read-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Most categories have one or two articles, not four. Cap the track width for a
   short row so the cards stay card-shaped instead of leaving three empty slots. */
.nlp-category .ct-read-row.ct-row-1 { grid-template-columns: minmax(0, 360px); }
.nlp-category .ct-read-row.ct-row-2 { grid-template-columns: repeat(2, minmax(0, 360px)); }
.nlp-category .ct-read-row.ct-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nlp-category .ct-read {
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-category .ct-read:hover { box-shadow: var(--ct-shadow-lift); transform: translateY(-3px); }
.nlp-category .ct-read-art { aspect-ratio: 16 / 9.6; overflow: hidden; background: #F5F1E6; display: block; }
.nlp-category .ct-read-art img { width: 100%; height: 100%; object-fit: cover; }
.nlp-category .ct-read-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; }
.nlp-category .ct-read-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--ct-text-soft); }
.nlp-category .ct-read-body b {
  font-family: 'Fraunces', Georgia, serif; font-size: 15.5px; font-weight: 600;
  color: var(--ct-ink); line-height: 1.34;
}
.nlp-category .ct-read:hover .ct-read-body b { color: var(--ct-sky-deep); }
.nlp-category .ct-read-blurb { font-size: 12.5px; color: var(--ct-text-soft); line-height: 1.6; }
.nlp-category .ct-read-sec .sec-head .side a { margin-left: 6px; }

/* ============ accreditation panel ============ */
.nlp-category .ct-cert-sec { padding-top: 62px; }
.nlp-category .ct-cert {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 38px; align-items: center;
  background: var(--ct-mist); border: 1px solid var(--ct-line);
  border-radius: 24px; padding: 40px 44px;
}
.nlp-category .ct-cert .sec-head { margin-bottom: 14px; }
.nlp-category .ct-cert-copy p { font-size: 14.5px; color: var(--ct-text-soft); max-width: 46ch; }
.nlp-category .ct-cert-art img { width: 100%; height: auto; }

/* ============ faq accordion ============ */
/* <details>/<summary>, so it opens and closes with no JavaScript at all. */
.nlp-category .faq-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 34px; align-items: start;
}
.nlp-category .faq-intro p { font-size: 15px; color: var(--ct-text-soft); margin-top: 8px; max-width: 40ch; }
.nlp-category .faq-list { display: flex; flex-direction: column; gap: 11px; }
.nlp-category .faq { border: 1px solid var(--ct-line); border-radius: 15px; background: var(--ct-white); overflow: hidden; }
.nlp-category .faq summary {
  list-style: none; display: flex; align-items: center; gap: 13px;
  padding: 16px 19px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ct-ink);
}
.nlp-category .faq summary::-webkit-details-marker { display: none; }
.nlp-category .faq summary .n {
  font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--ct-sky-deep); flex: 0 0 auto;
}
.nlp-category .faq summary .q { flex: 1; min-width: 0; }
.nlp-category .faq summary .pm {
  margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--ct-line); display: grid; place-items: center;
  color: var(--ct-text-soft); font-size: 14px; transition: transform .2s ease;
}
.nlp-category .faq[open] summary .pm { transform: rotate(45deg); border-color: var(--ct-sky-line); color: var(--ct-sky-deep); }
.nlp-category .faq .a { padding: 0 19px 17px 48px; font-size: 14px; color: var(--ct-text-soft); line-height: 1.68; }

/* ============ other categories ============ */
.nlp-category .ct-others-sec { padding-top: 52px; }
.nlp-category .ct-others { display: flex; gap: 9px; flex-wrap: wrap; }
.nlp-category .ct-other {
  background: var(--ct-white); border: 1px solid var(--ct-line); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--ct-text);
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nlp-category .ct-other:hover { border-color: var(--ct-sky-line); color: var(--ct-sky-deep); box-shadow: var(--ct-shadow); }

/* ============ close band ============ */
.nlp-category .close-band {
  position: relative; overflow: hidden; border-radius: 24px; margin: 74px 0 30px;
  background: linear-gradient(140deg, var(--ct-teal) 0%, var(--ct-teal-deep) 60%, #073A40 100%);
  color: #fff; padding: 52px 54px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; align-items: center;
}
.nlp-category .close-band::after {
  content: ""; position: absolute; right: -90px; bottom: -120px; width: 340px; height: 340px;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%; background: rgba(143, 174, 155, .18); pointer-events: none;
}
.nlp-category .close-band::before {
  content: ""; position: absolute; left: 38%; top: -100px; width: 220px; height: 220px;
  border-radius: 55% 45% 42% 58% / 46% 58% 42% 54%; background: rgba(240, 192, 51, .10); pointer-events: none;
}
.nlp-category .close-band .kicker { color: var(--ct-gold); }
.nlp-category .close-band h2 {
  color: #fff; font-size: clamp(28px, 3.4vw, 40px); font-weight: 500;
  margin: 12px 0 12px; position: relative; z-index: 1;
}
.nlp-category .close-band h2 em { font-style: italic; color: var(--ct-gold); }
.nlp-category .close-band p {
  font-size: 15px; color: rgba(255, 255, 255, .85); max-width: 50ch;
  position: relative; z-index: 1;
}
.nlp-category .close-panel {
  position: relative; z-index: 1; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px; padding: 26px 28px;
  backdrop-filter: blur(4px);
}
.nlp-category .close-panel .inc {
  list-style: none; margin: 0 0 18px; display: flex; flex-direction: column;
  gap: 8px; font-size: 13.5px;
}
.nlp-category .close-panel .inc li { display: flex; gap: 9px; }
.nlp-category .close-panel .inc li::before { content: "\2713"; color: var(--ct-gold); font-weight: 800; }
.nlp-category .close-panel .ct-btn { width: 100%; }

/* ============ motion ============ */
/* Card rows lift in as they arrive. .ct-obs is added by category_v3.js, so with
   no JavaScript — or no IntersectionObserver — the rows simply render visible. */
.nlp-category .ct-reveal.ct-obs > * { opacity: 0; transform: translateY(16px); }
.nlp-category .ct-reveal.ct-obs.is-in > * {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}
.nlp-category .ct-reveal.ct-obs.is-in > *:nth-child(2) { transition-delay: .07s; }
.nlp-category .ct-reveal.ct-obs.is-in > *:nth-child(3) { transition-delay: .14s; }
.nlp-category .ct-reveal.ct-obs.is-in > *:nth-child(4) { transition-delay: .21s; }

/* ============ responsive ============ */
@media (max-width: 1200px) {
  .nlp-category .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .nlp-category .ct-hero-in { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 32px; }
  .nlp-category .ct-hero-art { max-width: 560px; }
  .nlp-category .ct-about { grid-template-columns: minmax(0, 1fr); }
  /* .sec-head keeps its side note in a right-hand column via margin-left: auto,
     which strands it mid-row once the heading takes the full width. */
  .nlp-category .sec-head .side { margin-left: 0; max-width: none; }
  .nlp-category .ct-rev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-category .ct-rev-grid.ct-rev-1 { grid-template-columns: minmax(0, 1fr); }
  /* Rail card widths follow the shared strip's own breakpoints: three per view
     here, two below 760, and one nearly-full card below 640. */
  .nlp-category .ct-lp-card { flex-basis: calc((100% - var(--ct-lp-gap) * 2) / 3); }
  /* The short-row caps above carry three classes, so they have to be undone by
     name here rather than left to the plain .ct-read-row rule. */
  .nlp-category .ct-read-row,
  .nlp-category .ct-read-row.ct-row-2,
  .nlp-category .ct-read-row.ct-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-category .ct-read-row.ct-row-1 { grid-template-columns: minmax(0, 1fr); }
  .nlp-category .ct-new-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-category .ct-cert { grid-template-columns: minmax(0, 1fr); padding: 32px 30px; }
  .nlp-category .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-category .close-band { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
}
@media (max-width: 900px) {
  .nlp-category .ct-grid,
  .nlp-category .ct-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* The stat band is auto-flow column, so a row cap has to re-declare the flow. */
  .nlp-category .ct-stats-in {
    grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px;
  }
  .nlp-category .ct-stat:nth-child(odd) { border-left: 0; }
  .nlp-category .ct-about-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-category .ct-lp-card { flex-basis: calc((100% - var(--ct-lp-gap)) / 2); }
}
@media (max-width: 640px) {
  .nlp-category .wrap { padding-left: 16px; padding-right: 16px; }
  .nlp-category .sec { padding: 44px 0 8px; }
  .nlp-category .ct-hero-in { padding-left: 16px; padding-right: 16px; }
  .nlp-category .ct-grid,
  .nlp-category .ct-grid-3,
  .nlp-category .ct-rev-grid,
  .nlp-category .ct-rev-grid.ct-rev-2,
  .nlp-category .ct-read-row,
  .nlp-category .ct-read-row.ct-row-2,
  .nlp-category .ct-read-row.ct-row-3,
  .nlp-category .ct-new-row { grid-template-columns: minmax(0, 1fr); }
  .nlp-category .ct-lp { padding: 20px 16px 22px; }
  .nlp-category .ct-lp-head { display: block; }
  .nlp-category .ct-lp-nav { padding-top: 14px; }
  .nlp-category .ct-lp-card { flex-basis: 82%; }
  .nlp-category .ct-toolbar { align-items: stretch; gap: 9px; }
  .nlp-category .ct-select { width: 100%; }
  .nlp-category .ct-result { margin-left: 0; width: 100%; }
  .nlp-category .ct-feat-foot { flex-wrap: wrap; }
  .nlp-category .ct-feat-foot .ct-btn { margin-left: 0; width: 100%; }
  .nlp-category .ct-hero-cta .ct-btn { width: 100%; }
  .nlp-category .close-band { padding: 30px 22px; }
}
/* The hover overlay is the only route to "add to cart" on a card, and a touch
   screen has no hover: it would take two taps, the first of which looks like a
   dead tap on the card. On touch the card is a link to the course, and the
   course page carries its own buy button. */
@media (hover: none) {
  .nlp-category .cc.show_add_cart::before,
  .nlp-category .cc .learn-course-hover-content { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nlp-category *,
  .nlp-category *::before,
  .nlp-category *::after { animation: none; transition: none; }
}