/*
 * Partners Slider (acf/partners). Moved out of the Health Club homepage's page CSS on
 * 1 Oct 2026, where it was scoped to body.home; here it works on any page.
 * Logo heights: each row's Height field sets --logo-h (desktop); phones scale it down.
 */
.block-partners {
  padding-top: calc(var(--grid-gap) * 2.5);
  padding-bottom: calc(var(--grid-gap) * 3);
}
.block-partners__title {
  text-transform: uppercase;
  text-align: center;
  color: var(--color-dark);
  margin: 0;
  padding-bottom: calc(var(--grid-gap) * 2);
}
.block-partners__marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.block-partners__track {
  display: flex;
  width: max-content;
  animation: block-partners-marquee var(--partners-speed, 34s) linear infinite;
}
.block-partners__set {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.block-partners__set img {
  --logo-h: 38px;
  height: var(--logo-h);
  width: auto;
  max-width: none;
  margin: 0 3.6rem;
  flex: 0 0 auto;
}
@keyframes block-partners-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .block-partners__track { animation: none; }
}
@media (max-width: 767px) {
  /* 38px logos were 26px on phones: same ratio for every logo */
  .block-partners__set img {
    height: calc(var(--logo-h) * 0.684);
    margin: 0 2rem;
  }
}

/* --- Credit line (Layout: Credit line) ------------------------------------
   Reads as the foot of the block above, not a section of its own. Spacing is
   on the 24px grid, measured on Home 2 (1 Oct 2026): link above -> rule 2
   gaps, rule -> label 1, label -> logos 1, logos -> the 180 Quarter images 3.
   The block above ends flush with its link, so the 2 gaps are all ours. Below,
   the next block adds 42px of its own (its .guten-block padding plus the
   grid's offset), so ours is 72 - 42 = 30px. */
.block-partners--credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--grid-gap);
  padding-top: calc(var(--grid-gap) * 2);
  padding-bottom: calc(var(--grid-gap) * 1.25);
}
.block-partners--credit::before {
  content: "";
  width: 64px;
  border-top: 1px solid var(--color-dark);
}
.block-partners__label {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
.block-partners__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--grid-gap) 56px;
}
.block-partners__logos img {
  --logo-h: 24px;
  height: var(--logo-h);
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  .block-partners__logos {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    gap: var(--grid-gap) 28px;
  }
  /* 24px logos are 19px on phones */
  .block-partners__logos img {
    height: calc(var(--logo-h) * 0.79);
  }
}

/* --- Over an image (Layout: Over an image) --------------------------------
   The band sits in the page container, the same width as the hero slider.
   The logos spread across it the way the original row did (Thom, 1 Oct 2026):
   space-between inside a 72px inset, at about 1.4x the credit-line size.
   Spacing: link above -> band 2 gaps; band -> next block's images 3 gaps (the
   next block brings 42px, so ours is 30px, as for the credit line). */
.block-partners--image {
  padding-top: calc(var(--grid-gap) * 2);
  padding-bottom: calc(var(--grid-gap) * 1.25);
}
.block-partners__band {
  position: relative;
  width: 100%; /* without it, min-height x aspect-ratio widens the band past the container */
  aspect-ratio: 3 / 1;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.block-partners__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.block-partners__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 51, 72, 0.58); /* --color-dark, so the wash is the site ink */
}
.block-partners__over {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--grid-gap) * 1.75);
  padding: 0 calc(var(--grid-gap) * 3);
}
.block-partners__over .block-partners__label {
  color: #fff;
  font-size: 17px;
}
.block-partners__over .block-partners__logos {
  width: 100%;
  justify-content: space-between;
  gap: var(--grid-gap) 40px;
}
.block-partners__over .block-partners__logos img {
  height: calc(var(--logo-h) * 1.4);
  filter: brightness(0) invert(1);
}
@media (max-width: 1100px) and (min-width: 768px) {
  .block-partners__over { padding: 0 calc(var(--grid-gap) * 1.5); }
  .block-partners__over .block-partners__logos img { height: calc(var(--logo-h) * 1.1); }
}
@media (max-width: 767px) {
  .block-partners__band {
    aspect-ratio: auto;
    min-height: 0;
    padding: calc(var(--grid-gap) * 3) 0;
  }
  .block-partners__over {
    padding: 0 var(--grid-gap);
  }
  .block-partners__over .block-partners__logos {
    justify-content: center;
    gap: calc(var(--grid-gap) * 1.25) 32px;
  }
  .block-partners__over .block-partners__logos img {
    height: calc(var(--logo-h) * 0.85);
  }
}