/* ============================================================
   Map — «Клиника там, где вы» (карта Пхукета + текст)
   Карта — единая иллюстрация-ассет. Текст — живой HTML.
   ============================================================ */

.map {
  position: relative;
  background: var(--c-primary);
  overflow: hidden;
}
.map__inner {
  display: grid;
  grid-template-columns: 1fr;                    /* mobile: стек */
  gap: var(--space-2xl);
  padding-block: var(--section-y);
}

/* ---- Текстовая колонка ---- */
.map__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 555px;
}
.map__title { color: var(--c-white); }
.map__subtitle {
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-on-teal);
}
.map__btn {
  align-self: flex-start;
  padding: 14px 30px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.3;
  transition: opacity .2s ease;
}
.map__btn:hover { opacity: .92; }
.map__note {
  max-width: 288px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-on-teal);
}
.map__bottom {
  max-width: 440px;
  margin-top: var(--space-md);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-on-teal);
}

/* ---- Карта ---- */
.map__media { position: relative; }
.map__img { width: 100%; height: auto; }

/* Плашка «Оказываем услуги во всех районах острова» */
.map__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  background: var(--c-bg);
  color: var(--c-primary);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); /* 20 → 26 */
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  max-width: 333px;
}

/* ============================================================
   Desktop: текст слева, карта справа — ПОЛНОСТЬЮ видна
   ============================================================ */
@media (min-width: 1000px) {
  .map__inner {
    min-height: clamp(700px, 58vw, 1100px);
    align-items: stretch;
  }
  .map__bottom { margin-top: auto; }             /* прижать нижний текст к низу */

  .map__media {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 68%;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
  }
  .map__img {
    width: auto; height: 100%;                    /* на всю высоту, без зазоров сверху/снизу */
    max-width: none;
    object-fit: cover;
    object-position: right center;
  }
  .map__badge {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4%;
  }
}

/* ---- Мобилка: карта крупнее (во всю ширину + лёгкий зум), чтобы читались подписи ---- */
@media (max-width: 999px) {
  .map__media { margin-inline: calc(-1 * var(--pad-inline)); overflow: hidden; }
  .map__img { width: 120%; margin-inline: -10%; }
}