/* Logos band. Mobile is a 402x618.567 flat frame, pad 60/40/60/40, gap 60,
   logos stacked vertically and centered. Desktop is 1440x336.375, 80px pad
   wrapping a 1280 content column that itself carries a further 40px inset
   around the row (nested lock-up frames); reproduced here as section
   padding + panel padding rather than the literal frame nesting.

   Each logo is a single-color (#333333) vector, so it's rendered as a CSS
   mask rather than an <img>, matching the header logo-mark pattern in
   site.css — an <img> can't inherit currentColor from the page. */

.logos {
  background-color: var(--off-white);
  padding-block: var(--space-60);
}

.logos__panel {
  padding: 0;
}

.logos__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.logos__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-60);
}

.logos__logo {
  display: block;
  background-color: var(--dozen-dark);
}

/* Per-logo mobile display sizes (402 board) and mask artwork. */
.logos__item--hca .logos__logo {
  width: 110px;
  height: 46px;
  -webkit-mask: url("../../img/logo-hca.svg") center / contain no-repeat;
  mask: url("../../img/logo-hca.svg") center / contain no-repeat;
}

.logos__item--integrity .logos__logo {
  width: 276px;
  height: 38px;
  -webkit-mask: url("../../img/logo-integrity-music.svg") center / contain
    no-repeat;
  mask: url("../../img/logo-integrity-music.svg") center / contain no-repeat;
}

.logos__item--elephant .logos__logo {
  width: 230px;
  height: 51px;
  -webkit-mask: url("../../img/logo-elephant-sanctuary.svg") center / contain
    no-repeat;
  mask: url("../../img/logo-elephant-sanctuary.svg") center / contain no-repeat;
}

.logos__item--bloomberg .logos__logo {
  width: 200px;
  height: 40px;
  -webkit-mask: url("../../img/logo-bloomberg.svg") center / contain no-repeat;
  mask: url("../../img/logo-bloomberg.svg") center / contain no-repeat;
}

.logos__item--wrios .logos__logo {
  width: 179px;
  height: 83px;
  -webkit-mask: url("../../img/logo-wrios.svg") center / contain no-repeat;
  mask: url("../../img/logo-wrios.svg") center / contain no-repeat;
}

.logos__item--closing-times .logos__logo {
  width: 200px;
  height: 43px;
  -webkit-mask: url("../../img/logo-closing-times.png") center / contain
    no-repeat;
  mask: url("../../img/logo-closing-times.png") center / contain no-repeat;
}

.logos__item--vertere .logos__logo {
  width: 200px;
  height: 32px;
  -webkit-mask: url("../../img/logo-vertere.png") center / contain no-repeat;
  mask: url("../../img/logo-vertere.png") center / contain no-repeat;
}

@media (min-width: 1024px) {
  .logos {
    padding-block: var(--space-80);
  }

  .logos__panel {
    padding: var(--space-40);
  }

  /* The row is the 1440 board scaled to the panel: each item's basis is its
     Figma width as a share of the 1200px row (hca 138, the rest 207.474),
     and space-between reproduces the four equal 58.0259px gaps. Everything
     lands on the exact board values at 1440 and compresses proportionally
     below it instead of overflowing. */
  .logos__list {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .logos__item {
    flex: 0 1 12%; /* re-balanced from 14.1% to fit seven logos in the row */
  }

  .logos__item--hca {
    flex-basis: 8%; /* re-balanced from 9.4% (hca lockup stays the narrowest) */
  }

  .logos__list .logos__logo {
    width: 100%;
  }

  /* Four of the five logos share the same 207.474 display width at 1440;
     only hca's lockup is narrower. */
  .logos__item--hca .logos__logo {
    height: 58px;
  }

  .logos__item--integrity .logos__logo {
    height: 29px;
  }

  .logos__item--elephant .logos__logo {
    height: 46px;
  }

  .logos__item--bloomberg .logos__logo {
    height: 42px;
  }

  .logos__item--wrios .logos__logo {
    height: 96px;
  }

  .logos__item--closing-times .logos__logo {
    height: 44px;
  }

  .logos__item--vertere .logos__logo {
    height: 34px;
  }
}