/* ============================================================
   КАТАЛОГ НАПРАВЛЕНИЙ (главная), 25.09.2026
   Раскладка по каталогу madbrains.ru: вкладки, сетка в 4 доли,
   крупная плитка 2×2, обычные плитки, акцентная в конце ряда.

   Картинка — фон плитки целиком: предмет стоит в правом верхнем
   углу и уходит за край, низ-лево пустые под текст. Поэтому текст
   прижат к низу, и картинке не нужна отдельная обойма.
   ============================================================ */

.cg__tabs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:clamp(18px, 1.8vw, 28px);
}
.cg__tab{
  border:0; cursor:pointer;
  padding:10px 16px;
  border-radius:4px;              /* с --r-inner (до 15px) при высоте 36px выходила «таблетка» (28.09.2026) */
  background:var(--surface-2);
  color:var(--fg);
  font:500 clamp(14px, .95vw, 16px)/1 var(--font);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.cg__tab:hover{ background:#e9e9f0; }
.cg__tab[aria-selected="true"]{ background:var(--accent-1); color:#fff; }
.cg__tab:focus-visible{ outline:2px solid var(--accent-1); outline-offset:2px; }

.cg__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(clamp(210px, 15vw, 280px), auto);
  gap:clamp(10px, .9vw, 16px);
}
.cg__grid[hidden]{ display:none; }

/* общая часть всех плиток */
.cg__big, .cg__card, .cg__acc{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-width:0;
  border-radius:var(--r-card);
  background-repeat:no-repeat;
  background-position:right top;
  background-size:cover;
  text-decoration:none; color:inherit;
  overflow:hidden;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), background-size .5s var(--ease);
}
.cg__big:focus-visible, .cg__card:focus-visible, .cg__acc:focus-visible{
  outline:2px solid var(--accent-1); outline-offset:3px;
}

/* --- крупная плитка --- */
.cg__big{
  grid-column:span 2; grid-row:span 2;
  padding:clamp(24px, 2.4vw, 40px);
  background-color:var(--accent-1);
  color:#fff;
}
.cg__big-txt{ display:block; max-width:34rem; position:relative; z-index:2; }
.cg__arr{ z-index:2; }

/* оживление: ролик ставит catalog.js ровно на место картинки, проявляется при наведении */
.cg__motion{
  position:absolute; z-index:0;
  object-fit:fill;
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
  /* ролик ниже плитки не достаёт — низ растушёван, стыка с картинкой не видно */
  -webkit-mask-image:linear-gradient(#000 78%, transparent);
          mask-image:linear-gradient(#000 78%, transparent);
}
.cg__motion.is-on{ opacity:1; }
.cg__big-name{
  display:block;
  font:600 clamp(28px, 2.6vw, 44px)/1.08 var(--font);
  letter-spacing:-.025em;
}
.cg__big-sub{
  display:block; margin-top:10px;
  font-size:clamp(15px, 1.1vw, 18px); line-height:1.45;
  color:rgba(255,255,255,.88);
}

/* --- обычная плитка: белая, стекло на белом --- */
/* --bgs / --bgs-h: размер картинки в покое и при наведении. По умолчанию cover → 112%;
   у картинки, где главное внизу предмета (кнопка с заявкой у сайтов), задают меньше —
   предмет поднимается над заголовком. Фон картинок белый, края не видны. */
.cg__card{
  padding:clamp(18px, 1.5vw, 26px);
  background-color:var(--surface);
  background-size:var(--bgs, cover);
  box-shadow:var(--shadow-card);
}
/* белая дымка снизу: если стекло опустилось к тексту, текст всё равно читается */
.cg__card::before{
  content:""; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(to top, #fff 38%, rgba(255,255,255,0));
  pointer-events:none;
}
.cg__name, .cg__sub{ position:relative; }
.cg__name{
  display:block; max-width:85%;
  font:560 clamp(17px, 1.2vw, 20px)/1.25 var(--font);
  letter-spacing:-.01em;
}
.cg__sub{
  display:block; margin-top:6px;
  font-size:clamp(13.5px, .9vw, 15px); line-height:1.45;
  color:var(--fg-mute);
}

/* --- акцентная плитка: страница направления / не нашли задачу --- */
.cg__acc{
  border:0; cursor:pointer; text-align:left; font:inherit;
  padding:clamp(20px, 1.8vw, 30px);
  background:var(--accent-1);
  color:#fff;
}
.cg__acc--3{ grid-column:span 3; }
.cg__acc--4{ grid-column:span 4; }
/* акцентная плитка с картинкой: предмет справа по центру, текст слева на том же синем.
   Строго ПОСЛЕ .cg__acc: его `background` сбрасывает размер и положение картинки.
   Сама картинка задана в style — сильнее, чем `background` в правиле наведения,
   поэтому на hover не пропадает; затемнение даём тенью изнутри. */
/* Плитка низкая и широкая (~4.5:1): картинку не растягиваем по ширине (пазл режется
   сверху и снизу), а даём высоту 150% и прижимаем вправо. Слева её край уходит в фон
   плитки — фон взят с самой картинки (#186bab), иначе на стыке видна граница. */
.cg__acc--img{
  background-color:#186bab;
  background-size:auto 136%;
  background-position:right 6% center;
  background-repeat:no-repeat;
}
@media (hover:hover) and (pointer:fine){
  .cg__acc--img:hover{ box-shadow:inset 0 0 0 999px rgba(4,20,40,.12); }
}
.cg__acc-name{
  display:block;
  font:600 clamp(24px, 2vw, 34px)/1.1 var(--font);
  letter-spacing:-.02em;
}
.cg__acc-sub{ display:block; margin-top:8px; font-size:clamp(14px, 1vw, 16px); color:rgba(255,255,255,.85); }

/* стрелка в углу у крупной и акцентной плиток */
.cg__arr{
  position:absolute; top:clamp(20px, 2vw, 32px); left:clamp(24px, 2.4vw, 40px);
  width:clamp(30px, 2.4vw, 42px); aspect-ratio:1;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s var(--ease);
}
.cg__acc .cg__arr{ left:clamp(20px, 1.8vw, 30px); }

/* наведение: карточка поднимается, стекло чуть приближается.
   Только там, где есть курсор, — на телефоне «залипший» hover мешает. */
@media (hover:hover) and (pointer:fine){
  .cg__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); background-size:var(--bgs-h, 112%); }
  .cg__big:hover{ background-size:108%; }
  /* у ожившей плитки картинка не приближается: ролик совмещён с ней один в один */
  .cg__big[data-motion-webm]:hover{ background-size:cover; }
  .cg__big:hover .cg__arr, .cg__acc:hover .cg__arr{ transform:translate(3px,-3px); }
  .cg__acc:hover{ background:var(--accent-dark); }
}
@media (prefers-reduced-motion:reduce){
  .cg__big, .cg__card, .cg__acc, .cg__arr{ transition:none; }
}