/* ==========================================================================
   Services hub (services.html) — big link cards to each service page,
   the "Urgent care or the ER?" guide, and the areas-we-serve chips.
   Sits on top of services.css / ui.css; monochrome system only.
   ========================================================================== */

/* ---- Link cards: image + title + intro + arrow ---- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
}
@media (max-width: 980px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-soft),
              background var(--dur-normal) var(--ease-soft);
}
.hub-card:hover,
.hub-card:focus-within {
  transform: translateY(-4px);
  border-color: oklch(var(--ink) / 0.4);
  background: var(--color-surface-2);
}
.hub-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
}
.hub-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.8);
  transform: scale(1.02);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-soft);
}
.hub-card:hover .hub-card__media img { transform: scale(1.06); filter: grayscale(0.3) contrast(1.05) brightness(0.9); }
.hub-card__body {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
}
.hub-card__body h2 { font-size: var(--text-xl); }
.hub-card__body p { font-size: var(--text-sm); color: var(--color-text-soft); max-width: 40ch; }
.hub-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.hub-card__link .arrow { transition: transform var(--dur-normal) var(--ease-out-expo); }
.hub-card:hover .hub-card__link .arrow { transform: translateX(4px); }
/* Whole card is the click target */
.hub-card__link::after { content: ""; position: absolute; inset: 0; }
.hub-card__link:focus-visible { outline: none; }
.hub-card:focus-within { outline: 2px solid var(--color-accent-bright); outline-offset: 3px; }

/* ---- Urgent care vs. ER guide ---- */
.er-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
}
@media (max-width: 760px) { .er-cols { grid-template-columns: 1fr; } }
.er-col {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.er-col--er { background: linear-gradient(160deg, oklch(20% 0 0), var(--color-bg-deep)); }
.er-col h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.er-col > p { font-size: var(--text-sm); color: var(--color-text-mute); margin-bottom: var(--space-6); }
.er-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.er-col li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  line-height: 1.5;
}
.er-col li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 0.7em; height: 1px;
  background: var(--color-red);
}
.er-col--er li::before { width: 0.45em; height: 0.45em; top: 0.5em; border-radius: 50%; }
.er-col__note {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}
.er-col__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---- Comparison table ---- */
.er-table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); }
.er-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 620px;
}
.er-table th, .er-table td {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-soft);
  line-height: 1.5;
}
.er-table thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-text-mute);
  background: oklch(var(--ink) / 0.04);
}
.er-table tbody th { color: var(--color-text); font-weight: 600; white-space: nowrap; }
.er-table tbody td:nth-child(2) { color: var(--color-text); }
.er-table tr:last-child th, .er-table tr:last-child td { border-bottom: 0; }

/* ---- Areas we serve: zip chips ---- */
.areas { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.areas span {
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-soft);
  padding: 0.45em 0.9em;
  border: 1px solid var(--color-line);
  border-radius: 100px;
  background: oklch(var(--ink) / 0.03);
}
.areas span:first-child { color: var(--color-on-accent); background: var(--color-accent); border-color: transparent; }

/* ==========================================================================
   LIGHT THEME — hub cards keep bright photography; the ER column reads as
   a distinct pale-slate panel instead of a black card.
   ========================================================================== */
[data-theme="light"] .hub-card__media img {
  filter: grayscale(1) contrast(1.02);
}
[data-theme="light"] .hub-card:hover .hub-card__media img {
  filter: grayscale(0.3) contrast(1.02);
}
[data-theme="light"] .er-col--er {
  background: linear-gradient(160deg, oklch(94% 0 0), oklch(97.5% 0 0));
  border-color: oklch(0% 0 0 / 0.22);
}