/* ============================================================
   ПЗПР — pages.css
   Раскладка страниц. Mobile-first: базовые стили — под мобилку,
   грид/увеличение через @media (min-width: …).
   Breakpoints: 768 / 1024 / 1280.
   ============================================================ */

/* ---------- Хедер: мобильный drawer (mobile-first) ---------- */
.header__inner { gap: 12px; }
.header__brand { flex-shrink: 1; min-width: 0; gap: 10px; }
.header__logo { height: 32px; }
.header__wordmark { font-size: 10.5px; }
.header__burger { display: flex; flex-shrink: 0; }
.header__cta { display: none; color: #fff; }
.header__cta:hover { color: #fff; }
.nav {
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; align-items: stretch; gap: 0; margin-left: 0;
  padding: 6px 20px 18px; background: var(--color-bg);
  border-bottom: 1px solid var(--border); box-shadow: 0 12px 24px rgba(30, 37, 48, .08);
  transform: translateY(-135%); transition: transform .25s ease; z-index: 40;
  max-height: calc(100vh - 100%); overflow-y: auto;
}
.header.nav-open .nav { transform: translateY(0); }
.nav__link { width: 100%; padding: 14px 2px; border-top: 1px solid var(--border-inner); min-height: 44px; display: flex; align-items: center; }
.nav__link:first-child { border-top: none; }
.nav__cta { display: flex; width: 100%; margin-top: 14px; background: var(--color-teal); color: #fff; }
.nav__cta:hover { background: var(--color-teal-hover); color: #fff; }

@media (min-width: 640px) {
  .header__logo { height: 40px; }
  .header__wordmark { font-size: 13px; }
}

@media (min-width: 1024px) {
  .header__inner { gap: 32px; }
  .header__brand { flex-shrink: 0; gap: 14px; }
  .header__logo { height: 44px; }
  .header__wordmark { font-size: 14px; }
  .header__burger { display: none; }
  .header__cta { display: inline-flex; }
  .nav {
    position: static; flex-direction: row; align-items: center; gap: 28px;
    margin-left: auto; padding: 0; background: none; border: none; box-shadow: none;
    transform: none; max-height: none; overflow: visible;
  }
  .nav__link { width: auto; padding: 6px 2px; border-top: none; min-height: 0; }
  .nav__cta { display: none; }
}

/* ---------- Адаптив контейнера и секций (mobile-first) ---------- */
.container { padding-left: 20px; padding-right: 20px; }
.section { padding-top: 56px; padding-bottom: 56px; }

/* ---------- Блок дилера ---------- */
.section.dealer { padding-top: 18px; padding-bottom: 18px; }
.dealer__container { width: 100%; max-width: 1466px; margin: 0 auto; padding: 0 46px; }
.dealer__card {
  min-height: 176px; display: grid; grid-template-columns: 370px 370px minmax(0, 1fr);
  align-items: center; border: 1px solid var(--border); background: var(--color-bg);
  box-shadow: var(--shadow-card); padding: 28px 97px;
}
.dealer__title { font-family: var(--font-heading); font-weight: 800; font-size: 42px; line-height: 1.1; }
.dealer__logo img { display: block; width: 330px; max-width: 100%; height: auto; }
.dealer__contacts { font-size: 16px; line-height: 1.7; color: #496987; }
.dealer__contacts p { margin: 0; white-space: nowrap; }
.dealer__contacts a { display: block; font-weight: 600; color: #0099df; }

@media (max-width: 1100px) {
  .dealer__container { padding-left: 32px; padding-right: 32px; }
  .dealer__card { grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 40px; }
  .dealer__contacts { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
  .section.dealer { padding-top: 16px; padding-bottom: 16px; }
  .dealer__container { padding-left: 20px; padding-right: 20px; }
  .dealer__card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; }
  .dealer__title { font-size: 34px; }
  .dealer__logo img { width: 300px; }
  .dealer__contacts p { white-space: normal; }
}

@media (min-width: 768px) {
  .container { padding-left: 32px; padding-right: 32px; }
  .section { padding-top: 72px; padding-bottom: 72px; }
}
@media (min-width: 1024px) {
  .container { padding-left: 40px; padding-right: 40px; }
  .section { padding-top: 90px; padding-bottom: 90px; }
}

/* ============================================================
   ГЛАВНАЯ — HERO
   ============================================================ */
.hero { background: var(--color-bg-light); border-bottom: 1px solid var(--border); }
.hero__inner { display: grid; grid-template-columns: 1fr; gap: 0; }
.hero__content { display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.hero__content .lead { max-width: 480px; margin: 18px 0 28px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__media { position: relative; margin: 0 0 40px; min-height: 260px; }
.hero__media .img-placeholder { min-height: 260px; }
.hero__photo { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.hero__circuit { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 55% 45%; align-items: stretch; min-height: 440px; }
  .hero__content { padding: 56px 48px 56px 0; }
  .hero__media { margin: 32px 0; }
  .hero__media .img-placeholder { min-height: 0; }
  .hero__photo { min-height: 0; }
}

/* ============================================================
   ГЛАВНАЯ — ПРЕИМУЩЕСТВА
   ============================================================ */
.advantages { display: grid; grid-template-columns: 1fr; gap: 4px; padding-top: 28px; padding-bottom: 28px; }
@media (min-width: 640px) { .advantages { grid-template-columns: 1fr 1fr; gap: 16px; } }
.advantage { display: flex; align-items: flex-start; gap: 14px; padding: 8px 0; }
.advantage__icon { color: var(--color-blue); flex: none; }
.advantage__label { font-weight: 500; font-size: 15px; line-height: 1.35; }
.advantage__num { display: flex; align-items: baseline; gap: 6px; }
.advantage__num b { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; color: var(--color-blue); }
@media (min-width: 1024px) {
  .advantages { grid-template-columns: repeat(4, 1fr); padding-top: 36px; padding-bottom: 36px; }
  .advantage { padding: 8px 20px; border-right: 1px solid var(--border); }
  .advantage:last-child { border-right: none; }
}

/* ============================================================
   ГЛАВНАЯ / КАТАЛОГ — сетки
   ============================================================ */
.catalog-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 40px; }
.catalog-head .h2 { margin: 0; }
.catalog-head .link-cta { align-self: flex-start; }
@media (min-width: 1024px) {
  .catalog-head { gap: 28px; margin-bottom: 56px; }
  .catalog-head .h2 { white-space: nowrap; }
}

.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(5, 1fr); } }

.filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
@media (min-width: 1024px) { .filters { margin-bottom: 44px; } }

/* Сворачиваемые группы фильтров (мобильная версия) */
.filter-row { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; border: 1px solid var(--border); }
.filter-label {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  font-family: var(--font-body); font-size: 13px; letter-spacing: 1px;
  color: var(--color-dark); text-transform: uppercase; background: var(--color-bg-light);
  border: none; padding: 14px 16px; cursor: pointer; min-height: 44px;
}
.filter-label__chevron { width: 16px; height: 16px; flex: none; transition: transform var(--transition); transform: rotate(90deg); }
.filter-row.is-open .filter-label__chevron { transform: rotate(-90deg); }
.filter-row__chips {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 0 14px; max-height: 0; overflow: hidden;
}
.filter-row.is-open .filter-row__chips { padding: 14px; max-height: none; }

@media (min-width: 1024px) {
  .filter-row { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; border: none; }
  .filter-label {
    width: auto; background: none; padding: 0; margin-right: 4px; cursor: default;
    font-size: 12px; color: var(--color-steel-light);
  }
  .filter-label__chevron { display: none; }
  .filter-row__chips { flex-direction: row; align-items: center; gap: 12px; padding: 0 !important; max-height: none !important; }
}

.product-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 560px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
.product-card.is-hidden { display: none; }
.filter-empty { display: none; padding: 40px 0; color: var(--color-steel); font-size: 15px; }
.filter-empty.is-visible { display: block; }

.catalog-more { display: flex; justify-content: center; margin-top: 40px; }
@media (min-width: 1024px) { .catalog-more { margin-top: 44px; } }

/* ============================================================
   ГЛАВНАЯ — ПОЧЕМУ ПЗПР
   ============================================================ */
.section-title { margin-bottom: 40px; }
@media (min-width: 1024px) { .section-title { margin-bottom: 56px; } }
.section-title--narrow { max-width: 640px; }
.section-title--center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }

.why-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 48px; } }

/* ============================================================
   ГЛАВНАЯ — ОТРАСЛИ
   ============================================================ */
.industries { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .industries { grid-template-columns: 30% 70%; gap: 48px; } }
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 560px) { .industry-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .industry-grid { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
   ШАГИ — адаптив
   ============================================================ */
.steps { grid-template-columns: 1fr; gap: 28px; }
.steps__line { display: none; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .steps__line { display: block; }
}

/* ============================================================
   КАРУСЕЛЬ — адаптив ширины карточек
   ============================================================ */
.testimonial { flex-basis: 85%; }
@media (min-width: 640px) { .testimonial { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .testimonial { flex-basis: calc((100% - 40px) / 3); } }
.carousel__head { flex-direction: column; align-items: flex-start; }
@media (min-width: 768px) { .carousel__head { flex-direction: row; align-items: flex-end; } }

.related-card { flex-basis: 80%; }
@media (min-width: 640px) { .related-card { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .related-card { flex-basis: calc((100% - 60px) / 4); } }

/* ============================================================
   ТЁМНЫЙ CTA-БЛОК
   ============================================================ */
.cta-dark { position: relative; overflow: hidden; background: var(--color-dark); padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) { .cta-dark { padding-top: 72px; padding-bottom: 72px; } }
@media (min-width: 1024px) { .cta-dark { padding-top: 90px; padding-bottom: 90px; } }
.cta-dark__decor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cta-dark__hex { opacity: .13; }
.cta-dark__circuit { opacity: .4; }
.cta-dark__inner { position: relative; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; }
.cta-dark__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1.08; color: #fff; margin: 0 0 20px; }
.cta-dark__text { font-size: 17px; line-height: 1.6; color: var(--muted-on-dark); margin: 0 0 32px; max-width: 460px; }
.cta-dark__media { position: relative; min-height: 240px; }
.cta-dark__photo { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
@media (min-width: 1024px) {
  .cta-dark__inner { grid-template-columns: 1fr 460px; gap: 56px; }
  .cta-dark__media { min-height: 280px; height: auto; }
}

/* Тёмная форма-заявка (2 колонки) */
.form-dark__inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .form-dark__inner { grid-template-columns: 1fr 1fr; gap: 56px; } }
.form-dark__title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.5vw, 38px); line-height: 1.1; color: #fff; margin: 0 0 20px; }
.form-dark__text { font-size: 16px; line-height: 1.6; color: var(--muted-on-dark); margin: 0 0 28px; }
.form-dark__phone { font-family: var(--font-heading); font-weight: 800; font-size: 26px; color: #fff; }
.form-dark__phone:hover { color: var(--color-blue); }

/* ============================================================
   СТРАНИЦА ТОВАРА
   ============================================================ */
.product-hero { background: var(--color-bg-light); border-bottom: 1px solid var(--border); }
.product-hero__inner { display: grid; grid-template-columns: 1fr; gap: 36px; padding-top: 40px; padding-bottom: 56px; align-items: start; }
@media (min-width: 1024px) {
  .product-hero__inner { grid-template-columns: 1fr 460px; gap: 56px; padding-top: 48px; padding-bottom: 72px; }
}
.product-badge {
  display: inline-block; font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--color-blue);
  background: rgba(38,169,224,.1); padding: 6px 14px; margin-bottom: 18px;
}
.product-hero h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 3.6vw, 37px); line-height: 1.06; letter-spacing: -.5px; margin: 0 0 14px; }
.product-hero__spec { font-family: var(--font-body); font-size: 14px; color: var(--color-steel); margin-bottom: 22px; }
.product-hero__desc { font-size: 17px; line-height: 1.65; color: var(--color-steel); margin: 0 0 28px; }
.product-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 28px; }
.product-hero__media { position: relative; min-height: 300px; }
.product-hero__media .img-placeholder { min-height: 300px; }
.product-hero__media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border: 1px solid var(--border); display: block; }

.product-hero__industries-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: .3px; text-transform: uppercase; color: var(--color-steel); margin: 0 0 12px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip-row--compact { gap: 8px; }
.app-chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--color-dark);
  background: var(--color-bg-light); border: 1px solid var(--border); padding: 12px 18px; min-height: 44px;
}
.chip-row--compact .app-chip {
  gap: 7px; font-size: 13px; padding: 7px 12px; min-height: 32px; background: #fff;
}
.app-chip__icon { color: var(--color-blue); flex: none; }

.info-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .info-3 { grid-template-columns: repeat(3, 1fr); } }
.guarantee-list { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 768px) { .guarantee-list { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   СТРАНИЦА ЛАБОРАТОРИИ
   ============================================================ */
.lab-hero { background: var(--color-bg-light); border-bottom: 1px solid var(--border); }
.lab-hero__inner { display: grid; grid-template-columns: 1fr; gap: 36px; padding-top: 40px; padding-bottom: 56px; align-items: center; }
@media (min-width: 1024px) { .lab-hero__inner { grid-template-columns: 1fr 460px; gap: 56px; padding-top: 56px; padding-bottom: 72px; } }
.lab-hero__media { position: relative; min-height: 300px; }
.lab-hero__media .img-placeholder { min-height: 300px; }
.lab-hero__media img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.lab-hero__subtitle { font-family: var(--font-heading); font-weight: 600; font-size: 20px; color: var(--color-dark); margin: 8px 0 16px; }

.tasks-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 560px) { .tasks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tasks-grid { grid-template-columns: repeat(4, 1fr); } }

.methods { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .methods { grid-template-columns: 1fr 1fr; gap: 56px; } }
.methods__list { display: flex; flex-direction: column; gap: 16px; }
.methods__item { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; }
.methods__item .icon { color: var(--color-teal); flex: none; margin-top: 2px; }
.methods__media { position: relative; min-height: 300px; }
.methods__media .img-placeholder { min-height: 300px; }
.methods__media img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

.equip-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .equip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .equip-grid { grid-template-columns: repeat(5, 1fr); } }

/* ============================================================
   О КОМПАНИИ / КОНТАКТЫ / ПОЛИТИКА
   ============================================================ */
.page-hero { background: var(--color-bg-light); border-bottom: 1px solid var(--border); }
.page-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-top: 48px; padding-bottom: 48px; text-align: left; }
.page-hero__text { max-width: 700px; text-align: left; }
.page-hero h1 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -.5px; margin: 0 0 20px; text-align: left; }
.page-hero .lead { max-width: 700px; text-align: left; }
.page-hero__media { flex-shrink: 0; }
.page-hero__media img { display: block; max-width: 340px; width: 100%; height: auto; border-radius: 25px; }
@media (max-width: 860px) {
  .page-hero__inner { flex-direction: column; align-items: flex-start; }
  .page-hero__media { order: -1; }
  .page-hero__media img { max-width: 100%; }
}

.page-hero--center .page-hero__inner { flex-direction: column; align-items: center; text-align: center; }
.page-hero--center h1 { text-align: center; white-space: nowrap; }
.page-hero--center .lead { text-align: center; margin: 0 auto; }
@media (max-width: 640px) {
  .page-hero--center h1 { white-space: normal; }
}

.prose { max-width: 780px; }
.prose h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(24px, 3vw, 32px); margin: 40px 0 16px; }
.prose h3 { font-family: var(--font-heading); font-weight: 700; font-size: 20px; margin: 28px 0 12px; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--color-steel); margin: 0 0 16px; }
.prose ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 16px; line-height: 1.6; color: var(--color-steel); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background: var(--color-teal); }
.prose a { color: var(--color-blue); }

.about-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.about-grid--span { grid-column: 1 / -1; }

.about-media { align-self: stretch; }
.about-media img { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }

.about-row { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1024px) { .about-row { grid-template-columns: 1fr 1fr; gap: 56px; } }
.about-row .prose h2 { margin-top: 0; }

.check-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--color-bg); padding: 10px 16px; margin: 0; font-size: 15px; line-height: 1.4; color: var(--color-dark); }
.prose .check-list li::before { content: none; }
.check-list li .icon { color: var(--color-teal); flex-shrink: 0; width: 18px; height: 18px; }

.about-lab { border-top: 1px solid var(--border); padding-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.about-lab__text { flex: 1 1 480px; }
.about-lab__text h2 { margin-top: 0; margin-bottom: 16px; }
.about-lab__text p { max-width: 780px; margin: 0; }
.about-lab__btn { flex-shrink: 0; color: #fff; }
.about-lab__btn:hover { color: #fff; }

.contacts-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .contacts-grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.contact-list { display: flex; flex-direction: column; gap: 22px; }
.contact-item__label { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--color-steel-light); margin-bottom: 6px; }
.contact-item__value { font-size: 18px; color: var(--color-dark); }
.contact-item__value a { color: var(--color-blue); }
.map-placeholder { min-height: 320px; }

/* ============================================================
   ОБЩИЕ ХЕЛПЕРЫ РАЗДЕЛОВ
   ============================================================ */
.stack-24 > * + * { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.about-brief { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .about-brief { grid-template-columns: 1.2fr 1fr; gap: 56px; } }

/* ============================================================
   ПОДВАЛ — мобильная раскладка (mobile-first)
   ============================================================ */
.footer__top {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "about about" "nav prod" "contacts contacts";
  gap: 36px 20px;
}
.footer__col--about { grid-area: about; }
.footer__col--nav { grid-area: nav; }
.footer__col--prod { grid-area: prod; }
.footer__col--contacts { grid-area: contacts; }
.footer__desc { max-width: none; }

@media (min-width: 1024px) {
  .footer__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    grid-template-areas: none;
    gap: 40px;
  }
  .footer__col--about, .footer__col--nav, .footer__col--prod, .footer__col--contacts { grid-area: auto; }
  .footer__desc { max-width: 280px; }
}