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

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

/* «О нас» — колонны справа, растворяются к тексту */
/* Снимок во всю ширину, а не сбоку: текст в этом разделе стоит
   и слева, и справа, и боковая картинка лезет прямо под него. */
html[data-foto="on"] .section-about::after{
  left:0;right:0;top:0;bottom:0;
  background-image:url('/foto/kolonny.jpg');background-position:center 30%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 72%,transparent 100%);
  opacity:.5;
}
/* «Услуги» — библиотека во всю ширину, уходит вверх и вниз */
html[data-foto="on"] .section-services::after{
  left:0;right:0;top:0;bottom:0;
  background-image:url('/foto/biblioteka.jpg');background-position:center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 70%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 42%,#000 70%,transparent 100%);
  opacity:.62;
}
/* «Команда» — колоннада горизонтом по низу */
html[data-foto="on"] .section-team::after{
  left:0;right:0;bottom:0;height:min(52%,460px);
  background-image:url('/foto/kolonnada.jpg');background-position:center bottom;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 65%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 65%);
}
/* «Контакты» — лестница слева */
html[data-foto="on"] #contact::after{
  left:0;right:0;top:0;bottom:0;
  background-image:url('/foto/lestnica.jpg');background-position:center 40%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 38%,#000 76%,transparent 100%);
  opacity:.55;
}

/* ---------- КОМАНДА: карточки вместо длинных строк ---------- */
html[data-foto="on"] .team-grid{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
html[data-foto="on"] .team-card{
  display:block;background:rgba(16,38,61,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
html[data-foto="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-foto="on"] .team-photo{
  aspect-ratio:1/1;position:relative;overflow:hidden;border:0;
  border-bottom:1px solid var(--border);background:#0D2039;
}
html[data-foto="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-foto="on"] .team-card:hover .team-photo img{transform:scale(1.04);filter:none}
html[data-foto="on"] .team-info{padding:16px 16px 18px;max-width:none}
html[data-foto="on"] .team-name{font-size:16.5px;margin-bottom:5px}
html[data-foto="on"] .team-role{font-size:11.5px;line-height:1.45;display:block;margin-bottom:10px}
html[data-foto="on"] .team-bio{font-size:13.5px;line-height:1.55;margin:0}
/* видимый абзац — ровно три строки, иначе карточки разной длины */
html[data-foto="on"] .team-info > .team-bio{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
html[data-foto="on"] .team-card.open .team-info > .team-bio{-webkit-line-clamp:unset;overflow:visible}
html[data-foto="on"] .team-links{margin-top:12px}
html[data-foto="on"] .team-rest{display:none;margin-top:10px}
html[data-foto="on"] .team-card.open .team-rest{display:block}
html[data-foto="on"] .team-rest .team-bio{margin-top:9px}
html[data-foto="on"] .team-rest .team-list{margin:9px 0 0;padding-left:16px}
html[data-foto="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-foto="on"] .team-toggle{display:inline-block}
.team-toggle:hover{color:var(--accent-hi)}
html[data-foto="on"] .team-extra-grid{grid-template-columns:repeat(2,1fr);gap:20px}
html[data-foto="on"] .team-card--plain{display:block}
html[data-foto="on"] .team-card--plain .team-info{padding:18px 20px 20px}

@media (max-width:1100px){html[data-foto="on"] .team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  html[data-foto="on"] .team-grid{grid-template-columns:1fr;gap:16px}
  html[data-foto="on"] .team-extra-grid{grid-template-columns:1fr}
  html[data-foto="on"] .team-photo{aspect-ratio:16/10}
  /* на телефоне снимок за текстом только мешает читать */
  html[data-foto="on"] .section-about::after{opacity:.34}
  html[data-foto="on"] #contact::after{opacity:.34}
  html[data-foto="on"] .section-services::after{opacity:.4}
}

/* ---------- переключатель показа ---------- */
.foto-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)}
.foto-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}
.foto-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}
.foto-ui button:hover{color:var(--text);border-color:rgba(var(--text-rgb),.3)}
.foto-ui button.on{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent-hi)}
@media (max-width:900px){.foto-ui{left:10px;bottom:10px;padding:9px}.foto-ui button{font-size:12px;padding:8px 10px}}

/* ---------- приветственная строка над заголовком ----------
   Стоит первой строкой, до большого заголовка: человек читает её
   раньше всего и сразу понимает, при чём тут шахматы на видео. */
.foto-slogan{
  display:flex;align-items:center;gap:16px;margin:0 0 22px;
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(16px,1.9vw,23px);letter-spacing:.015em;
  color:rgba(var(--text-rgb),.9);
}
.foto-slogan b{color:var(--accent);font-weight:700}
.foto-slogan i{display:block;width:44px;height:1px;flex:none;
  background:linear-gradient(90deg,var(--accent),transparent)}
@media (max-width:768px){
  .foto-slogan{gap:11px;margin-bottom:16px;font-size:15px}
  .foto-slogan i{width:26px}
}