/* ========== Cities pages ========== */

.city {
  --city-grad-text: linear-gradient(173.817deg, #9d64e2 0%, #7b40c2 100%);
  --city-grad-media: linear-gradient(156.038deg, #9d64e2 0%, #7b40c2 100%);
  --city-grad-title: linear-gradient(178.4deg, #9d64e2 0%, #7b40c2 100%);
  --city-grad-title-alt: linear-gradient(178.399deg, #9d64e2 0%, #7b40c2 100%);
  --city-grad-medium: linear-gradient(173.817deg, #9d64e2 0%, #7b40c2 100%);
  --city-grad-alt: linear-gradient(173.817deg, #9d64e2 0%, #7b40c2 100%);
  --city-grad-final: linear-gradient(173.29deg, #9d64e2 0%, #7b40c2 100%);

  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.city__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.city__stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.city__title {
  margin: 0;
  font-size: 28px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
}

.city__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--text-secondary);
  text-align: left;
}

.city__lead--tight {
  line-height: 1.2;
}

.city__lead strong {
  font-weight: 500;
  color: var(--text-primary);
}

.city__grad {
  background-image: var(--city-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.city__grad--medium {
  font-weight: 500;
  line-height: 1.4;
  background-image: var(--city-grad-medium);
}

.city__grad--alt {
  font-weight: 500;
  background-image: var(--city-grad-alt);
}

.city__grad--final {
  font-weight: 500;
  background-image: var(--city-grad-final);
}

.city__media {
  width: 100%;
  height: 320px;
  border-radius: 32px;
  background-image: var(--city-grad-media);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.city__media-inner {
  height: 100%;
  position: relative;
  flex: 0 0 auto;
}

.city__media-inner--214x246 {
  aspect-ratio: 214 / 246;
}

.city__media-inner--214x224 {
  aspect-ratio: 214 / 224;
}

.city__media-inner--214x242 {
  aspect-ratio: 214 / 242;
}

.city__media-inner--214x236 {
  aspect-ratio: 214 / 236;
}

.city__media-inner--1x1 {
  aspect-ratio: 1 / 1;
}

.city__media-inner--1536x1024 {
  aspect-ratio: 1536 / 1024;
}

.city__media-inner--206x178 {
  aspect-ratio: 206 / 178;
}

.city__media-inner--1024x1536 {
  aspect-ratio: 1024 / 1536;
}

.city__media-inner--1024x763 {
  aspect-ratio: 1024 / 763;
}

.city__media-inner--1024x852 {
  aspect-ratio: 1024 / 852;
}

.city__media-inner--1024x755 {
  aspect-ratio: 1024 / 755;
}

.city__media-inner--1024x703 {
  aspect-ratio: 1024 / 703;
}

.city__media-inner--285x190 {
  aspect-ratio: 285 / 190;
  height: 190px;
}

.city__media-inner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.city__media-inner img.city__media-img--tall {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 130%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: translateY(-15%);
}

.city__media-inner img.city__media-img--overfill-134 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 134.21%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.city__media-inner img.city__media-img--overfill-146 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 145.66%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.city__media-inner img.city__media-img--overfill-136 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 135.63%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.city__media-inner img.city__media-img--overfill-143 {
  position: absolute;
  left: 0.16%;
  top: -21.43%;
  width: 99.69%;
  height: 142.86%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.city__media-inner img.city__media-img--overfill-132 {
  position: absolute;
  left: 0.16%;
  top: -16.12%;
  width: 99.69%;
  height: 132.23%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.city__media-inner img.city__media-img--overfill-120 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 120.19%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.city__media-inner img.city__media-img--overfill-136-shift {
  position: absolute;
  left: 0.16%;
  top: -17.8%;
  width: 99.69%;
  height: 135.59%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.city__media-inner img.city__media-img--cover {
  object-fit: cover;
}

.city__media-inner img.city__media-img--contain {
  object-fit: contain;
}

.city__card {
  width: 100%;
  background: var(--bg-card);
  border-radius: 32px;
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.city__card--compact {
  gap: 20px;
}

.city__section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.city__section--tight {
  gap: 12px;
}

.city__h {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text-primary);
}

.city__subh {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-primary);
}

.city__p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--text-secondary);
}

.city__p strong {
  font-weight: 500;
  color: var(--text-primary);
}

.city__p--grad {
  background-image: var(--city-grad-final);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
}

.city__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.city__li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.city__li--check {
  align-items: center;
}

.city__li-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.city__li-icon img {
  width: 22px;
  height: 22px;
  display: block;
}

.city__li-icon--sm {
  width: 20px;
  height: 20px;
}

.city__li-icon--sm img {
  width: 20px;
  height: 20px;
}

.city__li-text {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-primary);
}

.city__li-text--muted {
  font-weight: 300;
  color: var(--text-secondary);
}

.city__li-text--light {
  font-weight: 300;
  color: var(--text-primary);
}

/* Жирное внутри пункта списка. Без этого правила <strong> в
   .city__li-text--muted наследует серый --text-secondary и выглядит
   «жирным, но светлым». Зеркалит .city__p strong / .city__lead strong.
   Специфичность (0,1,1) перебивает модификатор --muted (0,1,0). */
.city__li-text strong {
  font-weight: 500;
  color: var(--text-primary);
}

.city__dot {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-secondary);
  margin-top: 9px;
}

.city__emoji {
  width: 14px;
  height: 14px;
  display: block;
}

.city-chart {
  width: 100%;
  background: var(--bg-card);
  border-radius: 32px;
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.city-chart__title {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  background-image: var(--city-grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.city-chart__title--alt {
  background-image: var(--city-grad-title-alt);
}

.city-chart__wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.city-chart table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.4;
}

.city-chart th,
.city-chart td {
  padding: 20px;
  border-right: 1px solid rgba(157, 100, 226, 0.15);
  border-bottom: 1px solid rgba(157, 100, 226, 0.15);
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.city-chart tr > *:last-child {
  border-right: 0;
}

.city-chart tbody tr:last-child > * {
  border-bottom: 0;
}

.city-chart th {
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
}

.city-chart td {
  font-weight: 300;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.85);
}

.city-chart__side {
  text-align: left;
  width: 170px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.city-chart__top {
  text-align: center;
}

@media (max-width: 768px) {
  .city {
    --city-grad-text: linear-gradient(156.038deg, #9d64e2 0%, #7b40c2 100%);
    --city-grad-media: linear-gradient(137.645deg, #9d64e2 0%, #7b40c2 100%);
    --city-grad-title: linear-gradient(176.504deg, #9d64e2 0%, #7b40c2 100%);
    --city-grad-title-alt: linear-gradient(173.034deg, #9d64e2 0%, #7b40c2 100%);
    --city-grad-medium: linear-gradient(156.038deg, #9d64e2 0%, #7b40c2 100%);
    --city-grad-alt: linear-gradient(156.038deg, #9d64e2 0%, #7b40c2 100%);
    --city-grad-final: linear-gradient(152.776deg, #9d64e2 0%, #7b40c2 100%);
    max-width: 100%;
    gap: 24px;
  }

  .city__media {
    height: 280px;
  }

  .city__card {
    gap: 24px;
  }

  .city-chart td,
  .city-chart th {
    padding: 10px 8px;
    word-break: break-word;
  }

  .city-chart__side {
    width: 92px;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .city-chart table {
    font-size: 11px;
    line-height: 1.2;
  }

  .city-chart td {
    white-space: normal;
  }

  .city-chart th {
    white-space: normal;
  }
}