/* ==========================================================================
   catalog.css — каталог предприятий (T60, DESIGN-FORMS.md §4/§9/§10).
   Подключается content/companies_list.tpl.php и companies_item.tpl.php.
   Цвета, радиусы и тени — только токены tokens.css (D17).
   ========================================================================== */

/* --- Шапка списка: заголовок + кнопка «Добавить компанию» (T73, этап 4) --- */

.m-chead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.m-chead h1 {
  margin: 0;
  font-family: var(--font-head); /* T76: заголовки — Onest 600 */
  font-weight: 600;
}

/* Кнопка .m-addbtn — общая с главной (base.css): пилюля §7, 44px */

/* --- Ряд категорий над списком: пилюли-чипы -------------------------------- */

.m-body .content_categories {
  padding: 0;
  margin: 4px 0 16px;
  /* T75 этап 6: ядро рисует .gui-panel светло-голубой панелью (#F4F8FD,
     рамка #B8D6FB) — в тёмной теме это белое пятно справа от чипов.
     Ряд рубрик живёт на фоне страницы, без панели. */
  background: transparent;
  border: 0;
  color: var(--ink);
  clear: none;
}

.m-body .content_categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.m-body .content_categories li {
  display: flex;
  float: none;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: inherit;
  background: none;
}

.m-body .content_categories li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;              /* цель касания (T21) */
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.m-body .content_categories li a:hover {
  color: var(--accent-ink);
  box-shadow: var(--shadow-float);
  text-decoration: none;
}

/* Счётчик записей в рубрике (T70 этап 4: показываем только непустые) */
.m-body .content_categories li a .m-cats__count {
  margin-left: 6px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--muted-strong);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 17px;
}

/* --- Сетка карточек --------------------------------------------------------- */

.m-cgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 12px;
  margin: 16px 0 0;
}

@media (min-width: 640px) {
  .m-cgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .m-cgrid { grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
}

.m-ccard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card-nested);          /* T76: стекло внутри панели */
  border: 1px solid var(--card-nested-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--ink);
}

.m-ccard__photo {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--photo);
}

.m-ccard__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-ccard__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--hero);
  color: var(--accent-ink);
}

.m-ccard__ph-icon {
  width: 48px;
  height: 48px;
}

.m-ccard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 16px;
}

.m-ccard__cat {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
}

.m-ccard__title {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}

.m-ccard__title:hover {
  color: var(--accent-ink);
}

.m-ccard__addr {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.m-ccard__addr svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.m-ccard__text {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* --- Рейтинг в карточке списка (только чтение) ------------------------------ */

.m-crating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.m-crating__stars {
  display: inline-flex;
  gap: 2px;
}

.m-crating__star {
  width: 16px;
  height: 18px;
}

.m-crating__star polygon {
  fill: var(--star-empty);
}

.m-crating__stars[data-stars] .m-crating__star polygon {
  fill: var(--accent);
}

.m-crating__stars[data-stars="1"] .m-crating__star:nth-child(1) ~ .m-crating__star polygon,
.m-crating__stars[data-stars="2"] .m-crating__star:nth-child(2) ~ .m-crating__star polygon,
.m-crating__stars[data-stars="3"] .m-crating__star:nth-child(3) ~ .m-crating__star polygon,
.m-crating__stars[data-stars="4"] .m-crating__star:nth-child(4) ~ .m-crating__star polygon {
  fill: var(--star-empty);
}

.m-crating__value {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.m-crating__count {
  color: var(--muted);
  font-size: 12px;
}

/* --- Блок рейтинга на странице компании (widget_stars) --------------------- */

.m-body .m-rating {
  display: block;
  margin: 14px 0 6px;
}

.m-rating__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.m-body .m-rating .stars {
  display: inline-flex;
  gap: 0;
}

/* Касание не меньше 44×44 px (SPEC §11): сам svg — цель, звезда внутри
   уменьшена масштабом, чтобы ряд оставался компактным (5 × 44 = 220 px). */
.m-body .m-rating .stars .star {
  width: 44px;
  height: 44px;
  margin: 0;
}

.m-body .m-rating .stars .star polygon {
  fill: var(--star-empty);
  transform: scale(0.55);
  transform-origin: 50% 50%;
  transition: fill 0.15s ease, opacity 0.15s ease;
}

.m-body .m-rating .stars[data-stars] .star polygon {
  fill: var(--accent);
}

.m-body .m-rating .stars[data-stars="1"] .star:nth-child(1) ~ .star polygon,
.m-body .m-rating .stars[data-stars="2"] .star:nth-child(2) ~ .star polygon,
.m-body .m-rating .stars[data-stars="3"] .star:nth-child(3) ~ .star polygon,
.m-body .m-rating .stars[data-stars="4"] .star:nth-child(4) ~ .star polygon {
  fill: var(--star-empty);
}

.m-body .m-rating .stars.is_enabled {
  cursor: pointer;
}

.m-body .m-rating .stars.is_enabled:hover .star polygon {
  fill: var(--accent) !important;
  opacity: 0.75;
}

.m-body .m-rating .stars.is_enabled .star:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.m-rating__value {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
}

.m-rating__count {
  color: var(--muted);
  font-size: 13px;
}

.m-rating__hint {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.m-rating__label {
  float: none;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

/* В инфобаре страницы компании рейтинг не должен сжиматься в узкую колонку.
   Стоковый theme-content.css:433 красит .bi_rating в #ecf0f1 без токенов —
   в тёмной теме полоса остаётся светлой (T75, этап 4.2): перекрашиваем
   токенами, радиус и поля плашки C3. */
.m-body .content_item .info_bar .bar_item.bi_rating {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 14px 0 6px;
  padding: 12px 18px;
  background: var(--band);
  border-radius: 20px;
}

/* Главное фото записи (страница компании, T75 4.2): радиус карточек C3 —
   у стоковой темы углы прямые */
.m-body .content_item .field.f_photo img {
  border-radius: var(--r-card);
}

/* ==========================================================================
   T73, этап 5: галерея компании (поле images, view_as_slider=0 — в шаблоне
   нет slick). Ряд миниатюр пресета normal, клик — просмотрщик icms.modal
   (nyroModal) с пресетом big; оригинал в HTML не отдаётся.
   ========================================================================== */

.m-body .field.f_gallery .value { margin: 0; }

.m-body .field.f_gallery .value > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m-body .field.f_gallery .value a.img-gallery {
  display: block;
  flex: 0 0 auto;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  text-decoration: none;
}

.m-body .field.f_gallery .value a.img-gallery img {
  display: block;
  height: 120px;
  width: auto;
  object-fit: cover;
}

@media (max-width: 480px) {
  .m-body .field.f_gallery .value a.img-gallery img { height: 96px; }
}

.m-body .field.f_gallery .value a.img-gallery:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===========================================================================
   T74 (этап 4): действия модератора в списке /moderation для Каталога.
   Тот же компонент, что в board.css (.m-modactions, T56b): ядро кладёт
   кнопки в list_actions_menu (content/hooks/moderation_list.php), список
   companies рендерит companies_list.tpl.php, где меню не выводилось.
   Оформление и токены совпадают с board.css; в обычном списке блок
   не появляется (меню пустое).
   =========================================================================== */

.m-modactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sep);
  background: var(--tint);
  border-radius: var(--r-tile) var(--r-tile) 0 0;
}

.m-modactions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--btn-reg-border);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--btn-reg-from), var(--btn-reg-to));
  box-shadow: var(--btn-reg-shadow);
  color: var(--btn-reg-ink);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.m-modactions__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--btn-reg-shadow-hover);
  text-decoration: none;
}

.m-modactions__btn:active {
  transform: none;
  box-shadow: var(--btn-reg-shadow-active);
}

.m-modactions__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.m-modactions__btn.accept {
  border-color: transparent;
  background: var(--orange-fill);
  box-shadow: var(--orange-shadow);
  color: var(--orange-ink);
}

.m-modactions__btn.accept:hover {
  box-shadow: var(--orange-shadow), 0 10px 22px rgba(42,30,18,.18);
}

.m-modactions__btn.accept:active {
  box-shadow: var(--orange-shadow-press);
}

.m-modactions__btn.delete,
.m-modactions__btn.refuse {
  border-color: var(--danger);
  background: var(--danger-bg);
  box-shadow: none;
  color: var(--danger-ink);
}

@media (max-width: 420px) {
  .m-modactions { padding: 8px; }
  .m-modactions__btn { flex: 1 1 calc(50% - 6px); }
}