/* Start:/proekt/css/aqn-page.css?179068894064618*/
/*
  aqn-page.css — единственный CSS-файл для сдачи.
  Подключать в рабочей области страницы (не в header.php).
  Каждое правило начинается с .aqn-dev или .aqn- .
*/

/* === Защитный ресет тегов внутри .aqn-dev === */

.aqn-dev :where(
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, li, dl, dd,
  figure, blockquote, fieldset
) {
  margin: 0;
  padding: 0;
  font: inherit;
  list-style: none;
}

.aqn-dev :where(a) {
  color: inherit;
  text-decoration: none;
}

.aqn-dev :where(button, input, textarea, select) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.aqn-dev :where(img, svg, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

.aqn-dev,
.aqn-dev *,
.aqn-dev *::before,
.aqn-dev *::after {
  box-sizing: border-box;
}

/* === Переменные и типографика — на обёртке .aqn-dev, не на :root === */

.aqn-dev {
  --aqn-container: 1350px;
  --aqn-container-padding: 70px;
  --aqn-font: "Geometria", sans-serif;
  --aqn-font-accent: "Montserrat", var(--aqn-font); /* акцидентный шрифт заголовков/кнопок по макету — Geometria покрывает только основной текст */
  --aqn-color-text: #111;
  --aqn-color-heading: #212121; /* тёмно-серый текст из макета — заголовки/подписи блоков (кроме hero, там текст поверх фото — белый) */
  --aqn-color-navy: #023a72; /* фирменный тёмно-синий из макета — текстовые тени, декор, акцентные кнопки */

  font-family: var(--aqn-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--aqn-color-text);
  -webkit-font-smoothing: antialiased;
}

/*
  Брейкпоинты:
  mobile   : до 767
  tablet   : 768–1279 (резиново, макета нет)
  desktop  : от 1280
  В custom properties не выносим — media-условия их не читают, значения нужны только как ориентир при вёрстке блоков.
*/

/* === Общий контейнер блока — используется почти во всех секциях === */

.aqn-container {
  width: 100%;
  max-width: var(--aqn-container);
  margin-inline: auto;
}

/* ==========================================================================
   Hero-баннер
   Figma: десктоп 1712:2555 (1350×500), мобилка 1772:511 (335×450)
   ========================================================================== */

.aqn-hero {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #eee; /* плейсхолдер-подложка под фото, см. заливку узла 1712:2556 */
  margin-top: 30px;
}

.aqn-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* кроп по макету: картинка 1476×559 обрезана фреймом 1350×500 со смещением x=-49/y=-46 */
  object-position: 39% 78%;
}

.aqn-hero__decor {
  position: absolute;
  left: -297px;
  top: -332px;
  width: 1144px;
  height: 1055px;
  background: url("/proekt/css/../assets/img/hero-decor.svg") no-repeat center / contain;
  pointer-events: none;
}

.aqn-hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 62px;
}

.aqn-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  max-width: 614px;
}

.aqn-hero__title, .aqn-hero__title-tail {
  font-family: var(--aqn-font-accent);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 4px 30px var(--aqn-color-navy);
}

.aqn-hero__subtitle {
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
}

.aqn-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 53px;
  padding: 10px 25px;
  border-radius: 30px;
  background: #fff;
  font-family: var(--aqn-font-accent);
  font-weight: 500;
  font-size: 15px;
  line-height: 25px;
  color: var(--aqn-color-navy);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
/*
.aqn-hero__button:hover {
  opacity: 0.85;
}*/

.aqn-hero__soc-button, .feedback-banner__socials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  padding: 10px 25px;
  border-radius: 30px;
  background: #fff;
  font-family: var(--aqn-font-accent);
  font-weight: 500;
  font-size: 15px;
  line-height: 25px;
  color: var(--aqn-color-navy);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.feedback-banner__socials{
  width: 256px;
}

@media (max-width: 1279px) {
  /* резиновое поведение 768–1280: отдельного макета нет, просто уменьшаем боковой отступ вместе с контейнером */
  .aqn-hero__inner {
    padding-left: max(24px, 4vw);
  }
}

@media (max-width: 767px) {
  /* мобильный макет 1772:511 — тот же паттерн (текст поверх фото), но своя высота/кроп/типографика */
  .aqn-hero {
    height: 450px;
    background-color: var(--aqn-color-navy);
  }

  .aqn-hero__decor {
    left: -158px;
    top: -203px;
    width: 582px;
    height: 505px;
    background-image: url("/proekt/css/../assets/img/hero-decor-mobile.svg");
  }

  .aqn-hero__inner {
    align-items: flex-start;
    padding: 30px;
  }

  .aqn-hero__content {
    gap: 20px;
    max-width: 275px;
  }

  .aqn-hero__title {
    /* в мобильном макете заголовок на Geometria, не Montserrat — отдельное написание, не масштаб десктопного */
    font-family: var(--aqn-font);
    font-weight: 500;
    font-size: 24px;
  }

  .aqn-hero__title-tail {
    /* в мобильном макете (1772:517) хвост заголовка идёт отдельной строкой мельче и обычным начертанием */
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
  }

  .aqn-hero__subtitle {
    /* в мобильном макете (1772:511) отдельного подзаголовка нет — текст входит в заголовок мельче */
    display: none;
  }

  .aqn-hero__button {
    width: auto;
    height: auto;
    padding: 10px 32px;
    font-family: var(--aqn-font);
    font-size: 14px;
    line-height: 22px;
  }
}

@media (max-width: 425px) {
  /*
    Отдельный мобильный кроп (hero-bg-mobile@1x/2x) снят точно под узкий телефон (335px карточка).
    На 426–767px (макета нет, резиново) он же растягивается по cover и кадр начинает съезжать —
    поэтому выше 425px картинку в index.html переключаем обратно на десктопный hero-bg@1x/2x
    (см. <picture>), а тут просто не переопределяем object-position — работает базовое значение
    39% 78% из правила .aqn-hero__bg выше.
  */
  .aqn-hero__bg {
    object-position: center bottom;
  }
}

/* ==========================================================================
   Контактная плашка
   Figma: десктоп 1712:2564 (1350×92), мобилка 1772:521 (335×236)
   ========================================================================== */

.aqn-contact {
  display: flex;
  align-items: center;
  gap: 70px;
  padding: 20px 70px;
  margin-top: 70px; /* по макету: низ hero (1712:2555, y=0..500) до верха плашки (1712:2564, y=570) */
  background: #f7f7f7;
  border-radius: 12px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
}

.aqn-contact__label {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--aqn-color-heading);
  white-space: nowrap;
}

.aqn-contact__item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.aqn-contact__icons {
  display: flex;
  align-items: center;
  gap: 10px; /* шаг между иконками 62px = 52 (иконка) + 10 (gap) — см. ТЗ 4.2 */
}

.aqn-contact__icon {
  display: block;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.15)); /* тень по десктопному макету; на мобильном (1772:521) её нет — см. медиа-запрос ниже */
  transition: opacity 0.2s ease;
}

.aqn-contact__icon:hover {
  opacity: 0.8;
}

.aqn-contact__icon-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aqn-contact__link {
  font-weight: 500;
  font-size: 18px;
  color: var(--aqn-color-heading) !important;
  white-space: nowrap;
  text-decoration: none !important;
}

@media (max-width: 1279px) {
  /* резиновое поведение 768–1280: отдельного макета нет — переносим строку, если не помещается */
  .aqn-contact {
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 40px;
    padding: 20px max(24px, 4vw);
  }
}

@media (max-width: 767px) {
  /* мобильный макет 1772:521 — колонка вместо строки, рамка, тень у иконок убирается */
  .aqn-contact {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 20px;
    margin-top: 40px; /* по мобильному макету: низ hero (1772:511, y=0..450) до верха плашки (1772:521, y=490) */
    border: 1px solid #e5e5e8;
  }

  .aqn-contact__label {
    font-size: 18px;
  }

  .aqn-contact__item {
    gap: 10px;
  }

  .aqn-contact__item--phone {
    flex-direction: column;
    align-items: flex-start;
  }

  .aqn-contact__icon {
    filter: none;
  }

  .aqn-contact__link {
    font-size: 15px;
  }
}

/* ==========================================================================
   Ценовые сегменты
   Figma: 1712:2585 (1350×402; фрейм в макете размечен на 1922, но это не full-bleed —
   full-bleed блоков на странице нет, контент внутри уже центрирован в 1350)
   ========================================================================== */

.aqn-price {
  margin-top: 70px; /* по макету: низ контактной плашки (1712:2564, y=570..662) до верха блока (1712:2585, y=732) */
}

.aqn-price__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #333;
}

.aqn-price__list {
  display: flex;
  gap: 40px;
  margin-top: 40px; /* по макету: заголовок (h=29) до карточек (y=69) внутри блока */
}

.aqn-price__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 260px;
  min-width: 0;
  overflow: hidden; /* обрезает фото по скруглению верхних углов карточки, тень при этом не режется — box-shadow не клипуется собственным overflow элемента */
  background: #fff;
  border: 1px solid #dadadb;
  border-radius: 12px;
  box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.1);
}

.aqn-price__photo {
  display: block;
  width: 100%;
  height: 255px;
  object-fit: cover;
}

.aqn-price__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
}

.aqn-price__icon {
  flex-shrink: 0;
  width: 42px;
  height: 38px;
}

.aqn-price__label {
  font-weight: 500;
  font-size: 18px;
  color: #333;
  white-space: nowrap;
}

@media (max-width: 1279px) {
  /* резиновое поведение 768–1280: макета нет — карточки просто переносятся, когда не помещаются */
  .aqn-price__list {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  /* мобилка — одна колонка */
  .aqn-price {
    margin-top: 40px;
  }

  .aqn-price__title {
    font-size: 18px;
  }

  .aqn-price__list {
    margin-top: 20px;
    gap: 20px;
  }

  .aqn-price__label {
    font-size: 15px;
  }
}

/* ==========================================================================
   CTA-баннер «Индивидуальные решения»
   Figma: 1712:2618 (1350×231)
   ========================================================================== */

.aqn-cta {
  margin-top: 70px; /* по макету: низ предыдущего блока (1712:2585, y=732+402=1134) до верха этого (1712:2618, y=1204) */
  display: flex;
  height: 231px; /* фикс по макету — без явной высоты секции height:100% на фото не резолвится (родитель auto), браузер откатывается на aspect-ratio из width/height картинки и раздувает блок (было 245px вместо 231) */
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(to right, #023a72, #205895); /* градиент из заливки формы в макете, больше нигде не встречается — без отдельной переменной */
}

.aqn-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  flex: 1 1 500px; /* при этой базе на 1350 текст переносится ровно в 2 строки (проверено) — совпадает с высотой блока 231px, не трогать без пересчёта */
  max-width: 831px; /* по макету текст в рамке 831px, но не хардкодим фикс-ширину — реальный текст короче и переносится раньше края */
  padding: 40px 20px 40px 70px;
}

.aqn-cta__text {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
}

.aqn-cta__button {
  display: inline-flex;
  flex-shrink: 0; /* без этого узкий тablet сжимает кнопку по высоте, когда текст переносится в 3 строки и не хватает места */
  align-items: center;
  justify-content: center;
  height: 53px;
  padding: 10px 36px; /* по макету кнопка «резиновая» по контенту (px-36/py-10), не фикс-ширина 268 */
  border-radius: 30px;
  background: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  color: var(--aqn-color-navy);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.aqn-cta__button:hover {
  opacity: 0.85;
}

.aqn-cta__photo {
  flex: 1 1 300px;
  min-width: 260px;
  position: relative;
}

.aqn-cta__photo-img {
  display: block;
  width: 100%;
  height: 100%; /* резолвится в 231 — .aqn-cta__photo стретчится до явной высоты .aqn-cta (см. выше) */
  object-fit: cover;
}

@media (max-width: 767px) {
  /* мобилка — одна колонка, фото под текстом — макета нет */
  .aqn-cta {
    flex-direction: column;
    height: auto; /* на десктопе высота фиксирована по макету, в колонку — по контенту */
    margin-top: 40px;
  }

  .aqn-cta__content {
    min-width: 0;
    max-width: none;
    padding: 30px 24px;
    flex: 1 1 214px;
    gap: 24px;
    text-align: center;
  }

  .aqn-cta__photo {
    flex: none; /* без этого высота блока в column-раскладке наследует десктопный flex-basis (260) и остаётся больше картинки — пустая полоса под фото */
    min-width: 0;
  }

  .aqn-cta__photo-img {
    height: 151px; /* фикс по запросу, object-fit:cover из базового правила обрезает по центру */
  }

  .aqn-cta__text {
    font-size: 18px;
  }

  .aqn-cta__button {
    height: 42px;
    padding: 10px 32px;
    margin: 0 auto;
  }
  .aqn-hero__soc-button {
    padding: 10px 12px;
    width: 100%;
    min-width: 189px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aqn-cta__content {
    padding: 35px 20px 40px 35px;
    gap: 20px;
  }

  .aqn-cta__text {
    font-size: 21px;
  }
}
/* ==========================================================================
   Наши преимущества
   Figma: 1712:2680 (1350×1105), сетка 3×2, карточка 390px
   ========================================================================== */

.aqn-advantages {
  margin-top: 70px; /* по макету: низ CTA-баннера (1712:2618, y=1204+231=1435) до верха этого блока (1712:2680, y=1505) */
  padding: 70px;
  background: #f7f7f7;
  border-radius: 12px;
}

.aqn-advantages__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #333;
}

.aqn-advantages__grid {
  margin-top: 40px;
}

.aqn-advantages__track {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 20px; /* ряды в макете разной высоты (415/441) — flex сам подстраивается под контент карточки, высоту не хардкодим */
}

.aqn-advantages__card {
  display: flex;
  flex: 1 1 300px; /* при 3 карточках в ряд на 1210 (контейнер минус паддинги) растягивается ровно до 390px по макету */
  min-width: 0; /* без этого flex-item не сжимается меньше intrinsic-ширины картинки (310 по width-атрибуту) — 2 карточки на 768 не помещались и уезжали по одной в ряд */
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
}

.aqn-advantages__photo {
  width: 100%;
  height: 197px;
  border-radius: 12px;
  object-fit: cover;
}

.aqn-advantages__body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: center;
}

.aqn-advantages__number {
  display: none; /* только на мобилке — нумерованный кружок вместо сетки 3×2 */
}

.aqn-advantages__heading {
  font-weight: 500;
  font-size: 18px;
  color: #333;
}

.aqn-advantages__text {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.aqn-advantages__nav {
  display: none; /* только на мобилке — на десктопе/планшете вместо слайдера обычная сетка, стрелки не нужны */
}

@media (max-width: 1279px) {
  /* резиновое поведение 768–1280: без отдельной раскладки, просто уменьшаем паддинг блока вместе с контейнером — иначе фикс-паддинг 70px не оставляет места для 2 карточек в ряд на узком планшете */
  .aqn-advantages {
    padding: 40px max(24px, 4vw);
  }
}

@media (max-width: 767px) {
  /*
    Блок выходит на всю ширину экрана, за рамки мобильного гаттера main.building-landing (0 20px,
    см. комментарий у .building-landing в index.html) — отрицательный margin ровно на ширину
    этого гаттера (не 100vw/50vw: тот приём на некоторых экранах даёт лишние 15–17px от
    ширины скроллбара). Обычную ширину контейнера содержимое получает обратно через
    собственный padding блока (20px).
  */
  .aqn-advantages {
    width: auto;
    max-width: none;
    margin-inline: -20px;
    margin-top: 40px;
    padding: 40px 20px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .aqn-advantages__title {
    font-size: 18px;
  }

  .aqn-advantages__grid {
    margin-top: 0; /* отступ уже даёт gap на .aqn-advantages, дублировать не нужно */
    overflow: hidden; /* контейнер слайдера — Swiper инициализируется в main.js */
  }

  .aqn-advantages__track {
    flex-wrap: nowrap;
    gap: 0; /* Swiper двигает слайды трансформом, а не gap */
  }

  .aqn-advantages__card {
    flex: none;
    width: 100%; /* один слайд = вся доступная ширина, без выглядывающего соседа — так в макете */
    align-items: flex-start;
    gap: 10px;
    padding: 30px 20px;
  }

  .aqn-advantages__body {
    align-items: flex-start;
    text-align: left;
    gap: 10px;
  }

  .aqn-advantages__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--aqn-color-navy);
    color: #fff;
    font-weight: 500;
    font-size: 15px;
  }

  .aqn-advantages__heading {
    font-size: 15px;
    text-align: left;
  }

  .aqn-advantages__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .aqn-advantages__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
    transition: opacity 0.2s ease;
  }

  .aqn-advantages__arrow-icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  .aqn-advantages__arrow--prev .aqn-advantages__arrow-icon {
    transform: scaleX(-1); /* та же стрелка, что и «вперёд» — отзеркалена, отдельного ассета в макете нет */
  }

  .aqn-advantages__arrow--disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .aqn-advantages__counter {
    font-size: 16px;
    line-height: 1.2;
    color: #999;
  }
}

/* ==========================================================================
   Производитель №1 — desktop + резиновое 768+ / мобилка в колонку, без слайдера
   Figma: 1712:2720 (1350×545)
   ========================================================================== */

.aqn-manufacturer {
  margin-top: 70px; /* по макету: низ блока «Наши преимущества» (1712:2680, y=1505+1105=2610) до верха этого блока (1712:2720, y=2680) */
}

.aqn-manufacturer__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #333;
}

.aqn-manufacturer__subtitle {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

.aqn-manufacturer__grid {
  display: flex;
  gap: 20px;
  margin-top: 40px; /* по макету: заголовок+подзаголовок (h=64) до карточек (y=104) */
}

.aqn-manufacturer__card {
  display: flex;
  flex-direction: column;
  flex: 1 1 300px;
  min-width: 0; /* без этого intrinsic-ширина фото (width="437" HTML-атрибутом) не даёт карточке сжаться и ломает перенос на планшете — та же причина, что уже чинили в «Наших преимуществах» */
}

.aqn-manufacturer__photo {
  display: block;
  width: 100%;
  height: 277px;
  border-radius: 12px;
  object-fit: cover;
}

.aqn-manufacturer__badge {
  margin-top: 30px;
  font-weight: 500;
  font-size: 18px;
  color: var(--aqn-color-navy);
}

.aqn-manufacturer__heading {
  margin-top: 15px;
  font-weight: 500;
  font-size: 18px;
  color: #333;
}

.aqn-manufacturer__text {
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

@media (max-width: 1279px) {
  /* резиновое поведение 768–1280: макета нет — карточки просто переносятся, когда не помещаются */
  .aqn-manufacturer__grid {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  /* мобилка — одна колонка, без отдельного макета (см. общее правило для блоков без слайдера) */
  .aqn-manufacturer {
    margin-top: 40px;
  }

  .aqn-manufacturer__title {
    font-size: 18px;
  }

  .aqn-manufacturer__subtitle {
    margin-top: 10px;
  }

  .aqn-manufacturer__grid {
    flex-direction: column;
    margin-top: 25px;
    gap: 25px;
  }

  .aqn-manufacturer__photo {
    height: 230px;
  }

  .aqn-manufacturer__badge, .aqn-manufacturer__heading {
    margin-top: 10px;
    font-size: 15px;
  }

  .aqn-manufacturer__text {
    margin-top: 5px;
  }
}

/* ==========================================================================
   Наши клиенты — десктоп в контейнере 1350 (не full-bleed), резиновая зона 768+ через перенос,
   мобилка — фиксированная сетка 2 колонки (не перелив в одну колонку, как у остальных блоков)
   Figma: 1712:2760 (1920×288, фрейм размечен на 1920, но верстаем в контейнере 1350)
   ========================================================================== */

.aqn-clients {
  margin-top: 70px; /* по макету: низ блока «Производитель №1» (1712:2720, y=2680+545=3225) до верха этого блока (1712:2760, y=3295) */
}

.aqn-clients__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #333;
}

.aqn-clients__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 40px; /* по макету: заголовок (h=29) до карточек (y=69) */
}

.aqn-clients__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 191px; /* 191, не 192px: при ровно 192 и gap 40 шесть карточек в ряд дают 1352px — на 2px шире контейнера 1350px, и flex-wrap переносит 6-ю карточку ещё до пересчёта сжатия (перенос строки считается по гипотетическим базовым размерам, shrink тут не спасает). Ширина фреймов иконок в макете и так гуляет 188–196px (неточность макета) — 191 внутри этого диапазона */
}

.aqn-clients__icon {
  display: block;
  width: 191px;
  height: 150px;
  object-fit: contain; /* иконки категорий выгружены флэттенированным экспортом с разной шириной ~188–196px (неточность макета) — contain, а не cover, чтобы не обрезать */
}

.aqn-clients__label {
  margin-top: 30px;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: #333;
  text-align: center;
}

@media (max-width: 767px) {
  /* мобилка — фиксированная сетка 2 колонки (не одна колонка, как у большинства блоков) */
  .aqn-clients {
    margin-top: 40px;
  }

  .aqn-clients__title {
    font-size: 18px;
  }

  .aqn-clients__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 25px;
  }

  .aqn-clients__card {
    width: auto;
  }

  .aqn-clients__icon {
    width: 100%;
    height: auto;
    aspect-ratio: 192 / 150;
  }

  .aqn-clients__label {
    margin-top: 10px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Бренды и партнёры — сам блок визуально оформлен как отдельный серый скруглённый бокс
   на всю ширину контейнера 1350 (не просто секция на фоне страницы, как у остальных блоков)
   Figma: 1712:3059 (1350×901)
   ========================================================================== */

.aqn-brands {
  margin-top: 70px; /* по макету: низ блока «Наши клиенты» (1712:2760, y=3295+288=3583) до верха этого блока (1712:3059, y=3653) */
  background: #f7f7f7;
  border-radius: 12px;
  padding: 70px;
}

.aqn-brands__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--aqn-color-heading);
}

.aqn-brands__grid {
  margin-top: 40px; /* по макету: заголовок (h=29) до сетки карточек */
}

.aqn-brands__track {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.aqn-brands__card {
  flex: 1 1 240px; /* базовый размер меньше расчётных 272.5px (при точном (1350-70*2-3*40)/4) специально: перенос строк во flex считается по этому базовому размеру ДО flex-grow, и на резиновой зоне 768–1280 карточка со своим боксом-паддингом 70px иначе сразу схлопывается в одну колонку. При полной ширине контейнера flex-grow всё равно растягивает все 4 карточки поровну до тех же 272.5px — на десктопе визуально ничего не меняется */
  min-width: 0; /* иначе логотип не даёт карточке сжаться на перенос */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 40px;
  background: #fff;
  border-radius: 12px;
}

.aqn-brands__card--wide-logo {
  /* АНИ Пласт — логотип шире обычного (240 вместо ~192px), в макете у этой карточки узкий паддинг по бокам вместо стандартных 40px */
  padding-inline: 16px;
}

.aqn-brands__logo {
  display: block;
  width: auto;
  max-height: 70px; /* + max-width:100% из общего img-ресета — при нехватке места в узкой карточке логотип пропорционально уменьшается, не обрезаясь и не растягиваясь */
}

.aqn-brands__name {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--aqn-color-heading);
  text-align: center;
}

@media (max-width: 767px) {
  /*
    Блок выходит на всю ширину экрана, за рамки мобильного гаттера main.building-landing (0 20px) —
    тот же приём, что и в «Наших преимуществах»: отрицательный margin ровно на ширину гаттера,
    а не 100vw/50vw (даёт лишние пиксели от ширины скроллбара на части экранов).
  */
  .aqn-brands {
    width: auto;
    max-width: none;
    margin-inline: -20px;
    margin-top: 40px;
    padding: 40px 20px;
    border-radius: 0;
  }

  .aqn-brands__title {
    font-size: 18px;
  }

  .aqn-brands__grid {
    margin-top: 20px;
    margin-inline: -20px;
    overflow: hidden; /* контейнер слайдера — Swiper инициализируется в main.js */
  }

  .aqn-brands__track {
    flex-wrap: nowrap; /* становится wrapperClass Swiper — реальный отступ между карточками задаёт spaceBetween в JS, не gap */
    gap: 0;
  }

  .aqn-brands__card {
    flex: none;
    width: 220px; /* фиксированная ширина слайда — карточки видно частично внахлёст, приглашая пролистнуть дальше, как и предполагает горизонтальный скролл в одну строку */
    padding: 16px 20px;
  }

  .aqn-brands__card--wide-logo {
    padding-inline: 10px; /* карточка уже, чем на десктопе — пропорционально сузили паддинг под тот же широкий логотип АНИ Пласт */
  }
}

/* ==========================================================================
   Баннер «Скачать презентацию»
   Figma: 1712:3114 (1350×300)
   ========================================================================== */

.aqn-presentation {
  margin-top: 70px; /* по макету: низ «Брендов и партнёров» до верха этого блока — тот же шаг 70px, что и везде на странице */
  display: flex;
  justify-content: space-between;
  height: 300px; /* фикс по макету — та же причина, что и в CTA «Индивидуальные решения»: без явной высоты height:100% на фото не резолвится */
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(to right, #023a72, #205895); /* тот же градиент, что и в CTA «Индивидуальные решения» */
}

.aqn-presentation__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  flex: 1 1 490px;
  max-width: 520px; /* по макету текст переносится в 2 строки на ширине блока 402px — с учётом паддингов (70+20) нужен запас пошире */
  padding: 0 20px 0 70px;
}

.aqn-presentation__text {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
}

.aqn-presentation__button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 53px;
  padding: 10px 36px; /* кнопка по контенту, не фикс-ширина — см. аналогичное решение в CTA «Индивидуальные решения» */
  border-radius: 30px;
  background: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  color: var(--aqn-color-navy);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.aqn-presentation__button:hover {
  opacity: 0.85;
}

.aqn-presentation__photo {
  padding: 0 70px 0 30px;
  min-width: 260px;
  position: relative;
}

.aqn-presentation__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* не cover: картинка не залита фоном (прозрачный PNG) — cover растягивал/обрезал её под ширину резинового флекс-контейнера (на 1350 — увеличивал с обрезкой сверху/снизу, на 1024 — обрезал по бокам). contain показывает фото целиком в своём естественном размере */
  object-position: left center; /* прижимаем к текстовой колонке, как в макете (после фото пустого места чуть больше справа, чем слева) */
}

@media (max-width: 767px) {
  /* мобилка — одна колонка, фото под текстом — макета нет */
  .aqn-presentation {
    flex-direction: column;
    height: auto;
    margin-top: 40px;
  }

  .aqn-presentation__content {
    min-width: 0;
    max-width: none;
    padding: 30px 30px 5px;
    flex: 1 1 199px;
    gap: 24px;
    text-align: center;
  }

  .aqn-presentation__button {
    height: 44px;
    padding: 10px 32px;
    margin: 0 auto;
  }

  .aqn-presentation__photo {
    padding: 0 30px 10px;
    flex: none;
    min-width: 0;
  }

  .aqn-presentation__photo-img {
    height: auto; /* макета мобилки нет — показываем фото целиком по своим пропорциям, без дополнительного кропа */
  }

  .aqn-presentation__text {
    font-size: 18px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aqn-presentation__content {
    padding: 0 20px 0 35px;
    gap: 24px;
  }

  .aqn-presentation__photo {
    padding: 0 20px;
  }

  .aqn-presentation__text {
    font-size: 21px;
  }
}

/* ==========================================================================
   Реализованные объекты — табы-фильтр + сетка карточек (десктоп/планшет) / слайдер (мобилка)
   Figma: 1712:3124 (1350×1972), мобилка: 1772:688
   ========================================================================== */

.aqn-projects {
  margin-top: 70px;
}

.aqn-projects__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--aqn-color-heading);
}

.aqn-projects__tabs-wrap {
  margin-top: 40px;
  overflow-x: auto;
  scrollbar-width: none; /* скролл доступен тачем/свайпом, сам скроллбар не нужен визуально */
}

.aqn-projects__tabs-wrap::-webkit-scrollbar {
  display: none;
}

.aqn-projects__tabs-scroll {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  min-width: max-content; /* если 8 табов не помещаются по ширине — блок растягивается по контенту, и обёртка выше скроллится вместо переноса строк/сжатия текста */
  position: relative; /* точка отсчёта для tab.offsetLeft в JS — индикатор считает позицию относительно этого блока */
}

.aqn-projects__tabs {
  display: flex;
  justify-content: space-between; /* на полной ширине 1350 равномерно распределяет 8 табов; gap ниже — минимальный отступ, когда ширины не хватает (планшет/мобилка) и space-between перестаёт работать */
  align-items: center;
  gap: 40px;
}

.aqn-projects__tab {
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--aqn-color-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.aqn-projects__tab:hover {
  color: #4cace5;
}

.aqn-projects__tab--active {
  color: #4cace5;
}

.aqn-projects__tabs-line {
  position: relative;
  width: 100%;
  height: 3px;
}

.aqn-projects__tabs-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(76, 172, 229, 0.5);
}

.aqn-projects__indicator {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px; /* значение по умолчанию до инициализации JS — дальше ширина/позиция считаются от активного таба */
  height: 3px;
  transform: translateY(-50%);
  background: #4cace5;
  transition: left 0.3s ease, width 0.3s ease;
}

.aqn-projects__grid {
  margin-top: 40px;
}

.aqn-projects__track {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 20px;
}

.aqn-projects__card, .aqn-projects__card-link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 400px; /* при 3 карточках в ряд на 1350 flex-grow дотягивает до 436.67px по макету, 4-я карточка на такую базу уже не помещается — перенос ровно в 3 колонки */
  max-width: 437px; /* без ограничения flex-grow растягивает одинокую карточку в неполном последнем ряду (или пару карточек на резиновой 768–1280) на всю ширину ряда — выглядит непропорционально; макетный размер карточки ~436.67px и есть потолок */
  min-width: 0;
  text-decoration: none !important;
}

.aqn-projects__photo {
  width: 100%;
  height: 285px;
  object-fit: cover;
  border-radius: 12px;
}

.aqn-projects__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.aqn-projects__active-link>.aqn-projects__body {
  color: #4fa9e8 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.aqn-projects__active-link>.aqn-projects__body>h3 {
  color: #4fa9e8 !important;
}

.aqn-projects__badge {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
}

.aqn-projects__badge--hotels {
  background: #52bbad;
}

.aqn-projects__badge--zhile {
  background: #d8c356;
}

.aqn-projects__badge--medical {
  background: #4cace5;
}

.aqn-projects__badge--sport {
  background: #ea9365;
}

.aqn-projects__badge--schools {
  background: #f9525a;
}

.aqn-projects__badge--stations {
  background: #7e9abf;
}

.aqn-projects__badge--other {
  background: #9f9f9f;
}

.aqn-projects__heading {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--aqn-color-heading);
}

.aqn-projects__text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--aqn-color-heading);
}

.aqn-projects__nav {
  display: none; /* только на мобилке — на десктопе/планшете вместо слайдера обычная сетка, стрелки не нужны */
}

.aqn-projects__more {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 40px;
  padding: 10px 20px;
  border: 1px solid var(--aqn-color-navy);
  border-radius: 30px;
  color: var(--aqn-color-navy);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.aqn-projects__more:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .aqn-projects {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .aqn-projects__title {
    font-size: 18px;
  }

  .aqn-projects__tabs-wrap {
    margin-top: 0; /* отступ уже даёт gap на .aqn-projects */
    margin-inline: -20px;
    padding: 0 20px;
  }

  .aqn-projects__grid {
    margin-top: 0; /* отступ уже даёт gap на .aqn-projects */
    overflow: hidden; /* контейнер слайдера — Swiper инициализируется в main.js */
  }

  .aqn-projects__track {
    flex-wrap: nowrap;
    gap: 0; /* Swiper двигает слайды трансформом, а не gap */
  }

  .aqn-projects__card, .aqn-projects__card-link {
    flex: none;
    width: 100%; /* один слайд = вся доступная ширина — как в макете */
    max-width: none; /* десктопный потолок 437px тут не нужен — слайд должен занимать всю ширину экрана */
    gap: 10px; /* по макету на мобилке отступ фото→текст меньше, чем на десктопе (10 вместо 20) */
  }

  .aqn-projects__heading {
    font-size: 15px;
  }

  .aqn-projects__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .aqn-projects__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
    transition: opacity 0.2s ease;
  }

  .aqn-projects__arrow-icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  .aqn-projects__arrow--prev .aqn-projects__arrow-icon {
    transform: scaleX(-1); /* та же стрелка, что и «вперёд» — отзеркалена, отдельного ассета в макете нет */
  }

  .aqn-projects__arrow--disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .aqn-projects__counter {
    font-size: 16px;
    line-height: 1.2;
    color: #999;
  }

  .aqn-projects__more {
    display: none; /* на мобилке вместо «Показать ещё» — слайдер по всем объектам */
  }
}

/* ==========================================================================
   Сертифицированная продукция — слайдер Swiper работает на всех разрешениях (не сетка+слайдер,
   как в большинстве других блоков).
   ========================================================================== */

.aqn-certificates {
  margin-top: 70px;
  padding: 70px 70px 56px;
  background: #f7f7f7;
  border-radius: 12px;
}

.aqn-certificates__head {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.aqn-certificates__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--aqn-color-heading);
}

.aqn-certificates__subtitle {
  max-width: 441px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--aqn-color-heading);
}

.aqn-certificates__body {
  position: relative; /* общая точка отсчёта для стрелок, наложенных поверх края слайдера */
  margin-top: 40px;
}

.aqn-certificates__slider {
  overflow: hidden; /* контейнер слайдера — Swiper инициализируется в main.js */
  padding: 0 7px 14px;
  margin-inline: -7px;
}

.aqn-certificates__track {
  display: flex;
  /* gap не задаём — отступ между слайдами даёт spaceBetween в опциях Swiper, а не CSS gap */
}

.aqn-certificates__slide {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 6px 5px rgba(0, 0, 0, 0.3);
}

.aqn-certificates__frame {
  /*
    aspect-ratio — здесь, а не на самой картинке: img с width:100% внутри picture внутри
    flex-слайда с auto-шириной не всегда мог посчитать свой размер (циклическая зависимость —
    ширина картинки зависит от ширины picture, а та в safari/chrome в части сценариев сама
    считается по контенту). picture получает ширину сразу как процент от слайда (у слайда
    ширину в px всегда явно выставляет сам Swiper), картинке остаётся только 100%×100% готового
    прямоугольника — без второго слоя процентов
  */
  display: block;
  width: 100%;
  aspect-ratio: 222 / 315;
}

.aqn-certificates__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.aqn-certificates__nav {
  display: block; /* стрелки — только десктоп/планшет, на мобилке скрыты ниже */
}

.aqn-certificates__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.aqn-certificates__arrow--prev {
  left: -24px; /* половина кнопки в паддинге серого бокса — вторая стрелка добавлена по симметрии, в макете есть только правая (см. пояснение в index.html) */
}

.aqn-certificates__arrow--next {
  right: -24px;
}

.aqn-certificates__arrow-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.aqn-certificates__arrow--prev .aqn-certificates__arrow-icon {
  transform: scaleX(-1); /* та же стрелка, что и «вперёд» — отзеркалена, отдельного ассета в макете нет */
}

.aqn-certificates__arrow--disabled {
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 1279px) {
  /* резиновое поведение 768–1280: без отдельной раскладки, просто уменьшаем паддинг блока вместе с контейнером — та же причина, что и в «Наших преимуществах» */
  .aqn-certificates {
    padding: 40px max(24px, 4vw);
  }
}

@media (max-width: 767px) {
  /*
    Блок выходит на всю ширину экрана, за рамки мобильного гаттера main.building-landing (0 20px) —
    тот же приём, что и в «Наших преимуществах»/«Брендах»: отрицательный margin ровно на ширину
    гаттера. В отличие от «Брендов», паддинг 20px у слайдера не снимаем повторно — по макету
    карточки на мобилке держат тот же гаттер, что и остальной контент блока, без выхода вплотную
    к краю экрана
  */
  .aqn-certificates {
    width: auto;
    max-width: none;
    margin-inline: -20px;
    margin-top: 40px;
    padding: 40px 20px 34px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .aqn-certificates__head {
    gap: 10px;
  }

  .aqn-certificates__title {
    font-size: 18px;
  }

  .aqn-certificates__subtitle {
    max-width: none;
  }

  .aqn-certificates__body {
    margin-top: 0; /* отступ уже даёт gap на .aqn-certificates */
    margin-inline: -20px;
  }

  .aqn-certificates__nav {
    display: none; /* по макету на мобилке стрелок нет — только тач-свайп */
  }

  .aqn-certificates__slider {
    padding: 0 13px 6px;
  }

  .aqn-certificates__slide {
    width: 130px;
    border-radius: 6px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  }

  .aqn-certificates__photo {
    border-radius: 5px;
  }
}

/* ==========================================================================
   Обсудите Ваш проект
   Figma: десктоп 1712:3260 (1350×300), мобилка 1772:731 (335×438)
   ========================================================================== */

.aqn-consultation {
  margin-top: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 64px 70px;
  border-radius: 12px;
  background: linear-gradient(to right, #023a72, #205895); /* тот же градиент, что и в CTA «Индивидуальные решения»/«Скачать презентацию» */
}

.aqn-consultation__content {
  /*
    Фото лежит в потоке между именем и кнопкой (см. index.html) — так совпадает с DOM-порядком
    мобильного макета. На десктопе оно выводится из потока через position:absolute (ниже) и не
    участвует в gap этого flex-столбца — на мобилке, где position:static, оно возвращается
    в поток на свою обычную позицию
  */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative; /* точка отсчёта для фото, спозиционированного абсолютно на десктопе/планшете */
  gap: 20px; /* по макету — расстояние между заголовком и именем */
  padding-left: 300px; /* место под абсолютно спозиционированное фото: 220px + отступ 80px */
}

.aqn-consultation__title {
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
}

.aqn-consultation__name {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  text-transform: uppercase;
}

.aqn-consultation__photo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
}

.aqn-consultation__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aqn-consultation__button {
  margin-top: 20px; /* gap контейнера уже даёт 20px от имени; по макету нужно суммарно 40 — добавляем разницу отдельно */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  padding: 10px 36px; /* по макету кнопка резиновая по контенту, тот же приём, что и в CTA «Индивидуальные решения» */
  border-radius: 30px;
  background: #fff;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  color: var(--aqn-color-navy);
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.aqn-consultation__button:hover {
  opacity: 0.85;
}

@media (max-width: 767px) {
  .aqn-consultation {
    padding: 30px;
    margin-top: 40px;
    background: var(--aqn-color-navy); /* в мобильном макете сплошной цвет, не градиент */
  }

  .aqn-consultation__content {
    align-items: center;
    text-align: center;
    padding-left: 0; /* десктопный отступ под абсолютное фото тут не нужен — фото возвращается в поток ниже */
  }

  .aqn-consultation__title {
    font-size: 18px;
  }

  .aqn-consultation__name {
    font-size: 15px;
    text-transform: none; /* в мобильном макете имя обычным начертанием, без капса — в отличие от десктопа */
  }

  .aqn-consultation__photo {
    position: static; /* возвращаем в обычный поток — по мобильному макету фото между именем и кнопкой, не сбоку */
    top: auto;
    left: auto;
    transform: none; /* десктопное translateY(-50%) — для абсолютного позиционирования, на статичном потоке его нужно сбросить явно, иначе смещает фото вверх независимо от position */
    margin-inline: auto;
    width: 211px;
    height: 211px;
  }

  .aqn-consultation__button {
    width: 100%;
    height: 42px;
    margin-top: 0; /* на мобилке общий gap:20 контейнера уже равномерный, десктопная добавка не нужна */
  }
}

/* ==========================================================================
   Мероприятия и новости
   Figma: десктоп 1712:3269 (1350×438), мобилка 1772:738 (335×461)
   ========================================================================== */

.aqn-news {
  margin-top: 70px;
}

.aqn-news__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--aqn-color-heading) !important;
  display: flex;
  align-items: flex-end;
}

a.aqn-news__title:hover {
  color: #1f8ad0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aqn-news__wrap {
  position: relative; /* точка отсчёта для стрелок, оверлеем поверх краёв слайдера на десктопе/планшете */
  margin-top: 40px;
}

.aqn-news__slider {
  overflow: hidden; 
}

.aqn-news__track {
  display: flex;
  /* gap не задаём — отступ между слайдами даёт spaceBetween в опциях Swiper, а не CSS gap */
}

.aqn-news__card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0; /* ширину слайда всегда выставляет сам Swiper по slidesPerView из брейкпоинтов — не задаём её в CSS */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.aqn-news__card-link {
  text-decoration: none !important;
}

.aqn-news__frame {
  display: block;
  width: 100%;
  aspect-ratio: 315 / 240;
}

.aqn-news__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.aqn-news__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0;
}

.aqn-news__date {
  font-size: 14px;
  letter-spacing: 0.28px;
  color: #828282;
}

.aqn-news__excerpt {
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

/*
  Стрелки — по умолчанию (десктоп/планшет) оверлей поверх краёв слайдера, тот же приём, что и в
  «Сертифицированной продукции»: в макете есть только правая стрелка, левая добавлена по симметрии.
  На мобилке эти же кнопки превращаются в обычную строку со счётчиком под слайдером — см. медиа-запрос.
*/
.aqn-news__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.aqn-news__arrow--prev {
  left: -24px; /* половина кнопки в паддинге контейнера — та же логика, что и в «Сертифицированной продукции» */
}

.aqn-news__arrow--next {
  right: -24px;
}

.aqn-news__arrow-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.aqn-news__arrow--prev .aqn-news__arrow-icon {
  transform: scaleX(-1); /* та же стрелка, что и «вперёд» — отзеркалена, отдельного ассета в макете нет */
}

.aqn-news__arrow--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.aqn-news__counter {
  display: none; /* счётчик — только на мобилке, см. медиа-запрос ниже */
}

@media (max-width: 767px) {
  .aqn-news {
    margin-top: 40px;
  }

  .aqn-news__title {
    font-size: 18px;
  }

  .aqn-news__wrap {
    margin-top: 20px;
  }

  .aqn-news__card {
    width: 100%; /* один слайд = вся доступная ширина, без выглядывающего соседа */
  }

  .aqn-news__frame {
    aspect-ratio: auto; /* на мобилке высота фиксированная по макету (240px), а не пропорция 315:240 — при резиновой ширине слайда aspect-ratio давал бы не 240, а плавающее значение */
    height: 240px;
  }

  .aqn-news__body {
    padding: 10px 0 0;
  }

  .aqn-news__nav {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }

  .aqn-news__arrow {
    position: static;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    transform: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
  }

  .aqn-news__counter {
    display: block;
    font-size: 16px;
    line-height: 1.2;
    color: #999;
  }
}

/* ==========================================================================
   Полезные материалы (аккордеон)
   ========================================================================== */

.aqn-materials {
  margin-top: 70px;
}

.aqn-materials__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--aqn-color-heading);
}

.aqn-materials__list {
  margin-top: 40px;
  border-bottom: 1px solid #ededed; /* замыкающая линия под последней секцией */
}

.aqn-materials__section {
  display: flex;
  flex-direction: column;
  padding-block: 21px;
  border-top: 1px solid #ededed;
}

.aqn-materials__header {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  align-self: flex-start; /* в макете заголовок со стрелкой не растянут на всю ширину строки — стрелка сразу после текста */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: #333;
  cursor: pointer;
}

.aqn-materials__header-text {
  font-size: 20px;
  line-height: 1.2;
  color: #333;
}

.aqn-materials__arrow {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  transition: transform 0.2s ease;
}

.aqn-materials__section--open .aqn-materials__arrow {
  transform: rotate(180deg);
}

.aqn-materials__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.aqn-materials__section--open .aqn-materials__body {
  grid-template-rows: 1fr;
}

.aqn-materials__body-inner {
  overflow: hidden;
  min-height: 0;
}

.aqn-materials__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-top: 21px;
}

.aqn-materials__file {
  display: flex;
  gap: 15px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ededed;
  border-radius: 12px;
}

.aqn-materials__file-icon {
  flex-shrink: 0;
  width: 25px;
  height: 32px;
}

.aqn-materials__file-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.aqn-materials__file-name {
  font-size: 14px;
  line-height: 20px;
  color: #333;
  word-break: break-word;
}

.aqn-materials__file-link {
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #41a7e4;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

.aqn-materials__file-link:hover {
  opacity: 0.7;
}

@media (max-width: 767px) {
  .aqn-materials {
    margin-top: 40px;
  }

  .aqn-materials__title {
    font-size: 18px;
  }

  .aqn-materials__list {
    margin-top: 20px;
  }

  .aqn-materials__header {
    text-align: left;
  }

  .aqn-materials__header-text {
    font-size: 16px;
  }

  .aqn-materials__grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .aqn-materials__file {
    padding: 15px 20px;
  }

  .aqn-materials__file-info {
    gap: 5px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .aqn-materials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .aqn-projects__grid:not(.aqn-projects__grid--ready) .aqn-projects__card:nth-child(n+10) {
    display: none;
  }
}
/* End */
/* /proekt/css/aqn-page.css?179068894064618 */