/* ============================================================
   Rockwell Health — "Patient Stories" page styles
   Adds ONLY this page's section styles on top of the shared
   editorial system (../style.css owns tokens, header, footer,
   buttons, .ed-head, .ed-eyebrow, .ed-voice*, utilities).

   Art direction for this page: the navy Featured Patient Voice
   hero opens (the single deliberate navy bookend). The page then
   moves onto warm paper, where one standout quote anchors the
   section, the rest of the reviews are threaded by theme rather
   than dropped into a uniform card wall, the 4.9 aggregate is
   restated as a recurring brand mark, and the closer is kept on
   cream so navy never becomes wallpaper.

   Stars throughout are the shared five-point star path: red on
   cream, salmon (#ff8a80) on navy. Never a blobby shape.
   Page sub-prefix: ed-ps-
   ============================================================ */

/* ============================================================
   1 · Featured voice hero — reuses the shared .ed-voice navy
   panel as the page opener. We add the page H1 above the
   featured quote and let the quote read a touch smaller than
   the homepage standalone pull-quote, since an H1 now leads.
   ============================================================ */
.ed-ps-hero{
  border-bottom:1px solid var(--on-navy-rule);
}
.ed-ps-hero-copy{ max-width:33ch; }
.ed-ps-hero h1{
  color:var(--on-navy);
  font-size:clamp(2.5rem,4.8vw,4rem);
  line-height:1.02; letter-spacing:-.026em;
}
.ed-ps-hero-quote{ margin-top:clamp(28px,3.4vw,40px); }
.ed-ps-hero-quote .ed-voice-mark{ font-size:4.2rem; margin-bottom:.12em; }
.ed-ps-hero-quote blockquote{
  max-width:30ch;
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.28;
}

/* ============================================================
   2 · The standout voice — the editorial focal point.
   One review, given real scale, on warm paper. A hanging serif
   quote mark, large stars, a big Spectral quote. This is the
   "feature a standout review" the brief asks for: it dominates,
   it is not just a wider card.
   ============================================================ */
.ed-ps-lead{
  padding-block:clamp(56px,8vw,108px);
  background:var(--paper);
  position:relative;
}
.ed-ps-lead-in{
  max-width:var(--wrap);
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,72px);
  align-items:center;
}
.ed-ps-lead-photo{
  margin:0; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; background:var(--paper-2); box-shadow:var(--sh-2);
}
.ed-ps-lead-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ed-ps-lead .ed-eyebrow{ margin-bottom:clamp(22px,2.6vw,34px); }

.ed-ps-lead-fig{
  margin:0;
  position:relative;
  padding-left:0;
}
/* oversized hanging quote mark, set in the red accent, behind the
   opening line on wider viewports (decorative, aria-hidden visually
   via its container's role; here purely typographic flourish) */
.ed-ps-lead-fig::before{
  content:"\201C";
  position:absolute; left:-.04em; top:-.28em;
  font-family:"Spectral",serif; font-weight:700; font-style:italic;
  font-size:clamp(5rem,11vw,9.5rem); line-height:1;
  color:var(--red); opacity:.14;
  pointer-events:none;
}
.ed-ps-lead-stars{
  display:flex; gap:7px;
  margin-bottom:clamp(20px,2.4vw,28px);
}
.ed-ps-lead-stars svg{
  width:clamp(22px,2.4vw,28px); height:clamp(22px,2.4vw,28px);
  fill:var(--red); flex:none;
}
.ed-ps-lead-quote{
  margin:0;
  max-width:24ch;
  font-family:"Spectral",serif; font-style:italic; font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.16;
  letter-spacing:-.018em; color:var(--navy);
  text-wrap:balance;
}
.ed-ps-lead-cite{
  margin-top:clamp(26px,3vw,38px);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5em 1em;
}
.ed-ps-lead-name{
  font-family:"Spectral",serif; font-weight:600;
  font-size:clamp(1.2rem,1.6vw,1.5rem); letter-spacing:-.01em; color:var(--ink);
}
.ed-ps-lead-loc{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-ink);
}
.ed-ps-lead-loc::before{
  content:""; width:24px; height:1.5px; background:var(--red); flex:none;
}

/* ============================================================
   3 · Reviews threaded by theme — gives the section a spine.
   Three columns, each a short titled "thread"; the first review
   in each thread is set larger as the thread's anchor, the rest
   follow smaller. Quote blocks are ruled editorial entries
   (top hairline), deliberately NOT a uniform card grid.
   ============================================================ */
.ed-ps-reviews{
  padding-block:var(--sec);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ed-ps-reviews-head{ max-width:46ch; }

.ed-ps-threads{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.4vw,56px);
  align-items:start;
}
/* hairline gutters between threads (full borders, never side-stripes:
   these are column separators, not card accents) */
.ed-ps-thread{ position:relative; }
.ed-ps-thread + .ed-ps-thread{
  padding-left:clamp(28px,3.4vw,56px);
  border-left:1px solid var(--line-2);
}

.ed-ps-thread-h{
  font-family:"Spectral",serif; font-weight:600;
  font-size:clamp(1.18rem,1.5vw,1.42rem); line-height:1.16;
  letter-spacing:-.012em; color:var(--navy);
  padding-bottom:clamp(16px,1.8vw,22px);
  margin-bottom:clamp(22px,2.6vw,30px);
  border-bottom:2px solid var(--red);
  display:inline-block;
}

.ed-ps-list{ display:flex; flex-direction:column; }

/* quote block — ruled editorial entry, not a card */
.ed-ps-quoteblock{
  padding-top:clamp(22px,2.6vw,30px);
}
.ed-ps-quoteblock + .ed-ps-quoteblock{
  margin-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line-2);
}
/* the first entry in each list sits flush under the thread heading */
.ed-ps-list > .ed-ps-quoteblock:first-child{ padding-top:0; }

/* stars — real five-point stars, red on warm paper */
.ed-ps-stars{ display:flex; gap:5px; margin-bottom:clamp(12px,1.4vw,16px); }
.ed-ps-stars svg{ width:17px; height:17px; fill:var(--red); flex:none; }

.ed-ps-quote{
  margin:0;
  font-family:"Spectral",serif; font-weight:400;
  font-size:1.05rem; line-height:1.5;
  letter-spacing:-.004em; color:var(--ink);
  text-wrap:pretty;
}
/* anchor quote in each thread — larger + italic, carries the thread */
.ed-ps-quoteblock--anchor .ed-ps-stars svg{ width:19px; height:19px; }
.ed-ps-quoteblock--anchor .ed-ps-quote{
  font-style:italic; font-weight:400;
  font-size:clamp(1.28rem,1.7vw,1.55rem); line-height:1.32;
  letter-spacing:-.012em;
}

.ed-ps-cite{
  margin-top:clamp(14px,1.6vw,18px);
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.4em .8em;
}
.ed-ps-name{
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.96rem; color:var(--navy); letter-spacing:.005em;
}
.ed-ps-loc{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-ink);
}
.ed-ps-loc::before{
  content:""; width:6px; height:6px; border-radius:var(--r-pill);
  background:var(--red); flex:none;
}

.ed-ps-note{
  margin-top:clamp(34px,4vw,52px);
  padding-top:clamp(22px,2.4vw,28px);
  border-top:1px solid var(--line-2);
  font-size:.92rem; color:var(--body-2);
}

/* staggered rise on the threads, gated to scroll-timeline support so
   headless / reduced-motion never ship blank (mirrors shared sheet) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-ps-thread{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 22%;
    }
    .ed-ps-thread:nth-child(2){ animation-range:entry 6% cover 26%; }
    .ed-ps-thread:nth-child(3){ animation-range:entry 10% cover 30%; }
  }
}

/* ============================================================
   4 · Aggregate reprise — the homepage 4.9 lockup, restated on
   sand as a stat row so the rating reads as a recurring brand
   mark. Lede left, stats right; the 4.9 stat carries red stars.
   ============================================================ */
.ed-ps-agg{
  padding-block:var(--sec);
  background:var(--paper);
}
.ed-ps-agg-in{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(36px,5vw,80px);
  align-items:center;
}
.ed-ps-agg-lede{ max-width:38ch; }
.ed-ps-agg-lede h2{
  font-size:clamp(1.9rem,3vw,2.7rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.08;
}
.ed-ps-agg-sub{
  margin-top:18px; max-width:42ch;
  font-size:clamp(1.04rem,1.15vw,1.16rem); line-height:1.6; color:var(--body-2);
}

.ed-ps-agg-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden;
}
.ed-ps-stat{
  background:var(--card);
  padding:clamp(22px,2.6vw,32px) clamp(22px,2.6vw,30px);
  display:flex; flex-direction:column; gap:12px;
}
.ed-ps-stat dt{
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-ink); order:-1;
}
.ed-ps-stat dd{ margin:0; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.ed-ps-stat-num{
  font-family:"Spectral",serif; font-weight:700;
  font-size:clamp(2rem,3vw,2.6rem); line-height:.9;
  letter-spacing:-.03em; color:var(--navy);
}
/* the average-rating cell spans the full top row and reads largest;
   the remaining three stats fill the bottom row evenly (no empty cell) */
.ed-ps-stat--hero{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:18px clamp(20px,3vw,36px); flex-wrap:wrap;
}
.ed-ps-stat--hero dt{ order:0; }
.ed-ps-stat--hero dd{ flex:1 1 auto; justify-content:flex-end; }
.ed-ps-stat--hero .ed-ps-stat-num{ font-size:clamp(3rem,5.4vw,4.4rem); }
.ed-ps-stat-stars{ display:flex; gap:5px; }
.ed-ps-stat-stars svg{
  width:clamp(20px,2vw,26px); height:clamp(20px,2vw,26px);
  fill:var(--red); flex:none;
}

/* ============================================================
   4b · Life at Rockwell — warm representative imagery, on cream
   between the sand reviews band and the sand share band.
   ============================================================ */
.ed-ps-gallery{
  padding-block:var(--sec);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.ed-ps-gallery-head{ max-width:46ch; margin-bottom:clamp(28px,3.4vw,44px); }
.ed-ps-gallery-head h2{
  margin-top:.35em;
  font-size:clamp(1.9rem,3vw,2.7rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.08; color:var(--navy);
}
.ed-ps-gallery-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,34px);
}
.ed-ps-gallery-fig{ margin:0; }
.ed-ps-gallery-fig img{
  width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--r-lg); box-shadow:var(--sh-2); display:block;
}
.ed-ps-gallery-fig figcaption{
  margin-top:clamp(12px,1.4vw,16px);
  font-family:"Figtree",sans-serif; font-size:.95rem; line-height:1.5;
  color:var(--body-2);
}

/* ============================================================
   5 · Share your experience — an inline invitation set against
   an oversized quote mark (no icon-in-a-box template). Calm,
   on the deeper sand band, leading into the closer.
   ============================================================ */
.ed-ps-share{
  padding-block:var(--sec);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ed-ps-share-in{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(20px,3.4vw,52px);
  align-items:start;
  max-width:840px;
}
.ed-ps-share-mark{
  font-family:"Spectral",serif; font-weight:700; font-style:italic;
  font-size:clamp(5rem,9vw,8rem); line-height:.74;
  color:var(--red); opacity:.9;
  flex:none; user-select:none;
}
.ed-ps-share-copy h2{
  font-size:clamp(1.9rem,3vw,2.6rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.08;
}
.ed-ps-share-lede{
  margin-top:18px; max-width:50ch;
  font-size:clamp(1.04rem,1.15vw,1.16rem); line-height:1.6; color:var(--body-2);
}
.ed-ps-share-copy .ed-btn{ margin-top:clamp(24px,2.6vw,32px); }

/* ============================================================
   6 · Closing CTA — override the shared navy .ed-final to a
   warm cream closer for THIS page only, so the page's navy
   reads as a single deliberate opening bookend, not wallpaper.
   We re-skin colors only; layout comes from the shared .ed-final.
   ============================================================ */
.ed-ps-final{
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color:var(--body);
  border-top:1px solid var(--line);
}
.ed-ps-final h2{ color:var(--navy); }
.ed-ps-final p{ color:var(--body-2); }
/* hairline + soft halo set off the closer as a composed panel on cream */
.ed-ps-final .ed-final-in{ position:relative; }

/* ============================================================
   Responsive — 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  /* hero reuses the shared .ed-voice 1024 stack (rating beneath quote) */
  .ed-ps-hero-copy{ max-width:none; }
  .ed-ps-hero-quote blockquote{ max-width:36ch; }

  .ed-ps-lead-in{ grid-template-columns:1fr; gap:clamp(24px,4vw,36px); }
  .ed-ps-lead-photo{ aspect-ratio:16/9; }
  .ed-ps-lead-quote{ max-width:28ch; }

  /* threads → first thread full width as a feature row, other two
     side by side beneath it; keeps a real hierarchy on tablet */
  .ed-ps-threads{ grid-template-columns:repeat(2,1fr); }
  .ed-ps-thread:first-child{ grid-column:1 / -1; }
  .ed-ps-thread + .ed-ps-thread{ padding-left:0; border-left:none; }
  .ed-ps-thread:nth-child(2){
    padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--line-2);
  }
  .ed-ps-thread:nth-child(3){
    padding-top:clamp(24px,3vw,32px); border-top:1px solid var(--line-2);
    padding-left:clamp(24px,3vw,40px); border-left:1px solid var(--line-2);
  }
  /* first thread lays its two quotes side by side when full width */
  .ed-ps-thread:first-child .ed-ps-list{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(24px,3vw,40px);
  }
  .ed-ps-thread:first-child .ed-ps-quoteblock + .ed-ps-quoteblock{
    margin-top:0; border-top:none;
  }

  .ed-ps-agg-in{ grid-template-columns:1fr; gap:clamp(30px,4vw,40px); }
  .ed-ps-agg-lede{ max-width:54ch; }
}

/* ============================================================
   Responsive — 560 (phone / 390 target): single column
   ============================================================ */
@media (max-width:560px){
  .ed-ps-lead-fig{ padding-left:0; }
  .ed-ps-lead-fig::before{ font-size:6rem; top:-.34em; left:-.02em; }
  .ed-ps-lead-quote{ max-width:none; }
  .ed-ps-gallery-grid{ grid-template-columns:1fr; gap:clamp(22px,6vw,30px); }

  .ed-ps-threads{ grid-template-columns:1fr; gap:clamp(30px,7vw,40px); }
  .ed-ps-thread:first-child{ grid-column:auto; }
  .ed-ps-thread:nth-child(n){
    padding-left:0; border-left:none;
  }
  .ed-ps-thread + .ed-ps-thread{
    padding-top:clamp(28px,7vw,36px); border-top:1px solid var(--line-2);
  }
  .ed-ps-thread:first-child .ed-ps-list{ grid-template-columns:1fr; }
  .ed-ps-thread:first-child .ed-ps-quoteblock + .ed-ps-quoteblock{
    margin-top:clamp(22px,5vw,28px); border-top:1px solid var(--line-2);
    padding-top:clamp(22px,5vw,28px);
  }

  .ed-ps-agg-stats{ grid-template-columns:1fr; }
  .ed-ps-stat--hero{
    grid-column:auto; flex-direction:column; align-items:flex-start;
  }
  .ed-ps-stat--hero dt{ order:-1; }
  .ed-ps-stat--hero dd{ justify-content:flex-start; }

  /* share invitation → quote mark sits above the copy */
  .ed-ps-share-in{ grid-template-columns:1fr; gap:6px; }
  .ed-ps-share-mark{ font-size:5rem; line-height:.6; }
  .ed-ps-share-copy .ed-btn{ width:100%; justify-content:center; }
}

/* ============================================================
   Reduced motion — neutralize this page's reveals defensively
   (shared sheet already disables transitions globally)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ed-ps-thread{ animation:none; opacity:1; transform:none; }
}