/* ============================================================
   Компактная команда + архитектурные наброски на фоне.
   Поверх боевых стилей, ничего в них не меняя.
   Включается атрибутом data-arch="on" на <html>.
   ============================================================ */

/* ---------- КОМАНДА: карточки вместо длинных строк ----------
   Было: один человек — одна широкая строка с фото 400px и всеми
   абзацами сразу. Шесть человек давали экран длиной в несколько
   пролистываний. Стало: сетка карточек, подробности по клику. */
html[data-arch="on"] .team-grid{
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:48px;
}
html[data-arch="on"] .team-card{
  display:block;
  background:var(--bg-subtle);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
html[data-arch="on"] .team-card:hover{
  border-color:rgba(var(--accent-rgb),.35);
  transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
}
/* высоту задаёт пропорция, а не сам снимок — иначе карточки разной длины */
html[data-arch="on"] .team-photo{
  aspect-ratio:1/1;
  position:relative;
  overflow:hidden;
  border:0;
  border-bottom:1px solid var(--border);
  background:#0D2039;
}
html[data-arch="on"] .team-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.3) contrast(1.04) brightness(.95);
  transition:transform .6s,filter .4s;
}
html[data-arch="on"] .team-card:hover .team-photo img{
  transform:scale(1.04);filter:none;
}
html[data-arch="on"] .team-info{padding:16px 16px 18px;max-width:none}
html[data-arch="on"] .team-name{font-size:16.5px;margin-bottom:5px}
html[data-arch="on"] .team-role{font-size:11.5px;line-height:1.45;display:block;margin-bottom:10px}
html[data-arch="on"] .team-bio{font-size:13.5px;line-height:1.55;margin:0}
/* видимый абзац — ровно три строки: иначе карточки разной длины
   и сетка перестаёт читаться как сетка */
html[data-arch="on"] .team-info > .team-bio{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
html[data-arch="on"] .team-card.open .team-info > .team-bio{-webkit-line-clamp:unset;overflow:visible}
html[data-arch="on"] .team-links{margin-top:12px}

/* подробности скрыты до нажатия */
html[data-arch="on"] .team-rest{display:none;margin-top:10px}
html[data-arch="on"] .team-card.open .team-rest{display:block}
html[data-arch="on"] .team-rest .team-bio{margin-top:9px}
html[data-arch="on"] .team-rest .team-list{margin:9px 0 0;padding-left:16px}
html[data-arch="on"] .team-rest .team-list li{font-size:13px;line-height:1.5}
.team-toggle{
  display:none;margin-top:11px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--f-display);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);transition:color .2s;
}
html[data-arch="on"] .team-toggle{display:inline-block}
.team-toggle:hover{color:var(--accent-hi)}

/* «Также в команде» — в тот же строй */
html[data-arch="on"] .team-extra-grid{grid-template-columns:repeat(2,1fr);gap:20px}
html[data-arch="on"] .team-card--plain{display:block}
html[data-arch="on"] .team-card--plain .team-info{padding:18px 20px 20px}

/* ---------- ФОН: архитектурные наброски ----------
   Чертёж, а не фотография: тонкие линии, ничего не перекрывают,
   весят по полтора килобайта и чёткие на любом экране. */
html[data-arch="on"] .section-about,
html[data-arch="on"] .section-team,
html[data-arch="on"] .section-services,
html[data-arch="on"] #contact{position:relative;overflow:hidden}
html[data-arch="on"] .section-about::after,
html[data-arch="on"] .section-team::after,
html[data-arch="on"] .section-services::after,
html[data-arch="on"] #contact::after{
  content:'';position:absolute;z-index:0;pointer-events:none;background-repeat:no-repeat;
}
html[data-arch="on"] .about-inner,
html[data-arch="on"] .team-inner,
html[data-arch="on"] .services-inner,
html[data-arch="on"] #contact > *{position:relative;z-index:1}

html[data-arch="on"] .section-about::after{
  /* ниже и правее: иначе чертёж наезжает на цифры «15+ / 1500+ / 3» */
  right:-90px;bottom:-40px;width:min(58%,760px);height:84%;
  background-image:url('/arch/portik.svg');background-position:right bottom;background-size:contain;
  opacity:.22;
}
html[data-arch="on"] .section-team::after{
  left:0;right:0;bottom:-30px;height:min(42%,380px);
  background-image:url('/arch/arkada.svg');background-position:center bottom;background-size:auto 100%;
  opacity:.17;
}
html[data-arch="on"] .section-services::after{
  left:-70px;top:30px;width:min(40%,520px);height:82%;
  background-image:url('/arch/kupol.svg');background-position:left top;background-size:contain;
  opacity:.2;
}
html[data-arch="on"] #contact::after{
  right:-60px;top:0;width:min(52%,680px);height:92%;
  background-image:url('/arch/portik.svg');background-position:right top;background-size:contain;
  opacity:.2;transform:scaleX(-1);
}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  html[data-arch="on"] .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  html[data-arch="on"] .team-grid{grid-template-columns:1fr;gap:16px}
  html[data-arch="on"] .team-extra-grid{grid-template-columns:1fr}
  html[data-arch="on"] .team-photo{aspect-ratio:16/10}
  /* на телефоне наброски мельчают и только мешают */
  html[data-arch="on"] .section-about::after,
  html[data-arch="on"] .section-services::after,
  html[data-arch="on"] #contact::after{display:none}
  html[data-arch="on"] .section-team::after{opacity:.14;height:200px}
}

/* ---------- переключатель показа ---------- */
.arch-ui{position:fixed;left:16px;bottom:16px;z-index:600;display:flex;flex-direction:column;gap:7px;
  padding:12px;border-radius:14px;background:rgba(4,12,22,.93);
  border:1px solid rgba(var(--text-rgb),.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9);font-family:var(--f-body)}
.arch-ui b{font-family:var(--f-display);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(var(--text-rgb),.4);margin-bottom:2px}
.arch-ui button{display:block;width:100%;text-align:left;cursor:pointer;padding:9px 13px;border-radius:9px;
  border:1px solid rgba(var(--text-rgb),.12);background:none;color:rgba(var(--text-rgb),.72);
  font:inherit;font-size:13px;transition:background .2s,border-color .2s,color .2s}
.arch-ui button:hover{color:var(--text);border-color:rgba(var(--text-rgb),.3)}
.arch-ui button.on{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent-hi)}
@media (max-width:900px){.arch-ui{left:10px;bottom:10px;padding:9px}.arch-ui button{font-size:12px;padding:8px 10px}}