/* directions — направления из БД. */
.dir-lvl { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--s-muted); }

/* cards */
.dir-card { position: relative; overflow: hidden; }
.dir-card::before {
  content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--s-accent) 10%, transparent), transparent 70%);
}

/* tiles: фото-плитки, название поверх; без фото — .ph с градиентом темы */
.dir-tiles { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.dir-tile {
  position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3;
  background: var(--s-surface); border: 1px solid var(--s-line);
}
.dir-tile img, .dir-tile .dir-tile-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0;
  transition: transform .4s;
}
.dir-tile:hover img { transform: scale(1.04); }
/* подпись — на плашке из цвета подложки: читается и на светлых, и на тёмных фото и гаммах */
.dir-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 16px;
  background: linear-gradient(to top, color-mix(in srgb, var(--s-bg) 92%, transparent), transparent);
}
.dir-tile-cap h3 { font-size: 18px; margin: 0; color: var(--s-text); }
.dir-tile-cap span { display: block; font-size: 12.5px; color: var(--s-muted); margin-top: 2px; }
@media (max-width: 900px) { .dir-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .dir-tiles { grid-template-columns: 1fr; } }

/* list: строки, фото и текст через одну меняются местами */
.dir-list { display: flex; flex-direction: column; gap: 28px; }
.dir-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center; }
.dir-row:nth-child(even) .dir-row-img { order: 2; }
.dir-row-img img, .dir-row-img .ph {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius);
}
.dir-row-body h3 { font-size: 22px; margin-bottom: 10px; }
.dir-row-body p { color: var(--s-muted); font-size: 15.5px; }
@media (max-width: 700px) {
  .dir-row { grid-template-columns: 1fr; gap: 14px; }
  .dir-row:nth-child(even) .dir-row-img { order: 0; }
}