/* ==========================================================================
   KF Elements — Gallery
   --------------------------------------------------------------------------
   A grid of figures. The column count comes from the widget's responsive
   control; the two media queries below are the safety net for pages saved
   before it existed (the idiom is steps.css / feature-grid.css).

   CORRECTED 2026-09-20 (kf-elements #118): this header used to add that the
   safety net "carries higher specificity than Elementor's per-element rule on
   purpose". It does not. Elementor's per-element rule is (0,4,0) and each
   sheet rule is (0,3,0) — measured; see the triforce note at :86, steps.css
   and ADR-0004's 2026-09-20 amendment — 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.

   Tokens only: every colour here reads a --kfe-* custom property from
   base.css, so a fresh install matches the site's Elementor kit.
   ========================================================================== */

/* The frame's head alignment, with this widget's own (inherited) as the
   fallback, so nothing moves until an instance sets it. */
.kfe .kfe-gallery .head,
.kfe .kfe-gallery .intro { text-align: var(--kfe-head-align, inherit); }

.kfe .kfe-gallery .head { margin-bottom: 44px; }
/* The head title's level is a control (header_size). At h2 — the default — the
   widget prints a BARE <h2> with no class, so every rule on the title pairs
   the tag with the class the other levels carry, and the two stay IN STEP
   (ADR-0002 decision 7; the form the released widgets of this lane use). */
.kfe .kfe-gallery .head h2,
.kfe .kfe-gallery .head .kfe-gallery-title { font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem))); line-height: 1.22; max-width: var(--kfe-title-measure, none); }
/* The class-only rules restate what base.css's `.kfe h2` gives the bare tag.
   Listed separately, never merged into the paired rule: a merged rule would
   outrank `.kfe .kfe-dark h2` and repaint every dark head. */
.kfe .kfe-gallery .head .kfe-gallery-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;
}
.kfe .kfe-gallery.kfe-dark .head .kfe-gallery-title { color: #fff; }
.kfe .kfe-gallery .intro { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 17px); max-width: var(--kfe-body-measure, 62ch); margin-bottom: 44px; }
.kfe .kfe-gallery .intro p + p { margin-top: 16px; }
.kfe .kfe-gallery .intro ul, .kfe .kfe-gallery .intro ol { margin: 16px 0 0; padding-inline-start: var(--kfe-list-indent); }
.kfe .kfe-gallery .intro li + li { margin-top: 6px; }

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

.kfe .kfe-gallery .item {
  margin: 0;
  border-radius: var(--kfe-radius-media, 8px);
  overflow: hidden;
}
/* The figure's ground shows ONLY behind a caption: without one the box is the
   photograph, and a band under it is the box showing through (spec :463). */
.kfe .kfe-gallery .item:has(figcaption) { background: var(--kfe-surface-deep); }
.kfe .kfe-gallery .item img { width: 100%; height: 100%; object-position: var(--kfe-focus-x, 50%) var(--kfe-focus-y, 50%); }

/* The four ratio classes the `ratio` control names. `auto` keeps the file's
   own proportions; the other three crop to the box with object-fit. */
.kfe .kfe-gallery .item.ratio-auto img { height: auto; }
.kfe .kfe-gallery .item.ratio-4-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.kfe .kfe-gallery .item.ratio-1-1 img { aspect-ratio: 1 / 1; object-fit: cover; }
.kfe .kfe-gallery .item.ratio-16-9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.kfe .kfe-gallery .item.ratio-16-10 img { aspect-ratio: 16 / 10; object-fit: cover; }
.kfe .kfe-gallery .item.ratio-16-11 img { aspect-ratio: 16 / 11; object-fit: cover; }
/* `fixed` takes its height from the `image_height` control, which is the only
   control that reads it, so the figure has no ratio of its own to keep. */
.kfe .kfe-gallery .item.ratio-fixed img { object-fit: cover; }

.kfe .kfe-gallery .item figcaption {
  color: var(--kfe-muted);
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 16px 16px;
  background: var(--kfe-white);
}

/* dark-ground flips, in the pack's idiom (feature-grid.css) */
.kfe .kfe-gallery.kfe-dark .item:has(figcaption) { background: rgba(255, 255, 255, 0.06); }
.kfe .kfe-gallery.kfe-dark .item figcaption { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.68); }
.kfe .kfe-gallery.kfe-dark .intro { color: var(--kfe-on-dark); }

/* pre-responsive-control safety net — see steps.css */
@media (max-width: 980px) {
  .kfe .kfe-gallery .kfe-gallery-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 560px) {
  .kfe .kfe-gallery .kfe-gallery-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* The triforce — the long note is in steps.css (kf-elements #118, 2026-09-20).
   The ≤560 gap above is 18px, but that width is one column and outside this
   band, so the arithmetic below reads the 26px gap this grid carries here. 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) {
  /* 13px is half of this grid's own 26px gap (:41). */
  .kfe .kfe-gallery .kfe-gallery-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 13px);
  }
  .kfe-no-triforce .kfe .kfe-gallery .kfe-gallery-grid > :last-child:nth-child(2n + 1):not(:first-child) {
    grid-column: auto;
    justify-self: auto;
    width: auto;
  }
}