/* ==========================================================================
   AUTHOR PAGE — v3   (/{locale}/author/{slug})

   Loaded by resources/views/lms/learn/author_detail_v3.blade.php alone — which
   is the LIVE author page since 2026-09-03, plus its /-v3 preview URL. Pushed
   into the head after front.css so its rules win on order as well as on
   specificity.

   Written on 2026-08-31 in the same design language as the v3 homepage, blog
   listing and category page, and built the same way those were:

     1. SCOPE. Everything is under .nlp-author, 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 --au-. 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 --bt- on the blog listing and --ct- on the
        category page.

     3. BUTTONS ARE .au-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 course card (.cc and its hover overlay) is ported verbatim from
   lms/css/category_v3.css, tokens renamed. It keeps 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.

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

/* ============ tokens ============ */
.nlp-author {
  --au-sky: #3FA9E8;
  --au-sky-deep: #2286C7;
  --au-sky-tint: #EDF6FC;
  --au-sky-line: #D3E9F8;
  --au-ink: #12303B;
  --au-teal: #0F6E78;
  --au-teal-deep: #0A4F57;
  --au-teal-tint: #E7F3F2;
  --au-paper: #FDFEFE;
  --au-mist: #F6FAFA;
  --au-line: #E6EDEC;
  --au-white: #ffffff;
  --au-text: #3D5058;
  --au-text-soft: #66787E;
  --au-gold: #F0C033;
  --au-green-soft: #DFF1E7;
  --au-green-deep: #1F7A6F;
  --au-radius: 18px;
  --au-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 8px 24px -10px rgba(15, 80, 95, .09);
  --au-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-author *,
.nlp-author *::before,
.nlp-author *::after {
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

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

.nlp-author .au-btn:active {
  transform: scale(.985);
}

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

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

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

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

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

.nlp-author .au-btn[disabled] {
  opacity: .6;
  cursor: default;
}

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

.nlp-author .sec {
  padding: 66px 0 10px;
}

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

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

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

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

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

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

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

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

.nlp-author .au-hero-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 30px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

/* The portrait is sized, not shared out. A fractional second column made it
   ~480px wide on a desktop, and a 4:5 crop of that is 600px tall — taller than
   the copy beside it, which then floated in the middle of its own row. */
/* The column follows the viewport rather than sitting at one fixed size, so the
   portrait shrinks on a laptop instead of dominating the hero. */
.nlp-author .au-hero-art {
  width: clamp(210px, 19vw, 280px);
  justify-self: end;
}

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

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

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

.nlp-author .au-crumb-sep {
  color: var(--au-sky-line);
}

.nlp-author .au-hero-copy h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 500;
  margin: 12px 0 14px;
}

.nlp-author .au-role {
  font-size: 15px;
  font-weight: 600;
  color: var(--au-teal);
  margin-bottom: 10px;
}

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

/* fact chips */
.nlp-author .au-chips {
  list-style: none;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.nlp-author .au-chips li {
  background: var(--au-white);
  border: 1px solid var(--au-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--au-ink);
  box-shadow: var(--au-shadow);
}

.nlp-author .au-cta {
  display: flex;
  gap: 11px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* social row */
.nlp-author .au-social {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.nlp-author .au-soc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--au-white);
  border: 1px solid var(--au-line);
  color: var(--au-text-soft);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.nlp-author .au-soc svg {
  width: 17px;
  height: 17px;
}

.nlp-author .au-soc:hover,
.nlp-author .au-soc:focus {
  background: var(--au-teal);
  border-color: var(--au-teal);
  color: #fff;
  transform: translateY(-2px);
}

/* portrait */
.nlp-author .au-portrait {
  position: relative;
  overflow: hidden;
}

/* height: auto is load-bearing. The tag carries width="420" height="525", and a
   height presentation attribute is not auto, so the box had two definite sides
   and aspect-ratio was ignored — the portrait rendered 525px tall at every
   column width. With height released, the ratio drives it and the height
   follows the column. */
.nlp-author .au-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: #F5F1E6;
}

.nlp-author .au-portrait figcaption {
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--au-line);
}

.nlp-author .au-portrait figcaption b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--au-ink);
}

.nlp-author .au-portrait figcaption span {
  font-size: 12.5px;
  color: var(--au-text-soft);
}

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

/* ============ stat band ============ */
.nlp-author .au-stats {
  background: var(--au-mist);
  border-bottom: 1px solid var(--au-line);
}

/* A row, not equal columns: with two or three stats, equal columns spread them
   across the full 1260px and the band reads as three unrelated numbers. Fixed
   gaps keep them as one group however many there are. */
.nlp-author .au-stats-in {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 64px;
  padding: 24px 0;
}

.nlp-author .au-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nlp-author .au-stat b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  color: var(--au-ink);
  line-height: 1.1;
}

.nlp-author .au-stat span {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--au-text-soft);
}

/* ============ about ============ */
.nlp-author .au-about-sec {
  padding-top: 58px;
}

.nlp-author .au-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 30px;
  align-items: start;
}

/* No side card to sit beside — no credentials, no topics, no other languages.
   The prose then stops at a readable measure instead of running the full
   1320px, which is what a one-column grid alone would do. */
.nlp-author .au-about-solo {
  grid-template-columns: minmax(0, 1fr);
}

.nlp-author .au-about-solo .au-bio {
  max-width: 78ch;
}

.nlp-author .au-bio {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--au-text);
  /* Bios are stored as plain text with newlines, not HTML, so the line breaks
     the author typed are the only paragraphing there is. */
  white-space: pre-line;
}

.nlp-author .au-bio-empty {
  color: var(--au-text-soft);
  font-style: italic;
}

.nlp-author .au-side {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nlp-author .au-side-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nlp-author .au-side-block h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--au-text-soft);
}

.nlp-author .au-side-block+.au-side-block {
  border-top: 1px solid var(--au-line);
  padding-top: 18px;
}

.nlp-author .au-cred {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nlp-author .au-cred li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--au-ink);
  line-height: 1.5;
}

.nlp-author .au-cred li svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--au-green-deep);
}

.nlp-author .au-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nlp-author .au-tag {
  background: var(--au-sky-tint);
  border: 1px solid var(--au-sky-line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--au-sky-deep);
  transition: background .15s ease, color .15s ease;
}

.nlp-author a.au-tag:hover {
  background: var(--au-sky-deep);
  border-color: var(--au-sky-deep);
  color: #fff;
}

.nlp-author .au-tag-plain {
  background: var(--au-mist);
  border-color: var(--au-line);
  color: var(--au-text);
}

.nlp-author a.au-tag-plain:hover {
  background: var(--au-teal);
  border-color: var(--au-teal);
  color: #fff;
}

/* ============ articles ============ */
.nlp-author .au-articles-sec {
  padding-top: 62px;
}

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

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

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

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

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

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

/* A post with no cover. The tint is the same one the covers sit on, so the
   grid keeps its rhythm instead of showing a hole. */
.nlp-author .au-card-art-empty {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--au-sky-tint), var(--au-teal-tint));
}

.nlp-author .au-card-art-empty svg {
  width: 38px;
  height: 38px;
  color: var(--au-sky-line);
}

.nlp-author .au-card-art .au-cat {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(255, 255, 255, .95);
  color: var(--au-ink);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  box-shadow: var(--au-shadow);
}

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

.nlp-author .au-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--au-text-soft);
}

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

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

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

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

.nlp-author .au-card-foot {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px dashed var(--au-line);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--au-text-soft);
}

.nlp-author .au-card-foot .au-go {
  margin-left: auto;
  color: var(--au-sky-deep);
  font-size: 15px;
}

/* load more */
.nlp-author .au-more {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* The spinner replaces the label rather than sitting beside it, so the button
   keeps roughly its width and the row below does not jump. */
.nlp-author .au-spin {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: au-spin .8s linear infinite;
}

@keyframes au-spin {
  to {
    transform: rotate(360deg);
  }
}

.nlp-author .au-hidden {
  display: none;
}

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

.nlp-author .au-empty img {
  opacity: .7;
}

.nlp-author .au-empty h3 {
  font-size: 22px;
}

.nlp-author .au-empty p {
  font-size: 14px;
  color: var(--au-text-soft);
  max-width: 46ch;
}

.nlp-author .au-empty .au-btn {
  margin-top: 6px;
}

/* ============ courses ============ */
.nlp-author .au-courses-sec {
  padding-top: 62px;
}

.nlp-author .au-course-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* --- the card, ported from lms/css/category_v3.css ---------------------- */
.nlp-author .cc {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
}

.nlp-author .cc:hover {
  box-shadow: var(--au-shadow-lift);
  transform: translateY(-3px);
}

.nlp-author .cc .art {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F5F1E6;
  display: block;
}

.nlp-author .cc .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.nlp-author .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-author .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-author .cc .flag.best {
  background: var(--au-gold);
  color: #4A3A06;
}

.nlp-author .cc .flag.newc {
  background: var(--au-green-soft);
  color: var(--au-green-deep);
}

.nlp-author .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(--au-ink);
  border-radius: 999px;
  padding: 2px 7px 2px 5px;
  font-variant-numeric: tabular-nums;
}

.nlp-author .cc .students svg {
  width: 10px;
  height: 10px;
  flex: none;
  fill: var(--au-text-soft);
}

.nlp-author .cc .cc-body {
  padding: 14px 17px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.nlp-author .cc .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--au-text-soft);
}

.nlp-author .cc .meta .school {
  background: var(--au-sky-tint);
  color: var(--au-sky-deep);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
}

.nlp-author .cc h3 {
  font-size: 17px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nlp-author .cc .foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-top: 5px;
  flex-wrap: wrap;
}

.nlp-author .cc .price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--au-ink);
}

.nlp-author .cc .was {
  font-size: 13.5px;
  color: var(--au-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-author .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-author .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-author .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-author .cc.show_add_cart:hover::before {
  opacity: 1;
}

.nlp-author .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-author .cc.show_add_cart:hover .learn-course-hover-content {
  opacity: 1;
  visibility: visible;
}

.nlp-author .cc .learn-view-detail-btn,
.nlp-author .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-author .cc .learn-view-detail-btn {
  background: var(--au-white);
  color: var(--au-ink);
}

.nlp-author .cc .learn-view-detail-btn:hover,
.nlp-author .cc .learn-view-detail-btn:focus {
  background: var(--au-sky-tint);
  color: var(--au-sky-deep);
}

.nlp-author .cc .learn-add-cart-btn {
  background: var(--au-gold);
  color: #4A3A06;
}

.nlp-author .cc .learn-add-cart-btn:hover,
.nlp-author .cc .learn-add-cart-btn:focus {
  background: #E5B62B;
  color: #4A3A06;
}

/* ============ close band ============ */
/* The same band the v3 homepage and the blog listing close on, on the same
   home_v3_close_* copy — so it costs no new string in any of the 15 locales. */
.nlp-author .close-band {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin: 78px 0 30px;
  background: linear-gradient(140deg, var(--au-teal) 0%, var(--au-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-author .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-author .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-author .close-band .kicker {
  color: var(--au-gold);
}

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

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

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

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

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

.nlp-author .close-panel .au-btn {
  width: 100%;
}

/* ============ reveal ============ */
/* Rows are visible by default; .au-obs is what hides them, and js/author_v3.js
   only adds it when there is an IntersectionObserver to bring them back. */
.nlp-author .au-obs {
  opacity: 0;
  transform: translateY(14px);
}

.nlp-author .au-obs.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* ============ responsive ============ */
@media (max-width: 1180px) {
  .nlp-author .au-course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .nlp-author .au-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Below the three-up grid the cards get wide — one per row at the bottom of
     this range is as wide as the page — and 16:10 of a card that wide is a
     block of image several times the height of the text under it, of which
     object-fit: cover was showing a centre crop anyway. On a small source it
     was also upscaling: the cover on this test post is 101x107 and was being
     blown up past 670px.

     So from here down the box drops the ratio for a flat 280px band and the
     cover fills its height at its own shape — whole image, no crop. Height is
     fixed rather than capped so a small source still fills the band instead of
     floating in the middle of it: a square cover comes out 280x280, a 16:10
     one 448x280, both centred on the tint the box already carries. Width stays
     auto so nothing is stretched, and max-width clamps the wide ones to the
     card, where object-fit letterboxes them rather than cropping.

     280px is also the box's min-height, so the band holds its space before the
     cover has loaded and when a post has none at all. Sized by the image alone
     it measures 0 until the image arrives — a layout shift on every load, and
     the no-cover variant collapses onto its glyph. */
  .nlp-author .au-card-art {
    aspect-ratio: auto;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nlp-author .au-card-art img {
    width: auto;
    max-width: 100%;
    height: 280px;
    object-fit: contain;
  }

  .nlp-author .au-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 768px is the one place the page stops laying things out side by side. Every
   multi-column block keeps more than one item per line above it — the card
   grids simply step down 4 → 3 → 2 — and every one of them drops to a single
   full-width item per row below it. */
@media (max-width: 768px) {

  /* The hero keeps its portrait-beside-copy pairing all the way down to a
     tablet. Only below that does it stack, and then the portrait leads — it is
     the fastest way to tell a visitor whose page they are on — with the copy
     following underneath. The card keeps its fixed width and is centred rather
     than stretched, so the 4:5 crop never blows up to fill the screen. */
  .nlp-author .au-hero-in {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .nlp-author .au-hero-art {
    width: min(260px, 100%);
    order: -1;
    justify-self: center;
  }

  .nlp-author .au-about-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The aside is no longer stealing width, so the bio may run wider. */
  .nlp-author .au-bio {
    max-width: 78ch;
  }

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

  .nlp-author .au-course-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Four stats side by side do not fit. Wrapping them as a flex row left a
     ragged second line — a 64px hole between two numbers, then one number
     alone under them — so on a phone they become a plain 2-up grid and the
     labels line up in a block. */
  .nlp-author .au-stats-in {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
  }

  /* The section heads put their "newest first / all articles" note on the far
     right with margin-left: auto. Once it wraps under the heading that auto
     margin strands it against the right edge, so on a phone the head stacks
     and both lines start at the same place. */
  .nlp-author .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 22px;
  }

  .nlp-author .sec-head .side {
    margin-left: 0;
    max-width: none;
  }

  /* Desktop section rhythm is built for a 1320px canvas; at phone width the
     same gaps read as the page falling apart between blocks. */
  .nlp-author .au-about-sec {
    padding-top: 40px;
  }

  .nlp-author .au-articles-sec {
    padding-top: 42px;
  }

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

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

  .nlp-author .sec {
    padding: 44px 0 8px;
  }

  .nlp-author .au-hero-in {
    padding: 26px 16px 34px;
  }

  .nlp-author .au-cta .au-btn {
    width: 100%;
  }

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

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

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