/**
 * Map Section Component Styles
 * Переиспользуемый компонент карты с городами
 * 
 * Структура:
 * 1. Container & Layout
 * 2. Typography
 * 3. City List
 * 4. Map Visual
 * 5. Interactive States
 * 6. Responsive Design
 */

/* ========================================
   1. CONTAINER & LAYOUT
   ======================================== */

.map .container {
  overflow: hidden;
}

.map__content {
  display: flex;
  gap: var(--map-gap-default);
  align-items: stretch;
}

.map__cities {
  display: flex;
  gap: var(--map-gap-default);
  flex: 1;
}

.map__city-group {
  display: flex;
  flex-direction: column;
  gap: var(--map-gap-small);
  width: var(--map-city-group-width);
}

.map__city-item {
  display: flex;
  flex-direction: column;
  gap: var(--map-gap-micro);
  height: var(--map-city-item-height);
}

.map__city-item:last-child {
  gap: var(--map-gap-tiny);
}

.map__city-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.map__visual {
  flex: 1;
  position: relative;
  max-width: var(--map-width);
  max-height: var(--map-height);
}

/* ========================================
   2. TYPOGRAPHY
   ======================================== */

.map__title {
  font-family: var(--map-font-family);
  font-weight: var(--map-font-weight);
  font-size: var(--map-title-size);
  line-height: var(--map-title-line-height);
  text-transform: uppercase;
  color: var(--map-color-text);
  margin: 0 0 64px 0;
  text-align: left;
}

.map__city-name {
  font-family: var(--map-font-family);
  font-weight: var(--map-font-weight);
  font-size: var(--map-city-name-size);
  line-height: var(--map-city-name-line-height);
  text-transform: uppercase;
  color: var(--map-color-text);
}

/* ========================================
   3. CITY LIST
   ======================================== */

.map__city-icon {
  position: relative;
  width: var(--map-city-icon-size);
  height: var(--map-city-icon-size);
  flex-shrink: 0;
}

.map__city-icon-img {
  width: 100%;
  height: 100%;
  display: block;
}

.map__city-line {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--map-color-line);
  opacity: var(--map-color-line-opacity);
}

/* ========================================
   4. MAP VISUAL
   ======================================== */

.map__svg {
  position: absolute;
  top: var(--map-offset-top);
  left: 0;
  width: var(--map-width);
  height: var(--map-height);
  filter: var(--map-shadow);
  object-fit: contain;
}

.map__markers {
  position: absolute;
  top: var(--map-offset-top);
  left: 0;
  width: var(--map-width);
  height: var(--map-height);
  pointer-events: none;
}

.map__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--map-marker-size);
  height: var(--map-marker-size);
  pointer-events: auto;
  cursor: pointer;
}

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

.map__marker--active {
  z-index: 2;
  width: var(--map-marker-active-size);
  height: var(--map-marker-active-size);
  transform: translate(-50%, -50%) scale(1.1);
  transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
}

/* ========================================
   5. INTERACTIVE STATES
   ======================================== */

/* City item states */
.map__city-item .map__city-name {
  color: var(--map-color-text);
}

.map__city-item .map__city-line {
  border-color: var(--map-color-line);
}

.map__city-item:hover .map__city-name {
  color: var(--map-color-primary);
}

.map__city-item:hover .map__city-line {
  border-color: var(--map-color-primary);
}

.map__city-item.active .map__city-name {
  color: var(--map-color-primary);
}

.map__city-item.active .map__city-line {
  border-color: var(--map-color-primary);
}

/* Marker hover */
.map__marker:hover {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.map__marker:hover:not(.map__marker--active) {
  transform: translate(-50%, -50%) scale(1.05);
}

/* ========================================
   6. RESPONSIVE DESIGN
   ======================================== */

/* Large Desktop - Column Layout */
@media (max-width: 1400px) {
  .map__content {
    flex-direction: column;
    gap: var(--map-gap-default);
  }
  
  .map__cities {
    flex-direction: row;
    gap: var(--map-gap-default);
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .map__city-group {
    flex: 1;
    min-width: 0;
    max-width: calc(50% - var(--map-gap-default) / 2);
  }
  
  .map__visual {
    align-self: center;
    max-width: var(--map-width);
    max-height: var(--map-height);
    margin: 0 auto;
  }
  
  .map__svg {
    position: relative;
    top: 0;
    left: 0;
  }
  
  .map__markers {
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* Tablet Portrait */
@media (max-width: 769px) {
  .map__content {
    flex-direction: column;
    gap: var(--map-gap-small);
    min-height: 1096px;
  }
  
  .map__cities {
    flex-direction: row;
    gap: var(--map-gap-default);
  }
  
  .map__city-group {
    width: 100%;
  }
  
  .map__city-marker {
    gap: var(--map-gap-tiny);
  }
  
  .map__title {
    margin-bottom: 64px;
  }
}

/* Mobile */
@media (max-width: 394px) {
  .map__title {
    margin-bottom: 40px;
  }
  
  .map__cities {
    flex-direction: column;
  }
  
  .map__content {
    min-height: 1469px;
  }
  
  .map__city-group {
    width: 100%;
    max-width: 100%;
  }
  .map__markers {
    top: -70px;
    left: -160px;
  }
  
  .map__marker {
    width: 32px;
    height: 32px;
  }
  
  .map__marker--active {
    width: 48px;
    height: 48px;
  }
  
  .map__svg {
    width: 552px;
    height: 518px;
    max-width: 552px;
    left: -120px;
  }
  
  .map__visual {
    overflow: visible;
  }
}

/* ========================================
   LEGACY BROWSER SUPPORT
   ======================================== */

/* Fallbacks for older browsers */
.map__content {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
}

.map__cities {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-flex: 1;
      -ms-flex: 1;
}

.map__city-group {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
}

.map__city-item {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
}

.map__city-marker {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
  -webkit-box-flex: 1;
      -ms-flex: 1;
}

.map__city-icon {
  -ms-flex-negative: 0;
}

.map__visual {
  -webkit-box-flex: 1;
      -ms-flex: 1;
}

.map__svg {
  -webkit-filter: var(--map-shadow);
  -o-object-fit: contain;
}

.map__marker {
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-align: center;
      -ms-flex-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  -webkit-transform: translate(-50%, -50%);
}

.map__marker-img {
  -o-object-fit: contain;
}

.map__marker:hover {
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

/* Responsive fallbacks */
@media (max-width: 1400px) {
  .map__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
  }
  
  .map__cities {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
    -webkit-box-lines: multiple;
        -ms-flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
  }
  
  .map__city-group {
    -webkit-box-flex: 1;
        -ms-flex: 1;
    -ms-flex-negative: 1;
  }
}

@media (max-width: 769px) {
  .map__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
  }
  
  .map__cities {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
  }
}

@media (max-width: 394px) {
  .map__cities {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
    -webkit-box-flex: 0;
        -ms-flex: none;
  }
  
  .map__city-group {
    -webkit-box-flex: 0;
        -ms-flex: none;
  }
    .map .container {
      padding: 32px 24px;
      max-hight: 1500px;
    }
}