/* ─────────────────────────────────────────────────────────────────
   Block: Platform Browsers — platform/browser tile grid.

   Each browser tile gets a soft chrome from --ds-rule and shadow-md.
   The template uses inline `style="background-color: ..."` per-tile;
   we let those pass through (author-controlled brand color tints) but
   wrap them in a token-driven chrome.
   ───────────────────────────────────────────────────────────────── */

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

.block-platform-browsers .col-12 {
  text-align: center;
  margin-bottom: var(--ds-space-5);
}

.block-platform-browsers .col-12 svg {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0 var(--ds-space-1);
  vertical-align: middle;
}

/* Browser tiles */
.block-platform-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;
  text-align: center;
  transition: transform var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}

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

.block-platform-browsers .col-lg-3 .rounded svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--ds-space-2);
  display: block;
}

.block-platform-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);
}