/* ==========================================================================
   KF Elements — Post Grid
   --------------------------------------------------------------------------
   THE CARD IS NOT IN THIS FILE, and that is the point of the widget. Every
   rule that paints a card lives in `base.css`'s "The card" block, where
   `kfe_feature_grid` reads the same rules through the same selectors at the
   same specificity — so an archive card and a page card compute the same
   values, and a change to one is a change to both by construction rather than
   by care.

   What is GENUINELY this widget's is the empty state and the pager — 28 lines
   `feature-grid.css` does not contain and should not. The head, the grid
   container's track list, its two responsive safety nets and the intro/outro
   rules are NOT: measured at the fix round, they are 23 byte-identical lines in
   both sheets once the stem is normalised. That is the drift the extraction
   exists to refuse, and a second extraction under `base.css`'s same `:is()`
   pattern is owed as kf-elements #152. Read the head comment below with that in
   mind: it argues correctly that the two widgets draw ONE head, and the
   conclusion that ought to follow is that the rule belongs in `base.css` — not
   that a copy of it belongs here.
   ========================================================================== */

/* The frame's tokens, read where the property is painted (ADR-0004 decision 2),
   each with today's value as its fallback. The two head rules are
   `feature-grid.css`'s, deliberately: the two widgets draw one head, and a
   listing whose heading sat at a different size from the grid above it would be
   the drift this lane exists to refuse. */
.kfe .kfe-post-grid .head { margin-bottom: 60px; text-align: var(--kfe-head-align, inherit); }
.kfe .kfe-post-grid .head h2,
.kfe .kfe-post-grid .head .kfe-post-grid-title { font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(2rem, 4vw, 3rem))); }

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

/* pre-responsive-control safety net — see steps.css. A site whose instance
   predates the responsive `columns` control has nothing to stack it by, so the
   sheet does it. */
@media (max-width: 980px) {
  .kfe .kfe-post-grid .kfe-post-grid-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .kfe .kfe-post-grid .kfe-post-grid-grid { grid-template-columns: 1fr; }
}

/* The triforce — the long note is in steps.css, and the ruling is the
   operator's of 2026-09-20 (kf-elements #118). A lone card on the last row of a
   two-column grid is centred under the two above it. The arithmetic is
   PER-SHEET because the orphan's width is half of THIS grid's own gap; the band
   is Elementor's tablet band for the reason that note gives. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 17px is half of this grid's own 34px gap (:24). */
  .kfe .kfe-post-grid .kfe-post-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-post-grid .kfe-post-grid-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: auto;
    justify-self: auto;
    width: auto;
  }
}

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

/* ---------- the empty state ----------
   A designed state, not an accident: a listing with nothing in it keeps its
   frame and says so. It is drawn as one quiet line rather than as a card,
   because a card would read as a result. */
.kfe .kfe-post-grid-empty {
  color: var(--kfe-body, var(--kfe-muted));
  font-size: var(--kfe-body-size, inherit);
  padding: 28px 0;
  text-align: var(--kfe-head-align, inherit);
}
.kfe .kfe-post-grid-empty p + p { margin-top: 10px; }
.kfe .kfe-post-grid.kfe-dark .kfe-post-grid-empty { color: var(--kfe-on-dark); }

/* ---------- the pager ----------
   Numbers, not a slider: a fourteen-page archive needs a way to reach page
   nine. `flex-wrap` rather than a media query, because the number of pages is
   data and not a width. */
/* The pager reads the SAME alignment control the head and the empty state read,
   and it can because `--kfe-head-align` resolves to `start` or `center`, both of
   which are `justify-content` values (class-widget-base.php's section frame
   writes `left` as `start`). The fallback is `center`, which is where a pager
   sits by convention and what an instance that never set the control gets — so
   a left-aligned section with a centred pager is now a choice rather than an
   oversight, and a centred section no longer disagrees with itself. */
.kfe .kfe-post-grid-pages {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: var(--kfe-head-align, center);
  gap: 8px; margin-top: 46px;
}
.kfe .kfe-post-grid-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--kfe-line); border-radius: var(--kfe-radius-card, 6px);
  color: var(--kfe-heading, var(--kfe-primary));
  font-size: 14px; line-height: 1; text-decoration: none;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
/* 44px is the minimum a finger can reliably hit, and a page number is the one
   control on an archive that is always tapped rather than clicked. */
.kfe .kfe-post-grid-page:hover,
.kfe .kfe-post-grid-page:focus-visible { border-color: var(--kfe-accent); color: var(--kfe-accent); }
.kfe .kfe-post-grid-page.current {
  background: var(--kfe-accent); border-color: var(--kfe-accent); color: #fff; font-weight: 700;
}
.kfe .kfe-post-grid-gap { color: var(--kfe-muted); padding: 0 4px; }
.kfe .kfe-post-grid.kfe-dark .kfe-post-grid-page { border-color: rgba(255, 255, 255, 0.24); color: var(--kfe-on-dark); }
.kfe .kfe-post-grid.kfe-dark .kfe-post-grid-page:hover,
.kfe .kfe-post-grid.kfe-dark .kfe-post-grid-page:focus-visible { border-color: var(--kfe-highlight); color: #fff; }
.kfe .kfe-post-grid.kfe-dark .kfe-post-grid-page.current { background: var(--kfe-highlight); border-color: var(--kfe-highlight); color: var(--kfe-primary-deep); }
.kfe .kfe-post-grid.kfe-dark .kfe-post-grid-gap { color: var(--kfe-on-dark-soft); }