/* =========================
   ALSERAL • Clean styles.css
   Версия: v1 (чистая сборка)
   ========================= */

/* ---- База / Reset ---- */
* { box-sizing: border-box; }
html, body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}
a{ color: #CDE7EE; text-decoration: none; }
a:hover{ color: #E2F3F6; }

/* ---- Переменные проекта ---- */
:root{
  /* SLATE + ICE (строго и технологично) */
  --bg:        #0A0F11;
  --panel:     #0F1518;
  --border:    #1C2A2E;
  --muted:     #A9BDC4;
  --text:      #E9F2F5;
  --accent:    #6BC1B6;
  --accent-2:  #57AFA4;
  --glow:      #8AD9CF;
  --shadow-1:  0 8px 24px rgba(0,0,0,.30);
  --shadow-2:  0 1px 0 rgba(138,217,207,.22) inset;
  --radius:    14px;
  --btn-bg:    #195C52;
  --btn-bg-h:  #1F7265;
  --btn-bd:    rgba(87,175,164,.35);
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.60) 100%);
  --logo-desktop: 40px;
  --logo-mobile: 34px;
}

/* ---- Топбар/хедер ---- */
.topbar{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 14px;
  background: rgba(9,14,16,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.mainnav{ flex: 1; }

/* Кнопка-бургер (desktop скрыт) */
.burger { display: none; background:#123; padding: 8px 12px; border:1px solid #294; border-radius:10px; color:#c6ffe9; font-weight:700; }

/* Меню (desktop) */
.menu{
  list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; align-items: center;
}
.menu>li>a{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.menu>li>a:hover{ border-color: var(--accent); }

/* Подменю: базовый узел */
.has-sub { position: relative; }

/* Выпадающее подменю (единая версия) */
.submenu{
  position: absolute; left: 0; top: calc(100% + 10px);
  background: rgba(13,20,23,.96);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 240px; max-width: min(92vw, 480px);
  list-style: none; margin: 0; padding: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);

  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px) scale(.985);
  transition: opacity .32s ease, transform .22s ease, visibility 0s .22s ease;
}

/* Показываем подменю (hover/focus/open) */
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu,
.has-sub.open > .submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity .32s ease, transform .22s ease, visibility 0s ease;
}

/* «Мостик» для стабильного hover */
.has-sub::after{
  content:""; position:absolute; left:0; right:0; top:100%; height: 12px;
}

.submenu li { list-style: none; }
.submenu a{
  display:block; padding:10px 12px; border-radius:8px;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25;
}
.submenu a:hover{ background: rgba(255,255,255,.06); }

/* ---- Языковые «пилюли» ---- */
.langs{ display:flex; gap:8px; align-items:center; }
.lang{
  background: transparent; border:1px solid var(--accent); border-radius:20px;
  padding:4px 8px; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:14px; color:#e6fffb;
}
.lang img{ width:18px; height:18px; border-radius:50%; }
.lang.active{ background: var(--accent); border-color: var(--accent); color:#fff; }

/* ---- Логотип (кнопка Home) ---- */
/* Таргетируем именно файл логотипа, чтобы не задеть другие картинки */
.topbar .brand img[src*="logo-badg.jpg"],
.header .brand img[src*="logo-badg.jpg"],
.brand img[src*="logo-badg.jpg"],
.logo img[src*="logo-badg.jpg"],
.navbar-brand img[src*="logo-badg.jpg"]{
  height: var(--logo-desktop);
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 768px){
  .topbar .brand img[src*="logo-badg.jpg"],
  .header .brand img[src*="logo-badg.jpg"],
  .brand img[src*="logo-badg.jpg"],
  .logo img[src*="logo-badg.jpg"],
  .navbar-brand img[src*="logo-badg.jpg"]{
    height: var(--logo-mobile);
  }
}

/* ---- Hero ---- */
.hero{
  position: relative; z-index: 0;
  height: 38vh; min-height: 560px;
  background: var(--hero) center/cover no-repeat;
  overflow: hidden;
  border-bottom: 1px solid var(--header-bd);
  padding: 64px 0 48px; /* для страниц без изображения внутри */
}
/* мягкое затемнение */
.hero::after{
  content:""; position:absolute; inset:0;
  background: var(--hero-overlay);
}

/* Вариант B: если внутри hero используется <img> */
.hero > img{
  width: 100%; height: auto; display:block;
  transform: scale(1.1); filter: blur(2px); opacity: .85;
  animation: heroFocus 2.2s ease-out forwards;
}

@keyframes heroFocus{
  0% { transform: scale(1.10); filter: blur(2px); opacity:.85; }
  60%{ transform: scale(1.03); filter: blur(.5px); opacity:.95; }
  100%{ transform: scale(1.00); filter: blur(0); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .hero > img{ animation: none; transform: none; filter: none; opacity: 1; }
}

/* Заголовок внутри hero — десктоп */
.hero h1{
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 100px;             /* отступ сверху на десктопе */
  margin-left: auto;
  margin-right: auto;
  max-width: 100% !important;
  width: 100% !important;
  font-size: clamp(26px, 4.5vw, 52px) !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: break-word;
  padding-inline: 16px;
}

/* Мобильные: центрируем и по горизонтали, и по вертикали */
@media (max-width: 768px){
  .hero{
    display: flex;
    justify-content: center;   /* центр по горизонтали */
    align-items: center;       /* центр по вертикали */
    padding: 0;                /* убираем паддинги, чтобы не мешали */
    height: 50vh;              /* фиксируем высоту баннера, можно подкорректировать */
    min-height: 260px;         /* минимальная высота, чтобы текст влезал */
  }
  .hero h1{
    margin: 0;                 /* убираем смещения */
    width: auto;               /* ширина по содержимому */
    max-width: 90%;            /* ограничение, чтобы текст не упирался в края */
    text-align: center;
  }
}

/* Отступ следующего блока от hero */
.hero + .container,
.hero + main,
.hero + section { margin-top: 18px; }

/* ---- Контейнеры/карточки/панели ---- */
.container{ max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; }
.lead{ font-size: 18px; line-height: 1.6; color: var(--muted); }
.cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:16px; margin:22px 0;
}
.card{
  display:block; padding:18px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0E1517, #0B1214);
  text-align:center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: #23383E;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.panel{
  background: linear-gradient(180deg, var(--panel), #0C1315);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow-2), var(--shadow-1);
}
.panel .lead{ margin: 0 0 14px 0; }

/* ---- Кнопки ---- */
.btn{ display:inline-block; margin-top:10px; padding:10px 14px; border:1px solid #2b6; color:#cffff2; border-radius:12px; }
.btn:hover{ background:#155e50; }

.btn-request{
  display:inline-block; padding:12px 18px; border-radius:10px;
  background: #159a7f; color:#eafff5; font-weight:600;
  border: 1px solid rgba(21,154,127,.35); text-decoration:none;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-request:hover{ transform: translateY(-1px); background:#17a98b; box-shadow: 0 6px 16px rgba(0,0,0,.18); }

/* ---- Контакты ---- */
.contact form{ display:grid; gap:12px; margin-top:12px; }
.contact input, .contact textarea{
  width:100%; padding:10px; border-radius:10px; border:1px solid #2a5046;
  background:#0c1514; color:#e8fff7;
}

/* Кнопка формы */
.contact form button,
.contact form input[type="submit"]{
  background: #1d7a50; color: #fff; border: none; border-radius: 6px;
  padding: 12px 20px; font-weight: 600; cursor: pointer;
  transition: background .25s ease, transform .15s ease;
}
.contact form button:hover,
.contact form input[type="submit"]:hover{ background: #22a36a; transform: translateY(-2px); }
.contact form button:active,
.contact form input[type="submit"]:active{ transform: translateY(0); }

/* Контактная панель: доп. стили */
.nobr { white-space: nowrap; }
.contact.panel { max-width: 980px; margin: 0 auto; }
.contact.panel .phones, .contact.panel .email { margin: 0 0 16px 0; line-height: 1.6; }
.contact.panel .phones .label, .contact.panel .email .label { margin-right: 8px; opacity: .9; }
.contact.panel a { color: #8fe7d2; text-decoration: none; }
.contact.panel a:hover { text-decoration: underline; }

/* ---- Документы (список) ---- */
.docs { margin-top: 28px; }
.docs-grid{ display: flex; flex-direction: column; gap: 12px; }
.doc{
  display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid rgba(34,59,58,.5); border-radius: 12px;
  background: rgba(11,18,17,.7); text-decoration:none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.doc:hover{ transform: translateY(-1px); border-color: rgba(34,59,58,.9); background: rgba(11,18,17,.9); }
.doc__icon { font-size: 22px; line-height: 1; }
.doc__body { display: grid; gap: 3px; }
.doc__title { color: #E6FFFB; font-weight: 600; }
.doc__row { display: flex; gap: 10px; color: #9ad9cd; font-size: 12px; }
.doc__meta { border: 1px solid rgba(154,217,205,.3); padding: 1px 6px; border-radius: 999px; }
.doc__empty { grid-column: 1 / -1; }

/* ---- Фотосетка ---- */
.photos-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px;
}
.photos-grid img{
  width:100%; height:auto; object-fit: cover; border-radius: 6px; transition: transform .3s ease;
}
.photos-grid img:hover{ transform: scale(1.05); }

/* ---- Футер ---- */
.footer{ border-top:1px solid var(--border); margin-top:40px; padding:18px; text-align:center; color: var(--muted); }

/* ---- Адаптив: меню/бургер ---- */
@media (max-width: 820px){
  .burger{ display: inline-flex; align-items:center; justify-content:center; z-index: 1111; }
  .menu{
    display: none; position: absolute; left: 12px; right: 12px; top: 64px;
    flex-direction: column; gap: 8px;
    background: #0b1211; border: 1px solid var(--header-bd); border-radius: 14px; padding: 12px;
  }
  .menu.open{ display: flex; }
  .submenu{ 
  position: static; 
  display: none; 
  margin-top: -4px; 
}

/* Работает и по классу .open, и по тапу (focus-within/hover) */
.has-sub.open > .submenu,
.has-sub:focus-within > .submenu,
.has-sub:hover > .submenu {
  display: block;
}

}

/* ---- Адаптив: мелкие правки ---- */
@media (max-width: 768px){
  /* телефоны: языковые «пилюли» компактнее */
  .topbar{ flex-wrap: wrap; }
  .langs{ gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; width: auto; margin-left: auto; margin-top: 6px; }

  /* контакты: номера по одной строке */
  .contacts-box .phones,
  .phones-mobile,
  .phones{ display: block; }
  .contacts-box .phones a,
  .phones-mobile a,
  .phones a{ display:block; margin: 6px 0; white-space: nowrap; word-break: keep-all; }

  /* hero компактнее */
  .hero{ height: 34vh; min-height: 220px; }
  .panel{ padding: 14px; }
}
@media (max-width: 420px){
  .contact.panel .phones br{ display:block; }
}
@media (max-width: 1024px){
  /* пример: если нужен более узкий контейнер заголовка на планшете — можно добавить класс .header-container в разметку */
}