/* Status-page layout */

.status-page {
  display: grid;
  place-items: center;
  text-align: center;
}

.status-page main {
  width: 100%;
  margin: auto;
}

/*
 * Service icon row.
 * Change gap to adjust space between icons.
 * Change padding to adjust space around the entire row.
 */
.service-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: min(100%, 564px);
  gap: 20px;
  margin: 0 auto;
  padding: 40px;
  overflow-x: visible;
  list-style: none;
}

/* Change both 64px values below if you want larger or smaller icons. */
.service-card {
  display: flex;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
}

.service-card a {
  display: block;
  line-height: 0;
}

.service-card img {
  width: 64px;
  height: 64px;
  border-radius: 0.55rem;
  object-fit: contain;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Offline services become dark and grayscale. */
.service-card.is-offline img {
  filter: grayscale(1) brightness(0.45);
  opacity: 0.55;
}

.magic {
  margin: 0;
  font-size: 0.8rem;
}

.last-updated {
  margin: 1.25rem 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* On phones, wrap icons onto new centered rows instead of scrolling sideways. */
@media (max-width: 768px) {
  .service-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: min(100%, 256px);
    margin: 0 auto;
    padding: 40px 12px;
    overflow-x: visible;
  }
}

/*
 * Optional Organizr/iframe layout.
 * Enable it with: /status/?layout=single-row
 */
.status-page.single-row {
  display: block;
  min-height: 0;
}

.status-page.single-row main {
  width: max-content;
  min-width: 100%;
}

.status-page.single-row .service-grid {
  flex-wrap: nowrap;
  justify-content: center;
  width: max-content;
  min-width: 100%;
  max-width: none;
  overflow-x: visible;
}