/*
 * Trust section components (Session 4.4; Blueprint 5.20, 10.22; 01_Brand_Expression_Knowledge.md 6)
 * Built for the About page and reusable on Contact, Services, and Clinic Development.
 *
 * sd-facts   — key facts as a description list (value + explanation). Only facts from the approved reference
 *              knowledge or SisuDent Owner Inputs.md; no statistics, customer numbers, or awards that are not recorded
 *              (04_Content_SEO_Knowledge.md 9). Phone: 1 column · ≥ 640px: 2 · ≥ 1024px: 4. A thin blue line above each
 *              fact; the value in heading blue, never colour alone.
 * sd-meaning — a term with its meaning (the meaning of Sisu, Blueprint 1.3): the word, a short explanation, and the
 *              qualities as a list. Usually inside sd-section--brand (intentional emphasis, Blueprint 3.10) — the blue
 *              band is never placed directly above the footer.
 * sd-company — company information block (official name, Business ID, VAT, address) for transparency (Owner Inputs 1).
 */

/* ---------- Facts ---------- */
.sd-facts {
  display: grid;
  gap: var(--sd-space-5) var(--sd-grid-gutter);
  margin: 0;
}

.sd-facts__item {
  display: flex;
  flex-direction: column;
  gap: var(--sd-space-2);
  padding-top: var(--sd-space-4);
  border-top: var(--sd-border-width-strong) solid var(--sd-color-brand-blue);
}

.sd-facts__value {
  margin: 0;
  color: var(--sd-color-text-heading);
  font-size: var(--sd-font-size-h3);
  line-height: var(--sd-line-height-h3);
  font-weight: var(--sd-font-weight-semibold);
  letter-spacing: var(--sd-letter-spacing-heading);
  overflow-wrap: break-word;
}

.sd-facts__label {
  margin: 0;
  color: var(--sd-color-text-default);
  font-size: var(--sd-font-size-body);
  line-height: var(--sd-line-height-body);
}

@media (min-width: 640px) { .sd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Meaning ---------- */
.sd-meaning {
  display: grid;
  gap: var(--sd-space-5);
  align-items: start;
}

.sd-meaning__term {
  margin: 0;
  font-size: var(--sd-font-size-h1);
  line-height: var(--sd-line-height-h1);
  font-weight: var(--sd-font-weight-semibold);
  letter-spacing: var(--sd-letter-spacing-heading);
}

.sd-meaning__pronounce {
  display: block;
  margin-top: var(--sd-space-2);
  font-size: var(--sd-font-size-body);
  font-weight: var(--sd-font-weight-regular);
  letter-spacing: 0;
}

.sd-meaning__text { display: grid; gap: var(--sd-space-4); max-width: var(--sd-measure-text); }

.sd-meaning__qualities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sd-space-2);
  margin: var(--sd-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.sd-meaning__qualities li {
  padding: var(--sd-space-1) var(--sd-space-3);
  border: var(--sd-border-width) solid currentColor;
  border-radius: 999px;
  font-size: var(--sd-font-size-ui);
  font-weight: var(--sd-font-weight-medium);
}

/* Colours inside the blue band */
.sd-section--brand .sd-meaning__term,
.sd-section--brand .sd-meaning__text,
.sd-section--brand .sd-meaning__qualities li { color: var(--sd-color-text-on-brand); }
.sd-section--brand .sd-meaning__pronounce { color: var(--sd-color-blue-100); }

@media (min-width: 1024px) {
  .sd-meaning { grid-template-columns: 5fr 7fr; column-gap: var(--sd-space-8); }
}

/* ---------- Company information ---------- */
.sd-company {
  display: grid;
  gap: var(--sd-space-2) var(--sd-space-4);
  margin: 0;
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
}

.sd-company dt { color: var(--sd-color-text-muted); }
.sd-company dd { margin: 0 0 var(--sd-space-2); color: var(--sd-color-text-default); font-weight: var(--sd-font-weight-medium); }

@media (min-width: 480px) {
  .sd-company { grid-template-columns: auto 1fr; }
  .sd-company dd { margin: 0; }
}