/* ==========================================================================
   KF Elements — Facts Card
   --------------------------------------------------------------------------
   Two layouts from one widget (ADR-0003):
     .layout-grid  fact boxes in a grid — the clinic pages' address, hours,
                   directions and contact. With `label_style` = heading the
                   boxes leave the <dl> (a <dt> may hold no heading) and take
                   the reference's own geometry, which is this look's rule.
     .layout-card  one card, a ring disc beside the facts, the facts reading as
                   pills — the surgeon pages' portrait card, redrawn to the
                   reference (spec §3.3). The two-column split starts from
                   base.css's .kfe-split primitive and restates its tracks.

   The heading is styled through .kfe-facts-card-title and never through a
   bare tag, so a card promoted to h1 keeps its styling (ADR-0002 decision 7).

   Tokens only: every colour reads a --kfe-* custom property from base.css,
   each with today's value as its fallback (ADR-0004 decision 2), except the
   rgba(255,255,255,…) and rgba(0,0,0,…) flips, which are the pack's one idiom
   for a dark ground and a shadow (feature-grid.css).
   ========================================================================== */

.kfe .kfe-facts-card .head { margin-bottom: 28px; }
/* The frame's head alignment, `inherit` as the fallback: unset, the head keeps
   inheriting from whatever contains it, exactly as it does today. */
.kfe .kfe-facts-card .kfe-wrap { text-align: var(--kfe-head-align, inherit); }
.kfe .kfe-facts-card .kfe-facts-card-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-heading-weight);
  letter-spacing: -0.01em;
  color: var(--kfe-heading, var(--kfe-primary));
  font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.7rem, 3.2vw, 2.5rem)));
  line-height: 1.16;
  margin: 0;
}
.kfe .kfe-facts-card .head .role { color: var(--kfe-accent); font-size: 16px; margin-top: 12px; }
.kfe .kfe-facts-card .intro {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, 17px);
  max-width: 62ch;
  margin-bottom: 34px;
}
.kfe .kfe-facts-card .intro p + p { margin-top: 16px; }
.kfe .kfe-facts-card .intro ul, .kfe .kfe-facts-card .intro ol { margin: 16px 0 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-facts-card .intro li + li { margin-top: 6px; }
.kfe .kfe-facts-card .actions { margin-top: 34px; }

.kfe .kfe-facts-card .facts { margin: 0; }
.kfe .kfe-facts-card .fact dt {
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--kfe-accent);
  font-weight: 400;
  margin-bottom: 12px;
}
.kfe .kfe-facts-card .fact dd { margin: 0; font-size: 15px; line-height: 1.7; color: var(--kfe-ink); }
.kfe .kfe-facts-card .fact dd p + p { margin-top: 10px; }
.kfe .kfe-facts-card .fact dd ul { margin: 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-facts-card .fact dd li + li { margin-top: 6px; }
.kfe .kfe-facts-card .fact .more {
  display: inline-block;
  margin-top: 12px;
  color: var(--kfe-accent);
  text-decoration: none;
  font-size: 14px;
}
.kfe .kfe-facts-card .fact .more:hover { text-decoration: underline; }

/* ---------- the grid layout ---------- */
.kfe .kfe-facts-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.kfe .kfe-facts-card.layout-grid .fact {
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 8px);
  padding: 28px 26px;
}
.kfe .kfe-facts-card.layout-grid .media { margin-bottom: 34px; }

/* ---------- the grid layout with real headings (label_style = heading) ----------
   The boxes are sections, not definitions, so they carry a heading one level
   under the card's own and a body div instead of a <dt>/<dd> pair. The tighter
   gap and the deeper padding are the reference's own geometry for this look
   (spec :653); the eyebrow default above keeps its 24 and its 28/26. */
.kfe .kfe-facts-card.label-heading .kfe-facts-card-grid { gap: 30px; }
.kfe .kfe-facts-card.label-heading.layout-grid .fact { padding: 32px 32px 30px; }
.kfe .kfe-facts-card .kfe-facts-card-fact-title {
  font-family: var(--kfe-font-heading);
  font-weight: var(--kfe-h3-weight);
  color: var(--kfe-heading, var(--kfe-primary));
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 10px;
}
/* The box body reads exactly as a <dd> does — 15/1.7 in the page's ink — and
   NOT through --kfe-body-size: a site that sizes its body copy at 17 would
   blow the boxes out, and the reference sets 15 on these specifically. */
.kfe .kfe-facts-card .fact-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--kfe-ink);
}
/* A link inside a box reads the site's link colour. Without this, Hello
   Elementor's own `a` colour paints a phone number or a mail address magenta
   — run V's P10 @390 showed exactly that beside the reference's accent. The
   rule is scoped to `.fact-body`, which only the `heading` boxes print, so no
   default `<dl>` page moves. */
.kfe .kfe-facts-card .fact-body a { color: var(--kfe-link, var(--kfe-accent)); }
.kfe .kfe-facts-card .fact-body a:hover,
.kfe .kfe-facts-card .fact-body a:focus-visible { color: var(--kfe-accent-deep, var(--kfe-link, var(--kfe-accent))); }
.kfe .kfe-facts-card .fact-body p + p { margin-top: 10px; }
.kfe .kfe-facts-card .fact-body ul, .kfe .kfe-facts-card .fact-body ol { margin: 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-facts-card .fact-body li + li { margin-top: 6px; }

/* ---------- a fact value read as pairs: the two-column table ----------
   NO `tbody tr` background anywhere in this file. Hello's reset stripes the
   odd rows, which is the zebra the reference shows, and a background here
   would paint over it (spec :629-630). */
.kfe .kfe-facts-card-hours { width: 100%; border-collapse: collapse; }
.kfe .kfe-facts-card-hours th,
.kfe .kfe-facts-card-hours td {
  padding: 11px 0;
  border-top: 1px solid var(--kfe-line);
  text-align: start;
  font-weight: 400;
  vertical-align: top;
}
.kfe .kfe-facts-card-hours tr:first-child th,
.kfe .kfe-facts-card-hours tr:first-child td { border-top: 0; }
.kfe .kfe-facts-card-hours td {
  text-align: end;
  font-weight: 600;
  color: var(--kfe-heading, var(--kfe-primary));
}

/* ---------- the card layout ---------- */
.kfe .kfe-facts-card.layout-card .inner {
  grid-template-columns: var(--kfe-facts-photo, 320px) 1fr;
  gap: 48px;
  align-items: center;
}
.kfe .kfe-facts-card.layout-card .media {
  width: var(--kfe-facts-photo, 320px);
  max-width: 100%;
  margin-bottom: 0;
}
.kfe .kfe-facts-card.layout-card .media.shape-round img {
  border: 8px solid var(--kfe-white);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  object-position: 50% 20%;
}
/* The initials disc: the accent run into the deepest ground, with the letters
   sized off the disc itself so one control moves both. It takes the SAME ring
   and lift as the photo disc above, because the reference draws both that way
   (spec §3.3 :339-340); run V's P6 read without it showed a flat disc beside
   P5's ringed one. `background-clip: padding-box` keeps the gradient inside
   the ring rather than running under it. */
.kfe .kfe-facts-card.layout-card .media .initials {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border: 8px solid var(--kfe-white);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kfe-accent), var(--kfe-primary-deep));
  background-clip: padding-box;
  color: #fff;
  font-family: var(--kfe-font-heading);
  font-weight: 700;
  font-size: calc(var(--kfe-facts-photo, 320px) * 0.275);
  line-height: 1;
  letter-spacing: 0.02em;
}
.kfe .kfe-facts-card.layout-card .head .role { font-size: 19px; font-weight: 700; }
.kfe .kfe-facts-card.layout-card .kfe-facts-card-title {
  font-size: var(--kfe-title-size, clamp(1.875rem, 3.4vw, 2.625rem));
  font-weight: var(--kfe-heading-weight);
}

.kfe .kfe-facts-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kfe .kfe-facts-card-pills li {
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: 99px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kfe-heading, var(--kfe-primary));
}
.kfe .kfe-facts-card-pills li .k { color: var(--kfe-accent); margin-inline-end: 6px; }
.kfe .kfe-facts-card-pills li .more { margin-inline-start: 8px; color: var(--kfe-link, var(--kfe-accent)); text-decoration: none; }

/* ---------- the three picture shapes ---------- */
.kfe .kfe-facts-card .media img { width: 100%; border-radius: var(--kfe-radius-media, 8px); }
.kfe .kfe-facts-card .media.shape-landscape img { aspect-ratio: 4 / 3; object-fit: cover; }
.kfe .kfe-facts-card .media.shape-portrait img { aspect-ratio: 3 / 4; object-fit: cover; }
.kfe .kfe-facts-card .media.shape-round img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

/* dark-ground flips, in the pack's idiom (feature-grid.css) */
.kfe .kfe-facts-card.kfe-dark .kfe-facts-card-title { color: #fff; }
.kfe .kfe-facts-card.kfe-dark .head .role { color: var(--kfe-on-dark-soft); }
.kfe .kfe-facts-card.kfe-dark .intro { color: var(--kfe-on-dark); }
.kfe .kfe-facts-card.kfe-dark .fact dt { color: var(--kfe-on-dark-soft); }
.kfe .kfe-facts-card.kfe-dark .fact dd { color: rgba(255, 255, 255, 0.78); }
.kfe .kfe-facts-card.kfe-dark .fact .more { color: var(--kfe-highlight); }
.kfe .kfe-facts-card.kfe-dark .kfe-facts-card-fact-title { color: #fff; }
.kfe .kfe-facts-card.kfe-dark .fact-body { color: rgba(255, 255, 255, 0.78); }
.kfe .kfe-facts-card.kfe-dark .kfe-facts-card-hours td { color: #fff; }
.kfe .kfe-facts-card.kfe-dark .kfe-facts-card-hours th,
.kfe .kfe-facts-card.kfe-dark .kfe-facts-card-hours td { border-top-color: rgba(255, 255, 255, 0.14); }
.kfe .kfe-facts-card.kfe-dark.layout-grid .fact {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.kfe .kfe-facts-card.kfe-dark .kfe-facts-card-pills li {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* The reference turns the card at 980, not at Elementor's 1024 tablet: the
   disc's own size comes from photo_size's responsive defaults, and this is the
   layout's own turn (spec :341). */
@media (max-width: 980px) {
  .kfe .kfe-facts-card.layout-card .inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 30px;
  }
  .kfe .kfe-facts-card.layout-card .kfe-facts-card-pills { justify-content: center; }
}

/* pre-responsive-control safety net — see steps.css */
@media (max-width: 980px) {
  .kfe .kfe-facts-card .kfe-facts-card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .kfe .kfe-facts-card .kfe-facts-card-grid { grid-template-columns: 1fr; }
  .kfe .kfe-facts-card.layout-grid .fact { padding: 22px 20px; }
  .kfe .kfe-facts-card.label-heading.layout-grid .fact { padding: 26px 24px 24px; }
}

/* The triforce — the long note is in steps.css (kf-elements #118, 2026-09-20).
   Two widths, because this sheet carries two gaps: 24px on the eyebrow default
   (:69) and 30px under `label-heading` (:83). Like event-list, this grid is two
   columns at the pack's desktop default as well, and the band stops at 1024 for
   the same reason. The three limits and the `kfe-no-triforce` opt-out are in
   that note too; this widget exposes no Gap control, so limit (c) — a stale
   orphan width on an instance whose Gap is set — does not reach it. */
@media (min-width: 768px) and (max-width: 1024px) {
  .kfe .kfe-facts-card .kfe-facts-card-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
  .kfe .kfe-facts-card.label-heading .kfe-facts-card-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    width: calc(50% - 15px);
  }
  /* Both selectors above, each with the one opt-out class prefixed. */
  .kfe-no-triforce .kfe .kfe-facts-card .kfe-facts-card-grid > :last-child:nth-child(2n + 1):not(:first-child),
  .kfe-no-triforce .kfe .kfe-facts-card.label-heading .kfe-facts-card-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: auto;
    justify-self: auto;
    width: auto;
  }
}