/* ─────────────────────────────────────────────────────────────────
   block-icons-text-32 — trust-strip breadth row (W9-A7 rebuild)
   - Mobile-first: 2 col / 4 col ≥640px / 8 col ≥1200px (--ds-cols-desktop)
   - Subtle hover: icon → --ds-trust, card lifts -2px
   - Single-line title + single-line value below 32-40px icon
   - No active-cycling, no autoplay
   ───────────────────────────────────────────────────────────── */

/* Image scaling guard */
.block-icons-text-32 img,
.block-icons-text-32 svg {
  max-width: 100%;
  height: auto;
}

/* GRID — mobile-first */
/* WAVE3-F04 (2026-05-08) — F-T4-04: previous wrapper painted --ds-paper 50% on
   every scheme, producing a 50/50 ivory+ink mid-gray surface on .scheme-ink and
   .scheme-steel — captions inside cards then fail AA against that mid-gray.
   Switch to scheme-aware: tint the wrapper with --scheme-bg (so it nudges the
   ambient scheme tone), or transparent on dark schemes. The cards themselves
   already paint --scheme-card-bg, so the wrapper exists only for the subtle
   inset feel; making it scheme-aware keeps that feel without breaking dark. */
.block-icons-text-32 .contact-info-grid {
  list-style: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 100%;
  padding: var(--ds-space-3, 12px);
  background: color-mix(in srgb, var(--scheme-bg, var(--ds-paper)) 50%, transparent);
  border-radius: var(--ds-radius, 8px);
  image-rendering: -webkit-optimize-contrast;
}
/* On dark schemes drop the paper-tint entirely — the cards' own --scheme-card-bg
   provides the surface; an extra mid-tint between ink and card surface only
   muddies contrast for the bold title + soft value text inside each card. */
.scheme-ink    .block-icons-text-32 .contact-info-grid,
.scheme-steel  .block-icons-text-32 .contact-info-grid,
.scheme-accent .block-icons-text-32 .contact-info-grid,
.scheme-trust  .block-icons-text-32 .contact-info-grid {
  background: transparent;
}

/* Tablet ≥640px → 4 cols */
@media (min-width: 640px) {
  .block-icons-text-32 .contact-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Desktop ≥1200px → 8 cols (or whatever --ds-cols-desktop says) */
@media (min-width: 1200px) {
  .block-icons-text-32 .contact-info-grid {
    grid-template-columns: repeat(var(--ds-cols-desktop, 8), minmax(0, 1fr));
    gap: 12px;
  }
}

.block-icons-text-32 .contact-info-card-wrapper {
  display: block;
  list-style: none;
  min-width: 0;
}

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

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

/* CARD */
.block-icons-text-32 .contact-info-card {
  /* Senior-UX 2026-05-07: token-driven fallbacks (was #fff, #ddd hex). */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: var(--ds-space-3, 12px) var(--ds-space-2, 8px);
  background: var(--scheme-card-bg, var(--ds-paper));
  color: var(--scheme-card-fg, var(--ds-ink));
  border-radius: var(--ds-radius, 8px);
  border: 1px solid color-mix(in srgb, var(--scheme-rule, var(--ds-rule)) 60%, transparent);
  height: 100%;
  min-height: 112px;
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(14,15,12,0.06));
  /* W9-A9 2026-05-07: token-discipline — use --ds-duration-fast (150ms) so timing
     matches the rest of the design-system. Fallbacks preserved for safety. */
  transition: border-color var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              color var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
}

.block-icons-text-32 .contact-info-card.is-clickable { cursor: pointer; }

/* Subtle hover: icon recolors to --ds-trust, card lifts */
.block-icons-text-32 .contact-info-card:hover,
.block-icons-text-32 .contact-info-card-link:hover .contact-info-card,
.block-icons-text-32 .contact-info-card-link:focus-visible .contact-info-card {
  border-color: color-mix(in srgb, var(--hover-token, var(--ds-trust)) 45%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md, 0 6px 16px rgba(14,15,12,0.07));
}

.block-icons-text-32 .contact-info-card:hover .contact-info-icon,
.block-icons-text-32 .contact-info-card-link:hover .contact-info-icon {
  color: var(--hover-token, var(--ds-trust));
}

.block-icons-text-32 .contact-info-card:hover .contact-info-icon img,
.block-icons-text-32 .contact-info-card:hover .contact-info-icon svg,
.block-icons-text-32 .contact-info-card-link:hover .contact-info-icon img,
.block-icons-text-32 .contact-info-card-link:hover .contact-info-icon svg {
  transform: scale(1.06);
}

/* Icon container */
.block-icons-text-32 .contact-info-icon {
  /* Senior-UX 2026-05-07: token-driven default ink (was #1a1a1a). */
  width: var(--icon-size, 36px);
  height: var(--icon-size, 36px);
  min-height: var(--icon-size, 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ds-ink);
  transition: color var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
}

.block-icons-text-32 .contact-info-icon svg,
.block-icons-text-32 .contact-info-icon img {
  width: var(--icon-size, 36px);
  height: var(--icon-size, 36px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out),
              filter var(--ds-duration-fast, 150ms) var(--ds-ease, ease-out);
}

.block-icons-text-32 .contact-info-icon svg {
  stroke: currentColor;
  stroke-width: 1.5px;
  fill: none;
}

/* Greyscale mode */
.block-icons-text-32 .contact-info-grid.is-greyscale .contact-info-icon img,
.block-icons-text-32 .contact-info-grid.is-greyscale .contact-info-icon svg {
  filter: grayscale(100%) opacity(0.7);
}
.block-icons-text-32 .contact-info-grid.is-greyscale .contact-info-card:hover .contact-info-icon img,
.block-icons-text-32 .contact-info-grid.is-greyscale .contact-info-card:hover .contact-info-icon svg,
.block-icons-text-32 .contact-info-grid.is-greyscale .contact-info-card-link:hover .contact-info-icon img,
.block-icons-text-32 .contact-info-grid.is-greyscale .contact-info-card-link:hover .contact-info-icon svg {
  filter: grayscale(0%) opacity(1);
}

/* Content */
.block-icons-text-32 .contact-info-content {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
}

/* Senior-UX 2026-05-07: drop nowrap+ellipsis (was truncating "Bonded & insur…",
   "Up to 5 yr guaran…" etc on 8-up desktop). Allow text to wrap to 2-3 lines so the
   trust facts stay legible for 45-70+ readers. Bumped title 13→16px and value 12→16px
   to clear the WCAG 2.2 16px legal floor. */
.block-icons-text-32 .contact-info-title {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-body-sm, 1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--scheme-card-fg, var(--ds-ink));
  margin-bottom: 2px;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.block-icons-text-32 .contact-info-value {
  font-family: var(--ds-font-body, 'DM Sans', sans-serif);
  font-size: var(--ds-fs-body-sm, 1rem);
  font-weight: 400;
  color: var(--scheme-fg-soft, color-mix(in srgb, var(--ds-ink) 70%, transparent));
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Senior-UX 2026-05-07: mobile/tablet overrides simplified — the base styles already
   wrap freely; we only nudge minimum heights and keep the 16px floor on every viewport. */
@media (max-width: 639px) {
  .block-icons-text-32 .contact-info-card {
    padding: var(--ds-space-3, 12px) var(--ds-space-2, 8px);
    min-height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-icons-text-32 .contact-info-card,
  .block-icons-text-32 .contact-info-icon,
  .block-icons-text-32 .contact-info-icon img,
  .block-icons-text-32 .contact-info-icon svg {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Bug fix 2026-05-07-bugs (Team-T6): defend against #features ul li::before
   global checkmark leak (theme.min.css). Parity with sibling icons-text.css
   defensive reset — preempts regression if section_id ever becomes "features". ── */
.block-icons-text-32 .contact-info-grid li::before,
.block-icons-text-32 .contact-info-card-wrapper::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* ── Validate-2026-05-08 fix: prevent "Workmanship" mid-word break in 8-up grid at 1440. ── */
@media (min-width: 1280px) {
  .block-icons-text-32 .contact-info-title,
  .icons-text-32 .contact-info-title {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
  }
}