/* ==========================================================================
   KF Elements — Related Links
   --------------------------------------------------------------------------
   One markup, two looks. `variant-columns` is the reference's cross-reference
   block: white cards with a tiny uppercase head and heading-coloured links.
   `variant-locations` is the international-clinics block: a marker inline
   before a plain head, a quiet note line, and links in the link token.

   `--kfe-related-cols` is written by the `columns` control on
   `{{WRAPPER}} .kfe`, never on the grid: a control writing
   grid-template-columns on the grid would sit at (0,4,0) and beat the
   stacking rules at the foot of this file at every width. The breaks are the
   reference's (880 for the columns, 900 and 600 for the locations), not
   Elementor's 1024/767.

   Every site-level size and colour is a token read with this widget's own
   value as its fallback (ADR-0004 decision 2); the cards' own geometry is as
   the reference draws it. Logical properties throughout.
   ========================================================================== */

.kfe .kfe-related-links .head { text-align: var(--kfe-head-align, start); }
/* The title is ALWAYS classed, so the class rule restates what base.css gives
   `.kfe h2`: at a level base.css has no rule for the title would fall back to
   the theme's own face (measured on run V's T5b). */
.kfe .kfe-related-links .head .kfe-related-links-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0;
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.6rem, 2.8vw, 2rem)));
  line-height: 1.2;
  max-width: var(--kfe-title-measure, none);
}
.kfe .kfe-related-links.kfe-dark .head .kfe-related-links-title { color: #fff; }
.kfe .kfe-related-links .kfe-related-links-sub,
.kfe .kfe-related-links .kfe-related-links-lead {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, inherit);
  line-height: 1.6;
  max-width: 760px;
  margin-top: 10px;
}
.kfe .kfe-related-links .kfe-related-links-sub p + p,
.kfe .kfe-related-links .kfe-related-links-lead p + p { margin-top: 1em; }

.kfe .kfe-related-links .kfe-related-links-grid {
  display: grid;
  grid-template-columns: repeat(var(--kfe-related-cols, 3), minmax(0, 1fr));
  margin-top: 34px;
}
.kfe .kfe-related-links .kfe-related-links-col {
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 12px);
  min-width: 0;
}
.kfe .kfe-related-links .kfe-related-links-col ul { list-style: none; margin: 0; padding: 0; }
.kfe .kfe-related-links .kfe-related-links-col a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  overflow-wrap: break-word;
}
.kfe .kfe-related-links .kfe-related-links-note {
  font-size: 13px;
  color: var(--kfe-muted);
  line-height: 1.5;
}
.kfe .kfe-related-links .kfe-related-links-body {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, inherit);
  line-height: 1.7;
  margin-top: 24px;
}
.kfe .kfe-related-links .kfe-related-links-body p + p { margin-top: 1em; }

/* ---------- variant: reference columns (:9-21) ---------- */
.kfe .kfe-related-links.variant-columns .kfe-related-links-grid { gap: 32px; }
.kfe .kfe-related-links.variant-columns .kfe-related-links-col { padding: 26px 24px; }
/* The group head is always classed and always one level below `header_size`,
   so `h3` or `h4` prints it as an `h4`, which base.css has no rule for: the
   family is restated here or it falls back to the theme's own face (run V's
   T5b, checklist.css:22-26). Size, spacing, weight and colour are its own. */
.kfe .kfe-related-links.variant-columns .kfe-related-links-group {
  font-family: var(--kfe-font-heading);
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kfe-primary);
  margin: 0 0 16px;
}
.kfe .kfe-related-links.variant-columns .kfe-related-links-note { margin: -8px 0 16px; }
.kfe .kfe-related-links.variant-columns .kfe-related-links-col li { margin: 0 0 11px; }
.kfe .kfe-related-links.variant-columns .kfe-related-links-col li:last-child { margin-bottom: 0; }
.kfe .kfe-related-links.variant-columns .kfe-related-links-col a {
  font-size: 16px;
  line-height: 1.4;
  color: var(--kfe-heading, var(--kfe-primary));
}
.kfe .kfe-related-links.variant-columns .kfe-related-links-col a:hover {
  color: var(--kfe-primary);
  border-bottom-color: currentColor;
}

/* ---------- variant: locations (:200-209) ---------- */
.kfe .kfe-related-links.variant-locations .kfe-related-links-grid { gap: 24px; margin-top: 30px; }
.kfe .kfe-related-links.variant-locations .kfe-related-links-col { padding: 24px; }
/* Same reading as the columns group head above: the family is restated. */
.kfe .kfe-related-links.variant-locations .kfe-related-links-group {
  font-family: var(--kfe-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--kfe-heading, var(--kfe-primary));
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kfe .kfe-related-links.variant-locations .kfe-related-links-marker { font-size: 20px; line-height: 1; }
.kfe .kfe-related-links.variant-locations .kfe-related-links-col ul { margin-top: 10px; }
.kfe .kfe-related-links.variant-locations .kfe-related-links-col li { margin: 0 0 7px; }
.kfe .kfe-related-links.variant-locations .kfe-related-links-col li:last-child { margin-bottom: 0; }
.kfe .kfe-related-links.variant-locations .kfe-related-links-col a {
  font-size: 15px;
  line-height: 1.5;
  color: var(--kfe-link, var(--kfe-accent));
}
.kfe .kfe-related-links.variant-locations .kfe-related-links-col a:hover { text-decoration: underline; }

/* ---------- dark grounds ---------- */
.kfe .kfe-related-links.kfe-dark .kfe-related-links-sub,
.kfe .kfe-related-links.kfe-dark .kfe-related-links-lead,
.kfe .kfe-related-links.kfe-dark .kfe-related-links-body,
.kfe .kfe-related-links.kfe-dark .kfe-related-links-note { color: var(--kfe-on-dark); }
.kfe .kfe-related-links.kfe-dark .kfe-related-links-col {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.kfe .kfe-related-links.kfe-dark .kfe-related-links-group,
.kfe .kfe-related-links.kfe-dark .kfe-related-links-col a { color: #fff; }

@media (max-width: 900px) {
  .kfe .kfe-related-links.variant-locations .kfe-related-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .kfe .kfe-related-links.variant-columns .kfe-related-links-grid { grid-template-columns: 1fr; gap: 20px; }
  .kfe .kfe-related-links.variant-columns .head .kfe-related-links-title { font-size: var(--kfe-title-size, var(--kfe-h2-size, 1.6rem)); }
}
@media (max-width: 600px) {
  .kfe .kfe-related-links.variant-locations .kfe-related-links-grid { grid-template-columns: 1fr; }
}