/**
 * cgp-logos.css
 *
 * Shared client logo strip — used on:
 *   Home page (pages 5 EL / 14014 EN)
 *   Business page EN (2810)
 *   Business page EL (2767)
 *
 * Class: .cgp-client-logos-strip
 * Replaces: .cgp-home-logos-strip, .cgp-biz-logos-strip
 *
 * Responsive breakpoints:
 *   Default  — 6-col, 160px fixed width
 *   ≤900px   — 4-col, 160px fixed width
 *   ≤640px   — 3-col, logo crops to 3:2 (see 1.1.0), full opacity
 *   ≤480px   — 2-col
 *
 * Changelog v1.1.0 (2026-11-02):
 *   — Phones: logos looked tiny. Every logo file is a 500×500 square with
 *     wide white margins around a horizontal mark, and 1.0.0 capped them at
 *     72px tall below 640px, so the mark itself was drawn about 30px tall.
 *     Below 640px each logo now fills its column (up to 180px) in a 3:2 box
 *     with object-fit: cover, which trims part of the empty top and bottom
 *     margin. The marks render about twice as large. Checked against the 12
 *     current files: every mark sits inside the middle two thirds of its
 *     square (Pet City is the tallest, ~19–81%), so nothing is cut.
 *     A new logo must follow the same layout (square, mark centred within
 *     the middle two thirds) or it will be cropped on phones.
 *   — Phones: full opacity (there is no hover on touch screens).
 *   — Desktop and tablet unchanged.
 *
 * @package    RCH_Theme
 * @version    1.1.0
 * @date       2026-11-02
 */

.cgp-client-logos-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px 24px;
  align-items: center;
  justify-items: center;
}

.cgp-client-logos-strip img {
  width: 160px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.22s ease;
}

.cgp-client-logos-strip img:hover {
  opacity: 1;
}

@media (max-width: 900px) {
  .cgp-client-logos-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) {
  .cgp-client-logos-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
  }

  .cgp-client-logos-strip img {
    width: 100%;
    max-width: 180px;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .cgp-client-logos-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
  }
}