/* ==========================================================================
   integrations.css - pages/integrations.html
   Figma frame "Integration" 448:4473 (1920 x 8059).
   ========================================================================== */

.hero--integrations::before {
  background-image: url("../assets/shapes/integrations-hero-band.svg");
}

.hero--integrations .hero__media {
  max-width: 1006px;
}

.workers .bleed-figure {
  max-width: 1814px;
  margin-inline: auto;
}

/* Provider marks sit in the same slot as an icon tile but keep their own
   colours, so they get a plain padded square rather than a tinted one. */
.provider-logo {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 90px;
  height: 96px;
  border-radius: 30px;
  background-color: var(--c-surface-alt);
}

.provider-logo img {
  width: auto;
  height: auto;
  max-width: 52px;
  max-height: 52px;
}

@media (max-width: 768px) {
  .provider-logo {
    width: 72px;
    height: 77px;
    border-radius: 24px;
  }

  .provider-logo img {
    max-width: 40px;
    max-height: 40px;
  }
}

/* ==========================================================================
   Provider grid: three cards, then two
   Trello came out, leaving five cards in a three-column grid. Left alone the
   trailing row sits in columns one and two with a hole on the right, which
   reads as a missing card. Six tracks with each card spanning two lets the
   last row start half a card in, so the two centre under the three.
   Scoped to .providers: .spine__grid is shared by eleven pages.
   ========================================================================== */

.providers .spine__grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.providers .spine__grid > li {
  grid-column: span 2;
}

.providers .spine__grid > li:nth-child(4) {
  grid-column: 2 / span 2;
}

/* Two up, then one: the orphan centres for the same reason. */
@media (max-width: 1024px) {
  .providers .spine__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .providers .spine__grid > li:nth-child(4) {
    grid-column: span 2;
  }

  .providers .spine__grid > li:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@media (max-width: 768px) {
  .providers .spine__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .providers .spine__grid > li,
  .providers .spine__grid > li:nth-child(4),
  .providers .spine__grid > li:nth-child(5) {
    grid-column: auto;
  }
}