/* ==========================================================================
   Health e Match — the practice / patient card

   One card, three places: the two dashboards and the match animation on the
   landing page. It lived in dashboard.css until the landing page needed it,
   and a card defined twice is a card that drifts.

   Depends on styles.css for tokens and for .chip.
   ========================================================================== */
.card-grid {
  list-style: none;
  margin-inline: auto;
  padding: 0;
  display: grid;
  gap: var(--form-gap);
  /* A fixed track, not a stretching one. With 1fr the tracks divided up
     whatever width was left, so three pending cards came out 256px against
     the carousel's 240px - the same component at two sizes, one section
     apart. Pinning the track makes every card on the page identical and
     centres whatever does not fill a row. */
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 15rem));
  /* Left, not centred. The carousel above starts at the wrap's left edge, so
     a centred row of pending cards put the two sections on different vertical
     rails and the page lost its left margin halfway down. */
  justify-content: start;
}

.pcard {
  background: var(--hem-paper);
  border-radius: var(--hem-radius-lg);
  /* Narrower side padding than top and bottom. The chip row is the widest
     thing on the card and the constraint that decides how many terms a person
     sees, so the horizontal budget goes to it rather than to margin. */
  padding: var(--form-gap) 14px;
  display: grid;
  /* head · label · chips · foot. The chip row takes the slack, so the button
     sits on the bottom edge of every card no matter how many chips are above
     it - a row of cards whose buttons do not line up reads as broken. */
  grid-template-rows: auto 1fr auto;
  gap: var(--hem-space-2);

  /* One height for every card, whatever it holds. Cards that size to their
     contents make a row look ragged and make the section height jump as
     matches arrive; the chip area absorbs the difference and clips, and JS
     appends an ellipsis when it has to. */
  height: 35rem;

  /* Anchors the state badge to the card's own corner. */
  position: relative;
}

/* The photo leads. Stacked above the name rather than beside it, so the
   person is the first thing on the card and can be shown at a size worth
   looking at - beside the title it was capped by the height of two lines of
   type.

   Everything else runs from the left edge. Centred type gives every line a
   different starting point, so the eye has to find the start of each one; a
   single left edge down the card lets it drop straight through. The photo and
   the button are the exceptions - they are shapes, not lines of text, and
   they anchor the top and bottom of the card. */
.pcard__head {
  display: grid;
  justify-items: start;
  text-align: left;
  gap: var(--hem-space-2);
  /* Room for the badge in the corner above. */
  padding-top: 22px;
}
/* The portrait wants air around it, not just above it. Butted against the
   name below, it read as a bullet for the text rather than as the person the
   card is about. */
.pcard__mark {
  justify-self: center;
  margin-block: var(--hem-space-2) var(--form-gap);
  width: 115px; height: 115px;
  border-radius: var(--hem-radius-pill);
  background: var(--hem-teal-100);
  color: var(--hem-teal-900);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.pcard__mark-img { width: 100%; height: 100%; object-fit: cover; }
.pcard__mark-initials {
  font-family: var(--hem-font-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.pcard__mark:not([data-empty="true"]) .pcard__mark-initials { display: none; }

.pcard__name {
  font-family: var(--hem-font-display);
  font-weight: 700;
  /* Not the h3 scale. On a 240px card a 28px display face wraps a name onto
     three lines and pushes everything below it off the card. */
  font-size: 1.1rem;
  line-height: 1.25;
  /* The clinician carries the teal on every card. It is the primary line and
     the person being matched with; the practice below sits in charcoal so the
     two never compete for the same emphasis. */
  color: var(--hem-teal);
  margin: 0;
  text-wrap: balance;
}
/* The practice, under the person who works there. Charcoal rather than teal:
   weight alone separates it from the muted specialty and location lines, and
   a second teal directly under the name made the pair read as one heading
   broken across two lines. */
/* An empty line holds its space rather than collapsing. A card with nothing
   to put here still has to be the same shape as one that does - patient and
   practice cards sit side by side in the match illustration, and a card that
   is one line shorter reads as a different component. */
.pcard__practice:empty::before {
  content: "";
  display: inline-block;
}

.pcard__practice {
  font-family: var(--hem-font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--hem-text);
  margin: 3px 0 0;
}
/* These two lines were set at 12.2px in Karla 300. The contrast was already
   fine at 6.5:1 - what made them hard to read was the light weight at that
   size, where the strokes thin out below what a screen can render cleanly.
   Regular weight and a little more size fixes it without darkening anything
   or spending more of the card. */
.pcard__specialties,
.pcard__place {
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--hem-text-muted);
}
.pcard__specialties { margin: 3px 0 0; }
.pcard__place { margin: 1px 0 0; }

/* The label belongs to the chip list under it, so it takes the same edge.
   Centred above a left-aligned list it reads as a heading for the whole card
   rather than for the chips. */
/* A label, not a sentence. Title case rather than the all-caps overline used
   elsewhere: every other line on this card is title case now, and an
   uppercase label in among them read as a different kind of thing. Weight
   still does the separating. */
.pcard__why {
  font-family: var(--hem-font-ui);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--hem-text-muted);
  margin: 0;
  text-align: left;
}

/* Chips run from the left and wrap onto as many lines as they need. Centring
   a wrapped list leaves a ragged last row floating in the middle of the card,
   and no two cards line up with each other. */
/* .chip-row on the landing page is always a <div>, so it never needed a list
   reset. Here the chip rows are real <ul>s, and the browser's default 40px of
   list padding was taking a sixth of the card - enough that no two chips
   could share a row and "wrap" produced a stacked column instead. */
.pcard__chips {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pcard__chips {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
}

/* One fixed chip size everywhere on a card. Chips carry a person's own words
   back to them - a diagnosis set smaller because the card got narrower reads
   as less important, which is exactly backwards. When they stop fitting the
   list is clipped and an ellipsis says so; the type never shrinks. */
.pcard__chips .chip {
  padding: 5px 9px;
  font-size: 0.78rem;
  white-space: nowrap;
  flex: none;
}

/* Holds both labelled chip lists and takes the card's slack, so the button
   still lands on the bottom edge whatever either list contains. */
.pcard__body {
  display: grid;
  align-content: start;
  gap: var(--hem-space-1);
  overflow: hidden;
}
.pcard__body .pcard__why:nth-of-type(2) { margin-top: var(--hem-space-2); }

.pcard__chips {
  overflow: hidden;
  align-content: start;
}

/* The overflow marker. Reads as a chip so the row still scans as one list,
   but carries no border - it is a truncation, not a term. */
.chip--more {
  border-color: transparent;
  background: none;
  color: var(--hem-text-muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-inline: 4px;
}
.pcard__foot {
  display: grid;
  gap: var(--hem-space-2);
  align-items: center;
  justify-items: center;
}

/* Full width, so the action is the card's base rather than a shape floating
   on it - and so the target is the whole bottom of the card on a phone. */
.pcard__foot .btn {
  width: 100%;
  justify-content: center;
}

/* Pending cards are the same card. The section heading and the badge on the
   card are the differentiation; a second, quieter visual treatment on top of
   those made the same practice look like a lesser one. */

.pcard__badge {
  font-family: var(--hem-font-ui);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--hem-track-label);
  color: var(--hem-text-muted);
  border: 2px solid var(--hem-line);
  border-radius: var(--hem-radius-pill);
  padding: 2px 10px;
  white-space: nowrap;

  /* The corner, not the flow. State is a property of the whole card, so it
     sits on the card rather than in the middle of the practice's details -
     and the same corner on every card means one place to look. */
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}
/* No separate treatment for a matched card. Both states use the same quiet
   outline: the section heading above already says which is which, and the
   badge is only carrying "when" or "not yet" - neither of which needs to be
   the loudest thing on the card. It also puts the crimson back to being spent
   in one place on this page, on the heart beside Your Matches. */

/* A regulatory status that is not plain approval. Marked, not hidden - the
   disclosure promises status is shown exactly as documented.

   This is the ONLY thing that takes a chip off the teal tint. Every chip on
   the site is teal unless the term it carries is not plainly approved, so the
   colour itself carries the meaning and needs no legend. It was previously
   crimson text and border over the inherited teal ground, which read as a
   teal chip someone had outlined rather than as a flag; the ground moves to
   crimson too so the override is unmistakable at a glance. */
.chip--flag {
  background: var(--hem-crimson-50);
  border-color: var(--hem-crimson-200);
  color: var(--hem-crimson-700);
}

.btn--inert {
  /* Same box as the Message button it stands in for - full width and the
     same height - or the two sections' footers stop lining up. */
  width: 100%;
  justify-content: center;
  background: none;
  border: 2px dashed var(--hem-line);
  color: var(--hem-text-muted);
  cursor: default;
  margin: 0;
}
.btn--inert:hover {
  background: none;
  border-color: var(--hem-line);
  color: var(--hem-text-muted);
}

/* The practice under the clinician's name in the masthead, matching the way
   a card names the person before the organisation. */