/* ==========================================================================
   KF Elements — Feature Grid
   ========================================================================== */

/* 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 exactly what it computes now.
   `--kfe-head-align` is unset by default: the substituted `inherit` is a
   CSS-wide keyword, which var() may not produce, so the declaration is invalid
   at computed-value time and `text-align` behaves as `unset` — the inherited
   value it has today. The harness canary `.e-con{text-align:center}` proves it. */
.kfe .kfe-feature-grid .head { margin-bottom: 60px; text-align: var(--kfe-head-align, inherit); }
.kfe .kfe-feature-grid .head h2,
.kfe .kfe-feature-grid .head .kfe-feature-grid-title { font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(2rem, 4vw, 3rem))); }

.kfe .kfe-feature-grid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }

/* pre-responsive-control safety net — see steps.css.
   The specification (§3.10) asks for 980 to become 900. NOT TAKEN: this rule
   renders on every client site that saved an instance before the columns
   control was responsive, and 901–980px is exactly where such a page would
   stop adapting — a change on sites nobody in this wave opens, for a width the
   harness does not look at. The reference's own stacking at ≤900 is the
   instance's responsive `columns` (Elementor breaks at 1024), and that is a
   pair note, not a rule here. */
@media (max-width: 980px) {
  .kfe .kfe-feature-grid .kfe-feature-grid-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .kfe .kfe-feature-grid .kfe-feature-grid-grid { grid-template-columns: 1fr; }
}

/* The triforce — the long note is in steps.css. A lone item on the last row of
   a two-column grid is centred under the two above it (kf-elements #118, the
   operator's ruling of 2026-09-20). The band is Elementor's tablet band and
   not this sheet's 561–980, because the used column count comes from the
   instance's responsive `columns` control at (0,4,0), above this sheet. The
   three limits and the `kfe-no-triforce` opt-out are in that note too; this
   widget exposes a responsive Gap control, so limit (c) applies here. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 17px is half of this grid's own 34px gap (:16). */
  .kfe .kfe-feature-grid .kfe-feature-grid-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 17px);
  }
  .kfe-no-triforce .kfe .kfe-feature-grid .kfe-feature-grid-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: auto;
    justify-self: auto;
    width: auto;
  }
}

/* ---------- the head's new parts ---------- */
.kfe .kfe-feature-grid-intro { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, inherit); margin-top: 16px; }
.kfe .kfe-feature-grid-outro { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, inherit); margin-top: 24px; }
.kfe .kfe-feature-grid-intro p + p, .kfe .kfe-feature-grid-outro p + p { margin-top: 10px; }
.kfe .kfe-feature-grid-intro a, .kfe .kfe-feature-grid-outro a { color: var(--kfe-link, var(--kfe-accent)); }
.kfe .kfe-feature-grid.kfe-dark .kfe-feature-grid-intro,
.kfe .kfe-feature-grid.kfe-dark .kfe-feature-grid-outro { color: var(--kfe-on-dark); }

/* ---------- layout=split: the grid beside a bleed photo ---------- */
/* The section's own padding goes to the text column, which is what
   `.kfe-split-bleed > .txt` already reads (base.css:216-220). */
.kfe .kfe-feature-grid.layout-split { padding: 0; }
.kfe .kfe-feature-grid.layout-split .kfe-split-bleed.media-none { grid-template-columns: minmax(0, 1fr); }
.kfe .kfe-feature-grid.layout-split .head { margin-bottom: 20px; }
@media (max-width: 1024px) {
  .kfe .kfe-feature-grid.layout-split .kfe-split-bleed { grid-template-columns: minmax(0, 1fr); }
  .kfe .kfe-feature-grid.layout-split .kfe-split-bleed > .media { min-height: 0; }
  .kfe .kfe-feature-grid.layout-split .kfe-split-bleed > .media img { position: static; height: 340px; min-height: 0; }
}

/* ==========================================================================
   THE CARD IS NOT IN THIS FILE ANY MORE (kf-elements #148, ADR-0005's dated
   section of 2026-09-21). Every rule that painted a card — its shell, its
   media, its eyebrow, its notes, its link, the five `card_style` values, the
   avatar, the bleed image, the alignment and the pinned link — moved to
   `base.css`'s "The card" block, where `kfe_post_grid` reads the same rules
   through the same selectors at the same specificity. What is left here is
   this widget's own: the head, the grid container's track list and its
   responsive safety nets, the triforce arithmetic (which is per-sheet, because
   the orphan's width is half of THIS grid's gap) and the split photo.
   ========================================================================== */

/* ---------- intro_style = rule (w2.homepack.1) ----------
   Each paragraph of the intro drawn with a rule at its start, and a bold key
   in its own colour: a pair of short claims above a grid. `intro-rule` is a
   class no released grid prints. */
.kfe .kfe-feature-grid.intro-rule .kfe-feature-grid-intro { display: grid; gap: 16px; text-align: start; }
.kfe .kfe-feature-grid.intro-rule .kfe-feature-grid-intro p {
  margin: 0; padding-inline-start: 20px;
  border-inline-start: 2px solid var(--kfe-rule-color, var(--kfe-accent));
}
.kfe .kfe-feature-grid.intro-rule .kfe-feature-grid-intro strong { color: var(--kfe-rule-key, inherit); }