/* ─────────────────────────────────────────────────────────────────
   block-features — MEDIUM card grid (W10-A7 unified 2026-05-07)
   - 3-col desktop / 2-col tablet / 1-col mobile, ~6 cards
   - Icon (currentColor SVG) + Anton title + 2-line text + CTA
   - Default icon: --ds-trust  |  Hover icon/border/CTA: --ds-cta
   - prefers-reduced-motion guard
   ───────────────────────────────────────────────────────────── */

.block-features .features-grid {
  display: grid;
  gap: var(--ds-space-4, 16px);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .block-features .features-grid,
  .block-features .features-grid.is-cols-2,
  .block-features .features-grid.is-cols-3,
  .block-features .features-grid.is-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-space-5, 24px);
  }
}

@media (min-width: 992px) {
  .block-features .features-grid,
  .block-features .features-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-features .features-grid.is-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-features .features-grid.is-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.block-features .feature-card {
  --feat-default: var(--ds-trust);
  --feat-hover:   var(--ds-cta);
  --feat-cat:     var(--feat-default);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3, 12px);
  padding: var(--ds-space-5, 24px);
  background: var(--scheme-card-bg, #fff);
  color: var(--scheme-card-fg, var(--ds-ink, #1a1a1a));
  border: 1px solid var(--scheme-rule, rgba(0,0,0,0.08));
  border-radius: var(--ds-radius, 8px);
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  transition: transform 200ms var(--ds-ease, ease-out),
              box-shadow 200ms var(--ds-ease, ease-out),
              border-color 150ms var(--ds-ease, ease-out);
  min-height: 44px; /* WCAG tap-target floor */
}

.block-features .feature-card.is-cat-cta    { --feat-default: var(--ds-cta);    --feat-hover: var(--ds-cta-dk, var(--ds-cta)); }
.block-features .feature-card.is-cat-trust  { --feat-default: var(--ds-trust);  --feat-hover: var(--ds-cta); }
.block-features .feature-card.is-cat-accent { --feat-default: var(--ds-accent); --feat-hover: var(--ds-cta); }
.block-features .feature-card.is-cat-ink    { --feat-default: var(--ds-ink);    --feat-hover: var(--ds-cta); }

.block-features .feature-card:hover,
.block-features .feature-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md, 0 8px 24px rgba(0,0,0,0.08));
  border-color: color-mix(in srgb, var(--feat-hover) 35%, transparent);
}

.block-features .feature-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--feat-cat);
  transition: color 150ms var(--ds-ease, ease-out),
              transform 150ms var(--ds-ease, ease-out);
}

.block-features .feature-card:hover .feature-icon,
.block-features .feature-card:focus-within .feature-icon {
  color: var(--feat-hover);
  transform: scale(1.06);
}

.block-features .feature-icon img,
.block-features .feature-icon svg {
  width: 48px;
  height: 48px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  color: inherit;
  fill: none;
  stroke: currentColor;
  transition: color 150ms var(--ds-ease, ease-out);
}

/* Some legacy SVGs use fill instead of stroke — let them inherit */
.block-features .is-icon-solid .feature-icon svg,
.block-features .is-icon-duotone .feature-icon svg { fill: currentColor; stroke: none; }

.block-features .feature-body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2, 8px);
  flex: 1 1 auto;
}

.block-features .feature-title-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Senior-UX (T5 2026-05-07): feature card titles are humane sentence-
   case (DM Sans, 24px floor) — older readers lose word-shape cues under
   Anton-uppercase at card scale. Mirrors `.ds-h3-humane` utility. */
.block-features .feature-title {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-h3, 1.5rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scheme-card-fg, var(--ds-ink, #1a1a1a));
  margin: 0;
  line-height: var(--ds-lh-display, 1.2);
  transition: color 150ms var(--ds-ease, ease-out);
}

.block-features .feature-card:hover .feature-title,
.block-features .feature-card:focus-within .feature-title { color: var(--feat-hover); }

/* Senior-UX (T5 2026-05-07): feature description ≥16px (now 18px via
   --ds-fs-body) at line-height 1.6 — comfortable scanning across cards. */
.block-features .feature-text,
.block-features .feature-text p {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-body, 1.125rem);
  line-height: var(--ds-lh-body, 1.6);
  color: var(--scheme-fg-soft, color-mix(in srgb, var(--ds-ink, #1a1a1a) 75%, transparent));
  margin: 0;
}
.block-features .feature-text p + p { margin-top: var(--ds-space-2, 8px); }

/* Senior-UX (T5 2026-05-07): "Learn more" link ≥16px text and ≥48px tap
   target (was 14px / 44px), underlined for color-blind readability. */
.block-features .feature-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--ds-space-2, 8px);
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  color: var(--feat-cat);
  letter-spacing: 0.01em;
  transition: color 150ms var(--ds-ease, ease-out), gap 150ms var(--ds-ease, ease-out);
  min-height: var(--ds-touch-target, 48px);
  padding: 8px 0;
}
.block-features .feature-learn-more svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms var(--ds-ease, ease-out);
}
.block-features .feature-learn-more:hover,
.block-features .feature-card:hover .feature-learn-more { color: var(--feat-hover); }
.block-features .feature-learn-more:hover svg,
.block-features .feature-card:hover .feature-learn-more svg { transform: translateX(4px); }

/* Senior-UX (T5 2026-05-07): standardised focus ring (3px ring +
   2px halo) — visible against light AND dark cards. */
.block-features .feature-learn-more:focus-visible,
.block-features .feature-title-link:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(255,255,255,.95));
  border-radius: var(--ds-radius-sm, 4px);
}

@media (max-width: 600px) {
  .block-features .feature-card { padding: var(--ds-space-4, 16px); }
  .block-features .feature-icon,
  .block-features .feature-icon img,
  .block-features .feature-icon svg {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-features .feature-card,
  .block-features .feature-icon,
  .block-features .feature-title,
  .block-features .feature-learn-more,
  .block-features .feature-learn-more svg {
    transition: none !important;
  }
  .block-features .feature-card:hover,
  .block-features .feature-card:focus-within { transform: none; }
  .block-features .feature-card:hover .feature-icon,
  .block-features .feature-card:focus-within .feature-icon { transform: none; }
}


/* ── Bug fix 2026-05-07-bugs: defend against #features ul li::before global checkmark leak (theme.min.css). ── */
.block-features ul li::before,
.block-features .features-grid li::before,
.block-features .feature-card::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* ── Sweep T10 (2026-05-08): defensive checkmark-leak guard. The global
   `#features ul li::before, ul.list-checked li::before, .has-list-checked
   ul li::before` rule in theme.min.css can paint stray checkmarks
   inside the feature-text body if a CMS author adds an inline list and
   inadvertently inherits one of those class hooks. We isolate the
   block id (features-isolated) AND null the pseudo-element here so the
   leak is double-bagged. ─────────────────────────────────────────── */
.block-features ul li::before,
.block-features .feature-text ul li::before,
.block-features .feature-text ol li::before {
  content: none !important;
  background: none !important;
  display: none !important;
}