/* ─────────────────────────────────────────────────────────────────
   Block: Platforms & Browsers — platform icons row + browser tiles grid.

   The template uses inline `style="background-color: ..."` for per-tile
   brand color tints — those pass through. We wrap each tile in a
   token-driven chrome (rule line + shadow) and standardize icon sizing.
   ───────────────────────────────────────────────────────────────── */

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

/* Platform icon row (top) */
.block-platforms-browsers .platforms-browsers-platform-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  margin: 0 var(--ds-space-1);
  vertical-align: middle;
}

.block-platforms-browsers .platforms-browsers-platform-icon svg,
.block-platforms-browsers .has-svg svg {
  max-width: 100%;
  max-height: 100%;
}

/* Browser tile grid */
.block-platforms-browsers .platforms-browsers-browser-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--ds-space-2);
}

.block-platforms-browsers .col-lg-3 .rounded {
  border: 1px solid var(--ds-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-md);
  padding: var(--ds-space-4) !important;
  transition: transform var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}

.block-platforms-browsers .col-lg-3 .rounded:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-lg);
}

.block-platforms-browsers .col-lg-3 strong {
  display: block;
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: var(--ds-fs-body-sm);
  color: var(--scheme-fg);
  margin-top: var(--ds-space-2);
}