/* ============================================================
   С КАКИМИ ЗАДАЧАМИ ПРИХОДЯТ (28.09.2026)
   Карточка = ситуация клиента крупно, под ней — что делаем мелко,
   тег направления сверху, стрелка в углу. Вся карточка — ссылка.
   ============================================================ */
.tasks__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.2vw, 20px);
}
.task{
  font:inherit; text-align:left; cursor:pointer;   /* карточка бывает и <button> (без ссылки — окно заявки) */
  position:relative;
  display:flex; flex-direction:column;
  min-height:clamp(220px, 16vw, 270px);
  padding:clamp(20px, 1.8vw, 30px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  text-decoration:none; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
/* плашка со сплошной заливкой, не «таблетка» — таблетки на сайте не делаем (28.09) */
.task__tag{
  align-self:flex-start;
  padding:6px 10px;
  font-size:12px; font-weight:600; letter-spacing:.06em;
  color:#fff;
  background:var(--accent-1);
  border-radius:3px;
}
.task__pain{
  margin:clamp(14px, 1.2vw, 20px) 0 0;
  font:560 clamp(17px, 1.3vw, 22px)/1.3 var(--font);
  letter-spacing:-.01em;
  color:var(--fg);
}
.task__fix{
  margin:auto 0 0;
  padding-top:clamp(14px, 1.2vw, 20px);
  padding-right:36px;               /* место под стрелку */
  font-size:clamp(14px, .98vw, 15.5px); line-height:1.5;
  color:var(--fg-lead);
}
.task__go{
  position:absolute; right:clamp(18px, 1.6vw, 26px); bottom:clamp(18px, 1.6vw, 26px);
  width:30px; height:30px; border-radius:50%;
  background:var(--accent-wash);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.task__go::after{
  content:""; position:absolute; inset:0;
  background:var(--accent-1);
  -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='M8 16 16 8M10 8h6v6'/%3E%3C/svg%3E") center/16px 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='M8 16 16 8M10 8h6v6'/%3E%3C/svg%3E") center/16px no-repeat;
}
.task:focus-visible{ outline:2px solid var(--accent-1); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){
  .task:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--accent-line); }
  .task:hover .task__go{ background:var(--accent-1); transform:translate(2px,-2px); }
  .task:hover .task__go::after{ background:#fff; }
}
@media (max-width: 1100px){ .tasks__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){  .tasks__grid{ grid-template-columns:minmax(0, 1fr); } .task{ min-height:0; } }
@media (prefers-reduced-motion:reduce){ .task, .task__go{ transition:none; } }