/* ============================================================
   "Naši klienti" (client logos) — editorial trust wall.
   Overrides the legacy .clients--* rules in main.css (compiled from
   _mm.scss ~L2101) which rendered each tile at 140px with no max-height
   on the image, making wide logos dominate narrow ones.
   Loaded from partials/references-logos.php so it cascades after main.css.
   ============================================================ */

/* ---------- Section wrapper ---------- */
.clients {
  position: relative;
  z-index: 4;
  padding: 72px 0 64px;
  background: #ffffff;
}

/* Kill inherited typography padding from _typography.scss (h3 { padding: 0.67em 0 }) */
.clients :where(h2, h3, h4, p) {
  padding: 0;
  margin: 0;
  width: auto;
}

/* Full-bleed container – aligns with the project's global .container
   (max-width: 1920px, horizontal padding: 2vw) so the client wall
   stretches edge-to-edge on wide monitors instead of being boxed in. */
.clients .container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 2vw;
}

/* ---------- Title ----------
   Left-aligned (title + green accent bar) to match every other section
   header on the site — we never center section titles. */
.clients--title {
  text-align: left;
  margin: 0 0 48px;
  padding: 0;
  color: var(--color-primaryDark, #212121);
  font-family: var(--font-stack);
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.clients--title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 14px 0 0;
  background: var(--color-green-3, #209c94);
  border-radius: 2px;
}

/* ---------- Grid ---------- */
.clients .clients--grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  align-items: stretch;
  justify-items: stretch;
}

/* ---------- Tile ---------- */
.clients .clients--item {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  background: #ffffff;
  border: 1px solid rgba(23, 50, 65, 0.07);
  border-radius: 12px;
  box-sizing: border-box;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease, background 0.25s ease;
}

.clients .clients--item:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(32, 156, 148, 0.32);
  box-shadow: 0 10px 24px -14px rgba(23, 50, 65, 0.25);
}

/* ---------- Logo image ----------
   Hard cap on both axes so every logo reads at the same visual weight,
   regardless of its native aspect ratio. */
.clients .clients--item img {
  display: block;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.6);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.clients .clients--item:hover img {
  filter: grayscale(0) opacity(1);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Large tablet – 4 across */
@media (max-width: 1100px) {
  .clients {
    padding: 56px 0 48px;
  }
  .clients .clients--grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .clients .clients--item {
    height: 118px;
    padding: 18px 24px;
  }
  .clients .clients--item img {
    max-height: 70px;
  }
  .clients--title {
    font-size: 2.2rem;
    margin-bottom: 36px;
  }
}

/* Small tablet / large phone – 3 across */
@media (max-width: 768px) {
  .clients {
    padding: 44px 0 40px;
  }
  .clients .container {
    padding: 0 16px;
  }
  .clients .clients--grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .clients .clients--item {
    height: 100px;
    padding: 14px 18px;
  }
  .clients .clients--item img {
    max-height: 58px;
  }
  .clients--title {
    font-size: 2rem;
    margin-bottom: 28px;
  }
}

/* Phone – 2 across */
@media (max-width: 480px) {
  .clients .clients--grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .clients .clients--item {
    height: 92px;
  }
  .clients .clients--item img {
    max-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients .clients--item,
  .clients .clients--item img {
    transition: none;
  }
  .clients .clients--item:hover {
    transform: none;
  }
}