/* ============================================================
   Головна — бенто-сітка вибору міста.
   Макет: Figma MegaParkCityCard, фрейм «десктоп» 1440×850.
   Пропорції: герой 712×838, плитки 352×416, проміжок 6px,
   радіус 30px.

   Кількість колонок фіксована (4), а плитки просто перетікають —
   тому четвертий парк не потребує правки CSS.
   ============================================================ */

.chooser {
  padding: 6px;
  background: var(--surface-page);
}

/* Дві половини: герой і блок плиток. Плитки — вкладена сітка, яка
   розтягується на висоту героя й ділить її на рівні ряди. Так композиція
   лишається такою ж на 2, 3 чи 5 містах — без правки CSS. */
.chooser__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.chooser__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
}

/* Без min-width:0 довга адреса роздуває колонку до свого min-content
   і сітка вилазить за контейнер. */
.chooser__grid > *,
.chooser__tiles > * { min-width: 0; }

/* ---------- Герой ---------- */
.chooser__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-6), 2.6vw, var(--space-10));
  background: var(--accent);
  color: var(--mp-ink);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Пропорція макета: 838 висоти на 1440 ширини. */
  min-height: clamp(480px, 58vw, 838px);
}

.chooser__marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--mp-yellow-deep);
  opacity: 0.42;
}
/* Розмір задається парою width/height: у `.mark` є height:100%,
   тому aspect-ratio тут не спрацював би. */
.chooser__mark { position: absolute; }
.chooser__mark--a { top: 6%;  left: 58%; width: clamp(70px, 9vw, 130px);  height: clamp(70px, 9vw, 130px); }
.chooser__mark--b { top: 50%; left: 72%; width: clamp(80px, 10vw, 150px); height: clamp(80px, 10vw, 150px); }
.chooser__mark--c { top: 64%; left: 8%;  width: clamp(80px, 10vw, 150px); height: clamp(80px, 10vw, 150px); }

.chooser__logo {
  position: relative;
  width: clamp(64px, 7vw, 102px);
  height: auto;
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-12));
}

.chooser__eyebrow {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-3) var(--space-6);
  background: var(--mp-ink);
  color: var(--mp-white);
  border-radius: var(--radius-xs);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  line-height: 1;
}

.chooser__title {
  position: relative;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: var(--ls-display);
}
.chooser__title-main { display: block; text-transform: uppercase; }
.chooser__title-sub  { display: block; text-transform: lowercase; }

.chooser__lede {
  position: relative;
  margin-top: clamp(var(--space-5), 3vw, var(--space-10));
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(19px, 2.4vw, 34px);
  line-height: 0.96;
}

.chooser__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: clamp(var(--space-8), 5vw, var(--space-16));
}
.chooser__actions .button {
  min-width: 200px;
  padding-block: clamp(var(--space-5), 2vw, var(--space-8));
  border-radius: var(--radius-lg);
}
.chooser__actions .button--outline {
  border-color: var(--mp-ink);
  color: var(--mp-ink);
}
.chooser__actions .button--outline:hover {
  background: rgba(23, 24, 26, 0.08);
  border-color: var(--mp-ink);
  color: var(--mp-ink);
}

/* ---------- Фото-плитка ---------- */
.chooser__photo {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-card);
  height: 100%;
}
/* Абсолютне позиціювання прибирає власну пропорцію знімка з розрахунку
   висоти ряду — інакше вертикальне фото робило б перший ряд вищим за плитки. */
.chooser__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Плитка міста ---------- */
.park-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(var(--space-4), 1.7vw, var(--space-6));
  background: var(--accent);
  color: var(--mp-ink);
  border-radius: var(--radius-card);
  min-height: 300px;
  transition: transform var(--dur-base) var(--ease-out);
}
.park-card:hover { transform: translateY(-4px); }

.park-card__kicker {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(12px, 1.1vw, 16px);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: 1;
}

.park-card__city {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
}
.park-card__city a::after {
  /* Уся плитка клікабельна, але посилання лишається одне — для скрін-рідера. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

.park-card__address {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 0.98;
}

.park-card__chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}
.park-card__chips .chip {
  font-size: clamp(11px, 1vw, 14px);
  padding: 6px var(--space-3);
}

.park-card__phone {
  margin-top: auto;
  padding-top: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 20px);
}

.park-card__go {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(48px, 4.3vw, 62px);
  aspect-ratio: 1;
  margin-top: var(--space-3);
  background: var(--mp-ink);
  color: var(--mp-white);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-bounce), background-color var(--dur-fast) var(--ease-out);
}
.park-card__go:hover { background: var(--mp-charcoal); transform: translateX(3px); }
.park-card__go svg { width: 20px; height: 20px; }

/* Парк до відкриття — приглушений, але не прихований. */
.park-card--soon { background: var(--mp-yellow-deep); }
.park-card--soon .park-card__go { background: var(--mp-green); }

/* ---------- Факти мережі ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: var(--border-thin) solid var(--border-hairline);
}
.facts__item dt {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}
.facts__item dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3);
  line-height: 1.05;
  overflow-wrap: anywhere;
  color: var(--accent);
}

/* ---------- Таблиця цін мережі ---------- */
.price-table {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.price-table__row {
  padding: var(--space-6);
  background: var(--surface-card);
  border: var(--border-thin) solid var(--border-hairline);
  border-radius: var(--radius-lg);
}
.price-table__city { font-size: var(--fs-h4); text-transform: uppercase; }
.price-table__city a:hover { color: var(--accent); }
.price-table__value {
  display: flex; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-3); font-size: var(--fs-body-sm);
}
.price-table__value span { color: var(--text-muted); }
.price-table__value strong { font-family: var(--font-display); color: var(--accent); }
.price-table__note { margin-top: var(--space-4); font-size: var(--fs-caption); color: var(--text-secondary); }

/* ---------- Адаптив ---------- */
@media (max-width: 1100px) {
  /* Герой над плитками: у дві колонки він став би завузьким для 80px заголовка. */
  .chooser__grid { grid-template-columns: 1fr; }
  .chooser__hero { min-height: 0; }
  .chooser__photo { display: none; }
  .chooser__tiles { grid-auto-rows: auto; }
}

@media (max-width: 620px) {
  .chooser__tiles { grid-template-columns: 1fr; }
  .chooser__actions .button { flex: 1 1 100%; }
}