/* Crisis help: page-only styles (Figma frame 1:3074). Calm, plain, large tap targets (52px+).
   Uses site.css custom properties only (no hex colors, font families, shadows or gradients). */

.crisis-phone { width: 18px; height: 18px; flex: none; }

/* ---------- Immediate-danger banner (1:3077): full width, 896 inner ---------- */
.crisis-alert { background: var(--color-accent-soft); border-bottom: 1px solid var(--color-accent-border); }
.crisis-alert__inner { display: grid; gap: var(--space-3); padding-block: var(--space-4) var(--space-5); }
.crisis-alert__text { font-size: var(--fs-body); line-height: 24px; color: var(--color-text); }
.crisis-alert__text strong { color: var(--color-accent-ink); }
.crisis-alert__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 640px) { .crisis-alert__actions { display: flex; flex-wrap: wrap; } }
.crisis-alert__call {
  display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px;
  min-height: 52px; padding: 8px 18px; border-radius: var(--radius);
  border: 2px solid var(--color-accent-ink); background: var(--color-white); color: var(--color-accent-ink);
  font-size: var(--fs-h3); line-height: 24px; font-weight: 700; text-decoration: none;
}
.crisis-alert__call:hover { text-decoration: underline; }
.crisis-alert__call--solid { background: var(--color-accent-ink); color: var(--color-white); }
.crisis-alert__call-sub { font-size: var(--fs-chip); line-height: 18px; font-weight: 700; }
@media (max-width: 379.98px) { .crisis-alert__call { padding-inline: 10px; } .crisis-alert__call-sub { width: 100%; text-align: center; } }

/* ---------- Page column (1:3087: 832px content) ---------- */
.crisis-page { max-width: calc(832px + 2 * var(--gutter)); display: grid; gap: var(--space-12); padding-block: var(--space-8) var(--space-14); }
@media (min-width: 960px) { .crisis-page { padding-top: var(--space-12); } }

/* ---------- Header (1:3088) ---------- */
.crisis-head { display: grid; gap: var(--space-4); }
.crisis-head__title { font-size: var(--fs-h1); line-height: 1.12; letter-spacing: var(--ls-tight); color: var(--color-text); }
.crisis-head__intro { max-width: 672px; font-size: var(--fs-lead-lg); line-height: 1.6; color: var(--color-text-soft); }

/* ---------- Section headings ---------- */
.crisis-h2 { font-size: var(--fs-h3-lg); line-height: 1.3; color: var(--color-text); }

/* ---------- Numbers (1:3106) ---------- */
.crisis-jump { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin-top: var(--space-4); }
.crisis-jump__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-label); line-height: 20px; font-weight: 700; color: var(--color-primary);
  text-decoration: underline; text-underline-offset: 3px;
}
.crisis-jump__link:hover { text-decoration-thickness: 2px; }

.crisis-group {
  margin-top: var(--space-8); scroll-margin-top: calc(var(--header-h) + 16px);
  font-size: var(--fs-h3); line-height: 28px; color: var(--color-text);
}
.crisis-group__note { margin-top: var(--space-2); max-width: 672px; font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-muted); }

/* Cards: 2 columns (Thailand), 3 columns for home lines on desktop. The whole card is one tap target. */
.crisis-cards { display: grid; gap: var(--space-4); margin-top: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .crisis-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .crisis-cards--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.crisis-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-white); border: 1px solid var(--color-border);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
@media (min-width: 640px) { .crisis-card { padding: var(--space-6); } }
.crisis-card:hover { border-color: var(--color-primary); }
.crisis-card:has(.crisis-card__number:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
/* The number is the card's only link; ::after stretches it over the whole card */
.crisis-card__number {
  align-self: flex-start;
  font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem); line-height: 1.1; font-weight: 700;
  color: var(--color-text); text-decoration: none; font-variant-numeric: tabular-nums;
}
.crisis-card__number::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.crisis-card__number:focus-visible { outline: none; }
.crisis-card__title { margin-top: var(--space-2); font-size: var(--fs-body); line-height: 22px; color: var(--color-text); }
.crisis-card__note { font-size: var(--fs-sm); line-height: 20px; color: var(--color-text-muted); }
.crisis-card__text { margin-top: var(--space-2); font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-soft); }
.crisis-card__call {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-top: auto; min-height: 52px; padding: 10px 20px; border-radius: var(--radius);
  background: var(--color-primary); color: var(--color-white);
  font-size: var(--fs-body); line-height: 20px; font-weight: 700;
}
.crisis-card > :nth-last-child(2) { margin-bottom: var(--space-4); } /* space above the call button */
.crisis-card:hover .crisis-card__call { text-decoration: underline; }

/* ---------- Withdrawal warning (1:3210) ---------- */
.crisis-withdrawal {
  display: grid; gap: var(--space-3); padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-md); background: var(--color-accent-soft); border: 1px solid var(--color-accent-border);
}
@media (min-width: 640px) { .crisis-withdrawal { padding: var(--space-8); } }
.crisis-withdrawal .crisis-h2 { color: var(--color-accent-ink); }
.crisis-withdrawal p { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-text); }
.crisis-withdrawal a { font-weight: 700; color: var(--color-accent-ink); }

/* ---------- What to expect (1:3225): plain numbered list ---------- */
.crisis-expect { display: grid; gap: var(--space-3); }
.crisis-expect > p { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-text-soft); }
.crisis-expect__list { list-style: decimal; padding-left: 1.4em; display: grid; gap: var(--space-3); font-size: var(--fs-lead); line-height: 1.6; color: var(--color-text-soft); }
.crisis-expect__list li::marker { font-weight: 700; color: var(--color-text); }
.crisis-expect__list strong { color: var(--color-text); }
.crisis-expect__list a { font-weight: 700; }

/* ---------- Closing (1:3254) ---------- */
.crisis-closing { display: grid; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--color-border); font-size: var(--fs-body); line-height: 1.6; color: var(--color-text-soft); }
.crisis-closing a { font-weight: 700; }
.crisis-closing__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }