/* ==========================================================================
   Workshop: витрина раздела и страница темы.
   Акцент раздела — orange (data-accent="workshop"). Тёмная зона одна и только
   функциональная: hero витрины (2.txt, 51–52). Ниже — обычный светлый контент,
   компоненты общие с остальным порталом. Значения — из tokens.css.
   ========================================================================== */

/* --- Тёмный hero витрины -------------------------------------------------- */
.wsh-hero {
  position: relative;
  overflow: hidden;
  margin-top: var(--sp-5);
  min-height: 380px;
  display: flex;
  align-items: center;
  background: var(--dark-hero);
  border-radius: var(--r-hero);
  box-shadow: var(--shadow-card);
}

.wsh-hero__art {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

/* Иллюстрация уходит под текст: слева сплошная тёмная база, справа — рисунок. */
.wsh-hero__fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      var(--dark-hero) 0%,
      var(--dark-hero) 38%,
      rgba(38, 47, 48, .88) 52%,
      rgba(38, 47, 48, .35) 70%,
      rgba(38, 47, 48, 0) 86%);
}

.wsh-hero__content {
  position: relative;
  max-width: 660px;
  padding: var(--sp-8);
}

.wsh-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--dark-border);
  background: rgba(217, 138, 60, .14);
  color: var(--orange);
  font-size: var(--fs-tiny);
  font-weight: 600;
}

.wsh-hero__title {
  margin: var(--sp-4) 0 var(--sp-3);
  color: var(--dark-text);
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.wsh-hero__lead {
  max-width: 54ch;
  color: var(--dark-text-muted);
  font-size: 1.0625rem;
}

.wsh-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Вторая кнопка живёт на тёмном фоне: обычный secondary там был бы белым пятном. */
.btn--dark {
  background: transparent;
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

.btn--dark:hover {
  background: var(--dark-elevated);
  border-color: var(--dark-text-muted);
}

.wsh-hero__note {
  max-width: 62ch;
  margin-top: var(--sp-5);
  color: var(--dark-text-muted);
  font-size: var(--fs-tiny);
  line-height: 1.55;
}

.wsh-note { margin-top: var(--sp-5); }
.wsh-note p { max-width: 92ch; }

/* --- Карточки тем --------------------------------------------------------- */
.wsh-head { margin-top: var(--sp-7); }

.wsh-card {
  gap: 0;
  overflow: hidden;
}

.wsh-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) 0;
}

.wsh-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--orange-soft);
  color: var(--orange-hover);
}

.wsh-card__text {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
}

.wsh-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: auto;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
  font-size: var(--fs-tiny);
  color: var(--text-secondary);
}

.wsh-card__meta > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.wsh-card__meta .icon { color: var(--text-muted); }

.wsh-card__more {
  margin-left: auto;
  color: var(--orange-hover);
  font-weight: 600;
}

.wsh-card__more .icon { color: inherit; }

/* --- Итоговый блок и врезка автора ---------------------------------------- */
.wsh-split { align-items: start; margin-top: var(--sp-7); }

.wsh-summary { padding: var(--sp-6); gap: var(--sp-4); align-items: flex-start; }

.wsh-summary__list {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.wsh-summary__list li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.wsh-summary__list .icon { flex: none; margin-top: .15em; color: var(--orange-hover); }
.wsh-summary__list li:last-child .icon { color: var(--amber); }

.wsh-author {
  padding: var(--sp-5);
  gap: var(--sp-3);
  align-items: flex-start;
  border-color: var(--orange-border);
  background: var(--orange-soft);
}

.wsh-author__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--orange-border);
  color: var(--orange-hover);
}

.wsh-author .btn { margin-top: var(--sp-2); }

/* --- Шапка темы ----------------------------------------------------------- */
.wsh-top { align-items: start; margin-top: var(--sp-5); }

.wsh-top__title {
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: var(--sp-4) 0 var(--sp-3);
}

.wsh-top__lead {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  max-width: 62ch;
}

.wsh-top__text {
  margin-top: var(--sp-3);
  color: var(--text-secondary);
  max-width: 68ch;
}

.wsh-brief {
  padding: var(--sp-5);
  gap: var(--sp-2);
  align-items: flex-start;
}

.wsh-brief__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--orange-soft);
  color: var(--orange-hover);
  margin-bottom: var(--sp-1);
}

.wsh-brief__list {
  display: grid;
  gap: var(--sp-3);
  width: 100%;
  margin: var(--sp-3) 0 var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.wsh-brief__list dt {
  font-size: var(--fs-tiny);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}

.wsh-brief__list dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-small);
  color: var(--text);
}

/* --- Тело темы ------------------------------------------------------------ */
.wsh-body { align-items: start; }

.wsh-flow {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: 0;
}

.wsh-flow__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.wsh-flow__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-hover);
  font-weight: 700;
  font-size: var(--fs-small);
}

.wsh-flow__text { color: var(--text-secondary); }

.wsh-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.wsh-list { padding: var(--sp-5); gap: var(--sp-3); }

.wsh-list .card__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h4);
}

.wsh-list--gives  .card__title .icon { color: var(--orange-hover); }
.wsh-list--limits .card__title .icon { color: var(--amber); }

.wsh-list__items {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.wsh-list__items li {
  position: relative;
  padding-left: var(--sp-4);
}

.wsh-list__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}

.wsh-list--gives  .wsh-list__items li::before { background: var(--orange); }
.wsh-list--limits .wsh-list__items li::before { background: var(--amber); }

/* --- Боковая колонка темы ------------------------------------------------- */
.wsh-aside {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.wsh-aside .card { padding: var(--sp-5); gap: var(--sp-2); align-items: flex-start; }
.wsh-aside__note { background: var(--surface-soft); }

.wsh-related {
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  width: 100%;
}

.wsh-related a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.wsh-related a:hover { border-color: var(--orange-border); background: var(--orange-soft); }

.wsh-related__icon {
  flex: none;
  display: inline-flex;
  color: var(--orange-hover);
}

.wsh-related__title { display: block; font-weight: 600; font-size: var(--fs-small); }

.wsh-related__sub {
  display: block;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* --- Планшет и телефон ---------------------------------------------------- */
@media (max-width: 1024px) {
  .wsh-hero { min-height: 340px; }
  .wsh-hero__art { width: 50%; opacity: .8; }
  .wsh-hero__content { padding: var(--sp-7); }
}

@media (max-width: 768px) {
  /* Иллюстрация на телефоне уходит наверх полосой: текст поверх неё
     не читался бы даже с затемнением. */
  .wsh-hero {
    display: block;
    min-height: 0;
    border-radius: var(--r-panel);
  }

  .wsh-hero__art {
    position: relative;
    inset: auto;
    width: 100%;
    height: 150px;
    object-position: 60% center;
  }

  .wsh-hero__fade {
    inset: auto 0 0 0;
    height: 150px;
    background: linear-gradient(180deg, rgba(38, 47, 48, .15) 0%, var(--dark-hero) 96%);
  }

  .wsh-hero__content { padding: var(--sp-5); }
  .wsh-hero__actions { gap: var(--sp-2); }
  .wsh-hero__actions .btn { width: 100%; justify-content: center; }

  .wsh-card__meta > span:not(.wsh-card__more) { display: none; }
  .wsh-card__more { margin-left: 0; }
  .wsh-flow__item { padding: var(--sp-4); }

  /* Подпись рядом с заголовком ужимает его в узкую колонку — на телефоне
     она уходит на свою строку (та же грабля, что в серверах и тренировках). */
  .wsh-head { flex-wrap: wrap; }
  .wsh-head .section__title { flex: 1 1 100%; }
}