/* ===== Мобильный вид: ближе к десктопу, светлее, без потери информации =====
   1) герой на телефоне перестаёт быть чёрной заливкой: фото сверху, текст и цифры на бумаге;
   2) возвращены данные, которые прежде прятались медиазапросами (цены в клетках, итог схемы, класс ЖК);
   3) в шапке появляется меню разделов — на телефоне оно было полностью скрыто. */

/* ── 1. Герой страницы ЖК ── */
@media (max-width: 760px) {
  .hh { display: block; min-height: 0; background: var(--paper); color: var(--ink); }
  .hh__bg { position: relative; inset: auto; display: block; width: 100%; height: 232px; object-fit: cover; }
  .hh__shade { top: 0; bottom: auto; height: 232px;
    background: linear-gradient(180deg, rgba(18,19,26,.45) 0%, rgba(18,19,26,.12) 42%, rgba(18,19,26,0) 100%) !important; }
  .hh__in { padding-block: 0 24px; }
  .hh .crumbs--light { position: absolute; top: -220px; left: 0; right: 0; padding-inline: 16px; font-size: 12.5px;
    color: #fff; text-shadow: 0 1px 6px rgba(18,19,26,.55); }
  .hh .crumbs--light a, .hh .crumbs--light span { color: #fff; }
  .hh__text { margin-top: 18px; }
  .hh .eyebrow--light { color: var(--amber-text); }
  .hh .display, .hh .on-dark { color: var(--ink); }
  .hh .display { font-size: clamp(30px, 8.4vw, 40px); max-width: none; }
  .hh .lead, .hh .on-dark-2 { color: var(--ink-2); }
  .hh__cta { margin-top: 18px; gap: 10px; }
  .hh__cta .btn { flex: 1 1 auto; justify-content: center; }
  .hh__cta .btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--card); }

  /* цифры — карточками, как блоки на десктопе, а не бледным текстом на чёрном */
  .hh__facts { margin-top: 22px; border-top: 0; gap: 8px; }
  .hh__facts div { padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
  .hh__facts dt { color: var(--muted); }
  .hh__facts dd { font-size: 19px; color: var(--ink); }
}

/* ── 2. Возврат данных, которые прятались на узком экране ── */
@media (max-width: 700px) {
  /* шахматка: вместо сжатия до безымянных квадратиков — прокрутка вбок с ценами в клетках */
  .board__grid { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
  .board__grid .grid { min-width: 560px; }
  .grid__row { grid-template-columns: 34px repeat(var(--cols), minmax(38px, 1fr)); gap: 4px; }
  .cell { height: 30px; }
  .cell span { display: block; font-size: 10.5px; }
  .grid__fl small { display: inline; }
  .board__hint { font-size: 12.5px; color: var(--muted); }
}
@media (max-width: 600px) {
  /* итоговая цена по схеме рассрочки видна и на телефоне */
  .sch__total { display: block; grid-column: 1; grid-row: 3; font-size: 12.5px; color: var(--muted); }
  .sch { row-gap: 4px; }
}
@media (max-width: 640px) {
  .tag--class { display: inline-flex; }           /* класс ЖК на плитке */
  .tile.is-compact .t-pay { display: block; }      /* платёж в месяц */
}

/* сетка «этаж × корпус» в листе планировки: тоже прокрутка, а не сжатие */
@media (max-width: 760px) {
  .fl__grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fl__row { min-width: 320px; }
}

/* ── 4. Длинные списки свёрнуты, кнопка «показать ещё» ── */
.mfold { display: block; width: 100%; margin-top: 14px; min-height: 48px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--card);
  font: 700 15px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.mfold:hover { border-color: var(--ink); }

/* «другие наши ЖК» — лентой вбок, а не столбиком на весь экран;
   короткие видеофрагменты — по два в ряд */
@media (max-width: 760px) {
  .other { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 12px; padding-bottom: 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .other::-webkit-scrollbar { display: none; }
  .other__c { flex: 0 0 76%; scroll-snap-align: start; }
  .m-loops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* мелочи, найденные прогоном: подпись в долларах и клетки сетки этажей */
@media (max-width: 760px) {
  .usd { font-size: 12px !important; }
  .fl__c { min-height: 34px; }
  .deal__meta { font-size: 12.5px; }
}

/* ── 5. Шапка галереи на телефоне компактнее: плитки начинаются выше ── */
@media (max-width: 640px) {
  .gtop { padding-block: 8px 6px; }
  .gtop__grid { grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
  .gtop .display { font-size: clamp(24px, 7.4vw, 30px); }
  .gtop .lead { font-size: 13px; }
  .gstat { gap: 6px 22px; }
  .gstat dd { font-size: 20px; }
  .gstat dt { font-size: 11.5px; }
  .sec--gal { padding-block: 10px 28px; }
}

/* ── 3. Меню разделов на телефоне (строит js/mob.js) ── */
.mnav { display: none; }
@media (max-width: 900px) {
  .mnav { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 4px;
    border: 1px solid var(--line-2); border-radius: 50%; background: var(--card); cursor: pointer; }
  .mnav span, .mnav span::before, .mnav span::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--ink); content: ""; }
  .mnav span { position: relative; }
  .mnav span::before { position: absolute; top: -5px; }
  .mnav span::after { position: absolute; top: 5px; }
  .hdr__in { gap: 10px; }
}
.mmenu[hidden] { display: none; }
.mmenu { position: fixed; inset: 0; z-index: 60; background: rgba(18,19,26,.5); }
.mmenu__in { position: absolute; inset: 0 0 auto 0; background: var(--card); border-radius: 0 0 var(--r-xl) var(--r-xl);
  padding: 14px 16px 20px; box-shadow: var(--sh-pop); animation: mmenuIn .22s var(--ease); }
@keyframes mmenuIn { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.mmenu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mmenu__top b { font: 800 17px/1 var(--font-display); letter-spacing: -.02em; }
.mmenu__x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); font-size: 24px; line-height: 1; cursor: pointer; }
.mmenu__links { display: grid; gap: 2px; }
.mmenu__links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px;
  font: 700 16px/1.2 var(--font-body); color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.mmenu__links a.is-on { color: var(--amber-text); }
.mmenu__city { display: flex; gap: 6px; margin: 14px 0 10px; }
.mmenu__city button, .mmenu__city > a, .mmenu__city > span { flex: 1; min-height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--card); font: 700 14px/1 var(--font-body); color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mmenu__city button.is-on, .mmenu__city > a.is-on, .mmenu__city > span.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.mmenu__tel { display: flex; align-items: center; gap: 10px; font: 700 16px/1 var(--font-body); color: var(--ink); text-decoration: none; min-height: 44px; }

/* ── 5. Плитка на телефоне: значок фото и теги не налезают друг на друга ──
   Samsung A16 (412 px): «9 фото · фильм 1:46» упирался в «КОМФОРТ», а кнопки
   «Планировки и цены» и «Фото и видео» закрывали цену и число свободных квартир.
   Причина у второго была в том, что телефонное правило .tile__meta задавало
   padding целиком и стирало нижний отступ, оставленный для кнопок. */
@media (max-width: 640px) {
  .tile__note { font-size: 11px; padding: 5px 9px; white-space: nowrap; }
  .tile__note-film { display: none; }              /* на узком экране только число фото */
  .tile__tags { max-width: calc(100% - 104px); gap: 5px; }
  .tile__tags .tag { font-size: 10.5px; padding: 5px 8px; }
  /* место под кнопки: возвращаем нижний отступ подписи всем видам плиток */
  .tile__meta,
  .tile.is-compact .tile__meta,
  .tile.is-tiny .tile__meta { padding-bottom: 58px; }
  .tile__cta { left: 14px; right: 14px; bottom: 12px; gap: 6px; }
  .tile__cta .btn { padding: 9px 12px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  .tag--class { display: none; }                   /* совсем узкий экран: класс ЖК убираем */
  .tile__tags { max-width: calc(100% - 96px); }
}