/* ============================================================
   КАТАЛОГ ПОДУСЛУГ НАПРАВЛЕНИЯ (28.09.2026)
   Сетка 3 колонки: первая подуслуга 2×2 с заливкой цвета направления,
   дальше белые карточки, последняя клетка — «Не нашли свою задачу?».
   Стекло в углу — картинка на белом (multiply), срезана краем.
   ============================================================ */
.dirc__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.2vw, 20px);
}
.dirc__card{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column;
  padding:clamp(22px, 2vw, 34px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.dirc__card--big{
  grid-column:span 2; grid-row:span 2;
  border-color:transparent;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), 0) 60%),
    linear-gradient(160deg, var(--accent-wash), #fff 70%);
}
/* multiply — на самой обёртке: у неё z-index, она сама контекст наложения,
   и смешивание на <img> внутри не доставало до фона карточки (белый прямоугольник) */
.dirc__art{
  position:absolute; z-index:-1; top:0; right:0;
  width:min(46%, 260px); aspect-ratio:3 / 2;
  pointer-events:none;
  mix-blend-mode:multiply;
}
/* у большой плитки картинка на всю правую половину — без пустоты посередине */
.dirc__card--big .dirc__art{ width:56%; height:100%; aspect-ratio:auto; }
.dirc__art img, .dirc__art .img-video{
  width:100%; height:100%; object-fit:cover; object-position:right top;
  transform-origin:80% 20%;
  transition:transform .6s var(--ease);
}
/* 29.09.2026: предметы стали узнаваемыми (assets/ai) — крупнее и живые:
   медленное покачивание у каждой карточки со своим сдвигом, на наведении — приближение */
.dirc__card:not(.dirc__card--big) .dirc__art{ width:min(72%, 340px); }
.dirc__art{ animation:dirc-float 7s ease-in-out infinite; animation-delay:calc(var(--i, 0) * -1.3s); }
@keyframes dirc-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }

.dirc__num{
  align-self:flex-start;
  padding:6px 10px; border-radius:3px;
  background:var(--accent-1); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.08em; font-variant-numeric:tabular-nums;
}
.dirc__name{
  margin:clamp(14px, 1.3vw, 22px) 0 0;
  max-width:18ch;
  font:650 clamp(19px, 1.45vw, 25px)/1.22 var(--font);
  letter-spacing:-.01em;
  color:var(--fg);
}
.dirc__card--big .dirc__name{ max-width:16ch; font-size:clamp(26px, 2.3vw, 40px); line-height:1.1; }
.dirc__name em{ font-style:normal; color:var(--accent-1); }
.dirc__sub{
  margin:10px 0 0; max-width:34ch;
  font-size:clamp(14px, .98vw, 15.5px); line-height:1.55; color:var(--fg-lead);
}
.dirc__card--big .dirc__sub{ max-width:38ch; font-size:clamp(15px, 1.1vw, 18px); }
.dirc__list{
  list-style:none; margin:clamp(16px, 1.6vw, 24px) 0 0; padding:0;
  display:grid; gap:8px;
}
/* текст большой плитки — левая половина, картинка — правая */
.dirc__card--big > :not(.dirc__art){ max-width:48%; }
.dirc__card--big .dirc__list{ gap:10px; margin-top:clamp(20px, 2vw, 32px); }
.dirc__list li{
  position:relative; padding-left:16px;
  font-size:clamp(13.5px, .92vw, 15px); line-height:1.5; color:var(--fg-lead);
}
.dirc__list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:6px; height:6px; border-radius:1px; background:var(--accent-1);
}
.dirc__go{
  align-self:flex-start;
  margin-top:clamp(18px, 1.8vw, 28px);
  padding:0; border:0; background:none; cursor:pointer;
  font:600 13px/1 var(--font); letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-1); text-decoration:none;
}
.dirc__card:not(.dirc__card--big) .dirc__go{ margin-top:auto; padding-top:clamp(18px, 1.8vw, 28px); }
.dirc__go span{ display:inline-block; transition:transform .25s var(--ease); }

.dirc__acc{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(200px, 15vw, 260px);
  padding:clamp(22px, 2vw, 34px);
  border:0; border-radius:var(--r-card);
  background:var(--accent-1); color:#fff;
  font:inherit; text-align:left; cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.dirc__acc-name{ font:650 clamp(20px, 1.6vw, 26px)/1.2 var(--font); }
.dirc__acc-sub{ margin-top:8px; font-size:clamp(14px, .98vw, 15.5px); line-height:1.5; color:rgba(255,255,255,.86); }
.dirc__acc-arr{
  position:absolute; top:clamp(20px, 1.8vw, 30px); left:clamp(22px, 2vw, 34px);
  width:32px; height:32px; background:#fff;
  -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.2' 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dirc__card:focus-within, .dirc__acc:focus-visible{ outline:2px solid var(--accent-1); outline-offset:3px; }

@media (hover:hover) and (pointer:fine){
  .dirc__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--accent-line); }
  .dirc__card:hover .dirc__go span{ transform:translateX(4px); }
  .dirc__card:hover .dirc__art img{ transform:scale(1.06); }
  .dirc__acc:hover{ background:var(--accent-dark); transform:translateY(-4px); }
}
@media (max-width: 1100px){
  .dirc__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dirc__card--big{ grid-column:span 2; grid-row:auto; }
  .dirc__card--big > :not(.dirc__art){ max-width:60%; }
}
@media (max-width: 640px){
  .dirc__grid{ grid-template-columns:minmax(0, 1fr); }
  .dirc__card--big{ grid-column:auto; }
  .dirc__card--big > :not(.dirc__art){ max-width:none; }
  .dirc__card--big .dirc__art{ width:60%; height:auto; aspect-ratio:3 / 2; opacity:.55; }
}
@media (prefers-reduced-motion:reduce){ .dirc__card, .dirc__acc, .dirc__go span, .dirc__art img{ transition:none; } .dirc__art{ animation:none; } }