/* ============================================================
   СТРАНИЦА НАПРАВЛЕНИЯ /for/<slug>/ — ТЕМА JELLY
   Anna Gorodetskaya — Portfolio · 11 сент 2026

   Подключается поверх home-jelly.css: стена работ, карточки
   офферов и разворот проекта у страницы направления те же, что на
   главной, и описаны там. Здесь — только то, чего на главной нет:
   обложка направления, шапка стены, компетенции и блок «как я
   работаю», плюс грунты секций.

   Порядок грунтов тот же, что на главной: розовый → лиловый →
   тёмная сливовая полоса офферов → барвинковый → тихий лиловый.
   ============================================================ */

/* ------------------------------------------------------------
   ОБЛОЖКА НАПРАВЛЕНИЯ
   ------------------------------------------------------------ */

.ps1 {
  padding: 76px 0 72px;
  background: var(--g-hero);
  border-bottom: 1px solid rgba(181, 118, 155, 0.4);
}
.ps1__eyebrow { margin-bottom: 26px; }
.ps1__title {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1;
  letter-spacing: -0.055em;
}
.ps1__title em { color: var(--accent); }
.ps1__deck { margin: 26px 0 0; max-width: 52ch; }
.ps1__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ------------------------------------------------------------
   СТЕНА РАБОТ — сетка и карточки из home-jelly.css
   ------------------------------------------------------------ */

.work.section { padding: 72px 0 44px; background: var(--g-work); }
.wall__head { margin-bottom: 30px; }
.wall__eyebrow { margin-bottom: 14px; }
.wall__deck { max-width: 56ch; }

.wall__nav { display: grid; gap: 14px; margin-bottom: 32px; }
.wall__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.wall__row-label { min-width: 92px; text-transform: uppercase; color: var(--ink-55); }
.wall__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wall__practices { display: flex; flex-wrap: wrap; gap: 10px; }
.wall__more { padding: 40px 0 0; text-align: center; }

/* ------------------------------------------------------------
   ОФФЕРЫ — тёмная плоскость, карточки общие с главной
   ------------------------------------------------------------ */

.ps-offers {
  padding: 80px 0 76px;
  background: var(--g-services);
  color: #FBE0F5;
  overflow: hidden;
}
.ps-offers__label {
  margin-bottom: 34px;
  color: #E3A6CE;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ------------------------------------------------------------
   КОМПЕТЕНЦИИ
   ------------------------------------------------------------ */

.wid { padding: 76px 0; background: var(--g-about); }
.wid .sect-head { margin-bottom: 28px; }
.wid__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wid__item {
  padding: 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--sheen);
}
.wid__item .t-num { display: block; margin-bottom: 10px; }
.wid__item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.wid__item p { margin: 0; line-height: 1.6; color: var(--ink-80); }

/* ------------------------------------------------------------
   КАК Я РАБОТАЮ
   ------------------------------------------------------------ */

.pm { padding: 72px 0; background: var(--g-quiet); }
.pm__title { margin: 0 0 18px; letter-spacing: -0.045em; }
.pm__body { margin: 0; max-width: 62ch; line-height: 1.75; }

/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width: 1024px) {
  .wid__list { gap: 14px; }
}

@media (max-width: 760px) {
  .ps1 { padding: 52px 0 56px; }
  .ps1__deck { max-width: none; }
  .ps1__actions .btn { width: 100%; justify-content: space-between; }
  .work.section { padding: 52px 0 32px; }
  .wall__row { gap: 8px 12px; }
  .wall__row-label { width: 100%; min-width: 0; }
  .ps-offers { padding: 56px 0 52px; }
  .wid { padding: 52px 0; }
  .wid__list { grid-template-columns: 1fr; }
  .pm { padding: 52px 0; }
}