/* ==========================================================================
   Respire USA — directory components
   --------------------------------------------------------------------------
   Result cards and the organisation / entity profile.

   Every value comes from tokens.css. Note what is absent by design: no badge,
   no seal, no star, no score, no grade, no traffic-light colour. The handoff
   bans all of them, so the visual language carries scope, evidence, context
   and currency instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared
   -------------------------------------------------------------------------- */

.r-wrap {
  max-width: var(--r-container);
  margin-inline: auto;
  padding-inline: var(--r-gutter);
}

.r-wrap--text { max-width: var(--r-container-text); }

.r-eyebrow {
  font-family: var(--r-font-sans);
  font-size: var(--r-text-xs);
  font-weight: var(--r-weight-semibold);
  letter-spacing: var(--r-tracking-caps);
  text-transform: uppercase;
  color: var(--r-text-subtle);
  margin: 0 0 var(--r-space-2);
}

.r-meta {
  font-family: var(--r-font-sans);
  font-size: var(--r-text-sm);
  color: var(--r-text-muted);
}

.r-mono {
  font-family: var(--r-font-mono);
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
}

.r-link {
  color: var(--r-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--r-transition);
}
.r-link:hover,
.r-link:focus-visible { color: var(--r-link-hover); }

:is(.r-card, .r-profile) :focus-visible {
  outline: 2px solid var(--r-focus);
  outline-offset: 2px;
  border-radius: var(--r-radius-sm);
}

/* Buttons: one filled, one outlined. Nothing suggests a verdict. */
.r-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--r-space-2);
  font-family: var(--r-font-sans);
  font-size: var(--r-text-sm);
  font-weight: var(--r-weight-semibold);
  line-height: 1;
  padding: 0.7em 1.1em;
  border-radius: var(--r-radius);
  border: var(--r-border-width) solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--r-transition), color var(--r-transition), border-color var(--r-transition);
}

.r-btn--primary {
  background: var(--r-blue-700);
  color: #fff;
}
.r-btn--primary:hover,
.r-btn--primary:focus-visible { background: var(--r-blue-950); color: #fff; }

.r-btn--ghost {
  background: transparent;
  color: var(--r-link);
  border-color: var(--r-border-strong);
}
.r-btn--ghost:hover,
.r-btn--ghost:focus-visible {
  border-color: var(--r-blue-700);
  color: var(--r-link-hover);
}

/* --------------------------------------------------------------------------
   Result card
   -------------------------------------------------------------------------- */

.r-results {
  display: grid;
  gap: var(--r-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.r-card {
  display: flex;
  flex-direction: column;
  gap: var(--r-space-3);
  background: var(--r-surface);
  border: var(--r-border-width) solid var(--r-border);
  border-radius: var(--r-radius);
  padding: var(--r-space-5);
  transition: border-color var(--r-transition);
}

.r-card:hover { border-color: var(--r-border-strong); }

/* --------------------------------------------------------------------------
   Organisation logo
   --------------------------------------------------------------------------
   The featured image, or a lettermark when there is none. Contained rather than
   cropped: these are logos, and cropping one is worse than showing it small.
   Neutral throughout -- a logo sitting on a tinted panel starts to look like a
   Respire mark of approval, which is the thing the handoff bans.
   -------------------------------------------------------------------------- */

.r-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--r-bg);
  border: var(--r-border-width) solid var(--r-border);
  border-radius: var(--r-radius);
}

.r-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.r-logo--card    { width: 3.25rem; height: 3.25rem; padding: var(--r-space-2); }
.r-logo--profile { width: 5rem;    height: 5rem;    padding: var(--r-space-3); }

.r-logo--placeholder {
  background: var(--r-warm-50);
  border-style: solid;
  border-color: var(--r-border);
}

.r-logo--placeholder span {
  font-family: var(--r-font-serif);
  font-weight: var(--r-weight-semibold);
  line-height: 1;
  color: var(--r-warm-400);
  letter-spacing: var(--r-tracking-tight);
}

.r-logo--card.r-logo--placeholder span    { font-size: var(--r-text-xl); }
.r-logo--profile.r-logo--placeholder span { font-size: var(--r-text-3xl); }

/* Card head: logo beside the headings. */
.r-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--r-space-4);
}

.r-card__headings { min-width: 0; }

/* Profile identity block. */
.r-profile__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--r-space-5);
  margin-bottom: var(--r-space-5);
}

@media (max-width: 30rem) {
  .r-profile__identity { gap: var(--r-space-4); }
  .r-logo--profile { width: 3.5rem; height: 3.5rem; }
  .r-logo--profile.r-logo--placeholder span { font-size: var(--r-text-xl); }
}

.r-card__zone {
  font-family: var(--r-font-sans);
  font-size: var(--r-text-xs);
  font-weight: var(--r-weight-semibold);
  letter-spacing: var(--r-tracking-caps);
  text-transform: uppercase;
  color: var(--r-text-subtle);
}

.r-card__zone span + span::before {
  content: "·";
  margin-inline: 0.5em;
  color: var(--r-warm-300);
}

.r-card__title {
  font-family: var(--r-font-serif);
  font-size: var(--r-text-xl);
  font-weight: var(--r-weight-semibold);
  line-height: var(--r-leading-snug);
  letter-spacing: var(--r-tracking-tight);
  margin: 0;
  color: var(--r-text);
}

.r-card__title a { color: inherit; text-decoration: none; }
.r-card__title a:hover,
.r-card__title a:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }

.r-card__description {
  font-family: var(--r-font-sans);
  font-size: var(--r-text-sm);
  line-height: var(--r-leading-normal);
  color: var(--r-text-muted);
  margin: 0;
}

/* Program-specific listings say so on the card, not only on the profile.
   Neutral styling: this is a scope statement, not a warning. */
.r-card__scope,
.r-profile__scope {
  font-family: var(--r-font-sans);
  font-size: var(--r-text-xs);
  line-height: var(--r-leading-snug);
  color: var(--r-text-muted);
  background: var(--r-warm-50);
  border-left: var(--r-rule-width) solid var(--r-warm-300);
  padding: var(--r-space-3) var(--r-space-4);
  border-radius: 0 var(--r-radius-sm) var(--r-radius-sm) 0;
  margin: 0;
}

.r-profile__scope { font-size: var(--r-text-sm); }

.r-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-space-3);
  margin-top: auto;
  padding-top: var(--r-space-2);
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.r-empty {
  border: var(--r-border-width) dashed var(--r-border-strong);
  border-radius: var(--r-radius);
  padding: var(--r-space-8) var(--r-space-5);
  text-align: center;
  color: var(--r-text-muted);
  font-family: var(--r-font-sans);
}

.r-empty__title {
  font-family: var(--r-font-serif);
  font-size: var(--r-text-lg);
  color: var(--r-text);
  margin: 0 0 var(--r-space-2);
}

/* --------------------------------------------------------------------------
   Profile
   -------------------------------------------------------------------------- */

.r-profile {
  font-family: var(--r-font-sans);
  font-size: var(--r-text-base);
  line-height: var(--r-leading-normal);
  color: var(--r-text);
  padding-block: var(--r-space-8) var(--r-space-10);
}

.r-profile__head {
  border-bottom: var(--r-rule-width) solid var(--r-rule);
  padding-bottom: var(--r-space-6);
  margin-bottom: var(--r-space-7);
}

.r-profile__title {
  font-family: var(--r-font-serif);
  font-size: var(--r-text-3xl);
  font-weight: var(--r-weight-bold);
  line-height: var(--r-leading-tight);
  letter-spacing: var(--r-tracking-tight);
  margin: 0 0 var(--r-space-3);
}

.r-profile__legal {
  font-size: var(--r-text-sm);
  color: var(--r-text-muted);
  margin: 0 0 var(--r-space-4);
}

.r-profile__lede {
  font-size: var(--r-text-lg);
  line-height: var(--r-leading-normal);
  max-width: var(--r-measure);
  margin: 0 0 var(--r-space-5);
}

/* Definition grid for the record's factual top block.
   Held to the text measure: left to fill the container the columns strand
   themselves at opposite ends of the page and stop reading as one block. */
.r-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), max-content));
  gap: var(--r-space-4) var(--r-space-8);
  max-width: var(--r-measure);
  margin: 0 0 var(--r-space-6);
  padding: 0;
}

.r-facts__term {
  font-size: var(--r-text-xs);
  font-weight: var(--r-weight-semibold);
  letter-spacing: var(--r-tracking-caps);
  text-transform: uppercase;
  color: var(--r-text-subtle);
  margin: 0 0 var(--r-space-1);
}

.r-facts__value {
  font-size: var(--r-text-sm);
  color: var(--r-text);
  margin: 0;
}

.r-profile__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-space-3);
}

/* Section rhythm */
.r-section { margin-bottom: var(--r-space-8); }

.r-section__title {
  font-family: var(--r-font-serif);
  font-size: var(--r-text-2xl);
  font-weight: var(--r-weight-semibold);
  line-height: var(--r-leading-snug);
  letter-spacing: var(--r-tracking-tight);
  margin: 0 0 var(--r-space-4);
}

.r-section__body { max-width: var(--r-measure); }
.r-section__body p { margin: 0 0 var(--r-space-4); }
.r-section__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Respire Verification Summary
   --------------------------------------------------------------------------
   Conditional. Rendered only for a record with an approved summary.

   Deliberately quiet. The left rule and the tinted panel mark it as Respire's
   own statement rather than the organisation's, and that is the whole visual
   claim being made. No seal, no tick, no colour that reads as a verdict.
   -------------------------------------------------------------------------- */

.r-summary {
  background: var(--r-callout);
  border: var(--r-border-width) solid var(--r-blue-200);
  border-left: 3px solid var(--r-blue-700);
  border-radius: 0 var(--r-radius) var(--r-radius) 0;
  padding: var(--r-space-6) var(--r-space-6) var(--r-space-5);
  margin-bottom: var(--r-space-8);
}

.r-summary__title {
  font-family: var(--r-font-serif);
  font-size: var(--r-text-xl);
  font-weight: var(--r-weight-semibold);
  line-height: var(--r-leading-snug);
  margin: 0 0 var(--r-space-2);
  color: var(--r-blue-950);
}

.r-summary__note {
  font-size: var(--r-text-sm);
  color: var(--r-blue-800);
  margin: 0 0 var(--r-space-5);
  max-width: var(--r-measure);
}

.r-summary__block { margin-bottom: var(--r-space-5); }
.r-summary__block:last-child { margin-bottom: 0; }

.r-summary__term {
  font-size: var(--r-text-xs);
  font-weight: var(--r-weight-semibold);
  letter-spacing: var(--r-tracking-caps);
  text-transform: uppercase;
  color: var(--r-blue-700);
  margin: 0 0 var(--r-space-2);
}

.r-summary__value {
  font-size: var(--r-text-base);
  line-height: var(--r-leading-normal);
  color: var(--r-text);
  margin: 0;
  max-width: var(--r-measure);
}

.r-summary__sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r-space-2);
}

.r-summary__sources li {
  font-size: var(--r-text-sm);
  padding-left: var(--r-space-4);
  position: relative;
}

.r-summary__sources li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: var(--r-space-2);
  height: 1px;
  background: var(--r-blue-400);
}

.r-summary__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r-space-2) var(--r-space-5);
  margin-top: var(--r-space-5);
  padding-top: var(--r-space-4);
  border-top: var(--r-border-width) solid var(--r-blue-200);
  font-size: var(--r-text-sm);
  color: var(--r-blue-800);
}

/* --------------------------------------------------------------------------
   Related records and corrections
   -------------------------------------------------------------------------- */

.r-related {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--r-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.r-related a {
  display: block;
  padding: var(--r-space-4);
  border: var(--r-border-width) solid var(--r-border);
  border-radius: var(--r-radius);
  text-decoration: none;
  color: var(--r-text);
  font-weight: var(--r-weight-medium);
  transition: border-color var(--r-transition);
}

.r-related a:hover,
.r-related a:focus-visible { border-color: var(--r-blue-400); }

/* Reachable from every profile, per the handoff.
   Generous top margin: on a record with no summary and no related entries this
   follows the header rule directly, and two rules a few pixels apart read as a
   mistake rather than as two zones. */
.r-corrections {
  border-top: var(--r-border-width) solid var(--r-border);
  padding-top: var(--r-space-5);
  margin-top: var(--r-space-10);
  font-size: var(--r-text-sm);
  color: var(--r-text-muted);
  max-width: var(--r-measure);
}

/* --------------------------------------------------------------------------
   Editor-only notice
   -------------------------------------------------------------------------- */

.r-draft-flag {
  background: var(--r-sand);
  border: var(--r-border-width) solid var(--r-warm-300);
  border-radius: var(--r-radius);
  padding: var(--r-space-3) var(--r-space-4);
  margin-bottom: var(--r-space-6);
  font-size: var(--r-text-sm);
  color: var(--r-warm-800);
}