/* Winterfield Health — interior page stylesheet.
   Loaded only by the community stories, the newsroom, and their index pages.
   site.css is not touched by this file.

   Kept separate rather than appended to site.css for two reasons: site.css is
   already edge-cached for seven days on the live domain (PLAT-06/PLAT-11), and
   a new filename sidesteps that entirely; and interior-page rules stay legible
   as a group. Same tokens: terracotta, olive, gold, cream. No blue. */

/* ---------- breadcrumb ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 400 12.5px var(--wf-sans);
  color: var(--wf-muted);
  padding-top: 20px;
}
.crumbs a { color: var(--wf-muted); text-decoration: none; }
.crumbs a:hover { color: var(--wf-terracotta); text-decoration: underline; }
.crumbs .sep { color: #C9B8A6; }
.crumbs [aria-current] { color: var(--wf-ink); font-weight: 600; }

/* ---------- on-page jump links ----------
   A row of pills under the page head, linking to headings further down or to a
   closely related page. Added 2026-07-30 for the care centers, which sit below
   26 clinician cards and are where the Locations tab in the header lands. The
   info pages use the same row, which is why it lives here and not in
   directory.css. */

.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.page-jump a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 13px var(--wf-sans);
  color: var(--wf-ink);
  text-decoration: none;
  background: #FFF;
  border: 1px solid var(--wf-hairline-strong);
  border-radius: 999px;
  padding: 8px 16px;
}
.page-jump a:hover {
  border-color: var(--wf-terracotta);
  color: var(--wf-terracotta);
}
.page-jump a span {
  font: 700 11px var(--wf-sans);
  background: var(--wf-tint);
  color: var(--wf-muted);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Any heading a .page-jump link points at, so it does not land hard against
   the top of the viewport. */
.info-main [id], .page-jump ~ * [id] { scroll-margin-top: 18px; }

/* ---------- image placeholder ----------
   Stands in for an image that has been specified but not generated yet.
   Deliberately obvious: a striped block with the filename on it, so a missing
   asset reads as "not delivered" rather than as a broken layout. */

.img-ph {
  position: relative;
  background: repeating-linear-gradient(-45deg, #EFE4D5 0 14px, #E7DAC8 14px 28px);
  border: 1px dashed #D2BEA3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}
.img-ph span {
  font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #7A6650;
  background: rgba(250, 245, 239, .92);
  border: 1px solid #D9C7AC;
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  max-width: 100%;
  word-break: break-word;
}

/* ---------- index page head ---------- */

.page-head { padding: 34px 0 4px; }
.page-head h1 { font-size: 40px; line-height: 1.14; margin-top: 10px; text-wrap: pretty; }
.page-head .lede {
  margin: 16px 0 0;
  font: 400 17px/1.65 var(--wf-sans);
  color: var(--wf-body);
  max-width: 60ch;
}

/* ---------- featured story (lead card) ---------- */

.lead-story {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--wf-hairline);
  border-radius: 18px;
  overflow: hidden;
  margin-top: 30px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s;
}
.lead-story:hover { box-shadow: 0 8px 26px rgba(59, 46, 37, .12); color: inherit; }
.lead-photo { min-height: 260px; overflow: hidden; background: #EAE0CE; }
.lead-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lead-photo .img-ph { width: 100%; height: 100%; border: 0; min-height: 260px; }
.lead-copy { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.lead-copy h2 { font-size: 27px; line-height: 1.22; margin-top: 8px; text-wrap: pretty; }
.lead-copy p { font: 400 14.5px/1.65 var(--wf-sans); color: var(--wf-body); margin: 12px 0 0; }
.lead-copy .story-tag { color: var(--wf-olive); }
.card-date { font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--wf-muted); }
.read-on { font: 700 13.5px var(--wf-sans); color: var(--wf-terracotta); margin-top: 16px; }

/* ---------- story index grid ---------- */

.index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 22px;
  padding-bottom: 72px;
}
.index-card {
  background: #fff;
  border: 1px solid var(--wf-hairline);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s;
}
.index-card:hover { box-shadow: 0 6px 20px rgba(59, 46, 37, .12); color: inherit; }
.index-photo { height: 168px; overflow: hidden; background: #EAE0CE; flex: none; }
.index-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.index-photo .img-ph { width: 100%; height: 100%; border: 0; }
.index-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.index-body h3 { font-size: 18px; line-height: 1.32; text-wrap: pretty; }
.index-body p { font: 400 13.5px/1.6 var(--wf-sans); color: var(--wf-body); margin: 0; flex: 1; }
.index-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ---------- newsroom archive list ---------- */

.archive { padding-bottom: 24px; }
.archive-month {
  font: 700 11px var(--wf-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wf-muted);
  padding: 30px 0 10px;
  border-bottom: 1px solid var(--wf-hairline-strong);
}
.archive-row {
  display: grid;
  grid-template-columns: 92px 1fr 90px;
  gap: 24px;
  align-items: start;
  padding: 20px 4px;
  border-bottom: 1px solid var(--wf-hairline-strong);
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.archive-row:hover { background: var(--wf-tint); color: inherit; }
.archive-row .news-date { padding-top: 3px; }
.archive-row h2 { font: 600 19px/1.32 var(--wf-serif); text-wrap: pretty; }
.archive-row p { font: 400 13.5px/1.6 var(--wf-sans); color: var(--wf-body); margin: 6px 0 0; max-width: 68ch; }
.archive-row .news-read { padding-top: 4px; text-align: right; }
.archive-tag {
  font: 700 10.5px var(--wf-sans);
  letter-spacing: .14em;
  color: var(--wf-olive);
  display: block;
  margin-bottom: 5px;
}

/* ---------- press contact box ---------- */

.press-box {
  background: #fff;
  border: 1px solid var(--wf-hairline);
  border-radius: 14px;
  padding: 28px 32px;
  margin: 40px 0 80px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.press-box h2 { font-size: 20px; }
.press-box p { font: 400 14px/1.65 var(--wf-sans); color: var(--wf-body); margin: 8px 0 0; max-width: 52ch; }
.press-lines { font: 400 13.5px/1.9 var(--wf-sans); color: var(--wf-body); }
.press-lines strong { display: block; font: 700 11px var(--wf-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--wf-muted); margin-bottom: 4px; }

/* ---------- article ---------- */

.article { max-width: 740px; }
.article-head { padding-top: 26px; }
.article-head h1 { font-size: 40px; line-height: 1.16; margin-top: 12px; text-wrap: pretty; }
.article-kicker { font: 700 11px var(--wf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wf-olive); }
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  font: 400 13px var(--wf-sans);
  color: var(--wf-muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--wf-hairline-strong);
}
.byline strong { color: var(--wf-ink); font-weight: 700; }
.byline .dot { color: #C9B8A6; }

.article-hero {
  aspect-ratio: 5 / 2;
  border-radius: 16px;
  overflow: hidden;
  margin: 28px 0 10px;
  background: #EAE0CE;
}
.article-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-hero .img-ph { width: 100%; height: 100%; border: 0; }
.figcap { font: 400 12.5px/1.55 var(--wf-sans); color: var(--wf-muted); margin: 10px 0 0; }

.article-body { margin-top: 26px; }
.article-body p { font: 400 17px/1.75 var(--wf-sans); color: var(--wf-body); margin: 0 0 20px; }
.article-body p.opener::first-letter {
  font: 600 58px/0.82 var(--wf-serif);
  color: var(--wf-terracotta);
  float: left;
  padding: 4px 10px 0 0;
}
.article-body h2 { font-size: 24px; line-height: 1.3; margin: 36px 0 12px; }
.article-body h3 { font-size: 19px; margin: 28px 0 8px; }
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 24px; }
.article-body li { font: 400 17px/1.7 var(--wf-sans); color: var(--wf-body); margin-bottom: 9px; }
.article-body strong { color: var(--wf-ink); font-weight: 700; }
.article-body a { color: var(--wf-terracotta); text-decoration: underline; text-underline-offset: 3px; }

.pullquote { margin: 34px 0; padding: 0 0 0 26px; border-left: 4px solid var(--wf-gold); }
.pullquote p { font: 600 23px/1.4 var(--wf-serif); color: var(--wf-ink); margin: 0; text-wrap: pretty; }
.pullquote cite { display: block; margin-top: 12px; font: 400 13px var(--wf-sans); color: var(--wf-muted); font-style: normal; }

.glance {
  background: var(--wf-tint);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 32px 0;
}
.glance h2 { font: 700 11px var(--wf-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wf-muted); margin: 0 0 14px; }
.glance ul { margin: 0; padding-left: 20px; }
.glance li { font: 400 14.5px/1.65 var(--wf-sans); color: var(--wf-body); margin-bottom: 7px; }
.glance li:last-child { margin-bottom: 0; }

.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0; }
.numbers > div { border-top: 3px solid var(--wf-gold); padding-top: 12px; }
.numbers .n { font: 600 30px/1 var(--wf-serif); color: var(--wf-terracotta); }
.numbers .l { font: 600 12px/1.4 var(--wf-sans); color: var(--wf-muted); margin-top: 6px; display: block; }

.article-foot {
  border-top: 1px solid var(--wf-hairline-strong);
  margin-top: 36px;
  padding-top: 22px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.article-note { font: 400 13px/1.7 var(--wf-sans); color: var(--wf-muted); max-width: 60ch; }

.related { padding: 56px 0 80px; margin-top: 48px; border-top: 1px solid var(--wf-hairline-strong); }
.related h2 { font-size: 22px; margin-bottom: 20px; }

@media (max-width: 1000px) {
  .lead-story { grid-template-columns: 1fr; }
  .lead-copy { padding: 26px 24px; }
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .page-head h1, .article-head h1 { font-size: 31px; }
  .archive-row { grid-template-columns: 78px 1fr; }
  .archive-row .news-read { display: none; }
  .numbers { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 620px) {
  .index-grid { grid-template-columns: 1fr; }
  .archive-row { grid-template-columns: 1fr; gap: 6px; }
  .article-body p { font-size: 16px; }
  .article-body p.opener::first-letter { font-size: 48px; }
  .press-box { padding: 22px 20px; }
}