/* #2641 — компоновка About (.com 5 языков + .ru /about). Подключается только на about-страницах.
   Классы ставит projects/about-2641/apply.py; тексты страниц не меняются. */

/* 1. «Как работаем»: 5 шагов одной линией вместо 2+2+1 */
.ab-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;position:relative;margin-top:8px}
.ab-steps::before{content:"";position:absolute;left:19px;right:calc((100% - 96px)/5 - 19px);top:19px;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--line) 60%)}
.ab-steps .fcard{background:none;border:0;border-radius:0;padding:0;box-shadow:none;transform:none;overflow:visible}
.ab-steps .fcard::after{display:none}
.ab-steps .fcard:hover{transform:none;box-shadow:none;border-color:transparent}
.ab-steps .num{position:relative;z-index:1;background:var(--card);border-color:var(--blue);color:var(--ink);margin-bottom:18px}
.ab-steps h3{font-size:17px;line-height:1.3;margin:0 0 8px}
.ab-steps p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0}
@media(max-width:900px){
  .ab-steps{grid-template-columns:1fr;gap:22px}
  .ab-steps::before{display:none}
  .ab-steps .fcard{position:relative}
  .ab-steps .fcard:not(:last-child)::after{display:block;opacity:1;inset:auto;border-radius:0;z-index:0;content:"";position:absolute;left:19px;top:38px;bottom:-22px;width:1px;background:linear-gradient(180deg,var(--blue),var(--line))}
  .ab-steps .fcard{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:16px}
  .ab-steps .num{grid-row:span 2;margin:0}
}

/* 2. Фотогалереи: мозаика из 5 кадров + «Показать все фото» */
.ab-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ab-mosaic figure{aspect-ratio:4/3}
.ab-mosaic figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ab-mosaic.ab-mosaic--r figure:first-child{grid-column:3/span 2;grid-row:1/span 2}
.ab-more{margin-top:20px}
.ab-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.ab-more>summary::-webkit-details-marker{display:none}
.ab-more>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.ab-more[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.ab-more>summary .ab-less,.ab-more[open]>summary .ab-all{display:none}
.ab-more[open]>summary .ab-less{display:inline}
.ab-more>.abt-photos{margin-top:20px}
@media(max-width:820px){
  .ab-mosaic{grid-template-columns:1fr 1fr;gap:12px}
  .ab-mosaic figure:first-child,.ab-mosaic.ab-mosaic--r figure:first-child{grid-column:1/-1;grid-row:auto;aspect-ratio:4/3}
}

/* 3. Объединённые секции из двух блоков (.com) */
.ab-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.ab-split .sec-head{margin-bottom:22px}
.ab-split .abt-values{grid-template-columns:1fr;gap:22px}
.ab-split .adv-grid{grid-template-columns:1fr 1fr;gap:16px}
.ab-split .adv{padding:22px}
.ab-split .press-logos{margin-top:0}
.ab-subhead{margin:0 0 18px}
.ab-subhead .eyebrow{margin-bottom:10px}
.ab-subhead h3{font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.2;margin:0}
.ab-after{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
.ab-after .fcard{flex-direction:row;align-items:center;gap:16px;padding:20px 22px}
.ab-after .fcard h3{margin:0 0 4px}
.ab-after .fcard p{margin:0}
.ab-after .fcard>div{flex:1;min-width:0}
.ab-after .fcard .fcard-more{position:static;margin:0;flex:none}
@media(max-width:900px){
  .ab-split{grid-template-columns:1fr;gap:44px}
  .ab-split .adv-grid{grid-template-columns:1fr}
  .ab-after{margin-top:40px;padding-top:32px}
}

/* 4. Цифры на всю ширину, когда их 4 (.com) */
.abt-stats.ab-stats4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.abt-stats.ab-stats4{grid-template-columns:1fr 1fr}}

/* 5. «Что мы создаём» (.ru, 11 карточек): 3 крупных направления + 8 технологий в 4 колонки */
.ab-create{grid-template-columns:repeat(12,minmax(0,1fr))}
.ab-create>*{grid-column:span 3}
.ab-create>:nth-child(-n+3){grid-column:span 4}
@media(max-width:1100px){.ab-create>*,.ab-create>:nth-child(-n+3){grid-column:span 6}}
@media(max-width:640px){.ab-create>*,.ab-create>:nth-child(-n+3){grid-column:1/-1}}

/* 6. Кейсы (.ru, 5 карточек): 2 крупных + 3 в ряд, без одинокой карточки */
.proj.ab-cases{grid-template-columns:repeat(6,minmax(0,1fr))}
.proj.ab-cases>.pcard.pcard{grid-column:span 2}
.proj.ab-cases>.pcard.pcard:nth-child(-n+2){grid-column:span 3}
.proj.ab-cases>.pcard:nth-child(n+3) h3{font-size:18px}
@media(max-width:820px){.proj.ab-cases{grid-template-columns:1fr}.proj.ab-cases>.pcard.pcard,.proj.ab-cases>.pcard.pcard:nth-child(-n+2){grid-column:auto}}