/* ============================================================
   23 — Prose
   Long-form text pages. The template's other sections are all composed layouts, and
   base.css resets every margin to 0, so a page of bare <p>/<ul> renders as one
   unreadable block. This section is the minimum needed for the plain content pages a
   client site almost always has and the six master pages do not cover: privacy policy,
   careers, staff bios, city landing pages, thank-you pages.

   Usage:
     <section class="sec-23-prose section on-bone">
       <div class="sec-23-prose__wrap container">
         <h2 class="sec-23-prose__h">...</h2>
         <p>...</p>
         <ul class="sec-23-prose__list"><li>...</li></ul>
       </div>
     </section>
   ============================================================ */

.sec-23-prose__wrap {
  /* This element also carries .container, which produces the site's gutter via
     width:min(--container, 100% - 2.5rem) + margin-inline:auto. Narrowing THIS element to
     a 68ch measure makes the auto-centring indent the whole column inward; overriding
     margin-inline to 0 to compensate then jams it against the viewport edge and lets the
     chapter rail print through the copy. Let .container own the gutter, and cap the
     MEASURE on the children instead. */
  max-width: none;
}

.sec-23-prose__wrap > * {
  max-width: 68ch;
}

/* staff-bio portrait: sits above the copy on mobile, floats beside it on desktop */
.sec-23-prose__portrait {
  margin-bottom: 1.6rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  max-width: 260px;
}

.sec-23-prose__portrait img {
  width: 100%;
  height: auto;
}

@media (min-width: 720px) {
  .sec-23-prose__portrait {
    float: right;
    width: 260px;
    margin-left: 2rem;
    margin-bottom: 1.25rem;
  }
}

.sec-23-prose p,
.sec-23-prose li {
  color: var(--text-on-bone);
  font-size: 1.02rem;
  line-height: 1.75;
}

.sec-23-prose p + p {
  margin-top: 1.1rem;
}

.sec-23-prose__h {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin-top: 2.8rem;
  margin-bottom: 0.85rem;
}

.sec-23-prose__h:first-child {
  margin-top: 0;
}

.sec-23-prose__list {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.6rem;
  padding-left: 1.1rem;
}

.sec-23-prose__list li {
  list-style: disc;
  padding-left: 0.35rem;
}

.sec-23-prose__list li::marker {
  color: var(--accent);
}

.sec-23-prose a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms var(--ease-out);
}

.sec-23-prose a:hover,
.sec-23-prose a:focus-visible {
  color: var(--accent);
}

@media (max-width: 640px) {
  .sec-23-prose p,
  .sec-23-prose li {
    font-size: 1rem;
  }
  .sec-23-prose__h {
    margin-top: 2.1rem;
  }
}

/* ------------------------------------------------------------------
   __team-grid — the /team/ roster. QA fix pass: this used to reuse
   .sec-23-prose__list (a single-column bulleted list, gap-only grid with no
   grid-template-columns), which put all 38 people in one straight vertical
   line. Responsive card grid instead, following the same
   repeat(auto-fill, minmax(...)) convention as the home awards grid.
   ------------------------------------------------------------------ */
.sec-23-prose__wrap > .sec-23-prose__team-grid {
  max-width: none;
}

/* Location-page map embed (QA fix pass item 8): reuses the homepage's
   .sec-13-location__map/iframe styling for a single embedded map, but that
   component assumes the prose wrap's 68ch measure cap unless excluded here,
   same as the team grid above. */
.sec-23-prose__wrap > .sec-13-location__map {
  max-width: none;
  margin-top: 1.1rem;
  margin-bottom: 1.1rem;
}

.sec-23-prose__team-grid {
  list-style: none;
  margin-top: 1.1rem;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.75rem 1.25rem;
}

.sec-23-prose__team-grid li {
  list-style: none;
  padding-left: 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
}

.sec-23-prose__team-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  margin-bottom: 0.6rem;
}

.sec-23-prose__team-grid a {
  font-weight: 600;
  display: block;
}

@media (max-width: 640px) {
  .sec-23-prose__team-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1.25rem 0.85rem;
  }
}

/* ------------------------------------------------------------------
   __rich — imported long-form content whose markup we do NOT control.

   The rest of this section styles CLASSED elements, which works when we
   author the markup. The blog archive is 265 posts lifted verbatim from the
   client's old WordPress install: bare <h2>/<h3>/<ul>/<ol>/<blockquote>/<img>
   with no classes. base.css resets every margin to 0, so without this block
   an imported post renders as one unbroken wall of text.

   Scoped to .sec-23-prose__rich so it can never leak into the authored prose
   pages above. Element selectors are deliberate here: we cannot add classes to
   content we are preserving unmodified.
   ------------------------------------------------------------------ */
.sec-23-prose__rich > * + * {
  margin-top: 1.1rem;
}

/* Archived posts cite sources as raw URLs in link text
   ("www.ncbi.nlm.nih.gov > pmc > articles > PMC1895638"). An unbreakable string
   like that pushed 46 pages into horizontal scroll at 390px, which zooms the
   whole page out. We will not edit the client's citations, so the layout has to
   absorb them. */
.sec-23-prose__rich,
.sec-23-prose__rich a,
.sec-23-prose__rich li,
.sec-23-prose__rich p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sec-23-prose__rich h2,
.sec-23-prose__rich h3,
.sec-23-prose__rich h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin-top: 2.6rem;
  margin-bottom: 0.75rem;
}

.sec-23-prose__rich h2 { font-size: var(--fs-h3); }
.sec-23-prose__rich h3 { font-size: 1.28rem; }
.sec-23-prose__rich h4 { font-size: 1.1rem; }
.sec-23-prose__rich > :first-child { margin-top: 0; }

.sec-23-prose__rich ul,
.sec-23-prose__rich ol {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.55rem;
  padding-left: 1.4rem;
}

.sec-23-prose__rich ul li { list-style: disc; }
.sec-23-prose__rich ol li { list-style: decimal; }
.sec-23-prose__rich li::marker { color: var(--accent); }
.sec-23-prose__rich li { padding-left: 0.3rem; }

.sec-23-prose__rich strong { font-weight: 700; }
.sec-23-prose__rich em { font-style: italic; }

.sec-23-prose__rich blockquote {
  margin-top: 1.6rem;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--accent);
  font-size: 1.08rem;
  font-style: italic;
  color: var(--text-on-bone-dim);
}

.sec-23-prose__rich img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin-top: 1.6rem;
}

/* Imported tables are the one thing that can blow the row off-screen on a
   phone, so they scroll inside their own box rather than the page. */
.sec-23-prose__rich table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.6rem;
}

.sec-23-prose__rich th,
.sec-23-prose__rich td {
  border: 1px solid var(--bone-2);
  padding: 0.6rem 0.8rem;
  text-align: left;
  font-size: 0.96rem;
}

.sec-23-prose__rich iframe {
  max-width: 100%;
  margin-top: 1.6rem;
  border: 0;
}

/* ------------------------------------------------------------------
   __review-grid — the /testimonials/ page (QA fix pass 2 item 3). This
   used to render as six plain <p> blocks using the base .sec-23-prose
   paragraph style, reading as a flat wall of text with no separation
   between reviews. Card grid instead, following the same bone-2 +
   shadow-soft card convention used sitewide for cards-on-light-sections
   (see .sec-65-serv-benefits__card) -- not the dark on-ink marquee card
   in css/sections/10-testimonials.css, whose near-white background has
   no contrast against this page's on-bone section and whose
   .sec-10-testimonials__snippet clamps to 2 lines (these reviews must
   ship in full, verbatim, per the fix list). Quote/attribution markup
   uses <blockquote>/<cite>, not <p>, specifically so this new rule set
   never fights the base .sec-23-prose p / p+p rules for specificity.
   Every word of the review text and attribution is unchanged from
   client-reviews.md; only the wrapper markup changed. The 5 stars are a
   uniform decorative glyph (the site's own "5-star reviews" framing,
   already used in this page's hero chip and JSON-LD) -- not a
   fabricated per-reviewer numeric rating.
   ------------------------------------------------------------------ */
.sec-23-prose__wrap > .sec-23-prose__review-grid {
  max-width: none;
}

.sec-23-prose__review-grid {
  list-style: none;
  margin-top: 1.4rem;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-gap);
}

.sec-23-prose__review-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--bone-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.75rem 1.85rem;
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.sec-23-prose__review-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

.sec-23-prose__review-stars {
  color: var(--ember);
  letter-spacing: 0.15em;
  font-size: 0.95rem;
}

.sec-23-prose__review-quote {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.65;
  color: var(--text-on-bone);
}

.sec-23-prose__review-attr {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-on-bone-dim);
}

@media (max-width: 640px) {
  .sec-23-prose__review-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-23-prose__review-card { transition: none; }
}

/* Tap targets on phones: the standalone "Back to all articles" /
   "Meet the rest of the team" links and the PDF download fallback. */
@media (max-width: 820px) {
  .sec-23-prose p > a[href="/blog/"]:only-child,
  .sec-23-prose p > a[href="/team/"]:only-child,
  .sec-23-prose object > a {
    display: inline-block;
    padding-block: 0.7rem;
  }
}

/* Mobile readability: team roster names/roles at least 16px on phones. */
@media (max-width: 820px) {
  .sec-23-prose__team-grid li {
    font-size: 1rem;
  }
}