/* ─────────────────────────────────────────────────────────────────
   block-icons — small icon tile grid (icon + 2-line label below)
   Wave-10 2026-05-07: tap-target guard, focus ring on links,
   consistent SVG stroke target via filter, label clamp at 2 lines.
   FIX-T3: empty cat default falls back to --ds-ink theme token;
   image scaling guards prevent SVG/PNG overflow.
   ───────────────────────────────────────────────────────────── */

.block-icons .icons-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ds-space-3);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: stretch;
}
.block-icons .icons-grid.is-cols-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.block-icons .icons-grid.is-cols-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.block-icons .icons-grid.is-cols-6 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.block-icons .icons-grid.is-cols-8 { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

@media (max-width: 600px) {
  .block-icons .icons-grid,
  .block-icons .icons-grid.is-cols-3,
  .block-icons .icons-grid.is-cols-4,
  .block-icons .icons-grid.is-cols-6,
  .block-icons .icons-grid.is-cols-8 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.block-icons .icons-grid-item {
  --feat-cat: var(--ds-ink);
  margin: 0;
  display: flex;
}
.block-icons .icons-grid-item.is-cat-cta    { --feat-cat: var(--ds-cta); }
.block-icons .icons-grid-item.is-cat-trust  { --feat-cat: var(--ds-trust); }
.block-icons .icons-grid-item.is-cat-accent { --feat-cat: var(--ds-accent); }
.block-icons .icons-grid-item.is-cat-ink    { --feat-cat: var(--ds-ink); }

.block-icons .icons-tile {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3);
  /* Senior-UX 2026-05-07: ≥48px tap target (AARP); 96px guards stacked icon+label. */
  min-height: 96px;
  min-width: var(--ds-touch-target, 48px);
  text-decoration: none;
  color: var(--scheme-fg);
  border-radius: var(--ds-radius-sm, var(--ds-radius));
  transition: background var(--ds-duration-fast) var(--ds-ease-out, ease),
              transform var(--ds-duration-fast) var(--ds-ease-out, ease);
}

.block-icons a.icons-tile { text-decoration: none; }
.block-icons a.icons-tile:hover {
  background: var(--scheme-card-bg, var(--ds-paper));
  transform: translateY(-2px);
}

.block-icons a.icons-tile:focus-visible {
  /* Senior-UX 2026-05-07: token focus ring (3px CTA + 5px halo). */
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.block-icons .icons-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--feat-cat);
  /* aspect-ratio guard for any background-image use */
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* image scaling guards — every icon-tile img/svg capped at 50px
   regardless of intrinsic dimensions. */
.block-icons .icons-tile-icon img,
.block-icons .icons-tile-icon svg {
  width: 100%;
  height: auto;
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
}

.block-icons .is-icon-outline .icons-tile-icon img {
  /* visual cue: outline icons stay default. */
}
.block-icons .is-icon-solid .icons-tile-icon img {
  filter: saturate(1.05);
}
.block-icons .is-icon-duotone .icons-tile-icon img {
  filter: saturate(0.92);
}

.block-icons .icons-tile-label {
  /* Senior-UX 2026-05-07: ≥18px label (was --ds-fs-body-sm = 16px). 45-70+ readers
     scan label-paired icons and the body floor must apply. */
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body, 1.125rem);
  font-weight: 600;
  color: var(--scheme-fg);
  margin: 0;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.4;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .block-icons .icons-tile { padding: var(--ds-space-2); min-height: 88px; }
}

/* A11y: reduced-motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .block-icons .icons-tile { transition: none !important; }
  .block-icons a.icons-tile:hover { transform: none; }
}