/* Client logo carousel card [ddc_clients] (inc/theme-clients.php). Built 1 Oct 2026. Tokens only;
   loads only where the shortcode renders. White tiles (most client logos only exist on white),
   six / four / two across, whole tiles only, on the site carousel. */
/* Inside a shell the carousel sits on the shell's own rail (the site carousel adds its own gutter for cards placed outside one). */
.ddc-sc.carousel.carousel--clients { padding-inline: 0; }
.ddc-sc .clients { list-style: none; margin: 0; padding: 0; }
.ddc-sc .clients .client {
  display: grid; place-items: center; aspect-ratio: 1;
  width: calc((100% - 5 * var(--gap-20)) / 6); padding: var(--gap-10);
  background: var(--white); border-radius: var(--r-panel); overflow: hidden;
}
.ddc-sc .client img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ddc-sc .client__link { display: grid; place-items: center; width: 100%; height: 100%; }
.ddc-sc .client__link:focus-visible { outline: var(--mark-w) solid var(--ddc-purple); outline-offset: calc(var(--gap-4) * -1); }
@media (max-width: 1024px) { .ddc-sc .clients .client { width: calc((100% - 3 * var(--gap-20)) / 4); } }
@media (max-width: 640px) { .ddc-sc .clients .client { width: calc((100% - var(--gap-20)) / 2); } }

/* Gallery layout [ddc_clients layout="grid"] (Our Work, Jet 8 Oct 2026): the whole set, six / four / two
   across. Jet's logos are 4:3 on white, so the tiles are too. */
.ddc-sc.clients--grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-20);
  list-style: none; margin: 0; padding: 0;
}
.ddc-sc.clients--grid .client {
  display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--gap-10);
  background: var(--white); border-radius: var(--r-panel); overflow: hidden;
}
@media (max-width: 1024px) { .ddc-sc.clients--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ddc-sc.clients--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mono at rest, the logo's own colours on hover or keyboard focus (Jet, 8 Oct 2026: "as in your first demo").
   Touch screens have no hover, so phones and tablets show colour all the time. */
@media (hover: hover) {
  .ddc-sc .client img { filter: grayscale(1); opacity: 0.7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .ddc-sc .client:hover img, .ddc-sc .client:focus-within img { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ddc-sc .client img { transition: none; } }

/* 12 Oct 2026: the Our Work gallery as a Pro Loop Grid (loop item "DDC Client Logo"). Pro's grid owns the
   six / four / two columns; these rules carry the tile over. The V4 image sits in its own wrapper, so the
   wrapper fills the tile and the logo is contained inside it. */
.clients-grid .client { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: var(--gap-10); background: var(--white); border-radius: var(--r-panel); overflow: hidden; }
.clients-grid .client > * { display: grid; place-items: center; width: 100%; height: 100%; }
.clients-grid .client img { display: block; width: 100%; height: 100%; object-fit: contain; }
.clients-grid .client a { display: grid; place-items: center; width: 100%; height: 100%; }
.clients-grid .client a:focus-visible { outline: var(--mark-w) solid var(--ddc-purple); outline-offset: calc(var(--gap-4) * -1); }
@media (hover: hover) {
  .clients-grid .client img { filter: grayscale(1); opacity: 0.7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  .clients-grid .client:hover img, .clients-grid .client:focus-within img { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .clients-grid .client img { transition: none; } }