/* ==============================================================
   МОСГАЗТРЕЙД · ИНФОГРАФИКА «ОБЪЕКТОВ ГАЗИФИЦИРОВАНО»
   Автономный блок. Все правила ограничены префиксом mgt-stat-.
   Шрифт: Onest. Внешние изображения — обычные PNG в /images.
   ============================================================= */

.mgt-stat{
  --mgt-stat-ink:#07172f;
  --mgt-stat-text:#0b3155;
  --mgt-stat-muted:#506985;
  --mgt-stat-blue:#003d69;
  --mgt-stat-orange:#ff9500;
  --mgt-stat-stroke:#cbdbea;
  --mgt-stat-surface:#ffffff;
  --mgt-stat-soft:#f6faff;
  position:relative;isolation:isolate;overflow:hidden;
 
    border-radius: 28px;
    background: #000b1d;
  
    padding: 28px;
  
}
.mgt-stat-numberline h3, .mgt-stat h3, .mgt-stat-numberline p, .mgt-stat p{color: #fff;
}
.mgt-stat svg{display:block;flex:none}
.mgt-stat-header{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:5;min-height:88px}
.mgt-stat-location{display:flex;align-items:center;gap:22px;font-size:clamp(19px,1.55vw,27px);line-height:1.35;font-weight:400;color:var(--mgt-stat-ink)}
.mgt-stat-location-icon{display:grid;place-items:center;}
.mgt-stat-trust{display:flex;align-items:center;gap:19px;padding:17px 23px;width:360px;min-height:80px;flex:none;border-radius:17px;background:linear-gradient(120deg,#002c50 0%,#03486f 100%);color:#fff;box-shadow:0 6px 15px rgba(8,42,68,.09)}
.mgt-stat-trust-icon{color:#fff}
.mgt-stat-trust-icon path.mgt-orange{stroke:var(--mgt-stat-orange)}
.mgt-stat-trust span{font-size:17px;line-height:1.42;font-weight:600;letter-spacing:-.025em}
.mgt-stat-main{position:relative;margin-top:30px}
.mgt-stat-copy{position:relative;z-index:3;width:min(720px,56%)}
.mgt-stat-date{display:inline-flex;align-items:center;color:#334156;white-space:nowrap}
.mgt-stat-date svg{width:41px;height:41px;stroke-width:2}
.mgt-stat-numberline{display:block;align-items:stretch;gap:24px;margin-top:31px}
.mgt-stat-orange-line{width:5px;min-height:194px;flex:none;border-radius:6px;background:var(--mgt-stat-orange)}
.mgt-stat-number{margin:0;white-space:nowrap;font-size:clamp(140px,14vw,231px);font-weight: 700;
    line-height: 1.2;
    letter-spacing: -11%;
    font-variant-numeric: tabular-nums;
    color: #fff;}
.mgt-stat-headline{margin:0 0 0 40px;white-space:nowrap}
.mgt-stat-subline{margin:10px 0 0 25px;font-size:clamp(20px,1.86vw,31px);line-height:1.33;color:#203c5b;font-weight:400;white-space:nowrap}
.mgt-stat-update{display:inline-flex;align-items:center;gap:8px;margin:24px 0;padding:0;line-height:1.4;color:#fff;white-space:nowrap}
.mgt-stat-update svg{color:var(--mgt-stat-orange)}
.mgt-stat-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mgt-stat-map{position:absolute;top:-85px;left:45.5%;width:340px;height:auto;opacity:.84;z-index:1;object-fit:contain}
.mgt-stat-house{position:absolute;right:-57px;bottom:-89px;z-index:2;width:min(965px,69%);height:auto;object-fit:contain;object-position:bottom right}
.mgt-stat-features{position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;width:min(940px,72%);min-height:96px;margin-top:5px;padding:13px 20px;border:1.5px solid var(--mgt-stat-stroke);border-radius:25px;background:rgba(255,255,255,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mgt-stat-feature{display:flex;align-items:center;gap:15px;min-width:0;padding:7px 17px 7px 0;color:var(--muted)}
.mgt-stat-feature + .mgt-stat-feature{border-left:1px solid #c9d8e5;padding-left:18px}
.mgt-stat-feature svg{width:43px;height:43px;stroke-width:1.65}
.mgt-stat-feature span{line-height:1.3;font-weight:500}
/* Темную тему можно включить добавлением класса mgt-stat--dark на секцию.
   При этом изображения остаются отдельными прозрачными PNG. */
.mgt-stat--dark{
 --mgt-stat-ink:#f0f6ff;--mgt-stat-text:#f0f6ff;
 --mgt-stat-muted:#a9c0d8;--mgt-stat-stroke:#294661;
 --mgt-stat-surface:#07172f;--mgt-stat-soft:#0d2944;
 background:radial-gradient(ellipse 65% 80% at 85% 70%,#173755 0%,transparent 74%),linear-gradient(140deg,#07172f,#0d2944);
 border-color:#294661;box-shadow:0 16px 32px rgba(0,0,0,.2)
}
.mgt-stat--dark .mgt-stat-date,.mgt-stat--dark .mgt-stat-update,.mgt-stat--dark .mgt-stat-features{background:rgba(15,43,68,.79);border-color:#42617d}
.mgt-stat--dark .mgt-stat-number{color:#fff}
.mgt-stat--dark .mgt-stat-subline{color:#d8e5f2}
.mgt-stat--dark .mgt-stat-feature + .mgt-stat-feature{border-color:#42617d}
@media (max-width:2390px){
 .mgt-stat{padding:32px}

 .mgt-stat-map{left: 43%;
        top: -146px;}
 .mgt-stat-house{right: -68px;
        bottom: -52px;
        width: 100%;}
 .mgt-stat-copy{width:63%}
 .mgt-stat-number{font-size:clamp(128px,14.2vw,215px)}

 .mgt-stat-subline{font-size:clamp(20px,1.86vw,27px)}
 .mgt-stat-features{width:min(850px,73%);padding:12px}
 .mgt-stat-feature{gap:9px;padding-right:10px}
 .mgt-stat-feature + .mgt-stat-feature{padding-left:12px}
 .mgt-stat-feature svg{width:38px;height:38px}
 .mgt-stat-feature span{font-size:14px}
}
@media (max-width:1060px){
 .mgt-stat{padding:36px 34px 40px}
 .mgt-stat-location{gap:12px;font-size:19px}
 .mgt-stat-location-icon{width:49px;height:49px}
 .mgt-stat-trust{min-height:70px;width:287px;padding:12px 15px;gap:10px}
 .mgt-stat-trust span{font-size:14px}
 .mgt-stat-trust svg{width:38px;height:38px}
 .mgt-stat-main{margin-top:28px;}
 .mgt-stat-date{min-height:55px;padding:10px 17px;font-size:20px;gap:10px;border-radius:16px}
 .mgt-stat-date svg{width:32px;height:32px}
 .mgt-stat-numberline{margin-top:25px;gap:16px}
 .mgt-stat-orange-line{min-height:152px}
 .mgt-stat-number{font-size:clamp(117px,14vw,158px)}

 .mgt-stat-subline{margin-left:19px;font-size:22px}
 .mgt-stat-update{margin-top:30px;min-height:49px;padding:8px 14px;gap:10px;font-size:14px}
 .mgt-stat-update svg{width:24px;height:24px}
 .mgt-stat-map{left:44%;top:-42px;width:255px}
 .mgt-stat-house{right:-35px;bottom:-65px;width:120%}
 .mgt-stat-features{width:100%;min-height:85px;margin-top:0}
}
@media (max-width:740px){
.mgt-stat-copy h3{font-size: 22px;
}
 .mgt-stat{padding: 28px;
        border-radius: 28px;
        margin-left:-16px!important;
		margin-right:-16px!important;}
 .mgt-stat-header{min-height:0;align-items:flex-start;flex-direction:column;gap:16px}
 .mgt-stat-location{font-size:17px;gap:12px}
 .mgt-stat-location-icon{width:44px;height:44px}
 .mgt-stat-location-icon svg{width:25px;height:25px}
 .mgt-stat-trust{width:max-content;max-width:100%;min-height:53px;padding:9px 14px;border-radius:13px;gap:11px}
 .mgt-stat-trust svg{width:36px;height:36px}
 .mgt-stat-trust span{font-size:13px}
 .mgt-stat-main{margin-top:22px;min-height:0}
 .mgt-stat-copy{width:100%}
 .mgt-stat-date{font-size:18px;min-height:50px;padding:9px 13px;border-radius:13px}
 .mgt-stat-date svg{width:29px;height:29px}
 .mgt-stat-numberline{margin-top:24px;gap:13px}
 .mgt-stat-orange-line{width:4px;min-height:125px}
 .mgt-stat-number{font-size:clamp(96px,19vw,154px);line-height: 1.2;}

 .mgt-stat-subline{margin:8px 0 0 17px;font-size:clamp(17px,3.7vw,25px);white-space:normal}
 .mgt-stat-art{position:relative;inset:auto;height:auto;margin:8px 0px 0px 0;aspect-ratio:1.34/1}
 .mgt-stat-map{left:auto;top:0;right:2%;width:36%;opacity:.9}
 .mgt-stat-house{right: -18%;
        bottom: -45px;
        width: 250%;}
 .mgt-stat-update{margin:18px 0 0;white-space:normal;min-height:48px;padding:10px 12px;font-size:13px;gap:9px;border-radius:15px}
 .mgt-stat-update svg{width:24px;height:24px}
 .mgt-stat-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:16px;padding:8px 10px;border-radius:18px}
 .mgt-stat-feature{padding:12px 10px;gap:9px}
 .mgt-stat-feature + .mgt-stat-feature{border-left:0;padding-left:10px}
 .mgt-stat-feature:nth-child(2n){border-left:1px solid var(--mgt-stat-stroke)}
 .mgt-stat-feature:nth-child(n+3){border-top:1px solid var(--mgt-stat-stroke)}
 .mgt-stat-feature svg{width:34px;height:34px}
 .mgt-stat-feature span{font-size:12.5px}
}
    .mgt-stat-number {
        font-size: clamp(128px, 35vw, 215px);
		line-height:1
    }

.mgt-stat h3 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
    font-weight: 500;

    margin-top: 12px;
    margin-bottom: 8px;
}
@media (max-width:560px){
.mgt-stat-update{display:none}
.mgt-stat h3{font-size: 24px;
    line-height: 32px;
    letter-spacing: -.6px;
    font-weight: 500;
   
    margin-top: 8px;
    margin-bottom: 8px;
}
.mgt-stat-art{aspect-ratio:1.84/1}

}
@media (max-width:390px){

 .mgt-stat-number{font-size:clamp(33vw,19.2vw,95px); line-height: 1;text-align: center;}
 .mgt-stat-art{margin-right:-16px}
 .mgt-stat-feature{gap:6px;padding-left:6px;padding-right:6px}
 .mgt-stat-feature + .mgt-stat-feature{padding-left:6px}
 .mgt-stat-feature svg{width:30px;height:30px}
 .mgt-stat-feature span{font-size:11px}
}
.gas-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.gas-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.gas-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 23, 47, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.gas-video-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 824px);
  max-height: calc(100vh - 48px);
  overflow: auto;

  padding: 32px;

  background: #fff;
  border-radius: 24px;

  box-shadow:
    0 24px 80px rgba(7, 23, 47, .28);
}

.gas-video-modal__content h3 {
  margin: 0 48px 24px 0;

  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
}

.gas-video-modal__video {
  width: 100%;
  display: flex;
  justify-content: center;

  overflow: hidden;
  border-radius: 16px;

  background: #07172f;
}

.gas-video-modal__video video {
  display: block;

  /* Не увеличиваем исходник выше 760px */
  width: min(100%, 760px);
  height: auto;

  aspect-ratio: 760 / 428;
  object-fit: contain;

  background: #07172f;
}

.gas-video-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;

  width: 32px;
  height: 32px;
  padding: 4px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  background: transparent;
  color: #07172f;
  cursor: pointer;
}

.gas-video-modal__close svg {
  width: 24px;
  height: 24px;
}

.gas-video-modal__close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

body.video-modal-open {
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .gas-video-modal__dialog {
    background: #07172f;
    color: #fff;
  }

  .gas-video-modal__close {
    color: #fff;
  }

  .gas-video-modal__video {
    background: #020b19;
  }
}

@media (max-width: 640px) {
  .gas-video-modal {
    padding: 16px;
  }

  .gas-video-modal__dialog {
    width: 100%;
    padding: 20px;
    border-radius: 16px;
  }

  .gas-video-modal__content h3 {
    margin-bottom: 16px;
    padding-right: 24px;
    font-size: 20px;
  }

  .gas-video-modal__close {
    top: 14px;
    right: 14px;
  }

  .gas-video-modal__video {
    border-radius: 12px;
  }
}