/* ==========================================================================
   TrackFlo utilities: only what Bootstrap lacks.
   Reads tokens from tf-tokens.css only — no hex literals.

   Before adding anything here, check Bootstrap 5.3 first: w-100, fs-1..6, m*/p*,
   d-*, text-*, gap-* already exist and are theme-aware.
   ========================================================================== */

/* Line clamps. Bootstrap has no equivalent. */
.basic-text-clamp-1 {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.text-clamp-1 {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
}
.text-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
}

/* Viewport minimums Bootstrap doesn't ship. */
.min-vh-30 { min-height: 30vh; }
.min-vh-85 { min-height: 85vh; }

/* Font Awesome duotone icons. Replaces the ~33 inline
   style="--fa-primary-color: …; --fa-secondary-color: …" attributes.
   The -strong tokens darken in light mode: the true brand fills at 0.6 opacity
   washed out on a light nav (gate review 8.10.26). */
.tf-icon-duo {
  --fa-primary-color: var(--bs-body-color);
  --fa-secondary-color: var(--tf-blue-strong);
  --fa-secondary-opacity: 0.6;
}
/* Layer contrast comes from a DEEP primary green against a mid blue at 0.6 — at 0.8
   the two layers melted into one blob on light surfaces (gate round 3). */
.tf-icon-duo--brand {
  --fa-primary-color: var(--tf-green-strong);
  --fa-secondary-color: var(--tf-blue-strong);
  --fa-secondary-opacity: 0.6;
}

/* Map iframe heights, previously inline on ~30 elements as height:600px / 300px. */
.tf-h-map    { height: 600px; }
.tf-h-map-sm { height: 300px; }