/**
 * Companies Flex Grid — стили сетки компаний.
 *
 * Шорткод: [ca_ms_display_companies_flex]
 * Источник: modules/display/ca_ms_display_companies_flex.php
 *
 * @package CA_Display
 * @version 2.5.0
 */

/* ==========================================================================
   1. CSS-переменные и Grid-контейнер
   ========================================================================== */
.ca-cf { --cols: 3; --cols-md: 2; --cols-sm: 1; --gap: 24px; --box: 150px; --logo-h: 64px; }
.ca-cf { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }

/* ==========================================================================
   2. Элемент / Карточка
   ========================================================================== */
.ca-cf__item { list-style: none; margin: 0; padding: 0; }
.ca-cf__card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; border: 1px solid rgba(0,0,0,.06); border-radius: 6px; background: #fff; transition: filter .2s ease; }

/* ==========================================================================
   3. Медиа-блок (логотип)
   ========================================================================== */
.ca-cf__media { display: flex; align-items: center; justify-content: center; width: var(--box); height: var(--box); padding: 0 !important; overflow: hidden; }
.ca-cf__logo { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 !important; }
.ca-cf__logo--gray { filter: grayscale(100%); opacity: .95; transition: filter .2s ease, opacity .2s ease; }
.ca-cf__card:hover .ca-cf__logo--gray { filter: none; opacity: 1; }

/* ==========================================================================
   4. Название и ссылки
   ========================================================================== */
.ca-cf__name { margin-top: 10px; font-size: 14px; line-height: 1.35; color: #111; }
.ca-cf a { text-decoration: none; color: inherit; }

/* ==========================================================================
   5. Responsive
   ========================================================================== */
@media (max-width: 1024px) {
.ca-cf { grid-template-columns: repeat(var(--cols-md), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.ca-cf { grid-template-columns: repeat(var(--cols-sm), minmax(0, 1fr)); }
}