/* Раздел «Услуги и цены» (site/services/page.css) — своё поверх _assets/styles.css. 03.10: объединение /uslugi/ + /ceny/ по решению Алексея.
   Первая часть — стили «Цен» (шапка, карточки, факторы, договор, FAQ-вкладки), вторая — блоки хаба услуг («ИИ или съёмка?», таблица этапов). */

/* ---------- Компактная шапка (как .phead--works): H1 в 2 строки, лид справа, карточки сразу под ней ---------- */
.phead--ceny{padding-bottom:clamp(24px,3vw,36px)}
.phead--ceny .phead__grid{grid-template-columns:1.3fr .7fr;gap:24px 48px;align-items:end}
.phead--ceny h1{max-width:none}
.phead--ceny .sub{max-width:40ch;font-size:clamp(17px,1.3vw,20px);line-height:1.4;padding-bottom:.35em}

/* ---------- Четыре карточки услуг: название, цена крупно, срок рядом, одна строка «для чего» ---------- */
.prices{padding-top:0;padding-bottom:clamp(56px,6vw,96px)}
.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pcard{display:grid;grid-template-rows:auto auto 1fr auto;align-content:start;gap:14px;min-width:0;padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px);
  border-radius:var(--r-card);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--line-d);transition:box-shadow .3s}
.pcard:hover{box-shadow:inset 0 0 0 1px rgba(244,238,230,.3)}
/* 03.10: тематический фон карточки — в покое затемнённый постер (кадр лупа с главной), при наведении плавно
   проявляется само видео (JS в index.html подставляет src при первом наведении: data-hover-src, preload=none).
   Абсолютный .pcard__bg в сетку не входит, высота карточки не меняется; текст над ним через z-index. */
.pcard{position:relative;isolation:isolate;overflow:hidden}
.pcard>*{position:relative;z-index:1}
.pcard__bg{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;background:var(--night-2)}
.pcard__bg img,.pcard__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pcard__bg img{opacity:.55;transform:scale(1.02);transition:opacity .6s,transform 1.2s var(--ease-soft)}
.pcard__bg video{opacity:0;transition:opacity .7s}
.pcard__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,13,.86) 0%,rgba(22,16,13,.7) 45%,rgba(22,16,13,.88) 100%)}
.pcard:hover .pcard__bg img{transform:scale(1.05)}
.pcard.is-playing .pcard__bg video{opacity:1}
.pcard.is-playing .pcard__bg img{opacity:0}
.pcard.is-playing .pcard__bg::after{background:linear-gradient(180deg,rgba(22,16,13,.78) 0%,rgba(22,16,13,.5) 45%,rgba(22,16,13,.84) 100%)}
.pcard__for,.pcard__time{color:#B8ADA4}
html.flat .pcard__bg video,.pcard:not(.is-playing) .pcard__bg video{opacity:0}
@media (hover:none),(prefers-reduced-motion:reduce){.pcard__bg video{display:none}.pcard:hover .pcard__bg img{transform:scale(1.02)}}
.pcard__t{font-size:clamp(19px,1.5vw,22px);letter-spacing:-.02em;line-height:1.12;max-width:none;text-wrap:balance;min-height:2.24em}
.pcard__t a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .3s}
.pcard__t a:hover{text-decoration-color:currentColor}
.pcard__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding-top:6px}
.pcard__price b{font-weight:400;font-size:clamp(26px,2.3vw,34px);letter-spacing:-.03em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.pcard__unit{font-style:normal;font-size:14px;line-height:1.3;color:var(--milk);flex-basis:100%;margin-top:2px}
.pcard__time{font-size:var(--small);line-height:1.4;color:var(--mute-d);white-space:nowrap}
.pcard__unit+.pcard__time{flex-basis:100%}
.pcard__for{font-size:15px;line-height:1.4;color:var(--mute-d);max-width:30ch}
.pcard__more{font-size:var(--small);font-weight:500;color:var(--milk);justify-self:start}
.pcards__all{margin-top:clamp(20px,2.4vw,32px);font-size:15px;line-height:1.45;color:var(--mute-d);max-width:76ch}
.pcards__all b{font-weight:500;color:var(--milk)}

/* ---------- Факторы и договор: заголовки без надзаголовка ---------- */
#factors .chap__head p{max-width:50ch}

.faq__head{margin-bottom:clamp(36px,4.5vw,64px)}
.faq__head h2{max-width:12ch}
/* вопросы мельче заголовочного кегля, ответы читабельные */

@media (max-width:1100px){
  .pcards{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .phead--ceny{padding-bottom:18px}
  .phead--ceny .phead__grid{grid-template-columns:1fr;gap:12px}
  .phead--ceny h1{max-width:none}
  .phead--ceny .sub{padding-bottom:0;font-size:16px}
  .prices{padding-bottom:48px}
  .pcards{grid-template-columns:1fr;gap:8px}
  /* цена и срок сверху, название под ними, описание в одну-две строки — карточка до 250px */
  .pcard{grid-template-rows:auto auto auto auto;gap:8px;padding:16px 16px 14px}
  .pcard__t{min-height:0}
  .pcard__price{order:-1;padding-top:0;align-self:start;gap:2px 10px}
  .pcard__price b{font-size:26px}
  .pcard__unit{flex-basis:auto;margin-top:0;font-size:13px}
  .pcard__unit+.pcard__time{flex-basis:auto}
  .pcard__t{font-size:18px}
  .pcard__for{font-size:14px;max-width:none}
  .pcard__more{margin-top:2px}
  .pcards__all{margin-top:18px;font-size:14px}
  /* вкладки — прокручиваемая строка чипов */
}

/* ===== Блоки с хаба «Услуги» (бывш. uslugi/page.css) ===== */
/* ---------- Таблица «ИИ или съёмка?»: акцентная шапка и первый столбец (29.09 Алексей) ---------- */
.ai .cmp th{color:var(--milk);font-weight:600;padding-bottom:16px;border-bottom:2px solid var(--brick-text)}
.ai .cmp td:first-child{color:var(--milk);font-weight:600}
/* 29.09: таблица этапов — все колонки, включая «Пример», по левому краю */
.ptable.ptable--stages th,.ptable.ptable--stages td,.ptable.ptable--stages th:last-child,.ptable.ptable--stages td:last-child{text-align:left}
.ptable--stages a.ulink,.ai .cmp a.ulink{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:currentColor}
.ptable--stages a.ulink:hover,.ai .cmp a.ulink:hover{color:var(--brick)}
.ai .cmp a.ulink:hover{color:var(--brick-text)}
/* Хаб: блок «ИИ или съёмка» в один экран; таблица этапов крупнее и на всю ширину */
.ai__lead{max-width:78ch;color:var(--mute-d);font-size:17px;line-height:1.5;margin-bottom:clamp(24px,3vw,40px)}
.ai .cmp td{max-width:none;font-size:16.5px;line-height:1.45}
.ptable--stages{table-layout:fixed}
.ptable--stages th:nth-child(1){width:19%}.ptable--stages th:nth-child(2){width:29%}.ptable--stages th:nth-child(3){width:20%}.ptable--stages th:nth-child(4){width:32%}
.ptable--stages td{max-width:none;font-size:17px;line-height:1.45;padding-right:28px}
.ptable--stages td:first-child{font-size:clamp(19px,1.6vw,23px)}
.ptable--stages td:last-child{padding-right:0}


/* 03.10 (правки Алексея): 6 факторов цены в 2 колонки — нижняя линия у обоих пунктов последнего ряда (как в #guar) */
#factors .steps--2 li:nth-last-child(-n+2){border-bottom:1px solid var(--line-l)}
@media (max-width:900px){#factors .steps--2 li:nth-last-child(2){border-bottom:0}}
/* Кнопка «Смотреть все работы» под таблицей этапов — по центру */
.chap__foot--center{justify-content:center}
/* H2 «Нейросети, 3D или съёмка: / что выбрать под вашу задачу» в 2 строки: вторая колонка .chap__head здесь пустая, отдаём заголовку всю ширину */
.ai .chap__head{grid-template-columns:1fr}
/* 03.10 (правка Алексея): шапка таблицы этапов выделена как у таблицы «Нейросети, 3D или съёмка» (.ai .cmp th), на светлом фоне — чернила + бордо */
.ptable--stages th,.light .ptable--stages th{color:var(--ink);font-weight:600;padding-bottom:16px;border-bottom:2px solid var(--brick);font-size:15px}