/* ─────────────────────────────────────────────────────────────────
   block-icons-title — large headline-heavy service tiles
   W10-A9 redesign: icon-top, Anton title, 1-line body
   - Stacked vertical card per tile (vs. icons-text inline 3-up)
   - currentColor on SVG (no baked hex)
   - Token-driven hover; reduced-motion guard
   ───────────────────────────────────────────────────────────── */

.block-icons-title img,
.block-icons-title svg {
  max-width: 100%;
  height: auto;
}

/* Force currentColor for any baked fills/strokes inside admin SVGs.
   Note: this is a defensive override; SVGs SHOULD use currentColor. */
.block-icons-title .icons-title-icon svg,
.block-icons-title .icons-title-icon svg * {
  color: inherit;
}

.block-icons-title .icons-title-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ds-cols-desktop, 3), minmax(220px, 1fr));
  gap: var(--ds-space-4, 16px);
}

.block-icons-title .icons-title-item {
  list-style: none;
  display: block;
}

.block-icons-title .icons-title-chip-link {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
  border-radius: var(--ds-radius, 8px);
  height: 100%;
}

.block-icons-title .icons-title-chip-link:focus-visible {
  /* Senior-UX 2026-05-07: token focus ring. */
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.block-icons-title .icons-title-chip {
  /* Senior-UX 2026-05-07: token-driven background fallback (was #fff hex). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-3, 12px);
  padding: var(--ds-space-5, 20px) var(--ds-space-5, 20px);
  background: var(--scheme-card-bg, var(--ds-paper));
  color: var(--scheme-card-fg, var(--ds-ink));
  border: 1px solid var(--scheme-rule, rgba(14,15,12,0.08));
  border-radius: var(--ds-radius, 8px);
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(14,15,12,0.06));
  transition: transform 200ms var(--ds-ease, ease-out),
              box-shadow 200ms var(--ds-ease, ease-out),
              border-color 150ms var(--ds-ease, ease-out),
              color 150ms var(--ds-ease, ease-out);
  height: 100%;
  min-height: 160px;
  cursor: default;
  text-align: left;
}

.block-icons-title .icons-title-chip.is-clickable { cursor: pointer; }

.block-icons-title .icons-title-chip-link:hover .icons-title-chip,
.block-icons-title .icons-title-chip-link:focus-visible .icons-title-chip,
.block-icons-title .icons-title-chip.is-clickable:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--hover-token, var(--ds-cta)) 35%, transparent);
  box-shadow: var(--ds-shadow-lg, 0 6px 16px rgba(14,15,12,0.10));
}

.block-icons-title .icons-title-chip-link:hover .icons-title-icon,
.block-icons-title .icons-title-chip-link:focus-visible .icons-title-icon,
.block-icons-title .icons-title-chip.is-clickable:hover .icons-title-icon {
  color: var(--hover-token, var(--ds-cta));
}

.block-icons-title .icons-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ds-trust);
  width: var(--icon-size, 56px);
  height: var(--icon-size, 56px);
  min-height: var(--icon-size, 56px);
  transition: color 150ms var(--ds-ease, ease-out);
}

/* WAVE3-F04 (2026-05-08) — F-T4-01: Pattern C — switch icon to scheme-fg on
   schemes where its default --ds-trust collides (moss-on-moss on .scheme-trust),
   or where the moss tone is invisible on dark backgrounds. Doctrine §90-110. */
.scheme-trust  .block-icons-title .icons-title-icon,
.scheme-ink    .block-icons-title .icons-title-icon,
.scheme-steel  .block-icons-title .icons-title-icon,
.scheme-accent .block-icons-title .icons-title-icon {
  color: var(--scheme-fg);
}

.block-icons-title .icons-title-icon svg,
.block-icons-title .icons-title-icon img {
  width: var(--icon-size, 56px);
  height: var(--icon-size, 56px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.block-icons-title .icons-title-text {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2, 8px);
}

.block-icons-title .icons-title-label {
  /* Senior-UX 2026-05-07: humanist sans + sentence-case (Anton-uppercase below 24px
     loses word-shape cues for older readers). Bumped to ds-fs-h3 (24px). */
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-h3, 1.5rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--scheme-card-fg, var(--ds-ink));
  line-height: var(--ds-lh-display, 1.2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-icons-title .icons-title-body {
  /* Senior-UX 2026-05-07: ≥18px body, 1.6 line-height. */
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-body, 1.125rem);
  font-weight: 400;
  color: var(--scheme-fg-soft, var(--ds-ink));
  line-height: var(--ds-lh-body, 1.6);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .block-icons-title .icons-title-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: var(--ds-space-3, 12px);
  }
}

@media (max-width: 600px) {
  .block-icons-title .icons-title-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-space-3, 12px);
  }
  .block-icons-title .icons-title-chip {
    padding: var(--ds-space-4, 16px);
    min-height: 0;
  }
  /* Senior-UX 2026-05-07: keep title ≥1.25rem (20px) on mobile — never below. */
  .block-icons-title .icons-title-label { font-size: var(--ds-fs-h4, 1.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .block-icons-title .icons-title-chip,
  .block-icons-title .icons-title-icon {
    animation: none !important;
    transition: none !important;
  }
  .block-icons-title .icons-title-chip-link:hover .icons-title-chip,
  .block-icons-title .icons-title-chip.is-clickable:hover {
    transform: none;
  }
}