/* Client-logo lattice used by the blog archive CTA. The component is bundled
   directly with the theme; it no longer depends on the source-site asset sync. */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  overflow: hidden;
  padding-bottom: 1px;
  --edge-x: 40px;
  --edge-y: 20px;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--edge-x), #000 calc(100% - var(--edge-x)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--edge-y), #000 calc(100% - var(--edge-y)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 var(--edge-x), #000 calc(100% - var(--edge-x)), transparent 100%),
    linear-gradient(180deg, transparent 0, #000 var(--edge-y), #000 calc(100% - var(--edge-y)), transparent 100%);
  mask-composite: intersect;
}
.client, .clients-cta {
  box-shadow: 1px 0 0 var(--card-border), 0 1px 0 var(--card-border);
}
.client {
  display: grid;
  place-items: center;
  min-height: 106px;
  padding: var(--s-2) var(--s-3);
}
.client img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .82;
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.client:hover img { opacity: 1; transform: scale(1.05); }
.clients-cta {
  grid-column: 3 / span 2;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px;
  text-align: center;
}
.clients-cta p {
  font-size: var(--fs-h5);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-h5);
  max-width: 340px;
}
@media (max-width: 940px) {
  .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clients-cta { grid-column: 1 / -1; grid-row: auto; min-height: 180px; }
}
@media (max-width: 680px) {
  .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --edge-x: 20px; }
  .client { min-height: 96px; padding: var(--s-2); }
  .client img { max-height: 50px; }
  .clients-cta { padding: var(--s-4) var(--s-3); min-height: 170px; }
}
@media (max-width: 400px) {
  .clients-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); --edge-x: 12px; }
  .client { min-height: 86px; }
  .client img { max-height: 44px; }
}