/* Formlab lead forms - injected via nginx sub_filter, scoped with .fl- prefix.
   Palette taken from the site: accent #ef463b / #d93a2f, primary #1e262d / #141a1f */
.fl-sec{background:#1e262d;color:#fff;padding:56px 20px}
.fl-wrap{max-width:960px;margin:0 auto}
.fl-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
@media(max-width:820px){.fl-grid{grid-template-columns:1fr;gap:28px}.fl-sec{padding:40px 16px}}
.fl-h{font-size:30px;line-height:1.2;font-weight:700;margin:0 0 12px}
@media(max-width:820px){.fl-h{font-size:24px}}
.fl-p{color:#b3bbc1;font-size:15px;line-height:1.6;margin:0 0 18px}
.fl-ul{list-style:none;padding:0;margin:0;color:#d9dde0;font-size:14px}
.fl-ul li{position:relative;padding-left:26px;margin-bottom:10px;line-height:1.5}
.fl-ul li:before{content:"";position:absolute;left:0;top:6px;width:12px;height:7px;
  border-left:2px solid #ef463b;border-bottom:2px solid #ef463b;transform:rotate(-45deg)}
.fl-card{background:#fff;border-radius:16px;padding:26px}
.fl-card .fl-h2{color:#1e262d;font-size:20px;font-weight:700;margin:0 0 4px}
.fl-card .fl-sub{color:#667884;font-size:13px;margin:0 0 18px;line-height:1.5}
.fl-field{margin-bottom:12px}
.fl-label{display:block;font-size:13px;font-weight:500;color:#323e48;margin-bottom:5px}
.fl-input,.fl-ta{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #d9dde0;
  border-radius:9px;font-size:14px;color:#1e262d;font-family:inherit;background:#fff;outline:none;
  transition:border-color .15s,box-shadow .15s}
.fl-ta{resize:vertical;min-height:84px}
.fl-input:focus,.fl-ta:focus{border-color:#ef463b;box-shadow:0 0 0 3px rgba(239,70,59,.15)}
.fl-input::placeholder,.fl-ta::placeholder{color:#98a3ac}
.fl-btn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#ef463b;color:#fff;border:0;border-radius:9px;padding:13px 20px;font-size:15px;
  font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}
.fl-btn:hover{background:#d93a2f}
.fl-btn[disabled]{opacity:.55;cursor:default}
.fl-consent{display:flex;gap:9px;align-items:flex-start;margin:12px 0 14px;
  font-size:12px;color:#667884;line-height:1.45}
.fl-consent input{margin:2px 0 0;flex:0 0 auto;width:15px;height:15px;accent-color:#ef463b}
.fl-consent a{color:#667884;text-decoration:underline}
.fl-err{background:#fdecea;color:#c0271b;border-radius:8px;padding:9px 12px;font-size:13px;margin-bottom:10px}
.fl-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important}
.fl-done{text-align:center;padding:26px 6px}
.fl-done .fl-tick{width:54px;height:54px;border-radius:50%;background:#ef463b;margin:0 auto 16px;
  position:relative}
.fl-done .fl-tick:after{content:"";position:absolute;left:19px;top:16px;width:14px;height:24px;
  border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.fl-done h3{color:#1e262d;font-size:19px;margin:0 0 8px;font-weight:700}
.fl-done p{color:#667884;font-size:14px;margin:0;line-height:1.55}

/* Кнопки, перенесённые со старого сайта: в контенте у них остался инлайновый
   background-color (#ff8400, #00bedb, #0578d5), а цвет текста наследовался от
   ссылок - получалось нечитаемо. Красим текст и придаём вид кнопки. */
.wp-block-button__link,
a[class*="wp-block-button"],
.wp-block-buttons a[style*="background-color"]{
  display:inline-block !important;
  padding:13px 24px !important;
  border-radius:9px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:600 !important;
  font-size:15px !important;
  line-height:1.35 !important;
  box-shadow:0 2px 10px rgba(0,0,0,.14) !important;
  transition:filter .15s, transform .15s !important;
  cursor:pointer;
  border:0 !important;
}
.wp-block-button__link:hover,
a[class*="wp-block-button"]:hover{
  filter:brightness(.92);
  color:#fff !important;
  transform:translateY(-1px);
}
.wp-block-button{margin:20px 0 !important}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}

/* Обложки услуг вместо эмодзи. Эмодзи зашиты в скомпилированный бандл Next.js,
   поэтому подменяем их на реальные фото проектов клиента уже в браузере. */
.fl-cover{
  margin:0 0 16px !important;
  border-radius:10px;
  overflow:hidden;
  background:#f0f2f3;
  line-height:0;
}
.fl-cover img{
  display:block;
  width:100%;
  height:150px;
  object-fit:cover;
  transition:transform .35s ease;
}
.group:hover .fl-cover img{transform:scale(1.04)}
@media(max-width:640px){.fl-cover img{height:170px}}

/* Картинки в контенте идут по одной в <li> - каждая с новой строки.
   Раскладываем плиткой: 4 в ряд, 3 на планшете, 2 на телефоне. */
.prose-body ul.fl-imggrid,
.prose-body ol.fl-imggrid,
ul.blocks-gallery-grid.fl-imggrid{
  list-style:none !important;
  padding-left:0 !important;
  margin:24px 0 !important;
  display:grid !important;
  gap:14px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1100px){
  .prose-body ul.fl-imggrid,.prose-body ol.fl-imggrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .prose-body ul.fl-imggrid,.prose-body ol.fl-imggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
.fl-imggrid > li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.fl-imggrid > li::marker{content:"" !important}
.fl-imggrid > li img{
  width:100% !important;
  aspect-ratio:4/3;
  height:auto !important;
  object-fit:cover;
  display:block;
  margin:0 !important;
  border-radius:10px;
  background:#f0f2f3;
}
/* галереи Gutenberg: сбрасываем их собственную раскладку и правим подписи */
.fl-imggrid > li figure{margin:0 !important;padding:0 !important;height:auto !important}
.fl-imggrid > li figcaption{
  position:static !important;
  background:none !important;
  padding:8px 2px 0 !important;
  margin:0 !important;
  font-size:12px !important;
  line-height:1.35 !important;
  color:#667884 !important;
  text-align:left !important;
  max-height:none !important;
  opacity:1 !important;
}
.fl-imggrid > li figcaption span,
.fl-imggrid > li figcaption a,
.fl-imggrid > li figcaption strong{color:#667884 !important;font-weight:500 !important}
.fl-imggrid > li figcaption a{text-decoration:underline}
@media(max-width:639px){
  .fl-imggrid > li figcaption{font-size:11px !important}
}

/* Серии одиночных figure на карточках портфолио - в такую же сетку 4/3/2 */
.fl-figgrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:24px 0;
}
@media(max-width:1023px){.fl-figgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media(max-width:639px){.fl-figgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.fl-figgrid > figure{margin:0 !important;padding:0 !important;width:auto !important;max-width:none !important}
.fl-figgrid > figure img{
  width:100% !important;
  aspect-ratio:4/3;
  height:auto !important;
  object-fit:cover;
  display:block;
  margin:0 !important;
  border-radius:10px;
  background:#f0f2f3;
}
.fl-figgrid > figure figcaption{
  font-size:12px !important;
  line-height:1.35 !important;
  color:#667884 !important;
  padding:8px 2px 0 !important;
  margin:0 !important;
  text-align:left !important;
}
@media(max-width:639px){.fl-figgrid > figure figcaption{font-size:11px !important}}

/* Лайтбокс: клик по картинке в контенте открывает её крупно с зумом */
img.fl-zoomable{cursor:zoom-in}
.fl-lb{
  position:fixed;inset:0;z-index:2147483100;
  background:rgba(10,13,16,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s;
  overscroll-behavior:contain;
}
.fl-lb.fl-on{opacity:1}
.fl-lb-img{
  max-width:94vw;max-height:88vh;
  object-fit:contain;
  border-radius:6px;
  cursor:zoom-in;
  transition:transform .22s ease;
  transform-origin:center center;
  user-select:none;
  background:#141a1f;
}
.fl-lb-img.fl-zoomed{cursor:zoom-out;max-width:none;max-height:none}
.fl-lb-close,.fl-lb-nav{
  position:absolute;border:0;background:rgba(255,255,255,.1);color:#fff;
  width:46px;height:46px;border-radius:50%;font-size:24px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.fl-lb-close:hover,.fl-lb-nav:hover{background:rgba(255,255,255,.22)}
.fl-lb-close{top:18px;right:18px}
.fl-lb-nav.prev{left:18px;top:50%;margin-top:-23px}
.fl-lb-nav.next{right:18px;top:50%;margin-top:-23px}
.fl-lb-count{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  color:#98a3ac;font-size:13px;background:rgba(0,0,0,.4);
  padding:6px 14px;border-radius:99px;
}
@media(max-width:640px){
  .fl-lb-nav{width:40px;height:40px}
  .fl-lb-nav.prev{left:8px}
  .fl-lb-nav.next{right:8px}
  .fl-lb-close{top:10px;right:10px}
}

/* Плавающая кнопка «AI-помощник» и выезжающее мобильное меню сайта делят
   z-index 50, поэтому кнопка ложилась поверх нижней кнопки в открытом меню -
   получалась одна красная каша. Опускаем её на слой ниже: меню перекрывает,
   а над контентом страницы кнопка остаётся. На десктопе меню-шторки нет,
   поэтому правило только для узких экранов. */
@media (max-width: 1023px) {
  button.fixed.bottom-4.right-4.z-50 { z-index: 40 !important; }
}

/* ЕДИНАЯ СЕТКА КАРТОЧЕК: 4 на ПК, 3 на планшете, 2 на телефоне.
   Класс .fl-cards вешает forms.js на любую карточную сетку сайта - портфолио,
   услуги, статьи, фото. Одно правило вместо правки каждой секции. */
.fl-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
.fl-cards > * { min-width: 0; }

@media (max-width: 1023px) {
  .fl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; }
}
@media (max-width: 639px) {
  .fl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* в две колонки текст карточки должен ужаться, иначе ломается */
  .fl-cards h3,
  .fl-cards h4,
  .fl-cards .text-lg,
  .fl-cards .text-xl { font-size: 14px !important; line-height: 1.25 !important; }
  .fl-cards p { font-size: 12px !important; line-height: 1.35 !important; }
  .fl-cards span { font-size: 10px !important; }
  /* выравниваем разнокалиберные фото, чтобы карточки не были рваной высоты */
  .fl-cards img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
  .fl-cards .fl-cover img { aspect-ratio: auto; }
}

/* popup */
.fl-ov{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;
  justify-content:center;padding:16px;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .18s}
.fl-ov.fl-on{opacity:1}
.fl-modal{position:relative;background:#fff;border-radius:18px;width:100%;max-width:440px;
  max-height:92vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform:scale(.96);transition:transform .18s}
.fl-ov.fl-on .fl-modal{transform:scale(1)}
.fl-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;background:transparent;
  color:#98a3ac;font-size:24px;line-height:1;cursor:pointer;border-radius:50%}
.fl-x:hover{background:#f0f2f3;color:#323e48}
.fl-modal .fl-card{padding:28px 24px 24px}

.fl-hint{margin-top:.35rem;font-size:.8125rem;line-height:1.35;color:#6b7280}

/* Быстрый выбор вместо свободного текста. Рамка и радиус - как у полей формы,
   выбранная кнопка подсвечивается акцентом сайта, без цветных полосок. */
.fl-chips{display:flex;flex-wrap:wrap;gap:7px}
.fl-chip{border:1px solid #d9dde0;background:#fff;border-radius:9px;padding:8px 12px;
  font-size:13px;line-height:1.2;color:#323e48;font-family:inherit;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.fl-chip:hover{border-color:#b6bfc7}
.fl-chip[aria-pressed="true"]{border-color:#ef463b;background:#fef2f1;color:#c0271b}
.fl-chip:focus-visible{outline:2px solid #ef463b;outline-offset:2px}

/* Порядок на экране не зависит от того, куда React поставит узлы:
   контент сверху, блок оценки перед подвалом, подвал последним. */
#fl-inline{order:9998}
main > footer, #fl-inline ~ footer{order:9999}

/* Раскрывающаяся галерея в перенесённых карточках: фото не удалены, а свёрнуты */
details.fl-gallery{margin:28px 0;border:1px solid #e3e7ea;border-radius:12px;padding:0 18px}
details.fl-gallery summary{cursor:pointer;padding:16px 0;font-weight:600;list-style:none}
details.fl-gallery summary::-webkit-details-marker{display:none}
details.fl-gallery summary:after{content:" +";color:#ef463b}
details.fl-gallery[open] summary:after{content:" -"}
.fl-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:0 0 18px}
.fl-gallery-grid img{width:100%;height:auto;border-radius:8px;display:block}