/* Polybius: glass-black, columnar MathiasPS-style Homepage dashboard */
/* Inspired by https://pastebin.com/4JcGD3XE (MathiasPS, 2026) */

/* Keep the photographic background prominent without sacrificing legibility. */
body { scrollbar-width: none; }
body::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .container { max-width: 100vw !important; width: min(84%, 1720px) !important; }
}

.services-group { margin-bottom: 20px; }
.services-list.flex.flex-col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}
.services-list.flex.flex-col .service { grid-column: span 1; min-width: 0; }
.services-list.flex.flex-col .service > div { height: 100%; }

.service-title { align-items: center !important; }
.service-icon { width: 40px !important; height: 40px !important; }
.service-icon img { width: 27px !important; height: 27px !important; object-fit: contain; }

.service-card {
  background-color: rgba(0, 0, 0, .34) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background-color .18s ease, border-color .18s ease !important;
}
.service-card:hover {
  background-color: rgba(0, 0, 0, .60) !important;
  border-color: rgba(255, 255, 255, .20) !important;
}
.service-container .service-block {
  background-color: rgba(255, 255, 255, .035) !important;
}
/* Keep small link cards balanced without interfering with widget cards. */
.service-card:not(:has(.service-container)) { justify-content: center; }

@media (min-width: 768px) {
  #layout-groups {
    display: block !important;
    column-count: 3;
    column-gap: 18px;
  }
  .services-group {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .services-list.flex.flex-col { grid-template-columns: repeat(20, minmax(0, 1fr)); }
  .services-list.flex.flex-col .service { grid-column: span 20; }
  .services-list.flex.flex-col .service[id^="col-1-2"] { grid-column: span 10; }
}
@media (min-width: 768px) and (max-width: 1180px) {
  .container { width: 96% !important; }
  #layout-groups { column-count: 2; column-gap: 14px; }
}
@media (max-width: 767px) {
  .services-group { margin-bottom: 18px; }
  .services-list.flex.flex-col { gap: .5rem; }
}