/* ==========================================================================
   REVIEWS PAGES — v3

   Serves BOTH review pages, which are one design:
     /{locale}/schools/{domain}/reviews  school_detailed_review.blade.php
     /{locale}/learn/school_reviews      school_reviews.blade.php

   Both put .nlp-reviews on #page-content, so everything below applies to the
   pair. Only two blocks are single-page: .rv-school* (the school panel, on the
   per-school page) and .rv-sc* (the school directory, on the all-schools one).
   Pushed into the head after front.css so its rules win on order as well as
   on specificity.

   Written on 2026-09-03 in the same design language as the v3 homepage, blog
   listing, category and author pages, and built the same way those were:

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

     2. TOKENS ARE PREFIXED --rv-. front.css declares its own :root --green,
        --dark and --primary, so an unprefixed token on a container here would
        silently repaint any theme rule that reaches an element inside the
        page. Same reasoning as --au- on the author page and --ct- on the
        category page.

     3. BUTTONS ARE .rv-btn, NOT .btn.small. front.css declares
        .small { font-size: 11px !important } — a rule no specificity can beat
        — so the theme's utility class is dropped from the markup rather than
        fought with a second !important.

   The star glyphs are inline SVG written by the view, not the star-rating-svg
   jQuery plugin the pre-v3 page loaded: a partial fill is a two-stop gradient
   on the path, so 4.89/5 renders as 4.89 rather than the plugin's rounded 5.
   That is why neither the plugin's stylesheet nor its script is on this page
   any more.

   Order matters: the shell primitives (.sec, .card, .kicker...) come before
   the page furniture, because .rv-hero, .rv-school-sec, .rv-list-sec and
   .rv-cta-sec each re-set the padding .sec gives them at equal specificity.
   Keep the halves in this order.
   ========================================================================== */

/* ============ tokens ============ */
.nlp-reviews {
  --rv-sky: #3FA9E8;
  --rv-sky-deep: #2286C7;
  --rv-sky-tint: #EDF6FC;
  --rv-sky-line: #D3E9F8;
  --rv-ink: #12303B;
  --rv-teal: #0F6E78;
  --rv-teal-deep: #0A4F57;
  --rv-teal-tint: #E7F3F2;
  --rv-paper: #FDFEFE;
  --rv-mist: #F6FAFA;
  --rv-line: #E6EDEC;
  --rv-white: #ffffff;
  --rv-text: #3D5058;
  --rv-text-soft: #66787E;
  --rv-gold: #F0C033;
  --rv-star: #F5A623;
  --rv-star-off: #E3E5EA;
  --rv-green-soft: #DFF1E7;
  --rv-green-deep: #1F7A6F;
  --rv-radius: 18px;
  --rv-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --rv-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 page behaves
   identically if it is ever lifted onto a layout that does not. */
.nlp-reviews *,
.nlp-reviews *::before,
.nlp-reviews *::after {
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

.nlp-reviews .rv-btn:active {
  transform: scale(.985);
}

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

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

.nlp-reviews .rv-btn-ghost {
  background: var(--rv-white);
  color: var(--rv-ink);
  border: 1px solid var(--rv-line);
  box-shadow: none;
}

.nlp-reviews .rv-btn-ghost:hover,
.nlp-reviews .rv-btn-ghost:focus {
  background: var(--rv-sky-tint);
  border-color: var(--rv-sky-line);
  color: var(--rv-sky-deep);
}

.nlp-reviews .rv-btn-sm {
  padding: 9px 18px;
  font-size: 13px;
  box-shadow: none;
}

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

.nlp-reviews .sec {
  padding: 54px 0 0;
}

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

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

.nlp-reviews .sec-head h2 {
  font-size: clamp(24px, 2.8vw, 33px);
}

.nlp-reviews .sec-head h2 em {
  font-style: italic;
  color: var(--rv-teal);
}

.nlp-reviews .sec-head .side {
  margin-left: auto;
  font-size: 13.5px;
  color: var(--rv-text-soft);
  max-width: 46ch;
}

/* ============ stars ============ */
/* One glyph size for every star on the page; the containers scale it. */
.nlp-reviews .rv-star {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.nlp-reviews .rv-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
}

.nlp-reviews .rv-stars-lg {
  font-size: 22px;
  gap: 3px;
}

/* ============ hero ============ */
.nlp-reviews .rv-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 380px at 88% -10%, var(--rv-sky-tint) 0%, transparent 70%),
    linear-gradient(180deg, var(--rv-white) 0%, var(--rv-paper) 100%);
  border-bottom: 1px solid var(--rv-line);
}

.nlp-reviews .rv-hero-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 34px 30px 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
  gap: 40px;
  align-items: start;
}

/* breadcrumb */
.nlp-reviews .rv-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--rv-text-soft);
  margin-bottom: 16px;
}

.nlp-reviews .rv-crumb a:hover {
  color: var(--rv-sky-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-reviews .rv-crumb-on {
  color: var(--rv-ink);
  font-weight: 600;
}

.nlp-reviews .rv-crumb-sep {
  color: var(--rv-sky-line);
}

.nlp-reviews .rv-hero-copy h1 {
  font-size: clamp(30px, 3.9vw, 48px);
  font-weight: 500;
  margin: 12px 0 14px;
}

.nlp-reviews .rv-lede {
  font-size: 15.5px;
  color: var(--rv-text-soft);
  max-width: 58ch;
  line-height: 1.7;
}

/* the four figures under the lede */
.nlp-reviews .rv-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 26px;
  max-width: 660px;
}

.nlp-reviews .rv-stat {
  background: var(--rv-white);
  border: 1px solid var(--rv-line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--rv-shadow);
}

/* nowrap: the average tile is "4.81" plus a smaller "/5", which is one figure
   and wrapped into two lines in a 150px column without this. */
.nlp-reviews .rv-stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  color: var(--rv-ink);
  line-height: 1.1;
  white-space: nowrap;
}

/* Direct child only. The tile's figure is "4.81" plus a smaller "/5" in a span
   inside the <b>, and a plain .rv-stat span selector caught that one too — it
   is (0,2,1) against .rv-score-out's (0,2,0), so the label rule won and the
   ratio broke onto its own line. */
.nlp-reviews .rv-stat>span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--rv-text-soft);
}

/* ============ summary card ============ */
.nlp-reviews .rv-summary {
  padding: 24px 26px 20px;
}

.nlp-reviews .rv-summary-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rv-line);
}

/* Nothing to review: the breakdown below the rule is not rendered, so the rule
   would be a line under the last line of text. */
.nlp-reviews .rv-summary-empty .rv-summary-head {
  padding-bottom: 0;
  border-bottom: 0;
}

.nlp-reviews .rv-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  color: var(--rv-ink);
  letter-spacing: -0.02em;
}

.nlp-reviews .rv-score-out {
  display: inline;
  font-size: 17px;
  color: var(--rv-text-soft);
  font-weight: 500;
}

.nlp-reviews .rv-summary-meta {
  min-width: 0;
}

.nlp-reviews .rv-summary-meta .kicker {
  margin-bottom: 6px;
}

.nlp-reviews .rv-summary-count {
  font-size: 13.5px;
  color: var(--rv-text-soft);
  margin-top: 6px;
}

/* distribution — every row is the filter link for that rating */
.nlp-reviews .rv-bars {
  list-style: none;
  margin-top: 14px;
}

.nlp-reviews .rv-bar {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 12px;
  padding: 5px 8px;
  border-radius: 10px;
  transition: background .15s ease;
}

.nlp-reviews .rv-bar:hover {
  background: var(--rv-sky-tint);
}

.nlp-reviews .rv-bar.is-on {
  background: var(--rv-teal-tint);
}

.nlp-reviews .rv-bar-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rv-ink);
}

.nlp-reviews .rv-bar-label .rv-star {
  font-size: 13px;
}

.nlp-reviews .rv-bar-track {
  height: 8px;
  border-radius: 999px;
  background: #EEF2F3;
  overflow: hidden;
}

.nlp-reviews .rv-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rv-gold) 0%, var(--rv-star) 100%);
}

.nlp-reviews .rv-bar-n {
  font-size: 12.5px;
  color: var(--rv-text-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nlp-reviews .rv-bar.is-on .rv-bar-n {
  color: var(--rv-teal-deep);
  font-weight: 600;
}

/* ============ school panel ============ */
.nlp-reviews .rv-school-sec {
  padding: 46px 0 0;
}

.nlp-reviews .rv-school {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 28px;
  padding: 26px 28px;
  align-items: start;
}

.nlp-reviews .rv-school-logo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px solid var(--rv-line);
  background: var(--rv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
}

.nlp-reviews .rv-school-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nlp-reviews .rv-school-body h2 {
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 500;
}

.nlp-reviews .rv-school-block {
  margin-top: 16px;
}

.nlp-reviews .rv-school-block>.kicker {
  margin-bottom: 8px;
  color: var(--rv-text-soft);
}

/* category chips — the four-colour rotation the pre-v3 page used, kept */
.nlp-reviews .rv-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nlp-reviews .rv-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  max-width: 100%;
}

.nlp-reviews .rv-tag>span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nlp-reviews .rv-tag-c0 {
  background: var(--rv-sky-tint);
  border-color: var(--rv-sky-line);
  color: #06627C;
}

.nlp-reviews .rv-tag-c1 {
  background: #FDF3E7;
  border-color: #F6DFC2;
  color: #93470A;
}

.nlp-reviews .rv-tag-c2 {
  background: #F1F7E8;
  border-color: #DCEAC6;
  color: #416A0D;
}

.nlp-reviews .rv-tag-c3 {
  background: var(--rv-teal-tint);
  border-color: #CFE5E2;
  color: var(--rv-teal-deep);
}

/* course chips are links */
.nlp-reviews .rv-course-tag {
  background: var(--rv-mist);
  border-color: var(--rv-line);
  color: var(--rv-ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.nlp-reviews .rv-course-tag:hover,
.nlp-reviews .rv-course-tag:focus {
  background: var(--rv-sky-tint);
  border-color: var(--rv-sky-line);
  color: var(--rv-sky-deep);
}

/* bio */
.nlp-reviews .rv-bio {
  margin-top: 18px;
  font-size: 14.8px;
  line-height: 1.75;
  color: var(--rv-text-soft);
}

.nlp-reviews .rv-bio-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-reviews .rv-bio-text.is-open {
  display: block;
  overflow: visible;
}

.nlp-reviews .rv-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rv-sky-deep);
}

.nlp-reviews .rv-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nlp-reviews .rv-school-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ==========================================================================
   SCHOOL DIRECTORY — all-schools page only (school_reviews.blade.php)

   The cards that replaced the school <select>. Each is a whole link, so the
   hover state belongs to the card and nothing inside it is separately
   focusable.
   ========================================================================== */
.nlp-reviews .rv-schools-sec {
  padding: 46px 0 0;
}

.nlp-reviews .rv-schools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

.nlp-reviews .rv-sc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.nlp-reviews .rv-sc:hover,
.nlp-reviews .rv-sc:focus {
  box-shadow: var(--rv-shadow-lift);
  border-color: var(--rv-sky-line);
  transform: translateY(-2px);
}

.nlp-reviews .rv-sc-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--rv-line);
  background: var(--rv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  overflow: hidden;
  flex: 0 0 auto;
}

.nlp-reviews .rv-sc-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nlp-reviews .rv-sc-body {
  min-width: 0;
  flex: 1 1 auto;
}

.nlp-reviews .rv-sc-body b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--rv-ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nlp-reviews .rv-sc-rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--rv-text-soft);
}

.nlp-reviews .rv-sc-rate .rv-stars {
  font-size: 13px;
}

.nlp-reviews .rv-sc-mark {
  font-weight: 700;
  color: var(--rv-ink);
}

.nlp-reviews .rv-sc-none {
  font-style: italic;
}

/* The arrow is the affordance, so it is the thing that moves on hover. */
.nlp-reviews .rv-sc-go {
  flex: 0 0 auto;
  color: var(--rv-sky-deep);
  font-size: 17px;
  transition: transform .18s ease;
}

.nlp-reviews .rv-sc:hover .rv-sc-go {
  transform: translateX(3px);
}

/* ============ list section ============ */
.nlp-reviews .rv-list-sec {
  padding: 48px 0 0;
}

.nlp-reviews .rv-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--rv-mist);
  border: 1px solid var(--rv-line);
  border-radius: 999px;
  margin-bottom: 26px;
}

.nlp-reviews .rv-pills {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

/* nowrap: below 768px the pills are a sideways scroller, and "All star
   ratings" broke onto three lines inside its own pill without this. */
.nlp-reviews .rv-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 15px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid var(--rv-line);
  background: var(--rv-white);
  font-size: 13px;
  font-weight: 600;
  color: var(--rv-text);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.nlp-reviews .rv-pill .rv-star {
  font-size: 12px;
}

.nlp-reviews .rv-pill:hover,
.nlp-reviews .rv-pill:focus {
  border-color: var(--rv-sky-line);
  background: var(--rv-sky-tint);
  color: var(--rv-sky-deep);
}

.nlp-reviews .rv-pill.is-on {
  background: var(--rv-ink);
  border-color: var(--rv-ink);
  color: #fff;
}

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

.nlp-reviews .rv-toolbar-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--rv-text-soft);
}

.nlp-reviews .rv-toolbar-meta .rv-dot {
  color: var(--rv-sky-line);
}

/* ============ review cards ============ */
.nlp-reviews .rv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.nlp-reviews .rv-item {
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.nlp-reviews .rv-item:hover {
  box-shadow: var(--rv-shadow-lift);
  border-color: var(--rv-sky-line);
  transform: translateY(-2px);
}

.nlp-reviews .rv-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nlp-reviews .rv-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--rv-line);
  background: var(--rv-sky-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nlp-reviews .rv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nlp-reviews .rv-avatar-ph img {
  width: 20px;
  height: 24px;
  object-fit: contain;
  opacity: .55;
}

.nlp-reviews .rv-who {
  min-width: 0;
}

.nlp-reviews .rv-who b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--rv-ink);
  line-height: 1.3;
}

.nlp-reviews .rv-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rv-green-deep);
}

.nlp-reviews .rv-verified svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

.nlp-reviews .rv-item-rating {
  margin-left: auto;
  text-align: right;
  flex: 0 0 auto;
}

.nlp-reviews .rv-item-date {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--rv-text-soft);
}

.nlp-reviews .rv-item-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 16px;
}

.nlp-reviews .rv-item-body {
  margin-top: 8px;
  font-size: 14.6px;
  line-height: 1.72;
  color: var(--rv-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
}

.nlp-reviews .rv-item-body.is-open {
  display: block;
  overflow: visible;
}

/* the course the review was written about */
.nlp-reviews .rv-item-course {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--rv-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--rv-teal);
  width: 100%;
}

.nlp-reviews .rv-item-course svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.nlp-reviews .rv-item-course span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nlp-reviews .rv-item-course:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* footer of the card sticks to the bottom so the dashed rule lines up
   between two cards of different text length in the same row */
.nlp-reviews .rv-item-foot {
  margin-top: auto;
}

/* ============ empty state ============ */
.nlp-reviews .rv-empty {
  text-align: center;
  padding: 54px 30px;
  background: var(--rv-mist);
  border: 1px dashed var(--rv-line);
  border-radius: var(--rv-radius);
}

.nlp-reviews .rv-empty h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.nlp-reviews .rv-empty p {
  font-size: 14.5px;
  color: var(--rv-text-soft);
  max-width: 46ch;
  margin: 0 auto 18px;
}

/* ============ pager ============ */
.nlp-reviews .rv-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 34px 0 0;
}

.nlp-reviews .rv-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--rv-line);
  background: var(--rv-white);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rv-text);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.nlp-reviews .rv-page:hover,
.nlp-reviews .rv-page:focus {
  border-color: var(--rv-sky-line);
  background: var(--rv-sky-tint);
  color: var(--rv-sky-deep);
}

.nlp-reviews .rv-page.is-on {
  background: var(--rv-ink);
  border-color: var(--rv-ink);
  color: #fff;
}

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

/* ============ closing band ============ */
.nlp-reviews .rv-cta-sec {
  padding: 56px 0 66px;
}

.nlp-reviews .rv-cta {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 40px 44px;
  background:
    radial-gradient(700px 300px at 92% 0%, rgba(63, 169, 232, .18) 0%, transparent 70%),
    linear-gradient(135deg, var(--rv-teal-deep) 0%, var(--rv-teal) 100%);
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nlp-reviews .rv-cta-copy {
  min-width: 0;
  flex: 1 1 420px;
}

.nlp-reviews .rv-cta h2 {
  color: #fff;
  font-size: clamp(23px, 2.5vw, 31px);
  font-weight: 500;
}

.nlp-reviews .rv-cta p {
  margin-top: 10px;
  color: rgba(255, 255, 255, .82);
  font-size: 14.8px;
  max-width: 56ch;
}

.nlp-reviews .rv-cta .kicker {
  color: var(--rv-gold);
}

.nlp-reviews .rv-cta-act {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nlp-reviews .rv-cta .rv-btn-ghost {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

.nlp-reviews .rv-cta .rv-btn-ghost:hover,
.nlp-reviews .rv-cta .rv-btn-ghost:focus {
  background: rgba(255, 255, 255, .18);
  border-color: #fff;
  color: #fff;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Laptop — the summary card stops being a fixed sidebar and the review grid
   keeps two columns for as long as a card is wider than ~330px. */
@media (max-width: 1199px) {
  .nlp-reviews .rv-hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
    gap: 30px;
  }

  .nlp-reviews .rv-summary {
    padding: 20px 22px 16px;
  }

  .nlp-reviews .rv-score {
    font-size: 44px;
  }
}

/* Tablet — one column throughout. */
@media (max-width: 991px) {
  .nlp-reviews .rv-hero-in {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px 24px 38px;
    gap: 26px;
  }

  .nlp-reviews .wrap {
    padding: 0 24px;
  }

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

  .nlp-reviews .rv-school {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 20px;
    padding: 22px;
  }

  .nlp-reviews .rv-school-logo {
    width: 96px;
    height: 96px;
    padding: 10px;
  }

  .nlp-reviews .rv-cta {
    padding: 32px 28px;
  }
}

/* Phone — the toolbar unrolls into a block, the pills scroll sideways rather
   than wrapping into four rows, and the school panel centres its logo. */
@media (max-width: 767px) {
  .nlp-reviews .sec,
  .nlp-reviews .rv-school-sec,
  .nlp-reviews .rv-schools-sec,
  .nlp-reviews .rv-list-sec {
    padding-top: 34px;
  }

  .nlp-reviews .rv-cta-sec {
    padding: 40px 0 48px;
  }

  .nlp-reviews .wrap {
    padding: 0 18px;
  }

  .nlp-reviews .rv-hero-in {
    padding: 22px 18px 32px;
  }

  .nlp-reviews .rv-hero-copy h1 {
    font-size: clamp(26px, 7vw, 34px);
  }

  .nlp-reviews .rv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .nlp-reviews .rv-stat {
    padding: 12px 13px;
  }

  .nlp-reviews .rv-stat b {
    font-size: 21px;
  }

  .nlp-reviews .rv-toolbar {
    border-radius: 18px;
    padding: 14px;
    align-items: stretch;
    flex-direction: column;
  }

  .nlp-reviews .rv-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nlp-reviews .rv-pills::-webkit-scrollbar {
    display: none;
  }

  .nlp-reviews .rv-pill {
    flex: 0 0 auto;
  }

  .nlp-reviews .rv-toolbar-meta {
    margin-left: 0;
  }

  .nlp-reviews .rv-school {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .nlp-reviews .rv-school-body {
    width: 100%;
  }

  .nlp-reviews .rv-tags,
  .nlp-reviews .rv-school-cta {
    justify-content: center;
  }

  .nlp-reviews .rv-bio {
    text-align: left;
  }

  .nlp-reviews .rv-schools {
    grid-template-columns: minmax(0, 1fr);
  }

  .nlp-reviews .rv-item {
    padding: 18px;
  }

  .nlp-reviews .rv-item-head {
    flex-wrap: wrap;
  }

  .nlp-reviews .rv-item-rating {
    margin-left: 0;
    text-align: left;
    width: 100%;
  }

  .nlp-reviews .rv-item-date {
    display: inline;
    margin-left: 8px;
  }

  .nlp-reviews .rv-cta {
    padding: 26px 20px;
  }
}

/* Small phone — 320-360px wide devices. */
@media (max-width: 400px) {
  .nlp-reviews .rv-summary-head {
    gap: 12px;
  }

  .nlp-reviews .rv-score {
    font-size: 38px;
  }

  .nlp-reviews .rv-stars-lg {
    font-size: 18px;
  }

  .nlp-reviews .rv-bar {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
    gap: 8px;
  }
}

/* Print — the filters, the closing band and the pager are not part of a
   printed review sheet. */
@media print {
  .nlp-reviews .rv-toolbar,
  .nlp-reviews .rv-pager,
  .nlp-reviews .rv-cta-sec,
  .nlp-reviews .rv-school-cta {
    display: none;
  }

  .nlp-reviews .rv-item,
  .nlp-reviews .rv-summary,
  .nlp-reviews .rv-school {
    box-shadow: none;
    break-inside: avoid;
  }

  .nlp-reviews .rv-item-body {
    display: block;
    overflow: visible;
  }
}

/* Reduced motion — the hover lift is the only transform on the page. */
@media (prefers-reduced-motion: reduce) {
  .nlp-reviews * {
    transition: none;
  }

  .nlp-reviews .rv-item:hover,
  .nlp-reviews .rv-sc:hover,
  .nlp-reviews .rv-sc:hover .rv-sc-go {
    transform: none;
  }
}