/* ==========================================================================
   Страница «Цифровой город» (smart-city.html). Подключается после style.css.
   ========================================================================== */

:root { --c-accent: #e01f21; }

.smart-city { position: relative; }

/* --- Меню разделов (только десктоп) -------------------------------------- */

/* Колонка справа на всю высоту контента: внутри неё меню «прилипает» к верху экрана.
   Полноширинный баннер лежит выше по z-index и при прокрутке перекрывает меню. */
.smart-city__menu-column {
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: 40px;
  width: calc((100% - 80px) * .2941);
  max-width: 400px;
}

.smart-city__menu {
  position: sticky;
  top: 40px;
}
.smart-city__menu ul { margin: 0; padding: 0; list-style: none; }

.smart-city__menu-section { margin-bottom: 16px; }

.smart-city__menu-item {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5rem;
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to right, var(--c-text), var(--c-text));
  background-repeat: no-repeat;
  background-position: left 0 bottom .1em;
  background-size: 0 2px;
  transition: background-size .4s, color .2s;
}
.smart-city__menu-item:hover,
.smart-city__menu-item:focus-visible {
  background-size: 100% 2px;
  outline: none;
}
.smart-city__menu-item--current { color: var(--c-accent); }
.smart-city__menu-item--current:hover,
.smart-city__menu-item--current:focus-visible {
  background-image: linear-gradient(to right, var(--c-accent), var(--c-accent));
}

@media (max-width: 1199px) {
  .smart-city__menu-column { display: none; }
}

/* --- Общая типографика и сетка ------------------------------------------- */

.smart-city__section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  scroll-margin-top: 0;
}
.smart-city__card-wrapper { scroll-margin-top: 0; }

.smart-city__content { width: 64.71%; max-width: 880px; }

.smart-city__title {
  margin: 0 0 33px;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.125rem;
}
.smart-city__title--wifi { margin-bottom: 8px; }

/* Отступы как у стандартных заголовков браузера — так свёрстан оригинал */
.smart-city__title-small {
  margin: 1em 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
}
h4.smart-city__title-small { margin: 1.33em 0; }

.smart-city__text-content {
  max-width: 880px;
  margin: 6px 0 0;
}
.smart-city__text-content--analytic { margin: 20px 0 16px; }
.smart-city__text-content--match { margin-bottom: 8px; }

.smart-city__small-text {
  max-width: 800px;
  margin: 0;
  font-size: .875rem;
  line-height: 1.25rem;
  opacity: .4;
}

.smart-city__icon { position: absolute; fill: none; }

@media (max-width: 1199px) {
  .smart-city__content { width: 100%; max-width: none; }
}

@media (max-width: 767px) {
  .smart-city__title { margin-bottom: 23px; font-size: 1.75rem; line-height: 2.25rem; }
  .smart-city__title--wifi { margin-bottom: 6px; }
  .smart-city__title-small,
  h4.smart-city__title-small { margin: 0 0 9px; font-size: .875rem; line-height: 1.1875rem; }
  .smart-city__text-content { font-size: .875rem; line-height: 1.375rem; }
  .smart-city__text-content br { display: none; }
  .smart-city__text-content--analytic { margin: 16px 0 24px; }
  .smart-city__text-content--match { width: 100%; margin-top: 1px; margin-bottom: 4px; }
  .smart-city__small-text { font-size: .75rem; line-height: 1.25rem; }
}

/* --- Цифровизация транспорта --------------------------------------------- */

.smart-city__digital { padding: 40px 40px 0; }

.smart-city__network-shema {
  width: 100%;
  height: auto;
  margin-top: 30px;
}

@media (max-width: 1199px) {
  .smart-city__digital { padding-top: 54px; }
  .smart-city__network-shema { margin-top: 33px; }
}
@media (max-width: 767px) {
  .smart-city__digital { padding: 24px 16px 0; }
  .smart-city__network-shema {
    width: calc(100% + 32px);
    margin: 23px -16px 0;
  }
}

/* --- Баннер «Сервисы для метрополитенов» --------------------------------- */

.smart-city__card-wrapper {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  padding-top: 40px;
}

.smart-city__card::before { height: 48.61vw; min-height: 700px; max-height: none; }
.smart-city__card-inner { padding-top: 32px; padding-bottom: 36px; }

.card__title--smart-city {
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 2.375rem;
}

.columns__title--short { max-width: 180px; }
.columns--icons .columns__item--train { margin-bottom: 61px; }
.smart-city__services.columns--icons svg { width: 80px; height: 80px; }
.smart-city__services .columns__title { margin-bottom: 20px; }

@media (max-width: 1199px) {
  .smart-city__card-wrapper { margin-top: 41px; }
  .smart-city__card-inner { padding-top: 27px; padding-bottom: 40px; }
}

/* На планшете колонки встают в список с иконкой слева */
@media (min-width: 768px) and (max-width: 1199px) {
  .columns--tablet-wide { display: block; width: 100%; max-width: 880px; margin: 0; }
  .columns--tablet-wide .columns__item { width: 100%; padding: 0; }
  .columns--tablet-wide .columns__title { max-width: none; }
  .columns--tablet-wide.columns--icons .columns__item { position: relative; padding-left: 136px; margin-bottom: 56px; }
  .columns--tablet-wide.columns--icons .columns__item:last-child { margin-bottom: 0; }
  .columns--tablet-wide.columns--icons svg { position: absolute; top: 0; left: 0; }
  .smart-city__services.columns--icons .columns__item { padding-left: 112px; margin-bottom: 32px; }
}

@media (max-width: 767px) {
  .smart-city__card-wrapper { margin-top: 18px; padding-top: 24px; }
  .smart-city__card::before { min-height: 560px; }
  .smart-city__card-inner { padding-top: 16px; padding-bottom: 24px; }
  .card__top--smart-city { margin-bottom: 16px; }
  .card__title--smart-city { font-size: 1.375rem; line-height: 1.875rem; }
  .columns__title--short { max-width: none; }
  .columns--icons .columns__item--train { margin-bottom: 30px; padding-left: 65px; }
  .smart-city__services.columns--icons .columns__item { margin-bottom: 24px; }
  .smart-city__services.columns--icons .columns__item:last-child { margin-bottom: 0; }
  .smart-city__services.columns--icons svg { width: 39px; height: 39px; }
  /* на мобильном у «Сервисов» описание остаётся видимым */
  .smart-city__services.columns--icons .columns__item { display: block; }
}

/* --- Wi-Fi аналитика ----------------------------------------------------- */

.smart-city__analyze {
  margin: 40px 0;
  padding: 40px 40px 0;
}

.analyze__transport-analytic { margin-top: 45px; }

/* Показатели ЧМ-2018 с крупными иконками */
.analyze__list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 37px 0 0;
  padding: 0;
  list-style: none;
}
.analyze__list li {
  position: relative;
  width: 45.45%;
  min-height: 72px;
  margin-right: 9.1%;
  padding-left: 97px;
}
.analyze__list li:nth-child(2n) { margin-right: 0; }
.analyze__list li:not(:first-child) + li { margin-top: 55px; }
.analyze__list li:last-child:nth-child(2n+1) { margin-top: 35px; }
.analyze__list svg { fill: none; }

.smart-city__icon--match { top: 12px; left: 10px; width: 60px; height: 60px; }
.smart-city__icon--visit { top: 2px; left: 2px; width: 80px; height: 80px; }
.smart-city__icon--global { top: -6px; left: 4px; width: 72px; height: 72px; }
.smart-city__icon--good { top: -10px; left: 2px; width: 80px; height: 80px; }
.smart-city__icon--like { top: 6px; left: 6px; width: 70px; height: 70px; }

/* Две колонки с гистограммами и итогами */
.analyze__flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}
.analyze__statistic { margin-top: 79px; }

.analyze__left,
.analyze__right { width: 45.45%; }
.analyze__left { margin-right: 9.1%; }

.analyze__resume {
  position: relative;
  width: auto;
  margin-top: 43px;
  padding-top: 5px;
  padding-left: 96px;
}
.analyze__resume svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 80px;
  height: 80px;
  fill: transparent;
}

/* Гистограммы: высота столбца берётся из --h (px) */
.histogram--visits { margin-top: 38px; }
.histogram--left { margin-top: 13px; }

.histogram__values {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100px;
  border-bottom: 2px solid var(--c-text);
}
.histogram__names {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: center;
}

.histogram__value {
  position: relative;
  height: calc(var(--h) * 1px);
  margin: 0;
  font-size: 1.625rem;
  line-height: 2.125rem;
  background-color: rgba(10, 20, 40, .08);
  transform-origin: bottom;
}
.histogram__value span {
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.histogram__value--three-col { width: 25%; margin-right: 6%; }
.histogram__value--two-col { width: 40.5%; margin-right: 6%; }

.histogram__name {
  margin: 3px 0 0;
  font-size: .875rem;
  line-height: 1.25rem;
}

/* Столбцы «вырастают», когда гистограмма попадает в экран */
.js .histogram .histogram__value { transform: scaleY(0); }
.js .histogram.is-visible .histogram__value {
  transform: scaleY(1);
  transition: transform .8s var(--ease-out);
}
.js .histogram.is-visible .histogram__value:nth-child(2) { transition-delay: .12s; }
.js .histogram.is-visible .histogram__value:nth-child(3) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .js .histogram .histogram__value { transform: none; }
}

/* Транспортная обеспеченность */
.analyze__transport-a11y { margin-top: 84px; }

.analyze__table {
  width: 39.09%;
  margin: 20px 9.2% 0 6.25%;
  border-collapse: collapse;
}
.analyze__table-row {
  border-bottom: 1px solid #c4c7cb;
  line-height: 56px;
}
.analyze__table tbody .analyze__table-row:last-child { border-bottom: none; }

.analyze__table-col {
  position: relative;
  width: 20.47%;
  padding: 14px 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-align: left;
}
.analyze__table-col--title {
  width: 43.6%;
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.25rem;
}
.analyze__table-col--second { width: 35.93%; }
.analyze__table-col--head {
  padding-top: 18px;
  padding-bottom: 10px;
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.25rem;
}

.smart-city__icon--tab { top: 9px; left: -55px; width: 40px; height: 40px; }

.analyze__flex-item--likes { width: 45.45%; margin-top: 65px; }
.analyze__flex-item--likes p { position: relative; padding-left: 96px; }
.analyze__flex-item--likes p svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 80px;
  height: 80px;
  fill: transparent;
}
.analyze__flex-item--likes p:last-child { margin-top: 48px; }

.analyze__flex-item--h4 { width: 45.45%; margin-top: 90px; margin-right: 9.1%; }
.analyze__flex-item--h4:last-child { margin-right: 0; }
.analyze__flex-item--h4 h4 { max-width: 360px; min-height: 56px; margin-bottom: 8px; }
.enricher .smart-city__title-small { margin: 0 0 14px; }

/* Подписи: текст после иконки в одну строку на планшете */
.analyze__resume span,
.analyze__flex-item p span { position: relative; padding-right: 22px; }

@media (max-width: 1199px) {
  .smart-city__analyze { padding-top: 36px; }
  .analyze__list li { width: 47.09%; margin-right: 5.82%; }
  .analyze__list li:not(:first-child) + li { margin-top: 35px; }
  .analyze__left,
  .analyze__right { width: 47.09%; }
  .analyze__left { margin-right: 5.82%; }
  .analyze__resume { margin-top: 40px; }

  .histogram--visits { margin-top: 48px; }
  .histogram--left { margin-top: 24px; }
  .histogram__values { height: 75px; }
  .histogram__value { height: calc(var(--h-tablet, var(--h)) * 1px); font-size: 1.3125rem; line-height: 1.3125rem; }
  .histogram__value span { bottom: 10px; }

  .analyze__table { width: calc(50% - 65px); margin: 20px 40px 0 45px; }
  .analyze__table-col { padding: 9px 0 8px; font-size: 1rem; }
  .analyze__table-col--title,
  .analyze__table-col--head { font-size: .6875rem; line-height: 1.0625rem; }
  .analyze__table-col--head { padding-top: 20px; padding-bottom: 7px; }
  .smart-city__icon--tab { left: -45px; width: 30px; height: 30px; }

  .analyze__flex-item--likes { margin-top: 41px; }
  .analyze__flex-item--likes p svg { top: -6px; }
  .analyze__flex-item--h4 { width: calc(50% - 20px); margin-top: 75px; margin-right: 40px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .analyze__flex-item--h4 h4 { margin-bottom: 9px; font-size: 1.25rem; line-height: 1.625rem; }
}

@media (max-width: 767px) {
  .smart-city__analyze { margin-top: 16px; padding: 24px 16px 0; }
  .analyze__transport-analytic { margin-top: 26px; }

  .analyze__list { display: block; margin-top: 35px; }
  .analyze__list li,
  .analyze__list li:not(:first-child) + li,
  .analyze__list li:last-child:nth-child(2n+1) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    min-height: 44px;
    margin: 14px 0 0;
    padding-left: 65px;
  }
  .analyze__list li:first-child { margin-top: 0; }
  .analyze__list li p { margin-top: 0; }

  .smart-city__icon--match { top: 5px; left: 5px; width: 30px; height: 30px; }
  .smart-city__icon--visit { top: 4px; left: 0; width: 40px; height: 40px; }
  .smart-city__icon--global { top: 2px; left: 2px; width: 36px; height: 36px; }
  .smart-city__icon--good { top: 0; left: 0; width: 40px; height: 40px; }
  .smart-city__icon--like { top: 2px; left: 2px; width: 36px; height: 36px; }

  .analyze__statistic { margin-top: 31px; }
  .analyze__flex-container { flex-direction: column; flex-wrap: nowrap; }
  .analyze__left,
  .analyze__right { width: auto; margin-right: 0; }
  .analyze__right { margin-top: 40px; }
  .analyze__right:last-child { margin-top: 10px; }
  .analyze__right + .analyze__left { margin-top: 38px; }

  .analyze__resume { margin-top: 0; padding-left: 64px; font-size: .875rem; line-height: 1.375rem; }
  .analyze__resume svg { top: 6px; width: 40px; height: 40px; }
  .analyze__resume span,
  .analyze__flex-item p span { padding-right: 18px; }

  .histogram--visits { margin-top: 24px; }
  .histogram--left { margin-top: 12px; }
  .histogram__value { height: calc(var(--h-mobile, var(--h)) * 1px); font-size: 1.375rem; line-height: 1.8125rem; }
  .histogram__name { font-size: .75rem; }

  .analyze__transport-a11y { margin-top: 40px; }
  .analyze__table { width: calc(100% - 48px); margin: 4px 0 0 auto; }
  .analyze__table-col { padding: 10px 0; font-size: 1.0625rem; }
  .analyze__table-col--title,
  .analyze__table-col--head { font-size: .75rem; line-height: 1.0625rem; }

  .analyze__flex-item--likes { width: 100%; margin-top: 25px; }
  .analyze__flex-item--likes p { padding-left: 64px; margin-bottom: 16px; }
  .analyze__flex-item--likes p svg { top: 0; width: 40px; height: 40px; }
  .analyze__flex-item--likes p:last-child { margin-top: 16px; }
  .analyze__flex-item--h4 { width: auto; margin: 24px 0 0; }
  .analyze__flex-item--h4 h4 { min-height: 0; }
}

/* --- Энричер ------------------------------------------------------------- */

.analyze__enricher { margin: 42px 0 64px; }

.enricher__surface {
  position: relative;
  width: 100%;
  padding: 40px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(220, 224, 227, .6), rgba(255, 255, 255, .95)),
    linear-gradient(90deg, rgba(10, 20, 40, .04) 0, rgba(10, 20, 40, .04) 1px, transparent 1px, transparent 100%) 0 0 / 24px 24px;
}
/* На десктопе карточка шире колонки на свои отступы, как в оригинале */
@media (min-width: 1200px) {
  .enricher__surface { box-sizing: content-box; }
}
.enricher__surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.enricher__header,
.enricher__lead,
.enricher__goal,
.enricher__processes,
.enricher__footer { position: relative; z-index: 1; }

.enricher__header { max-width: 820px; margin-bottom: 28px; }
.enricher__title {
  max-width: 720px;
  margin: 0;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.125rem;
}

.enricher__lead { max-width: 840px; margin-bottom: 32px; }
.enricher__lead p { margin: 0; }
.enricher__lead p + p { margin-top: 20px; }

.enricher__goal {
  max-width: 760px;
  margin-bottom: 40px;
  padding: 24px 28px;
  background-color: rgba(255, 255, 255, .78);
  border-left: 4px solid var(--c-accent);
}
.enricher__goal p { margin: 0; }

.enricher__subtitle { margin: 0 0 14px; }

.enricher__processes { margin-bottom: 40px; }

.enricher__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.enricher__item {
  min-height: 100%;
  padding: 22px 24px 24px;
  background-color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(10, 20, 40, .1);
}
.enricher__item p { margin: 0; }
.enricher__index {
  display: inline-block;
  margin-bottom: 14px;
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.25rem;
  letter-spacing: .12em;
  color: var(--c-accent);
}

.enricher__footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.enricher__info-block { padding-top: 24px; }
.enricher__info-block p { margin: 0; }

.enricher__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 20, 40, .24);
  transition: border-color .2s, color .2s;
}
.enricher__link:hover,
.enricher__link:focus-visible {
  color: var(--c-navy-hover);
  border-bottom-color: rgba(0, 59, 103, .4);
  outline: none;
}

@media (max-width: 1199px) {
  .analyze__enricher { margin-bottom: 56px; }
  .enricher__surface { padding: 36px 32px; }
  .enricher__title { font-size: 1.875rem; line-height: 2.375rem; }
  .enricher__goal { padding: 22px 24px; }
  .enricher__list { gap: 20px; }
}

@media (max-width: 767px) {
  .analyze__enricher { margin: 24px 0 40px; }
  .enricher__surface { padding: 24px 16px; }
  .enricher__header { margin-bottom: 20px; }
  .enricher__title { font-size: 1.5rem; line-height: 1.875rem; }
  .enricher__lead { margin-bottom: 24px; }
  .enricher__lead p + p { margin-top: 16px; }
  .enricher__goal { margin-bottom: 32px; padding: 18px 16px; }
  .enricher__subtitle { margin-bottom: 10px; }
  .enricher__processes { margin-bottom: 32px; }
  .enricher__list { grid-template-columns: 1fr; gap: 16px; }
  .enricher__item { padding: 18px 16px; }
  .enricher__index { margin-bottom: 10px; }
  .enricher__footer { grid-template-columns: 1fr; gap: 20px; }
}