/* pages.css — служебные страницы раздела «О компании» (/{lang}/about/{slug}/, раньше #/page/...):
   шапка .sec-head.pagehead, текст .pagetext, карточки .pcard, шаги предзаказа .steps, блок владельца .owner,
   отзывы .reviews и ссылки .pagelinks. Рамку страниц рисует about.js, тексты — pages.js.
   Владелец: команда «разделы». */

/* парная запись для .sec-head.cathead из catalog.css: специфичность .sec-head.pagehead (0,2,0)
   выше базового .sec-head, поэтому порядок подключения файлов роли не играет */
/* nowrap: иначе длинный грузинский заголовок сбрасывает кнопку «назад» на отдельную строку */
.sec-head.pagehead{display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:nowrap}
.sec-head.pagehead>div{flex:1 1 auto;min-width:0}
.sec-head.pagehead .rnd{flex:0 0 auto}
/* надзаголовок-ссылка «О компании» над h2 поднимает центр текстового блока — возвращаем кнопку
   к центру заголовка, как у .cathead в catalog.css */
.sec-head.pagehead:has(.kicker):not(:has(p)) .rnd{margin-top:20px}
/* крупная шапка страницы; штрих-диагональ под ней рисует .sec-head h2::after из base.
   overflow:hidden тут ставить нельзя — он срежет этот штрих, висящий ниже бокса h2.
   Надзаголовок .kicker над h2 вставляет about.js (путь назад на страницу компании) */
.sec-head.pagehead h2{margin:0;min-width:0;font-size:clamp(26px,3.6vw,36px)}
/* колонка уже, чем wrap 880px: длинные строки лида читаются тяжело */
.pagetext{color:var(--ink2);font-size:17px;line-height:1.6;max-width:66ch;margin:4px 0 22px}

/* тело страницы: набор карточек */
.pagebody{display:grid;gap:18px;margin-bottom:28px}
.pcard{border:1px solid var(--line);border-radius:var(--rl);padding:22px 24px;background:#fff}
.pcard h3{margin:0 0 10px;font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--brand)}
.pcard p{margin:0 0 10px;color:var(--ink2);line-height:1.6}
.pcard p:last-child{margin-bottom:0}
/* маркер списка — фирменный штрих вместо точки. \200B обязателен: при list-style:none
   Safari теряет роль списка, а псевдоэлемент с содержимым её возвращает */
.pcard ul{list-style:none;margin:0;padding:0;color:var(--ink2);line-height:1.6}
.pcard li{position:relative;padding-left:22px}
.pcard li::before{content:"\200B";position:absolute;left:0;top:.7em;width:11px;height:3px;line-height:0;
  background:var(--accent);transform:skewX(var(--skew))}
.pcard li+li{margin-top:8px}
.pcard .btn{margin-top:8px}
.pcard.warranty{background:var(--ok-bg);border-color:transparent;color:var(--ok)}
.pcard.warranty p{color:inherit;font-weight:600}
.soc-a{display:inline-block;color:var(--brand);font-weight:700}
.soc-a:hover{text-decoration:underline;text-underline-offset:3px}
.soc-a:active{opacity:.7}

/* точка выдачи внутри карточки «Доставка» */
.pcard .pk{margin-top:12px;font-size:14.5px;color:var(--ink2);line-height:1.55}
.pcard .pk .pk-a{display:flex;gap:8px;align-items:flex-start}
.pcard .pk svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:2px}
.pcard .pk .pk-s,.pcard .pk .pk-h{padding-left:25px}
.pcard .pk .pk-m{display:inline-block;margin:6px 0 0 25px;color:var(--brand);font-weight:700}
.pcard .pk .pk-m:hover{text-decoration:underline;text-underline-offset:3px}

/* четыре шага предзаказа — мягкие синие плашки: рамка на них читалась бы как ещё одна карточка */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.step{background:var(--brand-soft);border:0;border-radius:var(--rl);padding:18px;min-width:0}
.step b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);
  color:#fff;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;margin-bottom:12px}
.step h4{margin:0 0 6px;font-size:15.5px;font-weight:700}
.step p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.55}

/* владелец */
.owner{display:flex;gap:18px;align-items:flex-start}
/* окантовка не двигает макет: box-sizing:border-box стоит в base на всём */
.owner img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft);
  border:3px solid var(--brand-soft)}
.owner b{font-size:17px;font-weight:700}
.owner .orole{color:var(--ink3);font-size:13.5px;margin-bottom:8px}
.owner p{margin:0;color:var(--ink2);line-height:1.6}

/* соцсети и контакты внутри страниц */
.soc,.pcontacts{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:12px}
.soc a,.pcontacts a{display:inline-flex;align-items:center;gap:7px;color:var(--brand);font-weight:700;font-size:14.5px}
.soc a:hover,.pcontacts a:hover{text-decoration:underline;text-underline-offset:3px}
.soc a:active,.pcontacts a:active{opacity:.7}
.soc svg,.pcontacts svg{width:17px;height:17px;flex:none}

/* отзывы */
.reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.review{background:var(--brand-soft);border-radius:var(--r);padding:14px;min-width:0}
.review p{margin:0 0 8px;color:var(--ink);line-height:1.55;font-size:14.5px}
/* подпись идёт --ink2: --ink3 на синей плашке даёт всего 4.19:1 */
.review span{color:var(--ink2);font-size:13px}

/* экран «страница не найдена» — единственная фирменная диагональ на статических страницах */
.pagenf{position:relative;overflow:hidden;background:var(--brand-soft);border-radius:var(--rl);padding:26px 24px;margin:0 0 28px}
.pagenf .pagetext{max-width:60ch;margin:0 0 18px;position:relative;z-index:1}
.pagenf .btn{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* копия .streaked из base: класс в разметку pages.js не добавить, а ::after у блока свободен */
.pagenf::after{content:"";position:absolute;right:-8%;top:16%;width:30%;height:13px;border-radius:7px;pointer-events:none;
  transform:rotate(var(--skew));transform-origin:100% 50%;background:linear-gradient(90deg,transparent,var(--accent));opacity:.85}

.pagelinks{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:18px}
.pagelinks .chip{cursor:pointer}

@media(max-width:760px){
  /* одиночные ссылки страниц («Открыть на карте», контакты) — тап-зона 44px */
  .soc a,.pcontacts a,.pcard>.soc-a,.pcard .pk .pk-m{display:inline-flex;align-items:center;min-height:44px}
  .steps,.reviews{grid-template-columns:1fr}
  .owner{flex-direction:column;gap:12px}
  .pcard,.step{padding:16px}
  /* margin-top больше: на телефоне .sec-head сжимается до 14px и лид почти упирается
     в штрих под заголовком — тот висит на 16px ниже бокса h2 */
  .pagetext{font-size:15.5px;margin-top:10px}
  /* на узком экране диагональ легла бы под мелкий текст — бриф этого не разрешает */
  .pagenf{padding:20px 16px}
  .pagenf::after{display:none}
}