/* Simple homepage with photo background and masonry-style stacks */

:root {
  --home-bg-overlay: rgba(7, 10, 18, 0.42);
  --home-panel: rgba(15, 23, 42, 0.72);
  --home-panel-border: rgba(255, 255, 255, 0.10);
  --home-text-soft: rgba(226, 232, 240, 0.82);
  --home-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

html,
body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(var(--home-bg-overlay), var(--home-bg-overlay)),
    url("https://images.unsplash.com/photo-1671194671871-ea88d7d5b191?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") center center / cover fixed !important;
  color: #f8fafc;
}

#__next,
#page_wrapper,
main,
body > div {
  background: transparent !important;
}

#page_wrapper {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  scrollbar-gutter: stable;
}

#information-widgets,
#services,
#layout-groups,
#bookmarks {
  width: min(1120px, calc(100vw - 2rem)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep the header and widgets readable without heavy decoration */
#information-widgets,
#information-widgets-right,
#tabs,
#footer {
  color: #f8fafc;
}

#information-widgets {
  margin-bottom: 0.75rem;
}

.search-container form,
#quicklaunch input {
  background: rgba(15, 23, 42, 0.82) !important;
  border: 1px solid var(--home-panel-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--home-shadow);
}

.search-container form:focus-within,
#quicklaunch input:focus {
  border-color: rgba(255, 255, 255, 0.24) !important;
}

/* Service layout: masonry-style columns */
#services {
  display: block !important;
  column-count: 3;
  column-gap: 1rem;
  margin: 1rem auto 0 !important;
}

#layout-groups:has(.services-group) {
  display: block !important;
  column-count: 3;
  column-gap: 1rem;
}

#services > .services-group,
#layout-groups > .services-group {
  display: inline-block;
  width: 100%;
  margin: 0 0 1rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* Bookmarks stay simpler and can stack normally below */
#bookmarks {
  margin: 1rem 1rem 0;
}

.services-group,
.bookmark-group {
  background: var(--home-panel);
  border: 1px solid var(--home-panel-border);
  border-radius: 16px;
  box-shadow: var(--home-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.services-group > .flex,
.bookmark-group > .flex {
  padding: 0.75rem 0.75rem 0.25rem;
}

.services-group > .flex h2,
.group-title,
.bookmark-group > .flex h2 {
  color: #f8fafc;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.services-list,
.bookmark-list {
  padding: 0.5rem;
}

.service-card,
li.service > .flex {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.service-card:hover,
li.service > .flex:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.service-title,
.service-description {
  color: #f8fafc;
}

.service-description {
  color: var(--home-text-soft);
}

.service-card img,
li.service img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.service-block,
.widget-block {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 1280px) {
  #services,
  #layout-groups:has(.services-group) {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  #services,
  #layout-groups:has(.services-group) {
    column-count: 1;
  }
}