/* sedation.html only. Everything else comes from site.css. */

/* The one large reassurance line: serif light, quote-sized, no quote marks */
.statement {
  font: 300 var(--step-3)/1.3 var(--serif); letter-spacing: -.01em; color: var(--ink);
  max-width: 30ch; margin: 0 0 var(--space-7); text-wrap: balance;
}
.sedation-list-title { font-weight: 500; color: var(--ink); }

/* Desktop: the statement and the "may suit you" list sit side by side (same 7/5 rhythm as the intro),
   so the page's central section reads as one composed thought, not a long left-hand column. */
@media (min-width: 1024px) {
  .page-sedation #iv-sedation .container {
    display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--space-9); align-items: start;
  }
  .page-sedation #iv-sedation .section-head { grid-column: 1 / -1; }
  .page-sedation #iv-sedation .statement { margin-bottom: 0; }
  .page-sedation #iv-sedation .prose { padding-top: .5em; }   /* list title lines up with the statement's first line */
}

/* "Whatever the reason, we can help": one line on desktop; on phones it breaks after the comma (nowrap span) */
.page-sedation #help-title { max-width: none; text-wrap: wrap; }

/* Two people, not a 3-column grid with an empty slot */
@media (min-width: 768px) {
  .sedation-team { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; }
}
.sedation-team .team-member__note { max-width: 40ch; }
.sedation-more { margin-top: var(--space-6); }

/* Two quiet text links side by side (wrap on phones) */
.sedation-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

/* Intro quote: when stacked below the buttons, give it room */
@media (max-width: 1023px) {
  .page-sedation .page-intro .quote { margin-top: var(--space-6); }
}

/* Phones: the notes here are longer than on the home page, so keep each note beside its portrait
   (name, role and note stacked to the right) instead of leaving a gap under the role line. */
@media (max-width: 767px) {
  .sedation-team .team-member { align-items: start; }
  .sedation-team .team-member .photo { grid-row: 1 / span 3; }
  .sedation-team .team-member__name { align-self: start; }
  .sedation-team .team-member__note { grid-column: 2; }
}