/* Per-page overrides for the "What our clients say about us" section on
 * index.html and companies.html.
 *
 * #testemonials is a mount point that the hashed page bundle fills in at
 * runtime with a splide carousel. The three cards are now written as static
 * markup in each page instead, so the splide container classes are gone and
 * the cards sit in a plain grid (.testemonial-grid) that needs its own layout.
 *
 * The card styling itself (.testemonial, .name-position, .highlight) still
 * comes from index-*.css / companies-*.css, which carry the same card rules.
 * Only the parts that assumed a carousel slide and a ".type" label are
 * re-placed here: the logo cell, the row track, and the name/position block.
 *
 * Card layout: logo + name/position always form one block at the very top of
 * the card, then the separator, then the quote. The cards are stretched to a
 * common height by the grid, and auto rows would otherwise absorb that spare
 * height (align-content defaults to stretch), which pushed the header and the
 * quote down the shorter cards - hence the explicit `align-content: start`
 * and the explicit column/row placement of every cell.
 *
 * All three logo files are now tightly cropped and dark-on-transparent, so
 * they share one size and need no per-logo variants.
 *
 * This file is hand-written and not part of the hashed build, so it is layered
 * over the page bundles' CSS rather than edited into it.
 */
#testemonials > .testemonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 8px;
}

#testemonials .testemonial {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 15px auto;
  align-content: start;
  row-gap: 0;
}

#testemonials .testemonial > .logo {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 120px;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
}

#testemonials .testemonial > .name-position {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-top: 0;
  padding-left: 20px;
}

#testemonials .testemonial > .highlight {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
}

#testemonials .testemonial > p {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
}

@media only screen and (min-width: 1024px) {
  #testemonials > .testemonial-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 0;
  }

  #testemonials .testemonial > .logo {
    width: 140px;
    max-height: 64px;
  }
}