/* patients.css — For Patients page, "Did Carrie call you?" (Figma frame 254:1709)

   Desktop layout first; tablet (≤768px) and mobile (≤480px) overrides at the
   bottom, same breakpoints as the other pages.
   Values marked "FLAG: no token" come straight from the Figma frame and have
   no matching design token in tokens.css yet. */

/* Figma pads every section 173px left/right at 1440 wide, which leaves a
   1094px content column; centered here so wider screens don't left-align.
   FLAG: no token (1094px). */
.patients-container {
  width: min(1094px, calc(100% - 2 * var(--space-lg)));
  margin: 0 auto;
}

/* Hero ------------------------------------------------------------------ */

/* Two 315px layers from Figma: the lavender gradient, and a fade to white
   that starts 55% of the way down. FLAG: no token (#e6e0ec border; 72/64px
   padding; 136deg angle; 35%/70%/55% stops; 315px layer height). */
.patients-hero {
  border-top: 1px solid #e6e0ec;
  padding: var(--section-space-top) 0 var(--section-space-top);
  background:
    linear-gradient(to bottom, transparent 0%, transparent 55%, var(--color-white) 100%) top / 100% 315px no-repeat,
    linear-gradient(136deg, var(--color-white) 0%, var(--color-primary-25) 35%, var(--color-primary-50) 70%, var(--color-accent2-50) 100%) top / 100% 315px no-repeat;
  overflow: hidden;
}

/* FLAG: no token (12px gap). */
.patients-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Figma "Caption" text style — same treatment as the legal pages' label.
   FLAG: no token (line-height 1.8, letter-spacing 4%). */
.patients-hero__label {
  margin: 0;
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-caption-size);
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent1-500);
}

/* FLAG: no token (820px max-width, 12px gap). */
.patients-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
}

/* FLAG: no token (780px max-width). */
.patients-hero__title {
  max-width: 780px;
  margin: 0;
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  color: var(--color-neutral-900);
}

.patients-hero__accent {
  color: var(--color-primary-500);
}

/* 660px max-width. */
.patients-hero__intro {
  max-width: 660px;
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
}

/* Information sections --------------------------------------------------- */

/* FLAG: no token (80px vertical padding). */
.patients-info {
  padding: var(--section-space) 0;
  background: var(--color-white);
}

/* FLAG: no token (48px between info items; between --space-lg and --space-xl). */
.patients-info__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* FLAG: no token (6px heading-to-body gap). */
.patients-info__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.patients-info__title {
  margin: 0;
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: var(--color-neutral-900);
}

/* 600px max-width on single-paragraph items. */
.patients-info__text {
  max-width: 600px;
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
}

/* "What is Carrie?" runs full width and spans several paragraphs. */
.patients-info__text--wide {
  max-width: none;
}

.patients-info__text p {
  margin: 0;
}

/* Figma separates these paragraphs with an empty line; one body line-height. */
.patients-info__text .is-spaced {
  margin-top: calc(var(--font-body-regular-line-height) * 1em);
}

.patients-info__text strong {
  font-weight: var(--font-weight-bold);
}

/* Subtitle under "Hear what a call sounds like" — Figma "Body Medium" (2%
   tracking), in Neutral/500 rather than the section's Neutral/900. */
.patients-info__subtitle {
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  letter-spacing: var(--font-nav-letter-spacing);
  color: var(--color-neutral-500);
}

/* Audio sample -----------------------------------------------------------
   The player card itself (waveform, controls, built-in transcript) is the
   shared one in css/audio-player.css + js/audio-player.js. */
.patients-audio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 820px;
}

/* FLAG: no token (16px line-height). */
.patients-audio__note {
  margin: 0;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-0);
  line-height: 16px;
  color: var(--color-neutral-500);
}

/* Emergency guidance ----------------------------------------------------- */

/* Sits directly under the hero. FLAG: no token (#fae6e7 background; 24px
   vertical padding). Not in the Accent2 ramp or the status colors. */
.patients-emergency {
  padding: 24px 0;
  background: #fae6e7;
}

.patients-emergency__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* FLAG: no token (#b43636 — nearest is --color-status-critical #b91c1c). */
.patients-emergency__title {
  margin: 0;
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: #b43636;
}

.patients-emergency__text {
  margin: 0;
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-bold-size);
  line-height: var(--font-body-bold-line-height);
  letter-spacing: var(--font-body-bold-letter-spacing);
  color: var(--color-neutral-500);
}

/* Responsive ==============================================================
   Tablet (≤768px) and mobile (≤480px), desktop-first like the other pages;
   the tablet block also applies at mobile widths unless overridden below.
   Not in Figma (desktop-only frame). Type sizes step down via the tokens.
   ========================================================================== */

@media (max-width: 768px) {
  .patients-hero {
    padding: var(--section-space-top) 0 var(--section-space-top);
  }

  .patients-emergency {
    padding: 20px 0;
  }

  .patients-info {
    padding: var(--section-space) 0;
  }

  .patients-info__list {
    gap: 40px;
  }
}

@media (max-width: 480px) {
  .patients-container {
    width: calc(100% - 2 * var(--space-md));
  }

  .patients-hero {
    padding: var(--section-space-top) 0 var(--section-space-top);
  }

  .patients-emergency {
    padding: 16px 0;
  }

  .patients-info {
    padding: var(--section-space) 0;
  }

  .patients-info__list {
    gap: 32px;
  }

}

/* Emergency numbers are tel:/sms: links on touch devices (patients.js strips
   the href elsewhere). Keep the banner's own color, underlined so they read as
   tappable. */
.patients-emergency__link {
  color: inherit;
  text-decoration: underline;
}

.patients-emergency__link:not([href]) {
  text-decoration: none;
}