/* ─────────────────────────────────────────────────────────────────
   Block: Platforms & Browsers — logo grid (FIX-T4 wave6 polish)
   - Uniform max-height 32px logos, object-fit contain, lazy-load
   - Greyscale-by-default, full colour on hover
   - Image scaling guards, focus rings
   ───────────────────────────────────────────────────────────── */

/* Image scaling guards */
.block-platforms-browsers img,
.block-platforms-browsers svg {
  max-width: 100%;
  height: auto;
}

.block-platforms-browsers {
  background: var(--scheme-bg);
  color: var(--scheme-fg);
  font-family: var(--ds-font-body);
}

/* ── Platform row (top) ─────────────────────────────────────── */
.block-platforms-browsers .platforms-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4, 16px);
  min-height: 48px;
}

.block-platforms-browsers .platforms-row-item { list-style: none; }

.block-platforms-browsers .platforms-browsers-platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--icon-size, 32px);
  max-height: 32px;
  width: auto;
  margin: 0;
  vertical-align: middle;
}

.block-platforms-browsers .platforms-browsers-platform-icon svg,
.block-platforms-browsers .platforms-browsers-platform-icon img {
  max-height: 32px;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Greyscale by default, full colour on hover */
.block-platforms-browsers .platforms-row.is-greyscale .platforms-browsers-platform-icon svg,
.block-platforms-browsers .platforms-row.is-greyscale .platforms-browsers-platform-icon img {
  filter: grayscale(100%) opacity(0.6);
  transition: filter 200ms var(--ds-ease-out, ease-out), transform 200ms var(--ds-ease-out, ease-out);
}

.block-platforms-browsers .platforms-row.is-greyscale .platforms-browsers-platform-icon:hover svg,
.block-platforms-browsers .platforms-row.is-greyscale .platforms-browsers-platform-icon:hover img,
.block-platforms-browsers .platforms-row.is-greyscale .platforms-browsers-platform-icon:focus-within svg,
.block-platforms-browsers .platforms-row.is-greyscale .platforms-browsers-platform-icon:focus-within img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.06);
}

/* ── Browser tile grid ─────────────────────────────────────── */
.block-platforms-browsers .browsers-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ds-cols-desktop, 6), minmax(120px, 1fr));
  gap: var(--ds-space-3, 12px);
}

.block-platforms-browsers .browsers-grid-item { list-style: none; }

.block-platforms-browsers .browsers-grid-link {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
  border-radius: var(--ds-radius);
  height: 100%;
}

.block-platforms-browsers .browsers-grid-link:focus-visible {
  outline: 2px solid var(--hover-token, var(--ds-cta));
  outline-offset: 3px;
}

.block-platforms-browsers .browsers-grid-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ds-space-2, 8px);
  padding: var(--ds-space-4, 16px);
  background: var(--scheme-card-bg);
  border: 1px solid var(--ds-rule, var(--scheme-rule));
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  height: 100%;
  min-height: 100px;
  transition: transform 200ms var(--ds-ease-out, ease-out),
              box-shadow 200ms var(--ds-ease-out, ease-out),
              border-color 150ms var(--ds-ease-out, ease-out),
              color 150ms var(--ds-ease-out, ease-out);
  cursor: default;
}

.block-platforms-browsers .browsers-grid-tile.is-clickable { cursor: pointer; }

/* WAVE3-F06 2026-05-08: hover state was setting `color: var(--hover-token,
   var(--ds-cta))` on the tile root which propagated orange to the label.
   The browsers-grid-label is 16px+700w so 4.5 is required for AA Body —
   orange-on-cream is only 3.26 (audit §6.2). Drop the color: from the
   hover root and let the label keep --scheme-fg; only the border tints. */
.block-platforms-browsers .browsers-grid-link:hover .browsers-grid-tile,
.block-platforms-browsers .browsers-grid-link:focus-visible .browsers-grid-tile,
.block-platforms-browsers .browsers-grid-tile.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md, 0 8px 20px rgba(0,0,0,0.08));
  border-color: color-mix(in srgb, var(--hover-token, var(--ds-cta)) 35%, transparent);
}

.block-platforms-browsers .platforms-browsers-browser-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--icon-size, 32px);
  max-height: 32px;
  min-height: var(--icon-size, 32px);
  width: 100%;
  margin: 0 auto var(--ds-space-2, 8px);
}

.block-platforms-browsers .platforms-browsers-browser-icon svg,
.block-platforms-browsers .platforms-browsers-browser-icon img {
  max-height: 32px;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Greyscale-by-default for browsers grid */
.block-platforms-browsers .browsers-grid.is-greyscale .platforms-browsers-browser-icon svg,
.block-platforms-browsers .browsers-grid.is-greyscale .platforms-browsers-browser-icon img {
  filter: grayscale(100%) opacity(0.65);
  transition: filter 200ms var(--ds-ease-out, ease-out);
}

.block-platforms-browsers .browsers-grid.is-greyscale .browsers-grid-link:hover .platforms-browsers-browser-icon svg,
.block-platforms-browsers .browsers-grid.is-greyscale .browsers-grid-link:hover .platforms-browsers-browser-icon img,
.block-platforms-browsers .browsers-grid.is-greyscale .browsers-grid-link:focus-visible .platforms-browsers-browser-icon svg,
.block-platforms-browsers .browsers-grid.is-greyscale .browsers-grid-link:focus-visible .platforms-browsers-browser-icon img,
.block-platforms-browsers .browsers-grid.is-greyscale .browsers-grid-tile.is-clickable:hover .platforms-browsers-browser-icon svg,
.block-platforms-browsers .browsers-grid.is-greyscale .browsers-grid-tile.is-clickable:hover .platforms-browsers-browser-icon img {
  filter: grayscale(0%) opacity(1);
}

/* SENIOR-T7 2026-05-07: browsers-grid label bumped to ≥16px and
   line-height tightened for senior readers. */
.block-platforms-browsers .browsers-grid-label {
  display: block;
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: var(--ds-fs-body-sm, 1rem);
  color: var(--scheme-fg);
  line-height: 1.3;
  margin-top: var(--ds-space-1, 4px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .block-platforms-browsers .browsers-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: var(--ds-space-3, 12px);
  }
}

@media (max-width: 600px) {
  /* SWEEP-B3 2026-05-08: pin minmax(120px,…) on the browsers-grid mobile
     fallback too — adjacent text labels (Apple/Android/Windows/Linux)
     paired with logos demand ≥120px tile width per the senior-readable
     icon-with-label pattern. Was minmax(0,1fr) which let tiles collapse
     under crowded labels. */
  .block-platforms-browsers .browsers-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: var(--ds-space-2, 8px);
  }
  .block-platforms-browsers .platforms-row {
    gap: var(--ds-space-3, 12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-platforms-browsers .browsers-grid-tile,
  .block-platforms-browsers .platforms-browsers-platform-icon svg,
  .block-platforms-browsers .platforms-browsers-platform-icon img,
  .block-platforms-browsers .platforms-browsers-browser-icon svg,
  .block-platforms-browsers .platforms-browsers-browser-icon img {
    animation: none !important;
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════
   WAVE-10: "Where to find us" review-platforms mode
   Tile grid with rating + count + click-through, Schema.org compatible.
   ═════════════════════════════════════════════════════════════════ */

.block-platforms-browsers.pb-mode-review_platforms .review-platforms-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--ds-cols-desktop, 4), minmax(150px, 1fr));
  gap: var(--ds-space-4, 16px);
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-item { list-style: none; }

.block-platforms-browsers.pb-mode-review_platforms .review-platform-link {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
  border-radius: var(--ds-radius-lg, 16px);
  height: 100%;
  min-height: 44px;
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-link:focus-visible {
  outline: 2px solid var(--hover-token, var(--ds-cta));
  outline-offset: 3px;
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: var(--ds-space-4, 16px) var(--ds-space-3, 12px);
  background: var(--scheme-card-bg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-lg, 16px);
  box-shadow: var(--ds-shadow-sm);
  height: 100%;
  min-height: 168px;
  transition: transform 200ms var(--ds-ease-out, ease-out),
              box-shadow 200ms var(--ds-ease-out, ease-out),
              border-color 150ms var(--ds-ease-out, ease-out);
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-link:hover .review-platform-tile,
.block-platforms-browsers.pb-mode-review_platforms .review-platform-link:focus-visible .review-platform-tile {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-md, 0 8px 22px rgba(0,0,0,0.10));
  border-color: color-mix(in srgb, var(--hover-token, var(--ds-cta)) 35%, transparent);
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
  margin-bottom: 4px;
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-icon svg,
.block-platforms-browsers.pb-mode-review_platforms .review-platform-icon img {
  max-height: 40px;
  max-width: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* WAVE3-F06 2026-05-08: pin color #fff (audit §6.3 — was --scheme-fg
   resolving to ink on light schemes). Pattern C scheme override below
   handles the orange-on-orange collapse on .scheme-accent. */
.block-platforms-browsers.pb-mode-review_platforms .review-platform-icon-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ds-cta);
  color: #fff;
  font-family: var(--ds-font-display, var(--ds-font-heading));
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: var(--ds-shadow-sm);
}

/* SENIOR-T7 2026-05-07: name label bumped to ≥16px so platform name
   functions as the canonical adjacent text label for the logo. */
.block-platforms-browsers.pb-mode-review_platforms .review-platform-name {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm, 1rem);
  font-weight: 700;
  color: var(--scheme-fg);
  line-height: 1.3;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--ds-cta);
  margin-top: 2px;
}

/* WAVE3-F06 2026-05-08: empty stars were --scheme-rule (~12% opacity ink)
   = ~1.2:1 (audit §6.5). Bump to fg-mute for ≥3:1 icon contrast. */
.block-platforms-browsers.pb-mode-review_platforms .review-platform-star.is-empty {
  color: var(--scheme-fg-mute);
}

/* SENIOR-T7 2026-05-07: rating numerals bumped to 1.25rem (20px) for
   visibility; max & count meta bumped from 0.78rem (12px) to ds-fs-eyebrow
   (14px) — still small but at least readable. Contrast also bumped from
   fg-mute to fg-soft. */
.block-platforms-browsers.pb-mode-review_platforms .review-platform-rating {
  font-family: var(--ds-font-display, var(--ds-font-heading));
  font-size: var(--ds-fs-body-lg);
  font-weight: 800;
  color: var(--scheme-fg);
  letter-spacing: 0.01em;
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-rating-max {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow, 0.875rem);
  font-weight: 500;
  color: var(--scheme-fg-soft);
  margin-left: 1px;
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-count {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow, 0.875rem);
  color: var(--scheme-fg-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* SENIOR-T7 2026-05-07: "Verified" badge bumped from 0.7rem (11px) to
   ds-fs-eyebrow (14px) so older readers can decode the trust signal. */
/* WAVE3-F06 2026-05-08: BROWSER-AUDIT FIX — badge color was
   var(--scheme-fg, #fff) which resolved to ink on light schemes →
   ink-on-moss = 2.73:1 (failed AA in 3 places per browser audit).
   Pin color to #fff so the verified pill always reads light-on-moss
   (~5.4:1, AA pass). Pattern C scheme override below handles
   moss-on-moss on .scheme-trust. */
.block-platforms-browsers.pb-mode-review_platforms .review-platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 10px;
  background: var(--ds-trust);
  color: #fff;
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.block-platforms-browsers.pb-mode-review_platforms .review-platform-badge svg {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .block-platforms-browsers.pb-mode-review_platforms .review-platforms-grid {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}

@media (max-width: 600px) {
  /* SENIOR-T7 2026-05-07: enforce 120px tile minimum so logos never
     shrink to "noise" — adjacent text label still readable. Per AARP. */
  .block-platforms-browsers.pb-mode-review_platforms .review-platforms-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: var(--ds-space-3, 12px);
  }
  .block-platforms-browsers.pb-mode-review_platforms .review-platform-tile {
    min-height: 168px;
    padding: var(--ds-space-3, 12px);
  }
  /* SENIOR-T7: name stays ≥1rem (16px) on mobile too — was 0.85rem. */
  .block-platforms-browsers.pb-mode-review_platforms .review-platform-name {
    font-size: var(--ds-fs-body-sm, 1rem);
  }
  /* BUG-T7 2026-05-07: bottom-margin reservation so the sticky mobile CTA
     bar (Call now / Get a free quote, fixed at viewport bottom) does not
     overlay the last row of review-platform tiles. ~96px clears the
     53px buttons plus the bar's vertical padding.
     SWEEP-B3 2026-05-08: switched 96px hardcode → token contract
     (--ds-sticky-cta-clearance, fallback 96px) so desktop auto-zeroes
     and any future bar resize propagates without a CSS edit. */
  .block-platforms-browsers.pb-mode-review_platforms .review-platforms-grid {
    margin-bottom: var(--ds-sticky-cta-clearance, 96px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .block-platforms-browsers.pb-mode-review_platforms .review-platform-tile {
    transition: none !important;
  }
  .block-platforms-browsers.pb-mode-review_platforms .review-platform-link:hover .review-platform-tile,
  .block-platforms-browsers.pb-mode-review_platforms .review-platform-link:focus-visible .review-platform-tile {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   WAVE3-F06 2026-05-08 — Pattern C scheme-scoped overrides + fallbacks
   Targets audit T7 §6.1, §6.3, §6.4.
   ───────────────────────────────────────────────────────────────── */

/* Tile bg fallback chain — partials without .scheme-* ancestor (audit §6.1). */
.block-platforms-browsers .browsers-grid-tile,
.block-platforms-browsers.pb-mode-review_platforms .review-platform-tile {
  background: var(--scheme-card-bg, var(--scheme-bg, var(--ds-paper)));
}

/* Initials circle on .scheme-accent — orange-on-orange. Inverse-swap. */
.scheme-accent .block-platforms-browsers.pb-mode-review_platforms .review-platform-icon-initials {
  background: #fff;
  color: var(--ds-cta);
}

/* Verified badge on .scheme-trust — moss-on-moss. Inverse-swap. */
.scheme-trust .block-platforms-browsers.pb-mode-review_platforms .review-platform-badge {
  background: #fff;
  color: var(--ds-trust);
}