/* Карточки ЦЕХ.ПОДБОР — общий компонент: экран ЦЕХ.ПОДБОР главной (home.css)
   и страница сценария «Подбор» (/sotrudniki/, scenario.css). Вынесено из home.css 26.10
   без изменений; подключается перед home.css, поэтому порядок правил прежний. */

/* Карточки */
.podbor-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  box-shadow: var(--shadow-podbor);
}
.podbor-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.podbor-card__role {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.podbor-card__role svg,
.podbor-chip svg,
.podbor-card__filter svg,
.podbor-actions__btn svg,
.podbor-step__icon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.podbor-card__role svg { width: var(--icon-size-s); height: var(--icon-size-s); color: var(--color-accent); }
.podbor-card__filter {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--podbor-icon-btn);
  height: var(--podbor-icon-btn);
  border-radius: var(--radius-s);
  background: var(--color-bg);
}
.podbor-card__filter svg { width: var(--icon-size-s); height: var(--icon-size-s); }
.podbor-card__filter::after {
  content: "";
  position: absolute;
  top: calc(var(--space-1) * -0.5);
  right: calc(var(--space-1) * -0.5);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-round);
  background: var(--color-accent);
}
.podbor-card__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.podbor-card__org { margin-top: calc(var(--space-2) * -1); font-size: var(--fs-small); color: var(--color-text-muted); }
.podbor-card__text { font-size: var(--fs-podbor-text); line-height: var(--lh-text); }
.podbor-card__sub { font-size: var(--fs-small); font-weight: var(--fw-bold); }

.podbor-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.podbor-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--podbor-chip-h);
  padding: 0 var(--space-2);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-s);
  font-size: var(--fs-caption-text);
}
.podbor-chip svg { width: var(--icon-size-xs); height: var(--icon-size-xs); color: var(--color-text-muted); }

.podbor-person { display: grid; grid-template-columns: var(--podbor-person) 1fr; align-items: center; gap: var(--space-3); }
.podbor-person__photo { width: var(--podbor-person); height: var(--podbor-person); border-radius: var(--radius-m); object-fit: cover; background: var(--color-sheet); }
.podbor-person__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.podbor-person__role { font-size: var(--fs-small); color: var(--color-text-muted); }
.podbor-person__status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); color: var(--color-match-high); }
.podbor-person__status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-round); background: var(--color-match-high); }
.podbor-person--small { --podbor-person: 2.5rem; }
.podbor-person--small .podbor-person__name { font-family: var(--font-text); font-size: var(--fs-small); }

.podbor-badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--filter-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-round);
  background: var(--color-match-high-bg);
  color: var(--color-match-high);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.podbor-badge::before { content: "★"; }

.podbor-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.podbor-photos img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-s); background: var(--color-sheet); }

/* Эпизоды опыта; статус — капсулой: подтверждено — зелёная, нет — серая */
.podbor-episodes { display: grid; gap: var(--space-2); }
.podbor-episode { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-m); background: var(--color-bg); }
.podbor-episode__title { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.podbor-episode__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--fs-caption-text); color: var(--color-text-muted); }
.podbor-episode__text { font-size: var(--fs-caption-text); color: var(--color-text-muted); }
.podbor-mark {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-round);
  background: var(--color-line);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.7;
}
.podbor-mark--ok { background: var(--color-match-high-bg); color: var(--color-match-high); }

/* Кнопки выдачи: тихая → обычная → главная (оранжевая). Все — вход в сервис с ролью */
.podbor-actions { display: grid; grid-template-columns: auto 1fr 1.3fr; gap: var(--space-2); margin-top: var(--space-1); }
.podbor-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-button);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.podbor-actions__btn svg { width: var(--icon-size-s); height: var(--icon-size-s); }
.podbor-actions__btn--skip { color: var(--color-text); }
.podbor-actions__btn--skip:hover { background: var(--color-bg); }
.podbor-actions__btn--open { border-color: var(--color-line); background: var(--color-surface); }
.podbor-actions__btn--open:hover { border-color: var(--color-text); }
.podbor-actions__btn--main { background: var(--color-accent); color: var(--color-accent-text); }
.podbor-actions__btn--main:hover { filter: brightness(1.06); }

@media (max-width: 1023px) {
  .podbor-actions { grid-template-columns: 1fr 1fr; }
  .podbor-actions__btn--main { grid-column: 1 / -1; grid-row: 1; }
  /* на телефоне стопка без поворота — края нижних карточек видны снизу */
  .podbor-stack { --stack-dx: 0px; --stack-top-rot: 0deg; --stack-rot: 0deg; padding-bottom: calc(var(--stack-dy) * 2); }
  .podbor-stack::before, .podbor-stack::after { inset: 0 var(--space-3) 0 var(--space-3); top: auto; height: 50%; }
}

/* Стопка выдачи: верхняя карточка чуть повёрнута, под ней — края ещё двух */
.podbor-stack { position: relative; display: grid; min-width: 0; isolation: isolate; }
.podbor-stack::before,
.podbor-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transform: translate(var(--stack-dx), var(--stack-dy)) rotate(var(--stack-rot));
}
.podbor-stack::after { z-index: -2; opacity: 0.7; transform: translate(calc(var(--stack-dx) * 2), calc(var(--stack-dy) * 2)) rotate(calc(var(--stack-rot) * 2)); }
.podbor-stack .podbor-card--result { transform: rotate(var(--stack-top-rot)); }