/* ============================================================
   DIR-TILE — карточка направления: белая плитка с номером, круглым
   фото и описанием; на наведении фото разворачивается во всю карточку.

   Жила в services.css, теперь общая: её используют страница услуг и
   раздел «Я хочу» (problems/*). На главной своя версия внутри
   медиазапроса — у неё другие размеры под мобильный макет, поэтому
   сюда не сводил.
   ============================================================ */

.dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0 var(--gutter); }
.dir-tile { position: relative; overflow: hidden; background: #fff; border: 1px solid #d9d9d9; border-radius: 20px; text-decoration: none; aspect-ratio: 380 / 520; }
.dir-tile__scrim { position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.3s ease; }
.dir-tile:hover .dir-tile__scrim { opacity: 1; transition: opacity 0.35s ease 0.1s; }
.dir-tile__photo {
  position: absolute; z-index: 1; overflow: hidden;
  top: 116px; left: calc(50% - clamp(60px, 5.2vw, 80px));
  width: clamp(120px, 10.4vw, 160px); height: clamp(120px, 10.4vw, 160px);
  border-radius: 50%;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dir-tile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dir-tile:hover .dir-tile__photo { top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; }
.dir-tile__body { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 48px 28px 32px; text-align: center; transition: opacity 0.2s ease; }
.dir-tile:hover .dir-tile__body { opacity: 0; }
.dir-tile__num { flex-shrink: 0; width: 48px; height: 48px; border-radius: 24px; background: #ededed; color: #40404d; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; font-style: normal; }
.dir-tile__photo-spacer { width: clamp(120px, 10.4vw, 160px); height: clamp(120px, 10.4vw, 160px); flex-shrink: 0; }
.dir-tile__title { font-size: 20px; font-weight: 600; color: #1a1a1f; letter-spacing: -0.02em; line-height: 1.25; font-style: normal; margin: 0; }
.dir-tile__desc { display: flex; flex-direction: column; gap: 2px; }
.dir-tile__desc p { font-size: 14px; font-weight: 300; color: #5B6159; line-height: 1.4; letter-spacing: -0.01em; font-style: normal; }
.dir-tile__num-hover, .dir-tile__arrow { position: absolute; z-index: 4; opacity: 0; transform: scale(0.6); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; }
.dir-tile__title-hover { position: absolute; z-index: 4; opacity: 0; transform: translate(-50%, -42%) scale(0.85); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; }
.dir-tile:hover .dir-tile__num-hover, .dir-tile:hover .dir-tile__arrow { opacity: 1; transform: scale(1); transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s; }
.dir-tile:hover .dir-tile__title-hover { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.44s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.44s; }
.dir-tile__num-hover { left: 24px; top: 24px; width: 48px; height: 48px; border-radius: 24px; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; font-style: normal; }
.dir-tile__title-hover { left: 50%; top: 46.15%; width: 87%; margin: 0; text-align: center; color: #fff; font-size: clamp(17px, 1.9vw, 26px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.2; font-style: normal; }
.dir-tile__arrow { right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 22px; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.dir-tile__arrow svg { width: 18px; height: 18px; }
.dir-cta-wrap { display: flex; justify-content: center; margin-top: clamp(40px, 4.2vw, 64px); }
@media (max-width: 1419px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 979px)  { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .dir-grid { grid-template-columns: 1fr; } }

/* ── Масштабируемая плитка ─────────────────────────────────────────
   Все размеры внутри карточки — доля её собственной ширины (cqw), а не
   ширины экрана. Поэтому на 254px и на 372px карточка выглядит
   одинаково, просто меньше, и её пропорция 380×520 не плывёт под
   длинным заголовком. База пересчёта: 1cqw = 3.8px при эталонных 380px.
   clamp() снизу не даёт тексту стать нечитаемым, сверху — перерасти
   эталон. Браузеры без container queries отбросят cqw-строки и
   останутся на значениях выше по файлу. */
.dir-tile {
  container-type: inline-size;
  --tile-pad-x: clamp(18px, 7.37cqw, 28px);
  --tile-pad-t: clamp(30px, 12.63cqw, 48px);
  --tile-pad-b: clamp(20px, 8.42cqw, 32px);
  --tile-gap:   clamp(12px, 5.26cqw, 20px);
  --tile-num:   clamp(38px, 12.63cqw, 48px);
  --tile-photo: clamp(112px, 42.11cqw, 160px);
  --tile-inset: clamp(14px, 6.32cqw, 24px);
}
.dir-tile__photo {
  top: calc(var(--tile-pad-t) + var(--tile-num) + var(--tile-gap));
  left: calc(50% - var(--tile-photo) / 2);
  width: var(--tile-photo); height: var(--tile-photo);
}
.dir-tile__photo-spacer { width: var(--tile-photo); height: var(--tile-photo); }
.dir-tile__body { gap: var(--tile-gap); padding: var(--tile-pad-t) var(--tile-pad-x) var(--tile-pad-b); }
.dir-tile__num { width: var(--tile-num); height: var(--tile-num); border-radius: 50%; font-size: clamp(13px, 4.21cqw, 16px); }
.dir-tile__title { font-size: clamp(15px, 5.26cqw, 20px); overflow-wrap: break-word; }
.dir-tile__desc { font-size: clamp(11.5px, 3.68cqw, 14px); overflow-wrap: break-word; }
.dir-tile__desc p { font-size: inherit; font-weight: 300; line-height: 1.4; color: #5B6159; }
/* страховка: сколько бы ни было текста, карточка не растёт — лишние
   строки описания отсекаются, пропорция остаётся прежней */
.dir-tile__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.dir-tile__num-hover { left: var(--tile-inset); top: var(--tile-inset); width: var(--tile-num); height: var(--tile-num); border-radius: 50%; font-size: clamp(13px, 4.21cqw, 16px); }
.dir-tile__arrow { right: var(--tile-inset); bottom: var(--tile-inset); width: clamp(34px, 11.58cqw, 44px); height: clamp(34px, 11.58cqw, 44px); border-radius: 50%; }
.dir-tile__arrow svg { width: clamp(14px, 4.74cqw, 18px); height: clamp(14px, 4.74cqw, 18px); }
.dir-tile__title-hover { font-size: clamp(16px, 6.84cqw, 26px); overflow-wrap: break-word; }