/* Shared dynamic "Våra lösningar" mega menu — same visuals as products-2 PLP nav */
#dynamic-solutions-menu {
  width: 100%;
}

/* #dynamic-solutions-menu bär webflows w-layout-grid + grid_3-col och är alltså
   SJÄLV ett rutnät, men solutions-menu.js injicerar BARA en child
   (.solutions-menu-shell). Den hamnade då i en av tre celler (1/3 bredd) och
   kvävde de riktiga kolumnerna. Låt den enda barnet spänna över alla spår så
   shell fyller hela ytan; de faktiska kolumnerna byggs i .solutions-menu-grid. */
#dynamic-solutions-menu > * {
  grid-column: 1 / -1;
}

.solutions-menu-shell {
  width: 100%;
  max-width: 980px;
}

.solutions-menu-grid {
  display: grid;
  /* minmax(0,1fr) (ej 220px) så de tre kolumnerna alltid krymper och fyller
     li-ytan i stället för att kräva 716px och spilla över "Försvara"-kortet. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Vid 4–6 kategorier bildas en implicit rad 2. Ge implicita rader en
     förutsägbar, innehållsstyrd höjd (auto) och packa raderna mot toppen
     (align-content: start) så rad 2 lägger sig direkt under rad 1 i stället
     för att sträckas/förskjutas ner i promo-kortet. Separat row-gap ger en
     tydlig, jämn lucka mellan raderna; column-gap behåller 28px som förut. */
  grid-auto-rows: auto;
  column-gap: 28px;
  row-gap: 32px;
  align-items: start;
  align-content: start;
}

.solutions-menu-col {
  min-width: 0;
  /* Top-justera varje kategori-cell i sin radtrack så cellerna i en rad börjar
     i samma topplinje (redundant med align-items:start men explicit/robust). */
  align-self: start;
}

.solutions-menu-heading-link {
  text-decoration: none;
  color: inherit;
  display: block;
  margin-bottom: 14px;
}

.solutions-menu-heading {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(17, 34, 69, 0.55);
  margin-bottom: 0;
}

.solutions-menu-root-desc {
  font-size: 0.9rem;
  color: rgba(17, 34, 69, 0.65);
  margin-bottom: 10px;
  line-height: 1.45;
}

.solutions-menu-sub-list {
  display: grid;
  gap: 0;
}

.solutions-menu-sub-link {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(28, 53, 107, 0.08);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.solutions-menu-sub-link:hover {
  opacity: 0.92;
  transform: translateX(2px);
}

.solutions-menu-sub-link:last-child {
  border-bottom: 0;
}

.solutions-menu-sub-title {
  font-weight: 700;
  color: #1c356b;
  font-size: 1rem;
  line-height: 1.35;
  word-break: break-word;
}

.solutions-menu-sub-desc {
  margin-top: 4px;
  color: #5e6b85;
  line-height: 1.5;
  font-size: 0.95rem;
  word-break: break-word;
}

.solutions-menu-footer {
  margin-top: 22px;
}

.solutions-menu-footer-link {
  color: #1c356b;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.solutions-menu-footer-link:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .solutions-menu-shell {
    max-width: 100%;
  }

  .solutions-menu-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ----------------------------------------------------------------------------
   Panel-positionering för "Våra lösningar"-megamenyn (desktop, >= 992px).

   Megamenyns panel är en Webflow-dropdown (.mega-nav_dropdown-list.w-dropdown-list).
   När den öppnas sätter webflow.js .w--open (display:block), men nav-regeln
   .nav_dropdown-menu.w-dropdown{position:relative} + webflows egna left:0;right:0
   + min-width:100% gjorde att panelen kollapsade/försköts (~151px bred) och la
   "Försvara dig mot vattenskador"-kortet ovanpå kolumnerna.

   Den flytande pillen (.nav_container.w-nav) är IDENTISK i facelift.css och
   nav.css: position:fixed, backdrop-filter (som skapar containing block för
   fixed-barn), width: min(1280px, 100vw - 48px), alltid viewport-centrerad,
   1px border. Därför fungerar SAMMA formel på alla megameny-sidor (index,
   products-2, faq ...) och regeln bor här i den delade solutions-menu.css.

   right: min(149px, 50vw - 515px) centrerar den 980px breda panelen:
   - under 1328px vw: pillens sidomarginal är konstant 24px -> 50vw - 515px
     (515 = 24 gutter + 1 border + 490 halva panelen).
   - vid/över 1328px: pillen kapas till 1280px och centreras -> konstant 149px.
   De två uttrycken möts exakt vid vw = 1328. Ingen max-width behövs (980px får
   plats centrerad ända ner till 992px); min-width:0 slår ut webflows min-width:100%.
   ------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .nav_container.w-nav .mega-nav_dropdown-list.w--open {
    position: fixed;
    left: auto;
    right: min(149px, calc(50vw - 515px));
    transform: none;
    width: 980px;
    min-width: 0;
  }
}