/* ==========================================================================
   KF Elements — Numbered Steps
   --------------------------------------------------------------------------
   Light cards on light grounds; on .kfe-dark the cards go translucent with a
   highlight border (the "members club" treatment).
   ========================================================================== */

/* The frame's tokens, read where the property is painted (ADR-0004 decision 2):
   every read carries TODAY'S value as its fallback, so an unset instance — every
   instance saved on every client site — computes what it computes now.
   `--kfe-head-align` unset substitutes the CSS-wide keyword `inherit`, which
   var() may not produce, so the declaration is invalid at computed-value time
   and `text-align` behaves as `unset`: the value it inherits today. */
.kfe .kfe-steps .head { margin-bottom: 56px; text-align: var(--kfe-head-align, inherit); }
.kfe .kfe-steps .head h2,
.kfe .kfe-steps .head .kfe-steps-title { font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem))); max-width: var(--kfe-title-measure, 20ch); line-height: 1.22; }

.kfe .kfe-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.kfe .kfe-steps .step {
  background: var(--kfe-white);
  border: 1px solid var(--kfe-line);
  border-radius: var(--kfe-radius-card, 10px);
  padding: 36px 30px;
  transition: transform 0.5s, box-shadow 0.5s, border-color 0.5s, background 0.5s;
  display: flex; flex-direction: column;
}
/* `--kfe-shadow-card` with this sheet's own shadow as its fallback (#81): a
   step's shadow is 24/54 at 0.12 and the grid card's is 22/50 at 0.1. */
.kfe .kfe-steps .step:hover { transform: var(--kfe-card-lift, translateY(-6px)); box-shadow: var(--kfe-shadow-card, 0 24px 54px rgba(10, 14, 28, 0.12)); border-color: transparent; }
.kfe .kfe-steps .step .num {
  font-family: var(--kfe-font-heading);
  font-size: 30px; font-weight: var(--kfe-heading-weight);
  color: var(--kfe-accent); line-height: 1; margin-bottom: 20px;
}
.kfe .kfe-steps .step h3 { font-size: 21px; margin: 0 0 12px; }
.kfe .kfe-steps .step p { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 14px); margin: 0; }
/* Rich body (ADR-0003 decision 3): the colour and size sit on `p`, so a list
   needs them too, and base.css has no list reset. */
.kfe .kfe-steps .step p + p { margin-top: 10px; }
.kfe .kfe-steps .step ul, .kfe .kfe-steps .step ol { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 14px); margin: 10px 0 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-steps .step li + li { margin-top: 6px; }

/* dark-ground treatment */
.kfe .kfe-steps.kfe-dark .step {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.kfe .kfe-steps.kfe-dark .step:hover {
  border-color: var(--kfe-highlight);
  background: rgba(255, 255, 255, 0.07);
}
.kfe .kfe-steps.kfe-dark .step .num { color: var(--kfe-highlight); }
.kfe .kfe-steps.kfe-dark .step h3 { color: #fff; font-weight: 400; font-size: 19px; }
.kfe .kfe-steps.kfe-dark .step p { color: rgba(255, 255, 255, 0.68); line-height: 1.65; }
.kfe .kfe-steps.kfe-dark .step ul, .kfe .kfe-steps.kfe-dark .step ol { color: rgba(255, 255, 255, 0.68); line-height: 1.65; }

/* Safety net for pages saved before the columns control was responsive:
   auto-fit so it adapts rather than forcing a count.
   CORRECTED 2026-09-20 (kf-elements #118): this block used to claim it carried
   "higher specificity (0,3,0) than Elementor's per-element rule". It does not.
   Elementor's per-element rule is (0,4,0) — see the note below — so on an
   Elementor page this net never catches anything. The rules are left in place
   for markup rendered outside Elementor; the claim is what was wrong. */
@media (max-width: 980px) {
  .kfe .kfe-steps .kfe-steps-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .kfe .kfe-steps .kfe-steps-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   THE TRIFORCE (kf-elements #118, the operator's ruling of 2026-09-20): a lone
   item on the last row of a TWO-COLUMN grid floats between the two above it
   instead of sitting hard against the left gutter. The long note lives here
   and the other four grid sheets point at it.

   WHY THE BAND IS 768–1024 AND NOT THIS SHEET'S OWN 561–980. Measured on a
   throwaway WordPress 6.8 + Elementor 4.2.4 + Hello Elementor: every `columns`
   control in this pack is an `add_responsive_control`, so Elementor writes
   three rules per instance at
   `.elementor-<post> .elementor-element.elementor-element-<id> .kfe-…-grid`,
   which is (0,4,0) — above this sheet's (0,3,0). The `auto-fit` net above
   therefore never applies on an Elementor page, and the used column count is
   whatever that instance's `columns` / `columns_tablet` / `columns_mobile`
   resolve to. At the pack's own defaults that is 4 / 2 / 1 here, 3 / 2 / 1 in
   feature-grid and gallery, and 2 / 2 / 1 in facts-card and event-list — so
   Elementor's tablet band is the one band in which every grid in this pack is
   two columns, and the one band where an orphan of this shape exists for all
   five.

   WHY `justify-content` CANNOT DO IT: the tracks are `1fr` and already fill
   the row. The orphan spans the whole track list and is then centred at the
   width of one track — the row less one gap, halved.

   WHY `:not(:first-child)` IS LOAD-BEARING: a lone child is `:last-child` and
   also matches `:nth-child(2n + 1)`, so without it a ONE-item grid would be
   moved from the left track to the centre. A one-item grid never wrapped and
   has no row above it to float between, so it is excluded by name.

   THE LIMITS, AND THEY ARE REAL. Three, all of one shape — this sheet cannot
   see what the instance actually did:
   (a) THE COLUMN COUNT. An instance whose used column count INSIDE this band
       is not 2 — an author who sets Columns (tablet) to 1, 3 or 4 — still
       matches the selector and is moved wrongly. No CSS selector can read a
       grid's used column count.
   (b) THE BAND ITSELF. 768 and 1024 are Elementor's DEFAULT breakpoints,
       written here as literals. They are a site setting (Site Settings →
       Layout → Breakpoints), and Elementor regenerates its per-instance CSS
       against whatever is configured — so a site that has moved either one
       puts a desktop or a mobile column count inside this band and lands in
       (a) with no control touched at all.
   (c) THE GAP. `gap` is itself a per-instance responsive control on
       `kfe_steps`, `kfe_feature_grid` and `kfe_gallery`, written at the same
       (0,4,0); it is not exposed on `kfe_facts_card` or `kfe_event_list`. The
       11px below is half of THIS SHEET'S default 22px, so on an instance whose
       Gap is set the centred orphan is no longer exactly one track wide:
       narrower at a smaller gap, overhanging at a larger one. CSS cannot read
       the used gap either.

   THE OPT-OUT, because all three ship: put `kfe-no-triforce` on the section in
   Elementor's Advanced → CSS Classes and the rule is undone for that section.
   Each reset is the rule's own selector with that one class prefixed, so it is
   exactly one class more specific than what it undoes. Unscoped on purpose,
   the same way `kfe-break-long` is (base.css :321): that field writes the class
   on the `.elementor-element` WRAPPER, an ancestor of the `div.kfe` this pack
   emits, so a scoped form would be unreachable by the only route a site has to
   it.

   THE ROBUST FORM: have the control publish the count — and the gap — as a
   custom property, and gate on `@container style(--kfe-cols: 2)`. That needs
   one PHP line per widget, which this lane's fence does not hold: kf-elements
   #120 carries it, with all three limits above.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 11px is half of this grid's own 22px gap (:18). */
  .kfe .kfe-steps .kfe-steps-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 11px);
  }
  .kfe-no-triforce .kfe .kfe-steps .kfe-steps-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: auto;
    justify-self: auto;
    width: auto;
  }
}

/* ==========================================================================
   The component variants (ADR-0004, this lane's dated section). ADDED RULES
   ONLY: `style-badge` is on the section and nothing else, so a saved instance
   — which carries no such class — is untouched. No client value here: the
   disc's 38px is the geometry the badge is made of, its colours are tokens,
   and the sizes that vary per section are controls with no default.
   ========================================================================== */

.kfe .kfe-steps-intro { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, inherit); margin-top: 16px; }
.kfe .kfe-steps-intro p + p { margin-top: 10px; }
.kfe .kfe-steps-intro a { color: var(--kfe-link, var(--kfe-accent)); }
.kfe .kfe-steps.kfe-dark .kfe-steps-intro { color: var(--kfe-on-dark); }

/* The step titles at any other heading level, the same values as `.step h3`. */
.kfe .kfe-steps .step h2,
.kfe .kfe-steps .step h4,
.kfe .kfe-steps .step h5 { font-size: 21px; margin: 0 0 12px; }
.kfe .kfe-steps.kfe-dark .step h2,
.kfe .kfe-steps.kfe-dark .step h4,
.kfe .kfe-steps.kfe-dark .step h5 { color: #fff; font-weight: 400; font-size: 19px; }

/* `badge` — the same span.num, drawn as a filled disc. */
.kfe .kfe-steps.style-badge .step .num {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--kfe-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kfe-font-body); font-size: 15px; font-weight: 700;
  line-height: 1; margin-bottom: 14px;
}
.kfe .kfe-steps.kfe-dark.style-badge .step .num { background: var(--kfe-on-dark-soft); color: var(--kfe-primary-deep); }

/* ==========================================================================
   A photograph per step, and the `label` number (w2.homepack.1)
   --------------------------------------------------------------------------
   ADDED RULES ONLY. A step with a picture prints `.step.has-img` with the
   picture and a `.step-body` — a class and an element no released step
   carries — and `label` is a `style-label` class on the section, so no saved
   instance can match a rule below.

   The picture runs to the card's edges at a 4:3 crop and the copy keeps the
   card's inset under it. `label` draws the number as a small uppercase label
   over the title; under it a list in a step's body is drawn with dots, as the
   reference's step cards draw theirs.
   ========================================================================== */
.kfe .kfe-steps .step.has-img { padding: 0; overflow: hidden; }
.kfe .kfe-steps .step .step-img {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: var(--kfe-step-img-ratio, 4 / 3);
  height: auto;
  object-fit: cover;
  background: var(--kfe-surface-deep);
}
.kfe .kfe-steps .step .step-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--kfe-step-body-pad, 30px 28px 32px);
}

.kfe .kfe-steps.style-label .step .num {
  font-family: var(--kfe-font-body);
  font-size: var(--kfe-steps-label-size, 11px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--kfe-steps-label-color, var(--kfe-accent));
  margin-bottom: 9px;
}
.kfe .kfe-steps.kfe-dark.style-label .step .num { color: var(--kfe-on-dark-soft); }
.kfe .kfe-steps.style-label .step ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.kfe .kfe-steps.style-label .step li { position: relative; padding-inline-start: 20px; }
.kfe .kfe-steps.style-label .step li + li { margin-top: 0; }
.kfe .kfe-steps.style-label .step li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kfe-accent);
}
.kfe .kfe-steps.style-label .step li strong { color: var(--kfe-heading, var(--kfe-primary)); }
.kfe .kfe-steps.kfe-dark.style-label .step li strong { color: var(--kfe-white); }