/* ==========================================================================
   LEARNING PATHS INDEX — v3   (/{locale}/learning-paths)

   Loaded by resources/views/learning-paths/index_v3.blade.php alone, pushed into
   the head after front.css so its rules win on order as well as on specificity.

   Design donor: public/frontend-test/css/learning-paths.css, the prototype twin
   still served at /en/learning-paths-test. That file is NOT imported and is not
   a live dependency — it scopes everything to .nlp-page, which never matches
   here, and it leans on the sandbox layout's base.css for its shell primitives,
   which this page does not load. So the shell half below is lms/css/
   all_courses_v3.css (itself the blog listing's), and only the path furniture is
   ported across. Two files, one look; neither can break the other.

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

     1. SCOPE. Everything is under .nlp-paths, 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 --pt-. 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. Same reasoning as --ac- on the catalogue and --bt- on the blog.

     3. BUTTONS ARE .pt-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.

   The pt- prefix is the twin's and is kept so the two files grep 1:1. It does
   not collide with front.css's .pt-10 … .pt-20 padding utilities: every class
   here ends in a word, never a number.

   Order matters: the shell primitives come before the page furniture, because
   .pt-masthead, .pt-spot-sec, .pt-how-sec and .pt-grid-sec each re-set the
   section padding .sec gives them at equal specificity. Keep the halves in this
   order.
   ========================================================================== */

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

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

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

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

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

.nlp-paths .pt-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-paths .card {
  background: var(--pt-white);
  border: 1px solid var(--pt-line);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  margin-bottom: 0;
}
.nlp-paths .card > :first-child,
.nlp-paths .card > :last-child { border-radius: 0; }

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

/* ============ buttons ============ */
/* .pt-btn, not .btn.small — see note 3 in the file header. */
.nlp-paths .pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; background: var(--pt-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-paths .pt-btn:hover,
.nlp-paths .pt-btn:focus { background: var(--pt-sky-deep); color: #fff; }
.nlp-paths .pt-btn:active { transform: scale(.985); }
.nlp-paths .pt-btn-sm { padding: 9px 19px; font-size: 13px; box-shadow: none; }
.nlp-paths .pt-btn-gold { background: var(--pt-gold); color: #4A3A06; box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5); }
.nlp-paths .pt-btn-gold:hover,
.nlp-paths .pt-btn-gold:focus { background: #E5B62B; color: #4A3A06; }
/* The spotlight's button is a <span> inside the card's own link, so it lights up
   with the card rather than on a hover of its own. */
.nlp-paths .pt-spot:hover .pt-btn-gold { background: #E5B62B; }

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

/* ============ masthead ============ */
.nlp-paths .pt-masthead { padding-top: 40px; }
.nlp-paths .pt-masthead .sec-head { margin-bottom: 12px; }
.nlp-paths .pt-masthead .sec-head .side { max-width: 46ch; }
.nlp-paths .pt-count {
  font-size: 13px; font-weight: 600; color: var(--pt-text-soft);
  letter-spacing: .01em;
}
/* The breadcrumb the original index carried, restyled. It is the only route back
   up from here that is not the header, so it stays. */
.nlp-paths .pt-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--pt-text-soft); margin-bottom: 18px;
}
.nlp-paths .pt-crumbs a:hover { color: var(--pt-sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.nlp-paths .pt-crumbs .pt-crumb-now { color: var(--pt-ink); font-weight: 600; }
.nlp-paths .pt-crumbs .pt-crumb-sep { color: var(--pt-sky-line); }

/* ============ stat band ============ */
.nlp-paths .pt-stats { margin-top: 26px; }
.nlp-paths .pt-stats-in {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; padding: 22px 0; border-top: 1px solid var(--pt-line);
  border-bottom: 1px solid var(--pt-line);
}
.nlp-paths .pt-stat { text-align: center; }
.nlp-paths .pt-stat b {
  display: block; font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 3vw, 34px); font-weight: 500; color: var(--pt-ink);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.nlp-paths .pt-stat span {
  display: block; margin-top: 4px; font-size: 12.5px; color: var(--pt-text-soft);
}

/* ============ shared card furniture ============ */
.nlp-paths .pt-blurb {
  font-size: 13.5px; color: var(--pt-text-soft); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nlp-paths .pt-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; color: var(--pt-text-soft);
}
.nlp-paths .pt-meta > span + span::before {
  content: "\00B7"; margin-right: 8px; color: var(--pt-sky-line);
}
.nlp-paths .pt-pill {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  background: rgba(255, 255, 255, .95); color: var(--pt-ink);
  border-radius: 999px; padding: 3px 11px;
  font-size: 11px; font-weight: 700; box-shadow: var(--pt-shadow);
}
.nlp-paths .pt-flag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  background: var(--pt-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(--pt-shadow);
}

/* ============ spotlight path ============ */
.nlp-paths .pt-spot-sec { padding-top: 46px; }
.nlp-paths .pt-spot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  overflow: hidden; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-paths .pt-spot:hover { box-shadow: var(--pt-shadow-lift); transform: translateY(-3px); }
/* Course covers are square posters, not photographs — each carries the
   certification name in the top band and the accreditation strip across the
   foot. On the spotlight the art is shown WHOLE on the tint rather than cropped
   to fill, and it is taken out of flow: at its natural height a portrait poster
   ran the card 250px past the end of the copy beside it. What is left is the
   aspect-ratio floor, so the card is as tall as its text and no taller. */
.nlp-paths .pt-spot-art {
  position: relative; display: block; aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--pt-teal-tint), var(--pt-sky-tint));
}
.nlp-paths .pt-spot-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; padding: 20px;
  transition: transform .4s ease;
}
.nlp-paths .pt-spot:hover .pt-spot-art img { transform: scale(1.03); }
.nlp-paths .pt-spot-body {
  display: flex; flex-direction: column; gap: 11px;
  padding: 30px 34px 28px; min-width: 0;
}
.nlp-paths .pt-spot-body h2 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.22; }
.nlp-paths .pt-spot:hover .pt-spot-body h2 { color: var(--pt-teal); }
.nlp-paths .pt-spot-body .pt-blurb { font-size: 14.5px; -webkit-line-clamp: 4; }
.nlp-paths .pt-spot-body .pt-btn { margin-top: 6px; align-self: flex-start; }

.nlp-paths .pt-inside {
  display: block; margin-top: 4px; padding-top: 14px;
  border-top: 1px dashed var(--pt-line);
}
.nlp-paths .pt-inside > b {
  display: block; margin-bottom: 9px;
  font-family: 'Poppins', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--pt-green-deep);
}
.nlp-paths .pt-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.nlp-paths .pt-chip {
  background: var(--pt-mist); border: 1px solid var(--pt-line); border-radius: 999px;
  padding: 5px 13px; font-size: 12.5px; font-weight: 600; color: var(--pt-text);
}

/* ============ how a path works ============ */
.nlp-paths .pt-how-sec { padding-top: 58px; }
.nlp-paths .pt-how-sec .sec-head .side { max-width: 40ch; }
.nlp-paths .pt-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nlp-paths .pt-step {
  position: relative; padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 9px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-paths .pt-step:hover { box-shadow: var(--pt-shadow-lift); transform: translateY(-3px); }
.nlp-paths .pt-step-n {
  font-family: 'Fraunces', Georgia, serif; font-size: 30px; font-weight: 500;
  color: var(--pt-sky-deep); line-height: 1; font-variant-numeric: tabular-nums;
}
.nlp-paths .pt-step b { font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: var(--pt-ink); font-weight: 600; }
.nlp-paths .pt-step p { font-size: 13.5px; color: var(--pt-text-soft); line-height: 1.65; }
/* The three steps read as one run, so the accent walks the palette rather than
   repeating the same blue three times. */
.nlp-paths .pt-how .pt-step:nth-child(2) .pt-step-n { color: var(--pt-green-deep); }
.nlp-paths .pt-how .pt-step:nth-child(3) .pt-step-n { color: var(--pt-gold-deep); }

/* ============ toolbar ============ */
.nlp-paths .pt-grid-sec { padding-top: 58px; }
/* .sec-head lays the side note out beside the heading and only wraps it to its
   own row when the two together outrun the container. Uncapped, this one always
   did — and a right-aligned line on its own row reads as stranded. */
.nlp-paths .pt-grid-sec .sec-head .side { max-width: 34ch; }
.nlp-paths .pt-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -6px 0 22px; padding-top: 16px; border-top: 1px solid var(--pt-line);
}
.nlp-paths .pt-search {
  display: flex; align-items: center; gap: 9px;
  background: var(--pt-white); border: 1px solid var(--pt-line); border-radius: 999px;
  padding: 9px 18px; width: 340px; max-width: 100%;
}
.nlp-paths .pt-search:focus-within { border-color: var(--pt-sky); }
.nlp-paths .pt-search svg { width: 15px; height: 15px; color: var(--pt-text-soft); flex: 0 0 auto; }
/* front.css and Bootstrap both style bare inputs — a border, a grey background,
   a fixed 34px height and a block display that would break the flex row. */
.nlp-paths .pt-search input {
  border: 0; outline: 0; background: transparent; width: 100%; height: auto;
  padding: 0; box-shadow: none; border-radius: 0;
  font: inherit; font-size: 13.5px; color: var(--pt-ink);
}
.nlp-paths .pt-search input::placeholder { color: #9AABB1; }
/* The UA clear button sits on the border radius and draws its own grey cross;
   the empty state already offers a reset, so it goes. */
.nlp-paths .pt-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.nlp-paths .pt-select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--pt-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(--pt-line); border-radius: 999px;
  padding: 9px 36px 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--pt-ink); cursor: pointer; height: auto; width: auto;
}
.nlp-paths .pt-select:hover { border-color: var(--pt-sky-line); }
.nlp-paths .pt-result { margin-left: auto; font-size: 13px; color: var(--pt-text-soft); }
.nlp-paths .pt-result:empty { display: none; }

/* ============ path grid ============ */
.nlp-paths .pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* The script hides the grid outright when a search matches nothing. Both of
   these need saying: the UA sheet's [hidden] { display: none } loses to the
   display rules above it, so hidden would otherwise still lay out. */
.nlp-paths .pt-grid[hidden] { display: none; }
.nlp-paths .pt-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.nlp-paths .pt-card:hover { box-shadow: var(--pt-shadow-lift); transform: translateY(-3px); }
.nlp-paths .pt-card[hidden] { display: none; }
/* 16/9 and cover, not the square the course cards use. The cover here is one
   member course's poster standing in for a whole path, and cropping the band
   that carries that course's own title is the point — the heading below is the
   path's name, and a certification name printed over it reads as the card being
   about that one course. */
.nlp-paths .pt-cover {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(150deg, var(--pt-teal-tint), var(--pt-sky-tint));
}
.nlp-paths .pt-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nlp-paths .pt-card:hover .pt-cover img { transform: scale(1.04); }
/* Cover for a path whose courses carry no artwork — the name fills the frame. */
.nlp-paths .pt-cover-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 22px 26px; text-align: center;
  font-family: 'Fraunces', Georgia, serif; font-size: 19px; font-weight: 600;
  color: var(--pt-teal-deep); line-height: 1.25;
}
.nlp-paths .pt-body { display: flex; flex-direction: column; gap: 9px; padding: 17px 20px 18px; flex: 1; }
.nlp-paths .pt-body h3 {
  font-size: 18.5px; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nlp-paths .pt-card:hover .pt-body h3 { color: var(--pt-teal); }
.nlp-paths .pt-go {
  margin-top: auto; padding-top: 13px; border-top: 1px dashed var(--pt-line);
  font-size: 13px; font-weight: 700; color: var(--pt-sky-deep);
}
.nlp-paths .pt-card:hover .pt-go { color: var(--pt-teal); }

/* empty states — the search miss is revealed by the script, the catalogue miss
   is server-rendered when no path is launched at all */
.nlp-paths .pt-empty { text-align: center; padding: 48px 30px; display: grid; justify-items: center; gap: 12px; }
.nlp-paths .pt-empty[hidden] { display: none; }
.nlp-paths .pt-empty img { opacity: .7; }
.nlp-paths .pt-empty h3 { font-size: 22px; }
.nlp-paths .pt-empty p { font-size: 14px; color: var(--pt-text-soft); max-width: 44ch; }
.nlp-paths .pt-empty .pt-btn { margin-top: 6px; }

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

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

/* ============ responsive ============ */
@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-paths .pt-masthead .sec-head .side,
  .nlp-paths .pt-how-sec .sec-head .side,
  .nlp-paths .pt-grid-sec .sec-head .side { margin-left: 0; max-width: none; }
  .nlp-paths .pt-spot { grid-template-columns: minmax(0, 1fr); }
  .nlp-paths .pt-spot-art { aspect-ratio: 16 / 9; }
  .nlp-paths .pt-spot-body { padding: 24px 24px 22px; }
  .nlp-paths .pt-how { grid-template-columns: minmax(0, 1fr); }
  .nlp-paths .pt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nlp-paths .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-paths .close-band { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; }
}
@media (max-width: 640px) {
  .nlp-paths .wrap { padding-left: 16px; padding-right: 16px; }
  .nlp-paths .sec { padding: 48px 0 8px; }
  .nlp-paths .pt-masthead { padding-top: 26px; }
  .nlp-paths .pt-stats-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .nlp-paths .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .nlp-paths .pt-toolbar { align-items: stretch; }
  .nlp-paths .pt-search,
  .nlp-paths .pt-select { width: 100%; }
  .nlp-paths .pt-result { margin-left: 0; }
  .nlp-paths .pt-spot-body .pt-btn { align-self: stretch; }
  /* One column, so the poster fills the art box edge to edge and the flag lands
     on top of it — and these posters carry their course title up there. Drop the
     artwork below the flag rather than over it. */
  .nlp-paths .pt-spot-art img { padding: 54px 20px 20px; }
  .nlp-paths .close-band { padding: 30px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nlp-paths *,
  .nlp-paths *::before,
  .nlp-paths *::after { animation: none; transition: none; }
}