/* ==========================================================================
   BLOG LISTING — v3   (/{locale}/learn/blog and /{locale}/{category}/blog)

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

   Ported on 2026-08-27 from the /learn/blog-test twin — frontend-test/css/
   base.css (the parts a listing uses) plus frontend-test/css/blog.css, merged
   into one file. That folder is the design donor and NOT a dependency: nothing
   at these URLs loads from public/frontend-test/.

   Three things changed in the port, all because this page runs on the real
   learn_school layout, where Bootstrap, Nifty and front.css are all present
   and the twin's standalone shell had none of them:

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

     2. TOKENS ARE PREFIXED --bt-. The twin's tokens are unprefixed (--sky,
        --ink, --green...) and 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 listing.
        Same reasoning as the --at- prefix in lms/css/blog_detail_v3.css and
        the --nlp- prefix in lms/css/header_v3.css.

     3. BUTTONS ARE .bt-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 too: the layout's cart and header controls use it.

   Order matters: the shell primitives (.sec, .card, .kicker...) come before
   the listing furniture, because .bt-masthead, .bt-filters-sec, .bt-grid-sec
   and .bt-mostread-sec each re-set the section padding .sec gives them at
   equal specificity. Keep the halves in this order.

   The class prefix stays bt- ("blog test"), the donor's, exactly as the
   article page kept at-. See project-homepage-test-redesign.
   ========================================================================== */

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

/* ============ reset ============ */
/* Bootstrap already box-sizes everything; repeated here so the port behaves
   identically if this page is ever lifted onto a layout that does not. */
.nlp-blog *,
.nlp-blog *::before,
.nlp-blog *::after {
  box-sizing: border-box;
}

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

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

.nlp-blog h1,
.nlp-blog h2,
.nlp-blog h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--bt-ink);
  line-height: 1.14;
  letter-spacing: -0.012em;
  font-weight: 600;
}

.nlp-blog a {
  color: inherit;
  text-decoration: none;
}

.nlp-blog img {
  max-width: 100%;
  display: block;
}

.nlp-blog button {
  font-family: inherit;
  cursor: pointer;
}

.nlp-blog :focus-visible {
  outline: 2px solid var(--bt-sky-deep);
  outline-offset: 2px;
  border-radius: 6px;
}

.nlp-blog .bt-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-blog .card {
  background: var(--bt-white);
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow);
  margin-bottom: 0;
}

.nlp-blog .card> :first-child,
.nlp-blog .card> :last-child {
  border-radius: 0;
}

/* Bootstrap makes every <label> bold, inline-block and 5px tall at the foot.
   The topic rows are flex containers, so all three are undone here. */
.nlp-blog label {
  font-weight: 400;
  margin-bottom: 0;
  max-width: none;
}

/* ============ buttons ============ */
/* .bt-btn, not .btn.small — see note 3 in the file header. */
.nlp-blog .bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--bt-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-blog .bt-btn:hover,
.nlp-blog .bt-btn:focus {
  background: var(--bt-sky-deep);
  color: #fff;
}

.nlp-blog .bt-btn:active {
  transform: scale(.985);
}

.nlp-blog .bt-btn-sm {
  padding: 8px 17px;
  font-size: 13px;
  box-shadow: none;
}

.nlp-blog .bt-btn-gold {
  background: var(--bt-gold);
  color: #4A3A06;
  box-shadow: 0 6px 16px -6px rgba(240, 192, 51, .5);
}

.nlp-blog .bt-btn-gold:hover,
.nlp-blog .bt-btn-gold:focus {
  background: #E5B62B;
  color: #4A3A06;
}

/* The lead card's button is a <span> inside the card's <a>, so it lights up
   with the card rather than on a hover of its own. */
.nlp-blog .bt-lead:hover .bt-btn-gold {
  background: #E5B62B;
}

/* ============ layout primitives ============ */
.nlp-blog .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px;
}

.nlp-blog .sec {
  padding: 74px 0 10px;
}

.nlp-blog .kicker {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bt-sky-deep);
}

.nlp-blog .sec-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 26px;
}

.nlp-blog .sec-head h1,
.nlp-blog .sec-head h2 {
  font-size: clamp(27px, 3.2vw, 38px);
}

.nlp-blog .sec-head h1 em,
.nlp-blog .sec-head h2 em {
  font-style: italic;
  color: var(--bt-teal);
}

.nlp-blog .sec-head .side {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--bt-text-soft);
}

.nlp-blog .sec-head .side a {
  color: var(--bt-sky-deep);
  font-weight: 700;
}

.nlp-blog .sec-head .side a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lighter heading for a strip inside a section — "most read" sits under one. */
.nlp-blog .ns-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}

.nlp-blog .ns-head .k {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bt-green-deep);
}

.nlp-blog .ns-head .side {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--bt-text-soft);
}

/* ============ masthead ============ */
.nlp-blog .bt-masthead {
  padding-top: 40px;
}

.nlp-blog .bt-masthead .sec-head {
  margin-bottom: 12px;
}

.nlp-blog .bt-masthead .sec-head .side {
  max-width: 46ch;
}

.nlp-blog .bt-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-text-soft);
  letter-spacing: .01em;
}

/* Category listings sit one level down from the index, so they carry a crumb
   back to it above the heading. */
.nlp-blog .bt-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--bt-text-soft);
  margin-bottom: 18px;
}

.nlp-blog .bt-crumbs a:hover {
  color: var(--bt-sky-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-blog .bt-crumbs .bt-crumb-now {
  color: var(--bt-ink);
  font-weight: 600;
}

.nlp-blog .bt-crumbs .bt-crumb-sep {
  color: var(--bt-sky-line);
}

/* ============ lead article ============ */
.nlp-blog .bt-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  margin-top: 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.nlp-blog .bt-lead:hover {
  box-shadow: var(--bt-shadow-lift);
  transform: translateY(-3px);
}

.nlp-blog .bt-lead-art {
  position: relative;
  display: block;
  background: #F5F1E6;
  min-height: 100%;
}

.nlp-blog .bt-lead-art img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.nlp-blog .bt-lead:hover .bt-lead-art img {
  transform: scale(1.03);
}

.nlp-blog .bt-flag {
  position: absolute;
  left: 14px;
  top: 14px;
  background: var(--bt-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(--bt-shadow);
}

.nlp-blog .bt-lead-body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 30px 34px 28px;
  min-width: 0;
}

.nlp-blog .bt-lead-body h2 {
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.24;
}

.nlp-blog .bt-lead:hover .bt-lead-body h2 {
  color: var(--bt-teal);
}

.nlp-blog .bt-lead-body .bt-blurb {
  font-size: 14.5px;
  line-height: 1.65;
}

.nlp-blog .bt-lead-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.nlp-blog .bt-lead-foot .bt-btn {
  margin-left: auto;
}

/* shared card furniture */
.nlp-blog .bt-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--bt-text-soft);
}

.nlp-blog .bt-meta>span+span::before {
  content: "\00B7";
  margin-right: 8px;
  color: var(--bt-sky-line);
}

.nlp-blog .bt-meta>span.bt-cat+span::before {
  content: none;
}

.nlp-blog .bt-cat {
  background: var(--bt-sky-tint);
  color: var(--bt-sky-deep);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
}

.nlp-blog .bt-blurb {
  font-size: 13.5px;
  color: var(--bt-text-soft);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-blog .bt-by {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bt-ink);
}

.nlp-blog .bt-by img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.nlp-blog .bt-lead-foot .bt-by img {
  width: 34px;
  height: 34px;
}

/* ============ filters ============ */
.nlp-blog .bt-filters-sec {
  padding-top: 40px;
}

.nlp-blog .bt-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nlp-blog .bt-pill {
  flex: 0 0 auto;
  background: var(--bt-white);
  border: 1px solid var(--bt-line);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-text);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.nlp-blog .bt-pill:hover {
  border-color: var(--bt-sky-line);
  background: var(--bt-sky-tint);
  color: var(--bt-sky-deep);
}

.nlp-blog .bt-pill.is-on {
  background: var(--bt-teal);
  border-color: var(--bt-teal);
  color: #fff;
}

.nlp-blog .bt-pill.is-on:hover {
  background: var(--bt-teal-deep);
  border-color: var(--bt-teal-deep);
  color: #fff;
}

.nlp-blog .bt-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--bt-line);
}

.nlp-blog .bt-toolbar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-text-soft);
}

.nlp-blog .bt-drop {
  position: relative;
}

.nlp-blog .bt-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bt-white);
  border: 1px solid var(--bt-line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bt-ink);
}

.nlp-blog .bt-drop-btn:hover {
  border-color: var(--bt-sky-line);
}

.nlp-blog .bt-drop-btn[aria-expanded="true"] {
  border-color: var(--bt-sky);
}

.nlp-blog .bt-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bt-mist);
  color: var(--bt-text-soft);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}

.nlp-blog .bt-drop-btn.has-picks .bt-badge {
  background: var(--bt-sky);
  color: #fff;
}

.nlp-blog .bt-caret {
  width: 15px;
  height: 15px;
  color: var(--bt-text-soft);
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.nlp-blog .bt-drop.is-open .bt-caret {
  transform: rotate(180deg);
}

.nlp-blog .bt-drop-menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 40;
  width: 310px;
  max-width: calc(100vw - 40px);
  padding: 12px;
  background: var(--bt-white);
  border: 1px solid var(--bt-line);
  border-radius: 16px;
  box-shadow: var(--bt-shadow-lift);
}

.nlp-blog .bt-drop.is-open .bt-drop-menu {
  display: block;
}

.nlp-blog .bt-drop-list {
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.nlp-blog .bt-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--bt-text);
  line-height: 1.45;
}

.nlp-blog .bt-check:hover {
  background: var(--bt-mist);
}

/* A plain checkbox on purpose: Nifty's magic-checkbox styles the box through a
   sibling <label>, which needs the input and the label to be siblings inside a
   .checkbox wrapper. This row is one label wrapping both, so the native
   control is used and tinted with accent-color instead. */
.nlp-blog .bt-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--bt-sky-deep);
  cursor: pointer;
}

.nlp-blog .bt-drop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bt-line);
}

.nlp-blog .bt-link {
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--bt-text-soft);
  font-family: inherit;
}

.nlp-blog .bt-link:hover {
  color: var(--bt-sky-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-blog .bt-clear-all {
  margin-left: auto;
}

.nlp-blog .bt-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bt-white);
  /* Inline caret, matching the one the topic button draws: the theme's
     selectpicker is not used here, 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(--bt-line);
  border-radius: 999px;
  padding: 8px 36px 8px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bt-ink);
  cursor: pointer;
  height: auto;
  width: auto;
}

.nlp-blog .bt-select:hover {
  border-color: var(--bt-sky-line);
}

.nlp-blog .bt-result-line {
  margin-top: 12px;
  font-size: 13px;
  color: var(--bt-text-soft);
}

/* ============ article grid ============ */
.nlp-blog .bt-grid-sec {
  padding-top: 26px;
}

.nlp-blog .bt-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.nlp-blog .bt-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.nlp-blog .bt-card:hover {
  box-shadow: var(--bt-shadow-lift);
  transform: translateY(-3px);
}

.nlp-blog .bt-card-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F5F1E6;
}

.nlp-blog .bt-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.nlp-blog .bt-card:hover .bt-card-art img {
  transform: scale(1.04);
}

.nlp-blog .bt-card-art .bt-cat {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(255, 255, 255, .95);
  color: var(--bt-ink);
  font-size: 11px;
  box-shadow: var(--bt-shadow);
}

.nlp-blog .bt-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 19px 18px;
  flex: 1;
}

.nlp-blog .bt-card-body h3 {
  font-size: 18px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-blog .bt-card:hover .bt-card-body h3 {
  color: var(--bt-teal);
}

.nlp-blog .bt-card-foot {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px dashed var(--bt-line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.nlp-blog .bt-reads {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bt-text-soft);
  white-space: nowrap;
}

/* empty state */
.nlp-blog .bt-empty {
  text-align: center;
  padding: 48px 30px;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.nlp-blog .bt-empty img {
  opacity: .7;
}

.nlp-blog .bt-empty h2 {
  font-size: 22px;
}

.nlp-blog .bt-empty p {
  font-size: 14px;
  color: var(--bt-text-soft);
  max-width: 44ch;
}

.nlp-blog .bt-empty .bt-btn {
  margin-top: 6px;
}

/* ============ pagination ============ */
.nlp-blog .bt-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.nlp-blog .bt-page {
  min-width: 38px;
  height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--bt-line);
  background: var(--bt-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bt-text);
  font-variant-numeric: tabular-nums;
}

.nlp-blog .bt-page:hover {
  border-color: var(--bt-sky-line);
  background: var(--bt-sky-tint);
  color: var(--bt-sky-deep);
}

.nlp-blog .bt-page.is-on {
  background: var(--bt-teal);
  border-color: var(--bt-teal);
  color: #fff;
}

.nlp-blog .bt-page-arrow {
  font-weight: 700;
}

.nlp-blog .bt-gap {
  color: var(--bt-text-soft);
  padding: 0 2px;
}

/* ============ most read ============ */
.nlp-blog .bt-mostread-sec {
  padding-top: 58px;
}

.nlp-blog .bt-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.nlp-blog .bt-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 16px 11px 14px;
  transition: box-shadow .18s ease, transform .18s ease;
}

.nlp-blog .bt-row:hover {
  box-shadow: var(--bt-shadow-lift);
  transform: translateY(-2px);
}

.nlp-blog .bt-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--bt-sky-deep);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.nlp-blog .bt-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #F5F1E6;
}

.nlp-blog .bt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nlp-blog .bt-row-body {
  min-width: 0;
  flex: 1;
  line-height: 1.35;
}

.nlp-blog .bt-row-body b {
  display: block;
  font-size: 14.5px;
  color: var(--bt-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nlp-blog .bt-row:hover .bt-row-body b {
  color: var(--bt-sky-deep);
}

.nlp-blog .bt-go {
  flex: 0 0 auto;
  color: var(--bt-text-soft);
  font-size: 17px;
}

.nlp-blog .bt-row:hover .bt-go {
  color: var(--bt-sky-deep);
}

/* ============ faq accordion ============ */
/* <details>/<summary>, so it opens and closes with no JavaScript at all. The
   original listing's accordion was jQuery driving inline display styles. */
.nlp-blog .faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 34px;
  align-items: start;
}

.nlp-blog .faq-intro p {
  font-size: 15px;
  color: var(--bt-text-soft);
  margin-top: 8px;
  max-width: 34ch;
}

.nlp-blog .faq-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.nlp-blog .faq {
  border: 1px solid var(--bt-line);
  border-radius: 15px;
  background: var(--bt-white);
  overflow: hidden;
}

.nlp-blog .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(--bt-ink);
}

.nlp-blog .faq summary::-webkit-details-marker {
  display: none;
}

.nlp-blog .faq summary .n {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--bt-sky-deep);
  flex: 0 0 auto;
}

.nlp-blog .faq summary .q {
  flex: 1;
  min-width: 0;
}

.nlp-blog .faq summary .pm {
  margin-left: auto;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--bt-line);
  display: grid;
  place-items: center;
  color: var(--bt-text-soft);
  font-size: 14px;
  transition: transform .2s ease;
}

.nlp-blog .faq[open] summary .pm {
  transform: rotate(45deg);
  border-color: var(--bt-sky-line);
  color: var(--bt-sky-deep);
}

.nlp-blog .faq .a {
  padding: 0 19px 17px 48px;
  font-size: 14px;
  color: var(--bt-text-soft);
  line-height: 1.68;
}

.nlp-blog .faq .a a {
  color: var(--bt-sky-deep);
  font-weight: 600;
}

.nlp-blog .faq .a a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-blog .bt-faq-list {
  padding-left: 18px;
  list-style: disc;
}

.nlp-blog .bt-faq-list li {
  margin-bottom: 4px;
}

/* ============ close band ============ */
/* The same band the v3 homepage closes on, on the same home_v3_close_* copy.
   The twin closed on a subscribe form instead; that was dropped in the port
   because the layout's own footer already carries one, and asking the same
   visitor twice on one page reads as a bug. */
.nlp-blog .close-band {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 78px 0 30px;
  background: linear-gradient(140deg, var(--bt-teal) 0%, var(--bt-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-blog .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-blog .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-blog .close-band .kicker {
  color: var(--bt-gold);
}

.nlp-blog .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-blog .close-band h2 em {
  font-style: italic;
  color: var(--bt-gold);
}

.nlp-blog .close-band p {
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  max-width: 50ch;
  position: relative;
  z-index: 1;
}

.nlp-blog .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-blog .close-panel .inc {
  list-style: none;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}

.nlp-blog .close-panel .inc li {
  display: flex;
  gap: 9px;
}

.nlp-blog .close-panel .inc li::before {
  content: "\2713";
  color: var(--bt-gold);
  font-weight: 800;
}

.nlp-blog .close-panel .bt-btn {
  width: 100%;
}

/* ============ 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-blog .bt-masthead .sec-head .side {
    margin-left: 0;
    max-width: none;
  }

  .nlp-blog .bt-lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-blog .bt-lead-art img {
    min-height: 220px;
  }

  .nlp-blog .bt-lead-body {
    padding: 24px 24px 22px;
  }

  .nlp-blog .bt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nlp-blog .bt-rows {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-blog .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-blog .close-band {
    grid-template-columns: minmax(0, 1fr);
    padding: 36px 32px;
  }
}

@media (max-width: 640px) {
  .nlp-blog .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .nlp-blog .sec {
    padding: 48px 0 8px;
  }

  .nlp-blog .bt-masthead {
    padding-top: 26px;
  }

  .nlp-blog .bt-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-blog .bt-toolbar {
    align-items: stretch;
  }

  .nlp-blog .bt-drop,
  .nlp-blog .bt-drop-btn,
  .nlp-blog .bt-select {
    width: 100%;
  }

  .nlp-blog .bt-drop-btn {
    justify-content: space-between;
  }

  .nlp-blog .bt-drop-menu {
    width: 100%;
  }

  .nlp-blog .bt-clear-all {
    margin-left: 0;
  }

  .nlp-blog .bt-lead-foot .bt-btn {
    margin-left: 0;
    width: 100%;
  }

  .nlp-blog .close-band {
    padding: 30px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nlp-blog *,
  .nlp-blog *::before,
  .nlp-blog *::after {
    animation: none;
    transition: none;
  }
}