/* Egne tillegg til Webflow-eksporten.
   Holdes i egen fil så mastok.webflow.css forblir uendret generert kode. */

/* --- Sponsorlogoene -----------------------------------------------------
   Webflow la hver logo i en w-col-4 og kappet den bare på høyde
   (.sponsorbilde { max-height: 120px }). Da bestemmer hver logos eget
   bildeformat størrelsen: brede logoer som Nordea traff
   breddegrensen og ble dominerende, mens kvadratiske og høye ble små.
   Særlig tydelig på mobil, der w-col-4 blir 100 % bredde.

   Her får hver logo i stedet en boks av samme størrelse, og bildet
   skaleres inn i den med object-fit: contain. Da blir de optisk like
   store uansett format, og de flyter i flere per rad på mobil. */

.clients-section .w-dyn-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.clients-section .w-dyn-item {
  float: none;
  width: auto;
  padding: 0;
}

.clients-section .client-logo {
  box-sizing: border-box;
  width: 190px;
  height: 96px;
  margin: 4px 12px;
  padding: 10px;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease;
}

.clients-section .client-logo:hover,
.clients-section .client-logo:focus-visible {
  opacity: 1;
  filter: grayscale(0);
}

.clients-section .sponsorbilde {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 767px) {
  .clients-section .client-logo {
    width: 132px;
    height: 76px;
    margin: 2px 6px;
    padding: 8px;
  }
}

/* Berøringsskjermer har ingen hover, så der vises logoene i farge med en gang. */
@media (hover: none) {
  .clients-section .client-logo {
    opacity: .85;
    filter: grayscale(0);
  }
}

/* Webflows tomme plassholder-element ligger igjen i markupen til JS-en
   erstatter den. Uten dette får den en tom boks på lik linje med logoene. */
.clients-section .w-dyn-item:has(.w-dyn-bind-empty) {
  display: none;
}