/* dist/css/custom_01.css */

/* =====================================================================
   ШАПКА: телефон + ссылки в одну строку (один шрифт / размер / baseline)
   ===================================================================== */
.header-brand-extended{
  display: inline-flex;
  align-items: baseline;   /* ключевое: ровняем по базовой линии текста */
  gap: 24px;
  flex-wrap: wrap;
}

.header-phone{
  padding-left: 25px;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  color: #8fa6b8;
  white-space: nowrap;
}

.header-links-nav{
  display: inline-flex;
}

.header-links-compact{
  display: inline-flex;
  align-items: baseline;
}

.header-links-compact a{
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  color: #8fa6b8;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
}

.header-links-compact li + li a{
  margin-left: 24px;
}

.header-links-compact a:hover{
  color: #ffffff;
}

@media (max-width: 640px){
  .header-phone{
    padding-left: 14px;
    font-size: 16px;
  }
  .header-links-compact a{
    font-size: 16px;
  }
  .header-links-compact li + li a{
    margin-left: 16px;
  }
}

/* =====================================================================
   СЕКЦИЯ "О компании / Контакты"
   ===================================================================== */

/* Фон секции */
.info-band{
  background: linear-gradient(
    180deg,
    rgba(21,22,22,0.9) 0%,
    rgba(34,36,36,0.9) 100%
  );
}

/* === КЛЮЧЕВОЕ ИЗМЕНЕНИЕ ===
   Расширяем контейнер ТОЛЬКО в этой секции
   Было: max-width: 1106px
   Стало: ~1106 + 1106/3 ≈ 1475px
*/
.info-band > .container{
  max-width: 1480px;
}

/* вертикальные отступы секции */
.info-band-inner{
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (min-width: 641px){
  .info-band-inner{
    padding-top: 88px;
    padding-bottom: 88px;
  }
}

/* сетка карточек */
.info-band-grid{
  display: flex;
  gap: 32px;
  align-items: stretch;
}

@media (max-width: 860px){
  .info-band-grid{
    flex-direction: column;
    gap: 20px;
  }
}

/* карточки */
.info-card{
  flex: 1 1 0;
  padding: 22px 22px;
  border: 1px solid rgba(69,76,76,0.5);
  border-radius: 8px;
  background: rgba(16,17,17,0.35);
}

.info-card h3{
  margin-bottom: 14px;
}

/* текст "О компании" */
.info-bullets li{
  margin: 10px 0;
  color: rgba(255,255,255,0.78);
}

.info-quote{
  margin-top: 16px;
  font-style: italic;
  color: rgba(255,255,255,0.65);
}

.info-quote-author{
  display: inline-block;
  margin-top: 8px;
  color: rgba(255,255,255,0.55);
  font-style: normal;
}

/* =====================================================================
   КОНТАКТЫ
   ===================================================================== */
.info-contacts{
  margin-bottom: 16px;
}

.info-row{
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(69,76,76,0.35);
}

.info-row:last-child{
  border-bottom: none;
}

.info-label{
  min-width: 90px;
  color: rgba(118,134,150,0.95);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.1px;
  font-size: 12px;
}

.info-value{
  color: rgba(255,255,255,0.82);
}

/* =====================================================================
   КАРТА (статичная, кликабельная)
   ===================================================================== */
.map-box{
  border: 1px solid rgba(69,76,76,0.5);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
  cursor: pointer;
}

.map-box:hover{
  border-color: rgba(67,241,255,0.55);
}

.map-link{
  display: block;
  text-decoration: none;
}

.map-img{
  display: block;
  width: 100%;
  height: auto;
}

.map-placeholder{
  padding: 16px;
  color: rgba(255,255,255,0.55);
}

/* =====================================================================
   ПОДСВЕТКА ЯКОРЯ ("приехали сюда")
   ===================================================================== */
.jump-highlight{
  animation: jumpGlow 900ms ease-out 1;
}

@keyframes jumpGlow{
  0%{
    box-shadow: 0 0 0 rgba(67,241,255,0);
    border-color: rgba(69,76,76,0.5);
  }
  30%{
    box-shadow: 0 0 0 3px rgba(67,241,255,0.20);
    border-color: rgba(67,241,255,0.55);
  }
  100%{
    box-shadow: 0 0 0 rgba(67,241,255,0);
    border-color: rgba(69,76,76,0.5);
  }
}