/* ================== VARIABLES & RESETS ================== */
:root{
  /* brand */
  --accent-2: #fc9928;

  /* neutrals */
  --line: #eee;
  --muted: #777;
}

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

html, body { margin: 0; padding: 0; font-family: sans-serif; background: #fff; color: #000; }
a { text-decoration: none; color: inherit; }
ul, ol, menu { list-style: none; margin: 0; padding: 0; }

/* убираем синие дефолты браузера — всё в фирменный оранжевый */
:root{ accent-color: var(--accent-2); }
::selection { background: var(--accent-2); color: #fff; }
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}
.lang-select:focus-visible { border-color: var(--accent-2); }
a, button, select, input, textarea { -webkit-tap-highlight-color: rgba(252,153,40,.25); }

/* ================== HEADER ================== */
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 64px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.logo img{
  height: 120px;     /* можно 64/72/80/120 по вкусу */
  width: auto;
  display: block;
}

@media (max-width: 900px){
  .logo img{ height: 72px; }
}

.main-nav ul{ display: flex; gap: 32px; }
.main-nav a{
  font-size: 16px;
  font-weight: 500;
  color: #333;
  transition: color .3s ease;
}
.main-nav a:hover{ color: var(--accent-2); }

/* селектор языка + кнопка — в одну линию */
.cta-header{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* единая версия для селектора языка */
.lang-switch{ display: flex; align-items: center; margin: 0; }
.lang-select{
  height: 44px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* кнопка связи */
.cta-header .btn-contact{
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  background: var(--accent-2);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease;
}
.cta-header .btn-contact:hover{ background: #e3811f; }

/* маленький знак ® */
.reg{ font-size: .6em; vertical-align: super; line-height: 0; margin-left: 2px; }

/* резервная нормализация знака ® внутри заголовков */
h1 .reg, h2 .reg, h3 .reg{
  font-size: 0.6em;
  line-height: 0;
  vertical-align: text-top;
  margin-left: .06em;
  font-weight: 600;
  opacity: .9;
}

/* ================== SECTION TITLE ================== */
.section-title{
  display: flex; align-items: center; gap: 16px;
  padding: 48px 64px 24px;
  background: #fff;
}
.section-title h2{ font-size: 32px; font-weight: 700; color: #111; }
.marker-circle{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-2); flex-shrink: 0;
}

/* Заголовки блоков Our Equipment / Our Technologies / Our Services */
.home-section .home-title{
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #111;
  margin: 48px 0 24px;
  display: block;
  width: 100%;
}
/* горизонтальные отступы секций под заголовками */
.home-section{ padding: 0 32px; }
@media (max-width:640px){ .home-section{ padding: 0 16px; } }

/* ================== STATS ================== */
.stat{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding: 64px;
  background: #f3f3f3;
  text-align: center;
}
.stat-item{ padding: 16px; }
.stat-value{ font-size: 40px; font-weight: 700; color: var(--accent-2); margin-bottom: 8px; }
.stat-label{ font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.stat-desc{ font-size: 16px; color: #555; }

/* ================== ABOUT ================== */
.about{ padding: 64px; background: #fff; }
.about-intro h2{ font-size: 36px; font-weight: 700; margin-bottom: 16px; }
.about-subtitle{ font-size: 18px; color: #555; margin-bottom: 32px; }
.about-motto{
  font-size: 20px; font-style: italic; text-align: center;
  margin: 40px 0; color: #333;
}
.about-content{
  display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start;
}
.about-text{
  flex: 1 1 50%;
  font-size: 16px; line-height: 1.7; color: #444;
}
.about-text p{ margin-bottom: 16px; }
.about-image{ flex: 1 1 40%; text-align: right; }
.about-image img{ max-width: 100%; height: auto; border-radius: 12px; }

/* ================== LEGACY EQUIPMENT STRIP (если где-то используется) ================== */
.equipment-strip{ padding: 16px 64px 40px; background: #fff; }
.equipment-strip .container{ max-width: 1200px; margin: 0 auto; }

.equipment-strip__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* строго 4 */
  gap: 20px;
}

/* ================== HOME GALLERIES (новые корневые витрины) ================== */
/* Контейнеры сеток, в которые подставляется HTML из /gallery.php */
#equipment-strip-grid,
#tech-strip-grid,
#services-strip-grid{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 40px;                     /* отступы справа/слева и снизу */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3 карточки на десктопе */
  gap: 22px;
}

@media (max-width: 1100px){
  #equipment-strip-grid,
  #tech-strip-grid,
  #services-strip-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  #equipment-strip-grid,
  #tech-strip-grid,
  #services-strip-grid{
    grid-template-columns: 1fr;
    padding: 0 16px 32px;
    gap: 18px;
  }
}

/* Карточка из /gallery.php — делаем аккуратнее и компактнее */
.equip-mini{
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.equip-mini:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: #e9e9e9;
}

.equip-mini__media{
  display: block;
  width: 100%;
  aspect-ratio: 3/2;        /* ниже и компактней, чем 16/9 */
  background: #f6f6f6;
}
.equip-mini__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Заголовок — плотнее, максимум 2 строки */
.equip-mini__title{
  font-size: 16px;
  line-height: 1.25;
  margin: 8px 10px 4px;
  font-weight: 700;
}
.equip-mini__title a{
  color: #111;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;       /* обрезаем по 2 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.equip-mini__title a:hover{ text-decoration: underline; }

/* подпись/тип */
.equip-mini__meta{
  font-size: 12px;
  color: #666;
  margin: 0 10px 10px;
}

/* универсальная сетка и лоадер (если где-то используются эти классы) */
.gallery-grid, .cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 980px) {
  .gallery-grid, .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gallery-grid, .cards-grid { grid-template-columns: 1fr; }
}

.home-loader {
  text-align: center;
  color: var(--muted);
  padding: 14px 0;
}

/* === Horizontal carousel for home galleries === */
.gallery-wrap{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width:640px){ .gallery-wrap{ padding: 0 16px; } }

/* превращаем контейнер в горизонтальную ленту */
.gallery-wrap > .hsnap{
  display: flex !important;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 0 14px;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;          /* ← добавлено: не переносить карточки */
}
.gallery-wrap > .hsnap::-webkit-scrollbar{ display:none; }

/* компактные карточки в ленте */
.gallery-wrap > .hsnap > .equip-mini{
  flex: 0 0 240px;            /* ширина карточки */
  scroll-snap-align: start;
}
@media (max-width:1100px){ .gallery-wrap > .hsnap > .equip-mini{ flex-basis: 220px; } }
/* Было 86vw — считалось от ширины экрана, а не от трека ленты (внутри
   .gallery-wrap с padding: 0 16px), поэтому карточка оказывалась шире
   видимой дорожки и её край всегда был обрезан. Считаем от контейнера. */
@media (max-width:640px){  .gallery-wrap > .hsnap > .equip-mini{ flex-basis: calc(100% - 44px); } }

/* нав-кнопки */
.hnav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;         /* WCAG 2.5.5 — минимум 44×44 */
  border: 0; border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.hnav:disabled{ opacity:.35; cursor: default; box-shadow:none; }
.hnav-prev{ left: 8px; }
.hnav-next{ right: 8px; }
.hnav svg{ width: 20px; height: 20px; }

/* показывать стрелки, только если существует 5-я карточка (ищем потомка, не прямого ребёнка) */
.gallery-wrap:not(:has(.hsnap .equip-mini:nth-child(5))) .hnav{ 
  display: none !important; 
}

/* ===== Центрирование карточек, когда их мало (режим .center-grid) ===== */
.center-grid{
  display: flex !important;           /* перекрываем grid */
  flex-wrap: wrap;
  justify-content: center;            /* центр по горизонтали */
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 40px;
}
.center-grid > .equip-mini{
  flex: 0 0 260px;                    /* ширина карточки в центре */
}

@media (max-width:1100px){
  .center-grid{ padding: 0 24px 32px; }
  .center-grid > .equip-mini{ flex-basis: 240px; }
}
@media (max-width:640px){
  .center-grid{ padding: 0 16px 28px; gap: 18px; }
  .center-grid > .equip-mini{ flex-basis: 86vw; }
}


/* ================== MAP ================== */
.map-section{ padding: 64px; background: #f8f8f8; text-align: center; }
.map-section h2{ font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.map-address{ font-size: 18px; color: #555; margin-bottom: 32px; }
.map-embed iframe{
  width: 100%; max-width: 100%; height: 400px;
  border: none; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

/* ================== FOOTER ================== */
.footer{
  background: #111; color: #fff;
  padding: 64px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
}
.footer__section{ flex: 1 1 250px; }
.footer__title{ font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.footer__name, .footer__contacts{ font-size: 16px; line-height: 1.6; }
.footer__socials{ display: flex; gap: 16px; align-items: center; }
.footer__socials .social-link img{
  width: 24px; height: 24px; filter: brightness(0) invert(1); transition: opacity .3s ease;
}
.footer__socials .social-link:hover img{ opacity: .7; }

/* footer bottom */
.footer-bottom{
  background: #f8f8f8; color: #444;
  font-size: 14px; text-align: center;
  padding: 32px 16px; border-top: 1px solid #ddd;
}
.footer-bottom__links{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; margin-bottom: 20px;
}
.footer-bottom__links a{ color: #444; transition: color .3s ease; }
.footer-bottom__links a:hover{ color: var(--accent-2); }
.footer-bottom__info{ margin-bottom: 20px; }
.footer-bottom__info a{ color: #444; text-decoration: underline; }
.footer-bottom__socials{
  display: flex; justify-content: center; gap: 28px;
  margin-top: 16px; margin-bottom: 20px;
}
.footer-bottom__socials img{
  width: 24px; height: 24px; filter: grayscale(60%); transition: filter .3s;
}
.footer-bottom__socials img:hover{ filter: none; }

/* ================== MODAL (Contacts) ================== */
.modal{
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 10000; padding: 24px;
}
.modal.is-open{ display: flex; }

.modal__dialog{
  position: relative; width: min(560px, 100%);
  background: #fff; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  padding: 24px 24px 20px;
  animation: modalIn .18s ease-out;
  outline: none;
}
@keyframes modalIn{
  from{ transform: translateY(8px); opacity: .6; }
  to  { transform: translateY(0);   opacity: 1; }
}
.modal__close{
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: #f2f2f2;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.modal__close:hover{ background: #e9e9e9; }
.modal__title{ margin: 0 36px 8px 0; font-size: 22px; line-height: 1.25; }
.modal__content{ color: #333; }
.modal__phones{ margin: 8px 0 12px; padding-left: 18px; }
.modal__phones li{ margin: 6px 0; }
.modal__phones a{ color: #111; text-decoration: none; font-weight: 600; }
.modal__phones a:hover{ text-decoration: underline; }
.modal__extra{ color: #666; }
.modal__extra a{ color: inherit; }
.modal__extra a:hover{ color: inherit; text-decoration: underline; }

body.modal-open{ overflow: hidden; }
/* Послуги: листовые карточки без изображений */
.no-media .equip-mini__media,
.no-media picture,
.no-media figure,
.no-media .equip-mini__media img{
  display: none !important;
}

.no-media{
  /* если это отдельная страница/секция — нормальная сетка */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 40px;
}

.no-media .equip-mini{
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.no-media .equip-mini__title{ font-size: 18px; line-height: 1.3; margin: 6px 0 6px; }
.no-media .equip-mini__meta{ font-size: 13px; color:#666; margin: 0 0 10px; }

/* Карусель: не переносить карточки, иначе стрелки не появятся */
.hsnap{ flex-wrap: nowrap !important; }

/* Стрелки показываются только когда есть хотя бы 5-я карточка */
.gallery-wrap:not(:has(.hsnap .equip-mini:nth-child(5))) .hnav{
  display: none !important;
}
/* === Services: карточки без изображений === */
/* На главной: #home-serv. На других страницах мог быть #services-strip-grid */
#home-serv .equip-mini__media,
#services-strip-grid .equip-mini__media{
  display: none !important;
}

/* Чуть плотнее отступы у карточек без картинки */
#home-serv .equip-mini,
#services-strip-grid .equip-mini{
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Заголовок и подпись — как у “листовых” */
#home-serv .equip-mini__title,
#services-strip-grid .equip-mini__title{
  font-size: 18px;
  line-height: 1.3;
  margin: 6px 0 6px;
}
#home-serv .equip-mini__meta,
#services-strip-grid .equip-mini__meta{
  font-size: 13px;
  color: #666;
  margin: 0 0 10px;
}

/* (необязательно) Если хочешь показывать услуги в 2 колонки на десктопе */
#home-serv.cards-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px){
  #home-serv.cards-grid{
    grid-template-columns: 1fr;
  }
}
/* ====== BURGER BUTTON ====== */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px; height: 32px;
  border: 0; background: transparent; padding: 0; margin-left: 8px;
  cursor: pointer;
}
.nav-toggle span {
  position: absolute; left: 0; right: 0;
  height: 3px; border-radius: 2px; background: currentColor;
  transform-origin: center; transition: transform .25s, top .25s, opacity .2s;
}
.nav-toggle span:nth-child(1){ top: 5px; }
.nav-toggle span:nth-child(2){ top: 14px; }
.nav-toggle span:nth-child(3){ top: 23px; }
.nav-toggle.is-open span:nth-child(1){ top: 14px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ top: 14px; transform: rotate(-45deg); }

/* ====== MOBILE MENU OVERLAY ====== */
.mobile-menu[hidden]{ display: none; }
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000;
}
.mobile-menu__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s;
}
.mobile-menu__panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 16px 22px;
  color: #fff;
}
.mobile-menu__top {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding-bottom: 10px; margin-bottom: 16px;
}
.mobile-menu__logo { color:#ffd26a; font-weight:700; text-decoration:none; font-size:20px; }
.mobile-menu__close {
  font-size: 28px; line-height: 1; border:0; background:transparent; color:#fff; cursor:pointer;
}
.mobile-menu__nav {
  display: flex; flex: 1 1 auto;
}
.mobile-menu__list {
  display: flex; flex-direction: column; gap: 18px;
  margin: 0 auto; padding: 24px 0; list-style: none; width: 100%;
  max-width: 420px; text-align: center;
}
.mobile-menu__list a {
  color: #fff; text-decoration: none; font-size: 22px; font-weight: 500;
}

/* Плавное появление */
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

/* ====== RESPONSIVE ====== */
@media (max-width: 992px){
  .nav-toggle { display: inline-block; }
  header .main-nav { display: none; } /* ← прячем твое меню */
}


/* Не скроллить страницу при открытом меню */
.body--lock { overflow: hidden; }
/* --- FIX: мобильное меню --- */
@media (max-width: 1024px){
  header .main-nav{           /* скрыть горизонтальное меню */
    display: none !important;
  }
  header .nav-toggle{         /* показать бургер и сделать его заметным */
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 32px;
    margin-left: 8px;
  }
}

/* чтобы бургер был поверх и кликабелен */
header .nav-toggle{ z-index: 1001; }
.mobile-menu{ z-index: 1000; }
.body--lock{ overflow: hidden; }
/* === Mobile header layout fix === */
@media (max-width: 1024px){
  .header{ position: relative; padding: 8px 12px; }

  /* показываем бургер и фиксируем его слева по центру шапки */
  header .nav-toggle{
    display: block !important;
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    color: #333;   /* чтобы полоски были видны */
  }

  /* сместим логотип вправо, чтобы не перекрывать бургер */
  .logo{ margin-left: 44px; }

  /* горизонтальное меню скрываем на мобилках */
  header .main-nav{ display: none !important; }

  /* большую кнопку в шапке прячем — будет в моб. меню */
  .cta-header .btn-contact{ display: none !important; }
}

/* CTA внутри мобильного меню */
.mobile-menu__cta{
  display: inline-flex;
  align-items: center; justify-content: center;
  height: 44px; padding: 12px 24px;
  font-size: 18px; font-weight: 700;
  background: var(--accent-2); color: #fff;
  border-radius: 10px; margin-top: 10px;
}
.mobile-menu__cta:active{ opacity: .9; }
/* --- Моб. шапка: 3 колонки — бургер | логотип (центр) | язык --- */
@media (max-width: 1024px){
  header .topbar, header .header, header .header-inner { display:flex; align-items:center; }
  /* если у тебя другой контейнер — применится к ближайшему из перечисленных */

  .nav-toggle{ order: 0; margin-right: 8px; }
  .logo{ order: 1; margin: 0 auto; display:block; }      /* центр */
  .lang-switch, .lang, .lang-select{ order: 2; margin-left: 8px; } /* твой селектор блока языка */
}
/* Шапка мобильного меню: логотип по центру, крест справа */
.mobile-menu__top{
  position: relative;
  justify-content: center;         /* центрируем содержимое */
}
.mobile-menu__logo{
  position: relative;
  left: 0; transform: none;        /* чтобы не смещался */
  text-align: center;
  margin: 0 auto;
}
.mobile-menu__close{
  position: absolute; right: 8px; top: 0;
}
/* при открытом меню бургер скрываем, остаётся только белый крест справа */
body.menu-open .nav-toggle{ visibility: hidden; }
/* === Моб. шапка: 3 колонки — бургер | логотип | язык === */
/* === Шапка на мобилках: бургер | логотип | язык (справа) === */
@media (max-width: 1024px){
  header, header .topbar, header .header, header .header-inner{
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 8px;
  }
  .nav-toggle{ grid-column:1; justify-self:start; }
  .logo{ grid-column:2; justify-self:center; margin:0; }
  #langSwitch{ grid-column:3; justify-self:end; }

  /* большую кнопку в шапке скрываем — она есть в мобильном меню */
  #langSwitch .btn-contact{ display: none !important; }
}

/* при открытом меню скрывать левый крестик (бургер превращённый в X) */
body.menu-open .nav-toggle{ visibility: hidden; }
/* === MOBILE HEADER: absolute-anchors — left | center | right === */
@media (max-width: 1024px){
  /* делаем контейнер шапки якорем и убираем прошлые сетки */
  header, header .topbar, header .header, header .header-inner{
    position: relative !important;
    display: block !important;
    min-height: 56px;          /* высота полосы шапки */
    padding: 8px 0;
  }

  /* Бургер — слева */
  header .nav-toggle{
    display: block !important;
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
  }

  /* Логотип — ровно по центру */
  header .logo{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    z-index: 1000;
  }

  /* Переключатель языка — строго справа */
  #langSwitch{
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
  }

  /* длинное горизонтальное меню прячем на мобилках */
  header .main-nav{ display: none !important; }

  /* большую шапочную кнопку скрываем — она есть в мобильном меню */
  #langSwitch .btn-contact{ display: none !important; }
}

/* при открытом мобильном меню бургер прячем (чтобы не было «двух крестиков») */
body.menu-open .nav-toggle{ visibility: hidden; }
/* Скрывать переключатель языка, когда открыто мобильное меню */
body.menu-open #langSwitch{
  display: none !important;           /* убираем визуально */
}

/* (опционально) если хочешь лишь прятать без скачка вёрстки:
body.menu-open #langSwitch{ visibility:hidden !important; pointer-events:none; }
*/