/* Дополнения к ds.css для рабочего сайта: hover из макетов, формы, лента, фокус */
.grayscale{filter:grayscale(1)}
@keyframes ainl-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee,[aria-label="Логотипы клиентов"]{animation:none !important}}
figure picture{display:block}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #cc0000;outline-offset:2px}
.lead-form button[disabled]{opacity:.5}
.f-out{font-size:15px;padding:10px 14px;margin:0}
.f-out.ok{background:#eaf4ea;color:#1e5e2c}
.f-out.err{background:#fbeeee;color:#8a0000}
.f-hp,input[name=hp]{position:absolute !important;left:-9999px !important}
/* подчёркнутая ссылка без своего hover в макете — отзывается цветом подчёркивания */
.h-line:hover{text-decoration-color:var(--color-accent) !important}
/* UX-аудит 18.09: шапки таблиц читаемее; тема заявки над формой; ссылка «к содержанию» для клавиатуры; оглавление длинных страниц */
.table th{font-size:12px}
.f-tema{margin:0 0 4px;padding:10px 14px;background:var(--color-bg);border-left:3px solid var(--color-accent);font-size:15px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;background:#201e1d;color:#f3f2f2;font-weight:800;text-decoration:none}
.skip-link:focus{left:8px}
picture{display:contents}
/* Р-27: подпись автора с датой над подвалом — мелко, не спорит с приглашением ниже */
.podpis{margin:24px 0 40px;font-size:13px;line-height:1.5;color:var(--color-neutral-700)}
.podpis a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.podpis a:hover{color:var(--color-accent-700)}
.toc-row{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;padding:14px 0;border-bottom:2px solid var(--color-divider);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.toc-row span{color:var(--color-neutral-600);font-weight:700;white-space:nowrap}
.toc-row a{color:var(--color-text);text-decoration:none;white-space:nowrap}
.toc-row a:hover{color:var(--color-accent)}
@media (max-width:760px){
  .toc-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .toc-row::-webkit-scrollbar{display:none}
  /* таблицы цен: на телефоне строка таблицы — карточка, колонка не уезжает за край (К-2) */
  .table{min-width:0 !important;font-size:15px !important}
  .table tr:first-child{display:none}
  .table,.table tbody,.table tr,.table td{display:block}
  .table tr{padding:14px 0 6px;border-top:2px solid var(--color-divider)}
  .table td{border:0 !important;padding:2px 0 10px !important}
  .table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-neutral-700);font-weight:700;margin-bottom:2px}
  .table td:first-child{font-weight:800;font-size:17px;padding-bottom:6px !important}
  .table td:first-child::before,.table td[data-num]+td::before{display:none}
  .table td[data-num],.table td[data-num]+td{display:inline-block;vertical-align:baseline}
  .table td[data-num]{padding-right:8px !important;color:var(--color-accent-700)}
  .table td[data-num]+td{font-weight:800;font-size:17px}
}
/* переход к блоку по якорю: заголовок не прячется под липкой шапкой */
[id]{scroll-margin-top:88px}

/* Телефон: меню макета переносилось в 3 строки — липкая шапка занимала 214 px из 812, пункты 22 px высотой.
   Как решали для сайта раньше: меню — одна лента, её листают пальцем. Шапка 110 px, зона нажатия 44 px. */
@media (max-width: 760px){
  header > div{gap:0 16px !important;min-height:0 !important}
  header .menu-row{order:3;flex:0 0 100% !important;flex-wrap:nowrap !important;overflow-x:auto;
    gap:0 20px !important;padding:11px 0 !important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  header .menu-row::-webkit-scrollbar{display:none}
  header .menu-row a,footer nav a{position:relative}
  header .menu-row a::after{content:"";position:absolute;inset:-11px -10px}
  footer nav a::after{content:"";position:absolute;inset:-12px}
  header > div > a:first-child{position:relative}
  header > div > a:first-child::after{content:"";position:absolute;inset:-11px -8px}
  /* отдельные ссылки «… →» в тексте: 27–30 px высотой — расширяем зону нажатия, вид не меняется */
  .h-tap{position:relative}
  .h-tap::after{content:"";position:absolute;inset:-8px -4px}
  header > div > a:last-child{display:inline-flex !important;align-items:center;min-height:44px;margin-block:10px}
  [id]{scroll-margin-top:128px}
}

/* Телефон: в макете обложка с фото — две колонки, на 375 px фото ложилось под заголовок.
   Собираем в одну колонку: заголовок → фото → текст. Десктоп не меняется. */
@media (max-width: 760px){
  section[data-screen-label="Обложка"]{grid-template-columns:1fr !important}
  section[data-screen-label="Обложка"] > figure{grid-column:1 !important;grid-row:auto !important;
    min-height:0 !important;height:auto !important;max-height:440px;order:2}
  section[data-screen-label="Обложка"] > figure img{height:auto !important;max-height:440px}
  section[data-screen-label="Обложка"] > div{grid-column:1 !important}
  section[data-screen-label="Обложка"] > div:first-of-type{order:1}
  section[data-screen-label="Обложка"] > div:last-of-type{order:3}
  /* «Кто я»: сетка обложки на уровень глубже — фото под текстом, ограниченной высоты */
  section[data-screen-label="Обложка"] > div:has(> figure){grid-template-columns:1fr !important}
  section[data-screen-label="Обложка"] > div > figure{max-width:320px;aspect-ratio:3/4 !important}
}

/* Р-2, главная на телефоне: портрет 440 px занимал весь первый экран, кнопка «Написать» была через полтора экрана.
   Фото — маленьким квадратом рядом с рубрикой, под ними заголовок, текст и кнопка. Десктоп не меняется. */
@media (max-width: 760px){
  section[data-screen-label="Обложка"]:has(> figure){grid-template-columns:1fr 104px !important;gap:16px !important;padding-top:24px !important}
  /* отступы внутри блока с текстом и кнопкой — чтобы «Написать» встала в первый экран 375×812 */
  section[data-screen-label="Обложка"]:has(> figure) > div:last-of-type{gap:20px !important}
  section[data-screen-label="Обложка"]:has(> figure) > div:last-of-type > div:first-child{gap:14px !important}
  section[data-screen-label="Обложка"]:has(> figure) > div:first-of-type{display:contents}
  section[data-screen-label="Обложка"]:has(> figure) > div:first-of-type > p{grid-column:1;grid-row:1;align-self:center;margin:0 !important}
  section[data-screen-label="Обложка"]:has(> figure) > figure{grid-column:2 !important;grid-row:1 !important;width:104px !important;
    height:104px !important;min-height:0 !important;max-height:none;align-self:start !important}
  /* голова по центру квадрата (Андрей 22.09: «от обреза до макушки и от подбородка до обреза — одинаково»):
     на исходнике 1200×1800 макушка 272, подбородок 1110; квадрат 1200 с отступом 90 даёт поля 182 и 180 → 90/600 = 15% */
  section[data-screen-label="Обложка"]:has(> figure) > figure img{height:100% !important;max-height:none !important;object-position:50% 15% !important}
  section[data-screen-label="Обложка"]:has(> figure) > div:first-of-type > h1{grid-column:1 / -1;grid-row:2;margin:0 !important}
  section[data-screen-label="Обложка"]:has(> figure) > div:last-of-type{grid-column:1 / -1 !important;grid-row:3}
}

/* Р-3, меню на телефоне: первыми — «Услуги и цены» и «Кейсы», их ищут раньше направлений. Десктоп не меняется. */
@media (max-width: 760px){
  header .menu-row a[href="/uslugi/"]{order:-2}
  header .menu-row a[href="/keysy/"]{order:-1}
}

.h-4334b4:hover{background: var(--color-surface) !important}
.h-4fdb47:hover{color: var(--color-accent) !important}
.h-87671a:hover{background: var(--color-accent-100) !important}
.h-89aaca:hover{background: var(--color-bg) !important}
.h-d38f8c:hover{background: var(--color-accent-600) !important}
.h-f7e429:hover{color: var(--color-accent-700) !important}