/* ============================================================
   Обо мне — надстройка над sv2026.css и sv-blog.css
   ============================================================ */
.sv-sect { overflow: clip; }
.sv-sect > .sv-wrap { position: relative; z-index: 1; }
.sv-head { max-width: 760px; margin-bottom: 22px; }

/* портрет: только целиком, без обрезки лица */
.ab-portrait { background: var(--paper-2); }
.ab-portrait img {
  aspect-ratio: 649 / 600 !important; object-fit: contain !important; object-position: center;
  background: var(--paper-2);
}
.ab-facts .sv-strip__cell { grid-template-columns: 1fr; }
.ab-fact { display: block; white-space: nowrap; font-size: 27px; font-weight: 800; color: var(--orange); line-height: 1; letter-spacing: -.02em; }
.ab-facts .sv-strip__txt { font-size: 13.5px; color: var(--body); }

/* история */
.ab-story__grid { display: grid; gap: 24px; }
.ab-story__text p { margin-top: 14px; font-size: 16.5px; line-height: 1.68; }
.ab-story__text p:first-child { margin-top: 0; }
.ab-story__text .sv-arrow { margin-top: 20px; }
.ab-story__shots { display: grid; gap: 14px; }
.ab-shot {
  position: relative; padding: 8px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.ab-shot img { display: block; width: 100%; height: auto; }
.ab-shot > * { box-shadow: none !important; border-radius: 0 !important; }

/* фоновые приёмы: у соседних секций разные */
.ab-story::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: 0; top: 0; width: 320px; height: 290px;
  color: rgba(21,24,27,.2);
  background-image: radial-gradient(currentColor 1.15px, transparent 1.3px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(125% 125% at 100% 0, #000 26%, transparent 72%);
          mask-image: radial-gradient(125% 125% at 100% 0, #000 26%, transparent 72%);
}
.ab-blog::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; top: 0; height: 9px;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 13px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 58%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 58%, transparent 100%);
}
.ab-blog::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 300px; height: 380px; background-repeat: no-repeat; background-size: contain;
  background-image: url("../images/trace-a.svg"); right: 0; bottom: 12px; opacity: .5;
}

/* последнее поле при нечётном их числе — на всю ширину */
.sv-form input:nth-last-of-type(1):nth-of-type(odd) { grid-column: span 2; }

/* тёмный блок: рендер на всю высоту колонки со срезанным углом */
.sv-launch__grid { align-items: stretch; }
.sv-launch__visual { position: relative; display: flex; align-self: stretch; }
.sv-launch__visual img {
  width: 100%; height: 100%; aspect-ratio: auto !important;
  object-fit: cover !important; object-position: center;
  background: var(--dark);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
@media (max-width: 999px) {
  .sv-launch__visual img { height: auto; aspect-ratio: 16 / 9 !important; }
}

@media (min-width: 700px) {
  .ab-story__shots { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .sv-head { margin-bottom: 30px; }
  /* текст в одну колонку чтения, снимки — рядом парой под ним: колонки не приходится
     подгонять по высоте, и под текстом не остаётся пустоты */
  .ab-story__grid { gap: 30px; }
  .ab-story__text { max-width: 760px; }
  .ab-story__shots { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ab-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center; }
  .ab-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .sv-launch .sv-callouts { position: absolute; inset: 0; display: block; margin: 0; }
  .sv-launch .sv-callout { position: absolute; width: max-content; max-width: 190px; }
  .sv-launch .sv-callout--1 { left: -12px; top: 30%; }
  .sv-launch .sv-callout--2 { right: 2%; top: 8%; }
  .sv-launch .sv-callout--3 { right: -14px; top: 54%; }
  .sv-launch .sv-callout--4 { left: 22%; bottom: 5%; }
}


/* ── SC-03 · Проекты ─────────────────────────────────────────────────
   Раскладка: ведущая карточка мастерской во всю ширину, под ней четыре
   продукта 2×2 — одиноких карточек в ряду не остаётся. Фоновый приём
   секции — трасса trace-b слева внизу: у соседей перфорация (ab-story)
   и чертёжная линейка (ab-blog), приёмы не повторяются. */
.ab-proj { position: relative; overflow: hidden; }
.ab-proj > .sv-wrap { position: relative; z-index: 1; }
.ab-proj::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 300px; height: 360px; left: -40px; bottom: 10px; opacity: .42;
  background: url("../images/trace-b.svg") no-repeat left bottom / contain;
}
.ab-proj__lede {
  margin: 12px 0 0; max-width: 660px;
  font-size: 15.5px; line-height: 1.6; color: var(--body);
}
.pr-card--lead { margin-bottom: 14px; }
.pr-card--lead p { max-width: 720px; font-size: 15.5px; }
@media (min-width: 1000px) {
  .pr-grid { gap: 18px; }
  .pr-card--lead { margin-bottom: 18px; }
  .pr-card--lead h3 { font-size: 20px; }
}

/* Один снимок в блоке истории (29.08.2026: владелец убрал кадр с командой) —
   ряд из двух колонок оставил бы половину пустой, поэтому колонка одна,
   а ширина ограничена шириной колонки чтения. */
.ab-story__shots--one { grid-template-columns: 1fr !important; }
@media (min-width: 1000px) {
  .ab-story__shots--one { max-width: 760px; }
}

/* ============================================================
   Переработка 01.09.2026: страница про автоматизацию, а не про сервис
   ============================================================ */

/* полоса под первым экраном держит направления работы, а не числа:
   поэтому шрифт меньше числового и строке разрешён перенос */
.ab-facts--text .ab-fact {
  font-size: 16px; font-weight: 700; color: var(--ink);
  white-space: normal; letter-spacing: -.01em; line-height: 1.25;
}
.ab-facts--text .sv-strip__txt { margin-top: 6px; }

/* история идёт без снимка — одна колонка чтения */
.ab-story__grid--text { grid-template-columns: 1fr; max-width: 820px; }

/* логотип проекта вместо водяного знака: карточка узнаётся до чтения */
.pr-card__logo {
  /* карточка — flex column, поэтому картинку с width:auto растягивает поперёк:
     без align-self логотип занимал всю ширину карточки (поймано 01.09.2026) */
  display: block; align-self: start; width: auto; height: 34px; margin-bottom: 12px;
  object-fit: contain; object-position: left center;
}
.pr-card--lead .pr-card__logo { height: 42px; }

/* у новой секции свой фоновый приём — линейка по нижней кромке */
.ab-stack { position: relative; overflow: hidden; }
.ab-stack > .sv-wrap { position: relative; z-index: 1; }
.ab-stack::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 11px;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 15px);
  -webkit-mask-image: linear-gradient(270deg, #000 0 52%, transparent 100%);
          mask-image: linear-gradient(270deg, #000 0 52%, transparent 100%);
}

/* история идёт в две колонки: справа числа, из которых она выросла —
   без них колонка пустовала (правка владельца 01.09.2026) */
.ab-story__grid--facts { grid-template-columns: 1fr; }
.ab-figures { padding: 22px 22px 24px; align-self: start; }
.ab-figures ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.ab-figures li {
  display: grid; gap: 3px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.ab-figures li:last-child { padding-bottom: 0; border-bottom: 0; }
.ab-figures b {
  font-size: 27px; font-weight: 800; color: var(--orange); line-height: 1; letter-spacing: -.02em;
}
.ab-figures span { font-size: 13.5px; line-height: 1.45; color: var(--body); }

@media (min-width: 1000px) {
  .ab-story__grid--facts { grid-template-columns: minmax(0, 1fr) minmax(0, 310px); align-items: start; }
}
