/* ==========================================================================
   /specialties/ hub. Loaded after main.css and challenges.css (hero, proof,
   report band, FAQ and link lists come from there). This file only adds the
   group jump links, group headers and the photo cards, with :root tokens.
   Cards follow the homepage card rules: square corners, 1px --border2,
   Newsreader 300 title, Manrope 300 text, .story-card-link at the foot.
   ========================================================================== */

.sh-head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.sh-head .hipaa-copy { max-width: var(--measure-head); }

/* Jump links: the homepage .specialties-toggle pill, as links. */
.sh-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.sh-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  font-family: var(--sans); font-weight: 500; font-size: 14.5px; color: var(--ink);
  border: 1px solid var(--border2); border-radius: 999px; background: var(--bg);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.sh-jump a:hover { border-color: var(--border); background: transparent; }

.sh-group { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 96px; }
.sh-group + .sh-group { margin-top: 8px; }
.sh-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.sh-group-h { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.2vw, 32px); line-height: 1.2; color: var(--ink); margin: 0; }
.sh-group-n { font-family: var(--sans); font-weight: 600; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.sh-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.sh-grid > li { display: flex; min-width: 0; }

.sh-card {
  display: flex; flex-direction: column; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); color: var(--ink);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.sh-card:hover { border-color: var(--border); transform: translateY(-3px); }
.sh-card:hover .story-card-link svg { transform: translateX(4px); }

/* The specialty heroes keep their people on the right; the crop follows them. */
.sh-card-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--warm2); }
.sh-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 88% 35%; }

.sh-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 24px; }
.sh-card-t { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -0.2px; }
.sh-card-d { font-family: var(--sans); font-weight: 300; font-size: 15.5px; line-height: 1.5; color: var(--muted2); }
.sh-card .ch-card-link { padding-top: 8px; }

/* "Don't see your specialty?": fills the open slot after the last group. */
.sh-card--missing { background: transparent; border-style: dashed; border-color: var(--border); }
.sh-card--missing .sh-card-body { justify-content: flex-start; gap: 14px; padding: 28px; }
.sh-card--missing .hipaa-pillar-icon { margin-bottom: 4px; }

.sh-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-related-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .sh-jump { gap: 6px; }
  .sh-jump a { padding: 0 14px; font-size: 14px; }
  .sh-group { gap: 14px; }
  .sh-group-h { font-size: 24px; }
  .sh-grid { grid-template-columns: minmax(0, 1fr); }
  /* Phone: a row card (thumb left, words right) so 23 cards stay scannable. */
  .sh-card { flex-direction: row; align-items: stretch; }
  .sh-card-img { flex: 0 0 34%; aspect-ratio: auto; min-height: 100%; }
  .sh-card-body { padding: 16px 16px 14px; gap: 6px; }
  .sh-card-t { font-size: 20px; }
  .sh-card-d { font-size: 14px; line-height: 1.45; }
  /* The whole card is the link; on a phone the label row wraps badly, so the
     title carries the arrow instead. */
  .sh-card .ch-card-link { display: none; }
  .sh-card-t { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .sh-card-t::after { content: "→"; font-family: var(--sans); font-size: 16px; color: var(--ink); flex-shrink: 0; }
  .sh-card--missing .ch-card-link { display: inline-flex; font-size: 14px; }
  .sh-card--missing .sh-card-t::after { content: none; }
  .sh-group-head { align-items: flex-end; }
  .sh-group-n { font-size: 11px; }
  .sh-card--missing .sh-card-body { padding: 20px; gap: 10px; }
  .sh-card--missing .hipaa-pillar-icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-card, .sh-card:hover { transition: none; transform: none; }
}