/* clients-grid.css - Representative Clients page: a 4x3 grid of client logos
   that flip (whole-box 3D flip) in sets of three, sequentially, every 5s. */

.cg-main {
  background-color: #ffffff;
  color: #5a5a5a;
}

/* ============ GRID ============ */
.cg-grid-wrap {
  background-color: var(--iplg-bg-gray);
  margin: 0;
  padding: 5.5rem 1.5rem;
}

.cg-grid {
  max-width: 1040px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* Each tile is a 3D flip container. The .cg-tile__inner holds two stacked
   faces; rotating it 180deg swaps which face is visible. */
.cg-tile {
  height: 122px;
  perspective: 1100px;
}

.cg-tile__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-style: preserve-3d;
}

/* Applied momentarily by JS to reset a tile to its rest state after a flip
   without animating the reset. */
.cg-tile__inner.cg-no-anim {
  transition: none;
}

.cg-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(11, 51, 110, 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(11, 51, 110, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cg-face--back {
  transform: rotateY(180deg);
}

.cg-face img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.cg-tile:hover .cg-face {
  border-color: rgba(11, 51, 110, 0.18);
  box-shadow: 0 8px 20px rgba(11, 51, 110, 0.1);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
  .cg-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
  .cg-grid-wrap { margin: 0; padding: 4rem 1rem; }
  .cg-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .cg-tile { height: 96px; }
  .cg-face { padding: 12px 16px; }
  /* Phones show a 2x3 grid (first six tiles); the rest are hidden. */
  .cg-tile:nth-child(n+7) { display: none; }
}

/* Honor reduced-motion: keep the logo swap but drop the spin. */
@media (prefers-reduced-motion: reduce) {
  .cg-tile__inner { transition: none; }
}