/* ==========================================================================
   COURSE CATALOGUE — v3   (/{locale}/courses and /{locale}/{school}/courses)

   Loaded by resources/views/lms/learn/all_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, masthead, pills,
       toolbar, pager, FAQ, closing band) are lms/css/blog_list_v3.css, so the
       journal and the catalogue read as the same site;
     - the course card (.cc and everything under it) is lms/css/home_v3.css, so
       a card on '/' and a card here are the same card.

   Neither file is imported: an @import would make the catalogue break the next
   time the blog or the homepage retunes a shared name, and both of those pages
   scope their rules to .nlp-blog / .nlp-page anyway, which never match here.

   Three rules carried over from the blog port, for the same reasons:

     1. SCOPE. Everything is under .nlp-courses, 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 --ac-. 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
        catalogue. Same reasoning as --bt- on the blog listing and --at- on the
        article page.

     3. BUTTONS ARE .ac-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 furniture, because
   .ac-masthead, .ac-filters-sec, .ac-grid-sec and .ac-cert-sec each re-set the
   section padding .sec gives them at equal specificity. Keep the halves in this
   order.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-courses {
  --ac-sky: #3FA9E8;
  --ac-sky-deep: #2286C7;
  --ac-sky-tint: #EDF6FC;
  --ac-sky-line: #D3E9F8;
  --ac-ink: #12303B;
  --ac-teal: #0F6E78;
  --ac-teal-deep: #0A4F57;
  --ac-paper: #FDFEFE;
  --ac-mist: #F6FAFA;
  --ac-line: #E6EDEC;
  --ac-white: #ffffff;
  --ac-text: #3D5058;
  --ac-text-soft: #66787E;
  --ac-gold: #F0C033;
  --ac-green-soft: #DFF1E7;
  --ac-green-deep: #1F7A6F;
  --ac-radius: 18px;
  --ac-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --ac-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);
}

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

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

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

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

.nlp-courses .ac-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 worked around in every
   component. */
.nlp-courses .card {
  background: var(--ac-white);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  margin-bottom: 0;
}
.nlp-courses .card > :first-child,
.nlp-courses .card > :last-child { border-radius: 0; }

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

/* ============ buttons ============ */
/* .ac-btn, not .btn.small — see note 3 in the file header. */
.nlp-courses .ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; background: var(--ac-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-courses .ac-btn:hover,
.nlp-courses .ac-btn:focus { background: var(--ac-sky-deep); color: #fff; }
.nlp-courses .ac-btn:active { transform: scale(.985); }
.nlp-courses .ac-btn-sm { padding: 8px 17px; font-size: 13px; box-shadow: none; }
.nlp-courses .ac-btn-gold { background: var(--ac-gold); color: #4A3A06; box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5); }
.nlp-courses .ac-btn-gold:hover,
.nlp-courses .ac-btn-gold:focus { background: #E5B62B; color: #4A3A06; }
/* Secondary of the pair on the lead card, so the gold add-to-cart stays the one
   thing being offered. Border, not a tint, so it reads as the quieter control on
   the white card. */
.nlp-courses .ac-btn-ghost {
  background: var(--ac-white); color: var(--ac-ink);
  border: 1.5px solid var(--ac-line); box-shadow: none;
}
.nlp-courses .ac-btn-ghost:hover,
.nlp-courses .ac-btn-ghost:focus { background: var(--ac-sky-tint); border-color: var(--ac-sky-line); color: var(--ac-sky-deep); }

.nlp-courses .ac-link {
  border: 0; background: none; padding: 0;
  font-size: 13px; font-weight: 600; color: var(--ac-text-soft); font-family: inherit;
}
.nlp-courses .ac-link:hover { color: var(--ac-sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.nlp-courses .ac-clear-all { margin-left: auto; }

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

/* ============ masthead ============ */
.nlp-courses .ac-masthead { padding-top: 40px; }
.nlp-courses .ac-masthead .sec-head { margin-bottom: 12px; }
.nlp-courses .ac-masthead .sec-head .side { max-width: 46ch; }
.nlp-courses .ac-count {
  font-size: 13px; font-weight: 600; color: var(--ac-text-soft);
  letter-spacing: .01em;
}
/* A school catalogue sits one level down from the index, so it carries a crumb
   back to it above the heading. */
.nlp-courses .ac-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ac-text-soft); margin-bottom: 18px;
}
.nlp-courses .ac-crumbs a:hover { color: var(--ac-sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.nlp-courses .ac-crumbs .ac-crumb-now { color: var(--ac-ink); font-weight: 600; }
.nlp-courses .ac-crumbs .ac-crumb-sep { color: var(--ac-sky-line); }

/* School rating. Five glyphs, a grey row with a gold row clipped over it; the
   clip width comes from data-pct via all_courses_v3.js. The original page
   loaded a jQuery star plugin and its stylesheet to draw this one line. */
.nlp-courses .ac-rating {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 10px; font-size: 13px; color: var(--ac-text-soft);
}
.nlp-courses .ac-stars { position: relative; display: inline-block; line-height: 1; flex: 0 0 auto; }
.nlp-courses .ac-stars-bg { color: var(--ac-sky-line); letter-spacing: 2px; font-size: 16px; }
.nlp-courses .ac-stars-on {
  position: absolute; left: 0; top: 0; width: 0; overflow: hidden; white-space: nowrap;
  color: #F98600; letter-spacing: 2px; font-size: 16px;
}
.nlp-courses .ac-rating b { color: var(--ac-ink); font-size: 14px; }

/* ============ lead course ============ */
.nlp-courses .ac-lead {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  overflow: hidden; margin-top: 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-courses .ac-lead:hover { box-shadow: var(--ac-shadow-lift); transform: translateY(-3px); }
/* Whole-card link. Course covers carry no controls of their own here, so the
   overlay can sit above everything — nothing under it needs to be clickable. */
.nlp-courses .ac-cover-link { position: absolute; inset: 0; z-index: 3; }
/* Covers are square (800x800) with the certification name baked into the top
   band and an accreditation strip across the foot. The art column is square
   too, so object-fit: cover crops nothing at all. */
.nlp-courses .ac-lead-art { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #F5F1E6; }
.nlp-courses .ac-lead-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.nlp-courses .ac-lead:hover .ac-lead-art img { transform: scale(1.03); }
.nlp-courses .ac-flag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  background: var(--ac-gold); color: #4A3A06; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 13px;
  box-shadow: var(--ac-shadow);
}
.nlp-courses .ac-lead-body {
  display: flex; flex-direction: column; gap: 11px;
  padding: 34px 38px 32px; min-width: 0; justify-content: center;
}
.nlp-courses .ac-lead-body h2 { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.22; }
.nlp-courses .ac-lead:hover .ac-lead-body h2 { color: var(--ac-teal); }
.nlp-courses .ac-lead-foot {
  margin-top: 8px; padding-top: 16px; border-top: 1px dashed var(--ac-line);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nlp-courses .ac-price-row { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nlp-courses .ac-price-row .price { font-family: 'Fraunces', Georgia, serif; font-size: 25px; font-weight: 600; color: var(--ac-ink); }
.nlp-courses .ac-price-row .was { font-size: 15px; color: var(--ac-text-soft); text-decoration: line-through; }
/* The two controls are real <a>/<button> elements, so they have to clear
   .ac-cover-link — the card-wide overlay at z-index 3 — or it swallows every
   click before they see it. */
.nlp-courses .ac-lead-actions {
  margin-left: auto; position: relative; z-index: 4;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* shared card furniture */
.nlp-courses .ac-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--ac-text-soft);
}
.nlp-courses .ac-meta > span + span::before {
  content: "\00B7"; margin-right: 8px; color: var(--ac-sky-line);
}
.nlp-courses .ac-meta > span.ac-tag + span::before { content: none; }
.nlp-courses .ac-tag {
  background: var(--ac-sky-tint); color: var(--ac-sky-deep); font-weight: 700;
  border-radius: 999px; padding: 2px 10px;
}
.nlp-courses .ac-blurb {
  font-size: 14px; color: var(--ac-text-soft); line-height: 1.62;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============ filters ============ */
.nlp-courses .ac-filters-sec { padding-top: 40px; }
.nlp-courses .ac-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.nlp-courses .ac-pill {
  flex: 0 0 auto;
  background: var(--ac-white); border: 1px solid var(--ac-line); border-radius: 999px;
  padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--ac-text);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.nlp-courses .ac-pill:hover { border-color: var(--ac-sky-line); background: var(--ac-sky-tint); color: var(--ac-sky-deep); }
.nlp-courses .ac-pill.is-on { background: var(--ac-teal); border-color: var(--ac-teal); color: #fff; }
.nlp-courses .ac-pill.is-on:hover { background: var(--ac-teal-deep); border-color: var(--ac-teal-deep); color: #fff; }

.nlp-courses .ac-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ac-line);
}
.nlp-courses .ac-toolbar-label { font-size: 13px; font-weight: 600; color: var(--ac-text-soft); }

.nlp-courses .ac-select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--ac-white);
  /* Inline caret: the theme'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(--ac-line); border-radius: 999px;
  padding: 8px 36px 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ac-ink); cursor: pointer; height: auto; width: auto;
}
.nlp-courses .ac-select:hover { border-color: var(--ac-sky-line); }

/* ============ course grid ============ */
.nlp-courses .ac-grid-sec { padding-top: 26px; }
.nlp-courses .ac-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* --- the card, ported from lms/css/home_v3.css ------------------------- */
.nlp-courses .cc {
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease; position: relative;
}
.nlp-courses .cc:hover { box-shadow: var(--ac-shadow-lift); transform: translateY(-3px); }
.nlp-courses .cc .art { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #F5F1E6; display: block; }
.nlp-courses .cc .art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.nlp-courses .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-courses .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-courses .cc .flag.best { background: var(--ac-gold); color: #4A3A06; }
.nlp-courses .cc .flag.newc { background: var(--ac-green-soft); color: var(--ac-green-deep); }
.nlp-courses .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(--ac-ink); border-radius: 999px; padding: 2px 7px 2px 5px;
  font-variant-numeric: tabular-nums;
}
.nlp-courses .cc .students svg { width: 10px; height: 10px; flex: none; fill: var(--ac-text-soft); }
.nlp-courses .cc .cc-body { padding: 14px 17px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.nlp-courses .cc .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--ac-text-soft); }
.nlp-courses .cc .meta .school { background: var(--ac-sky-tint); color: var(--ac-sky-deep); font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.nlp-courses .cc h3 {
  font-size: 17px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nlp-courses .cc .foot { margin-top: auto; display: flex; align-items: baseline; gap: 9px; padding-top: 5px; flex-wrap: wrap; }
.nlp-courses .cc .price { font-family: 'Fraunces', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--ac-ink); }
.nlp-courses .cc .was { font-size: 13.5px; color: var(--ac-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-courses .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-courses .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-courses .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-courses .cc.show_add_cart:hover::before { opacity: 1; }
.nlp-courses .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-courses .cc.show_add_cart:hover .learn-course-hover-content { opacity: 1; visibility: visible; }
.nlp-courses .cc .learn-view-detail-btn,
.nlp-courses .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-courses .cc .learn-view-detail-btn { background: var(--ac-white); color: var(--ac-ink); }
.nlp-courses .cc .learn-view-detail-btn:hover,
.nlp-courses .cc .learn-view-detail-btn:focus { background: var(--ac-sky-tint); color: var(--ac-sky-deep); }
.nlp-courses .cc .learn-add-cart-btn { background: var(--ac-gold); color: #4A3A06; }
.nlp-courses .cc .learn-add-cart-btn:hover,
.nlp-courses .cc .learn-add-cart-btn:focus { background: #E5B62B; color: #4A3A06; }

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

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

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

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

/* ============ close band ============ */
.nlp-courses .close-band {
  position: relative; overflow: hidden; border-radius: 24px; margin: 78px 0 30px;
  background: linear-gradient(140deg, var(--ac-teal) 0%, var(--ac-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-courses .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-courses .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-courses .close-band .kicker { color: var(--ac-gold); }
.nlp-courses .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-courses .close-band h2 em { font-style: italic; color: var(--ac-gold); }
.nlp-courses .close-band p {
  font-size: 15px; color: rgba(255, 255, 255, .85); max-width: 50ch;
  position: relative; z-index: 1;
}
.nlp-courses .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-courses .close-panel .inc {
  list-style: none; margin: 0 0 18px; display: flex; flex-direction: column;
  gap: 8px; font-size: 13.5px;
}
.nlp-courses .close-panel .inc li { display: flex; gap: 9px; }
.nlp-courses .close-panel .inc li::before { content: "\2713"; color: var(--ac-gold); font-weight: 800; }
.nlp-courses .close-panel .ac-btn { width: 100%; }
.nlp-courses .ac-panel-link {
  display: block; text-align: center; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8);
}
.nlp-courses .ac-panel-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ============ responsive ============ */
@media (max-width: 1200px) {
  .nlp-courses .ac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  /* .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-courses .ac-masthead .sec-head .side { margin-left: 0; max-width: none; }
  .nlp-courses .ac-lead { grid-template-columns: minmax(0, 1fr); }
  .nlp-courses .ac-lead-art { aspect-ratio: 16 / 9; }
  .nlp-courses .ac-lead-body { padding: 26px 26px 24px; }
  .nlp-courses .ac-cert { grid-template-columns: minmax(0, 1fr); padding: 32px 30px; }
  .nlp-courses .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-courses .close-band { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
}
@media (max-width: 900px) {
  .nlp-courses .ac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nlp-courses .wrap { padding-left: 16px; padding-right: 16px; }
  .nlp-courses .sec { padding: 48px 0 8px; }
  .nlp-courses .ac-masthead { padding-top: 26px; }
  .nlp-courses .ac-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-courses .ac-toolbar { align-items: stretch; }
  .nlp-courses .ac-select { width: 100%; }
  .nlp-courses .ac-clear-all { margin-left: 0; }
  .nlp-courses .ac-lead-actions { margin-left: 0; width: 100%; }
  .nlp-courses .ac-lead-actions .ac-btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; }
  .nlp-courses .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-courses .cc.show_add_cart::before,
  .nlp-courses .cc .learn-course-hover-content { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nlp-courses *,
  .nlp-courses *::before,
  .nlp-courses *::after { animation: none; transition: none; }
}