/* assets/css/sections/platforms.css — 平台覆盖：一排几何化平台标识。
   刻意不使用任何第三方商标图形：每个标识都是同一套单线几何语言画出来的方框 + 首字，
   风格与全站图标一致，也不涉及商标使用许可问题。 */

.platforms-grid{
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.platform{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:24px 12px; background:var(--surface);
  transition:background-color .15s ease;
}
.platform:hover{ background:var(--surface-2); }
.platform-mark{
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line-dark); color:var(--ink);
  font-family:var(--serif); font-weight:900; font-size:19px; line-height:1;
}
.platform:hover .platform-mark{ border-color:var(--cinnabar); color:var(--cinnabar); }
.platform-name{ font-size:14px; font-weight:500; }
.platform-note{ font-size:12px; color:var(--muted); text-align:center; }

/* 平台下方的指引行 */
.platform-links{
  display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
}
.platform-links .btn-link + .btn-link{ margin-left:4px; }
.platform-links p{ font-size:13.5px; color:var(--muted); }

@media (max-width:1020px){
  .platforms-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:560px){
  .platforms-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}