/* КАРТОЧКА УСЛУГИ - ОБЩИЙ КОМПОНЕНТ ДЛЯ ГЛАВНОЙ И /services (15.09.2026).
   Раньше эти правила жили двумя копиями: в home.css и инлайном в services.html.
   Копии разъехались - на главной карточка успела поменяться трижды, на /services
   осталась прежней. Теперь описание компонента ровно одно, подключается обеими
   страницами обычным <link>. Раскладка сетки у каждой страницы своя: на главной
   левая колонка с заголовком, срез третьего ряда и раскрытие, на /services
   простая сетка со всеми девятью карточками.
   Файл лежит в КОРНЕ, а не в /assets/: на /assets/* стоит Cache-Control immutable
   на год, и правка требовала бы переименования файла (см. CLAUDE.md). */

/* КАРТОЧКА УСЛУГИ. Устройство одинаковое на всех ширинах: иконка в левом верхнем
   углу, стрелка «наружу» в правом, название внизу слева. Тег-пилюля и «Узнать
   больше» скрыты везде, из разметки не удалены.
   ВЫСОТА ЖЁСТКАЯ: 200px на десктопе, 128px на телефоне (блок <=600px ниже).
   Ни соотношения сторон, ни min-height, ни height:100% - все три по очереди давали
   карточку, которая тянется за содержимым или за рядом сетки и выходит выше
   концепта вдвое. Отступ 24px со всех сторон. */
.service-card{position:relative;height:200px !important;min-height:0 !important;display:flex !important;flex-direction:column !important;align-items:stretch;padding:24px !important;text-align:left;border-radius:22px;text-decoration:none;color:#fff;overflow:hidden;isolation:isolate;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.service-card .sc-tag,.service-card .sc-more{display:none !important}
.service-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 60px -16px rgba(247,137,219,.35);border-color:rgba(247,137,219,.55) !important}
/* Название прижато к низу: margin-top:auto у блока с ним. Максимум две строки,
   лишнее режется многоточием (line-clamp работает в Safari с префиксом). */
.sc-top{display:flex;flex-direction:column;gap:10px;flex:0 1 auto;margin-top:auto;min-height:0}
/* flex:0 0 auto у названия обязателен. Без него название - обычный сжимаемый
   флекс-элемент, и когда места в карточке впритык, браузер отнимает высоту
   именно у него: двухстрочное название ужимается до 46px вместо 51 и
   line-clamp дорисовывает многоточие на целом тексте. Ловилось на срезанном
   ряду главной. */
.service-card h3{font-family:'Manrope',sans-serif;font-weight:600;font-style:normal;font-size:20px;line-height:1.25;margin:0;color:#fff;text-transform:none;
  flex:0 0 auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ОПИСАНИЕ ПО НАВЕДЕНИЮ НЕ МЕНЯЕТ ВЫСОТУ КАРТОЧКИ: карточка 200px жёстко, описание
   раскрывается под названием внутри этих 200px, название при этом уезжает вверх.
   Больше двух строк не показывается - обрезка многоточием. max-height на ховере
   ровно под две строки, иначе переход стартовал бы с запасом и дёргался. */
.sc-desc{font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);margin:0;text-align:left;max-height:0;opacity:0;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  transition:max-height .35s ease,opacity .3s ease}
.service-card:hover .sc-desc{max-height:42px;opacity:1}
.sc-tag{position:absolute !important;left:24px !important;bottom:24px !important;display:inline-flex;align-items:center;width:auto !important;max-width:max-content;padding:7px 16px;border:1px solid rgba(255,255,255,.5);border-radius:50px;font-size:11px;color:#fff;background:transparent;white-space:nowrap;transition:opacity .25s ease,transform .25s ease}
.service-card:hover .sc-tag{opacity:0;transform:translateY(6px);pointer-events:none}
.sc-more{position:absolute !important;left:24px !important;bottom:24px !important;display:inline-flex !important;align-items:center;width:auto !important;max-width:max-content;padding:7px 18px;border:1px solid rgba(255,255,255,.85);border-radius:50px;font-size:12px;color:#fff;font-weight:600;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease,background .25s ease;background:transparent}
.service-card:hover .sc-more{opacity:1;transform:translateY(0)}
.service-card:hover .sc-more:hover{background:#fff;color:#0e055a}
/* ЗАЛИВКА. Все обычные карточки - одна и та же спокойная: тёмное стекло, тонкая
   рамка, лёгкий блик сверху. Три разных заливки style-a/b/c и подсветки разных
   оттенков, которые стояли раньше, давали пестроту, а полностью одинаковая сетка
   одинаковых прямоугольников выглядит сгенерированной - поэтому ОДИН акцент:
   первая карточка (.sc-lead, таргет, главная услуга) несёт фирменный градиент,
   тот самый, что был у style-a до 15.09.2026. Классы style-a/b/c в разметке
   оставлены, на вид они больше не влияют. */
.service-card.style-a,.service-card.style-b,.service-card.style-c{
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  background:linear-gradient(160deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.035) 45%,rgba(255,255,255,.025) 100%)}
.service-card.sc-lead{border-color:rgba(255,255,255,.18);
  background:linear-gradient(135deg,#0e055a 0%,#21065d 25%,#2d09ae 50%,#5a37d3 75%,#5f76e8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 28px rgba(14,5,90,.4)}
/* Верхняя строка карточки услуги: иконка слева, стрелка справа.
   ШТРИХ ИКОНОК - ГРАДИЕНТ, тот же переход розовый в фиолетовый, что у неоновой
   обводки: один linearGradient в спрайте (#svcIcoGrad, userSpaceOnUse), на
   каждой иконке stroke="url(#svcIcoGrad)" атрибутом и здесь же правилом - CSS
   сильнее атрибута, и без правила общий stroke:currentColor перебил бы градиент.
   Стрелка остаётся белой и приглушённой. Заливки нет ни у одной. */
.sc-head{display:flex;align-items:flex-start;justify-content:space-between;
  flex:0 0 auto;min-height:28px;margin-bottom:8px}
/* Строка про цех под названием мерча. Обычный регистр и обычный трекинг:
   разреженный капс «ИДЕЯ · МАКЕТ · ПЕЧАТЬ · ТИРАЖ», стоявший тут раньше, был
   самым заметным признаком сгенерированного макета. На телефоне не показывается -
   в полосе 132px ей нет места, слова остаются в самой иллюстрации. */
.sc-merch-note{display:none;margin:8px 0 0;font-family:'Manrope',sans-serif;font-size:14px;line-height:1.45;color:var(--w60)}
@media(min-width:601px){.sc-merch-note{display:block}}
/* Те же свойства продублированы инлайн-атрибутом style прямо на спрайте, и это
   не лишнее: home.css грузится неблокирующе, а до его прихода <svg> остаётся
   строчным элементом и создаёт строку в потоке - страница уезжает вниз, а
   после применения файла возвращается. Ровно так и получили CLS 0.029. */
.svc-sprite{position:absolute;width:0;height:0;overflow:hidden}
.sc-ico,.sc-go{fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sc-ico{display:block;width:28px;height:28px;stroke:url(#svcIcoGrad)}
.sc-go{stroke:currentColor}
.sc-ico--none{width:28px;height:28px}
/* Стрелка декоративная и приглушённая: карточка и так ссылка целиком. */
.sc-go{display:block;width:16px;height:16px;color:#fff;opacity:.45;
  flex:0 0 auto}

/* ПОЛОСА МЕРЧА В ПЛИТКЕ УСЛУГ.
   Компонент .neon в варианте «карточка»: неоновая обводка и отличает её от
   остальных. Раскладка строкой на всех ширинах: название с бейджем слева,
   иллюстрация справа, стрелка в правом верхнем углу.
   ВЫСОТА ЖЁСТКАЯ: 160px от 601px, 132px на телефоне. Иллюстрация задана в
   пикселях в пропорции своего viewBox (316x178, то есть 16:9), поэтому
   preserveAspectRatio ничего не режет. Соотношение сторон через CSS тут не
   используется вовсе - по условию правки его в блоке услуг быть не должно. */
.service-card.sc-merch{--neon-r:22px;background:radial-gradient(120% 150% at 50% 0%,rgba(141,72,220,.30),rgba(18,10,63,0) 62%),#120a3f !important;
  border-color:transparent !important}
.sc-merch h3{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:0;
  -webkit-line-clamp:unset;display:flex}
.sc-merch h3 .svc-new{margin-left:0}
.sc-merch-art{display:block;position:relative;z-index:1;overflow:hidden;flex:0 0 auto}
/* Общая верхняя строка в горизонтальной раскладке встала бы третьей колонкой
   слева от названия, поэтому стрелку кладём в угол абсолютом, а пустую распорку
   под иконку убираем. */
.service-card.sc-merch .sc-head{position:absolute;min-height:0;margin:0;z-index:3}
.service-card.sc-merch .sc-ico--none{display:none}
.service-card.sc-merch .sc-top{flex:1 1 auto;margin-top:0;min-width:0}
/* Описание по наведению на полосе не раскрывается: высота 160px жёсткая, а под
   названием стоит своя строка про цех. Текст остаётся в разметке. */
.service-card.sc-merch:hover .sc-desc{max-height:0;opacity:0}
/* Место в сетке: на планшете (601-1023) во всю ширину, на десктопе правило
   grid-column:2 / -1 лежит в блоке min-width:1024px выше по файлу - поэтому здесь
   оно ограничено диапазоном, иначе при равном весе побеждало бы это, позднее. */
@media(min-width:601px) and (max-width:1023.98px){
  .services-grid .service-card.sc-merch{grid-column:1 / -1}
}
@media(min-width:601px){
  .services-grid .service-card.sc-merch{flex-direction:row !important;
    align-items:center;height:160px !important;padding:20px 24px !important}
  .service-card.sc-merch .sc-top{padding-right:24px}
  .service-card.sc-merch h3{font-size:26px;gap:12px}
  .service-card.sc-merch .sc-merch-art{width:214px;height:120px}
  .service-card.sc-merch .sc-head{top:18px;right:20px}
}


/* РАЗМЕРЫ НА ТЕЛЕФОНЕ (<=600px). Только сам компонент - раскладка сетки у каждой
   страницы своя. */
@media(max-width:600px){
  /* ВЫСОТА ЖЁСТКАЯ 128px, отступ 16px. Прежние соотношение сторон и min-height сняты:
     карточка выходила выше концепта, а середина пустовала. Название 15px в две
     строки; «Контекстная реклама в Google» на 360px проверяется отдельно, при
     нехватке ширины кегль опускается до 14px, высота не растёт. */
  .service-card{height:128px !important;padding:16px !important;border-radius:16px;
    justify-content:flex-start}
  .service-card h3{font-size:15px;line-height:1.25;overflow-wrap:break-word;hyphens:none}
  .sc-top{gap:0}
  /* На 360px «Контекстная реклама в Google» при 15px уходит в третью строку и
     режется, при 14px встаёт в две. Высота карточки при этом не растёт. */
  @media(max-width:380px){.service-card h3{font-size:14px}}
  /* Описание прячется только на телефоне: раскрывать его по наведению там нечем,
     а место оно займёт. Тег и «Узнать больше» скрыты общим правилом. */
  .service-card .sc-desc{display:none !important}
  /* Иконка 22, стрелка 12 и бледнее, чем на десктопе. */
  .sc-head{min-height:22px;margin-bottom:6px}
  .sc-ico,.sc-ico--none{width:22px;height:22px}
  .sc-go{width:12px;height:12px;opacity:.35}
  /* ПОЛОСА МЕРЧА НА ТЕЛЕФОНЕ: во всю ширину строки, 132px жёстко, иллюстрация
     справа в пикселях (16:9 от своего viewBox). flex-direction перебивается
     !important - базовое правило .service-card объявлено через !important. */
  .services-grid .service-card.sc-merch{grid-column:1 / -1;flex-direction:row !important;
    align-items:center;height:132px !important;padding:16px !important;border-radius:18px}
  .service-card.sc-merch .sc-top{padding-right:10px}
  .service-card.sc-merch h3{font-size:15px;gap:7px}
  .service-card.sc-merch .svc-new{font-size:9px;padding:0 7px}
  .service-card.sc-merch .sc-merch-art{width:156px;height:88px}
  .service-card.sc-merch .sc-head{top:12px;right:12px}
}