/* MoboPing services board (locations page). */
.svc-head { margin-block: 44px 16px; }
.svc-head h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; }
.svc-head p { margin: 0; color: var(--muted); font-size: 14px; }
.svc-board { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.svc-banner { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-block-end: 1px solid var(--line); font-weight: 700; }
.svc-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(180px, 2.4fr) auto; gap: 8px 20px; align-items: center; padding: 16px 20px; border-block-end: 1px solid var(--line); }
.svc-row:last-child { border-block-end: 0; }
.svc-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.svc-name b { font-size: 15px; }
.svc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12.5px; margin-block-start: 4px; }
.svc-strip { display: flex; gap: 2px; height: 28px; align-items: stretch; direction: ltr; min-width: 0; }
.svc-strip i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--green-2); opacity: .9; }
.svc-strip i.degraded { background: var(--yellow); }
.svc-strip i.down { background: var(--bad); }
.svc-strip i.none { background: var(--surface-2); opacity: 1; }
.svc-strip-legend { display: flex; direction: ltr; justify-content: space-between; margin-block-start: 5px; font-size: 11px; color: var(--muted); }
.svc-up { display: flex; gap: 18px; text-align: center; }
.svc-up div { min-width: 64px; }
.svc-up b { display: block; font-size: 17px; direction: ltr; }
.svc-up span { font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) {
  .svc-row { grid-template-columns: 1fr; }
  .svc-up { justify-content: flex-start; text-align: start; }
  .svc-banner, .svc-row { padding-inline: 14px; }
}