/* wave3: плитки каталога, все ширины */

/* Раскрывающиеся подкатегории у плиток .ct («Каталог специалистов»).
   Разметка (home.tpl): .ct(div, position:relative, задан в figma-home.css
   как flex-контейнер) > .ct__link(a, картинка+название, ведёт в категорию)
   + .ct__chevron(button, раскрывает/закрывает панель) + .ct__panel(div,
   абсолютно спозиционированная панель со списком подкатегорий).
   Поведение по макету (Меню каталога, 631:11995 / 623:12114, characters
   проверены — не путать с унаследованными именами слоёв "Посмотреть сайт
   визитку"):
   1. Заголовок (.ct__link) кликабелен и ведёт на страницу категории.
   2. Шеврон (.ct__chevron) — отдельное действие, раскрывает список.
   3. У верхних 3 "широких" карточек (.cw, бизнес без подкатегорий)
      шеврона в разметке нет вообще — там просто ссылка, ничего делать не
      нужно.
   4. Раскрытая панель ложится ПОВЕРХ сетки (position:absolute), не
      раздвигая соседние карточки — см. .ct__panel ниже.
   5. Одновременно открыта только одна панель — обеспечивает JS
      (см. <script> в конце home.tpl), не CSS.
   Открытое/закрытое состояние читается из aria-expanded на кнопке и
   атрибута hidden на панели, чтобы не плодить отдельный js-класс. */

body .fg .ct{
  position:relative;
  align-items:stretch;
  /* figma-home.css задаёт .ct overflow:hidden (для скругления углов
     карточки) — этим же правилом обрезалась бы абсолютно
     спозиционированная .ct__panel. Возвращаем visible, скругление
     угла обеспечиваем на самой .ct__link (border-radius+overflow:hidden
     там же, где обрезается фото). */
  overflow:visible;
  border-radius:6px;
  /* Соседние .ct — все position:relative с z-index:auto, красятся в
     порядке DOM (поздние поверх ранних). Без явного z-index раскрытая
     панель у карточки НЕ из последней строки красилась бы ПОД плитками
     следующей строки. Держим базовый z-index:1 у всех .ct (не рвёт
     сетку), а у открытой карточки JS добавляет .ct--open, поднимающий
     её (и панель) выше соседей. */
  z-index:1;
}
body .fg .ct.ct--open{
  z-index:30;
}
/* .ct__link: flex row (img + title). gap:0 — dissolve фото в фон
   не должен рваться пустым зазором 18px. */
body .fg .ct__link{
  display:flex;align-items:center;gap:0;
  flex:1 1 auto;min-width:0;
  position:relative;
  overflow:hidden;
  border-radius:6px;
  min-height:150px;
  color:inherit;text-decoration:none;
}

/* Фото «уходит в даль» вправо (Figma Card Catalog): не жёсткий crop,
   а длинный soft dissolve в фон карточки #F5F6F8.
   1) mask-image — альфа img падает к правому краю
   2) ::after — заливка цветом карточки поверх правой половины
      (на контрастных фото mask один не читается).
   Было 55%→94% — слишком поздно, визуально «резало». */
body .fg .ct__link img{
  position:relative;
  z-index:0;
  flex:0 0 200px;
  width:200px !important;
  height:150px !important;
  max-width:none;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(
    90deg,
    #000 0%,
    #000 38%,
    rgba(0,0,0,.72) 58%,
    rgba(0,0,0,.32) 76%,
    rgba(0,0,0,.08) 90%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    #000 0%,
    #000 38%,
    rgba(0,0,0,.72) 58%,
    rgba(0,0,0,.32) 76%,
    rgba(0,0,0,.08) 90%,
    transparent 100%
  );
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}
/* Слой «в даль»: тот же #F5F6F8, что фон .ct */
body .fg .ct__link::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:200px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent 28%,
    rgba(245,246,248,.2) 48%,
    rgba(245,246,248,.55) 68%,
    rgba(245,246,248,.88) 86%,
    #F5F6F8 100%
  );
}
/* Title: flex-grow + поверх fade; font 17px — запас до шеврона */
body .fg .ct__link span{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  min-width:0;
  padding:0 12px 0 10px;
  font-size:17px;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Кнопка-шеврон: реальный аккордеон-триггер, а не декоративный
   псевдоэлемент. Хит-таргет доведён до 44×44 (требование доступности),
   визуальная стрелка внутри — компактнее, как в макете. */
body .fg .ct__chevron{
  flex:0 0 auto;
  width:44px;height:44px;
  margin:auto 4px auto -4px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  z-index:2;
}
body .fg .ct__chevron:hover,
body .fg .ct__chevron:focus-visible{
  background:rgba(0,102,178,.1);
}
body .fg .ct__chevron:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
body .fg .ct__chevron::after{
  content:"";
  width:9px;height:9px;
  border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform:rotate(45deg);
  transition:transform .15s ease;
  pointer-events:none;
}
/* Открыто — стрелка смотрит вверх */
body .fg .ct__chevron[aria-expanded="true"]::after{
  transform:rotate(-135deg);
}

/* Панель подкатегорий — всплывает ПОВЕРХ сетки (макет: "Раскрытие
   подкатегории происходит поверх остального контента"), не раздвигая
   соседние карточки. Источник цветовой схемы: узел 623:12114
   ("Меню каталога" / Card Open, characters проверены) — заливка Block
   БЕЛАЯ (#FFFFFF), текст пунктов СИНИЙ (var(--blue)); это подтверждено
   и живым скриншотом эталона (/tmp/menu_bar.png): белая панель, синий
   текст, а не наоборот. */
body .fg .ct__panel{
  position:absolute;
  top:100%;left:0;right:0;
  margin-top:6px;
  background:#fff;
  border-radius:6px;
  box-shadow:0 16px 32px rgba(16,42,95,.22);
  padding:6px 0;
  z-index:10;
  max-height:min(70vh,420px);
  overflow-y:auto;
}
body .fg .ct__panel[hidden]{display:none}

body .fg .ct__panel-list a{
  display:flex;align-items:center;
  min-height:44px;
  padding:6px 20px;
  color:var(--blue);
  font-size:16px;
  line-height:1.3;
}
body .fg .ct__panel-list a:hover,
body .fg .ct__panel-list a:focus-visible{
  background:var(--soft);
}
body .fg .ct__panel-list a:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:-2px;
}

@media (max-width:480px){
  /* На мобильной панель уже, а шрифт названия (20px из figma-home.css)
     был расчитан без учёта места под шеврон — из-за этого нормальные
     двухсловные заголовки начинали ломаться посреди слова. Слегка
     уменьшаем шрифт, шеврон чуть компактнее (но не менее 44px хит-таргета
     — уменьшаем только визуальный радиус кнопки, а не тап-зону). */
  body .fg .ct__link span{
    font-size:17px;
  }
  body .fg .ct__chevron{
    width:44px;height:44px;
  }
  body .fg .ct__panel{
    max-height:min(70vh,360px);
  }
}

/* Плитки каталога на узких экранах ломались в столбик из отдельных букв.
   Причина: сетка держала ДВЕ колонки вплоть до 480px, а картинка внутри
   плитки зафиксирована `flex:0 0 180px`. При ширине окна 500px карточка
   выходила 220px, из которых 180 забирала картинка — тексту оставалось ~40px,
   и заголовок «Здоровье и качество жизни» вставал вертикально (42×486).
   `min-width:0` на span не спасает: он разрешает сжатие, но место всё равно
   отдано фиксированной картинке. Переводим сетку в одну колонку до 767px —
   тогда карточка 460px и тексту достаётся ~250px. */
@media (max-width: 767px) {
	body .fg .cat__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}