/**
 * Member Logo Wall
 *
 * Desktop (>=1200px) : 6 columns x 4 rows
 * Tablet  (768-1199) : 4 columns x 5 rows
 * Phone   (<768px)   : 2 columns x 6 rows
 *
 * Stat cells are placed explicitly per breakpoint. Logo cells auto-flow
 * around them with grid-auto-flow: dense, so no index arithmetic is
 * needed when the column count changes.
 *
 * The wall renders the desktop cell count at every size and clips the
 * surplus with a fixed row template plus overflow:hidden. Clipped cells
 * stay in the DOM as real member links.
 *
 * @package creaunited_2020
 */
.crea-logos__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}
@media (min-width: 1200px) {
  .crea-logos__inner {
    padding: 5rem 2rem;
  }
}
.crea-logos__headline {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.28;
  color: var(--crea-ink);
  max-width: 20em;
}
@media (min-width: 1200px) {
  .crea-logos__headline {
    font-size: 1.875rem;
  }
}
.crea-logos__sub {
  margin: 0 0 2rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--crea-ink-soft);
  max-width: 38em;
}
.crea-logos {
  /* ---------------------------------------------------------------
   * Grid. The 1px gap over a hairline background draws the dividers,
   * which is what gives mismatched logos a common frame.
   *
   * position: relative is load-bearing. The cycling script measures
   * which cells fall inside the clipped area, and without a
   * positioning context here those measurements resolve against an
   * ancestor further up the page.
   * ------------------------------------------------------------ */
}
.crea-logos__wall {
  position: relative;
  display: grid;
  gap: 1px;
  background-color: var(--crea-rule);
  border: 1px solid var(--crea-rule);
  grid-auto-flow: row dense;
  overflow: hidden;
}
.crea-logos__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--crea-surface);
  padding: 0.75rem;
  text-align: center;
  overflow: hidden;
}
.crea-logos {
  /* ---------------------------------------------------------------
   * Logo normalization.
   *
   * Member-uploaded assets vary wildly in aspect ratio, canvas padding,
   * and source resolution. Every logo is fitted to the same box so a
   * wide wordmark and a narrow badge carry comparable optical weight.
   * ------------------------------------------------------------ */
}
.crea-logos__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 1rem 1.25rem;
  text-decoration: none;
}
.crea-logos .crea-logos__link:hover, .crea-logos .crea-logos__link:focus {
  text-decoration: none;
}
.crea-logos {
  /*
   * width/height 100% plus object-fit: contain makes every logo fill the
   * same optical box, scaling small source files UP as well as large ones
   * down. A max-width/max-height rule only ever shrinks, which is what
   * left narrow logos looking lost beside wide ones.
   */
}
.crea-logos__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.35s ease;
}
.crea-logos__cell--logo.is-fading .crea-logos__img {
  opacity: 0;
}
.crea-logos {
  /* ---------------------------------------------------------------
   * Stat cells
   * ------------------------------------------------------------ */
  /* Navy-on-white would vanish on the blue theme, so the stat cells get
   * their own token pair that flips with the section. */
}
.crea-logos__cell--stat {
  flex-direction: column;
  background-color: var(--crea-accent-surface);
  color: var(--crea-accent-ink);
}
.crea-logos__stat-num {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--crea-accent-ink);
}
.crea-logos__stat-label {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--crea-accent-ink);
  opacity: 0.8;
}
.crea-logos__stat-text {
  font-size: 1.125rem;
  line-height: 1.4;
  padding: 0 1rem;
}
.crea-logos {
  /* ---------------------------------------------------------------
   * Phone: 2 x 6
   * ------------------------------------------------------------ */
}
@media (max-width: 767.98px) {
  .crea-logos__wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, 156px);
  }
  .crea-logos__cell--firms {
    grid-column: 2;
    grid-row: 1;
  }
  .crea-logos__cell--groups {
    grid-column: 1;
    grid-row: 3;
  }
  .crea-logos__cell--wide {
    grid-column: 1/span 2;
    grid-row: 6;
  }
  .crea-logos__link {
    padding: 0.875rem 1rem;
  }
  .crea-logos__stat-num {
    font-size: 2rem;
  }
  .crea-logos__stat-text {
    font-size: 1rem;
  }
}
.crea-logos {
  /* ---------------------------------------------------------------
   * Tablet: 4 x 5
   * ------------------------------------------------------------ */
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .crea-logos__wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(5, 172px);
  }
  .crea-logos__cell--firms {
    grid-column: 2;
    grid-row: 1;
  }
  .crea-logos__cell--groups {
    grid-column: 4;
    grid-row: 3;
  }
  .crea-logos__cell--wide {
    grid-column: 2/span 2;
    grid-row: 5;
  }
}
.crea-logos {
  /* ---------------------------------------------------------------
   * Desktop: 6 x 4, the locked arrangement
   * ------------------------------------------------------------ */
}
@media (min-width: 1200px) {
  .crea-logos__wall {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(4, 188px);
  }
  .crea-logos__cell--firms {
    grid-column: 2;
    grid-row: 1;
  }
  .crea-logos__cell--groups {
    grid-column: 5;
    grid-row: 2;
  }
  .crea-logos__cell--wide {
    grid-column: 3/span 2;
    grid-row: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crea-logos__img {
    transition: none;
  }
}