/* ============================================================================
   Woodside Residence — правки мобильной версии по разбору Оли от 26.08.2026.

   Файл подключается ПОСЛЕДНИМ в <head> на всех страницах: стили страниц лежат
   инлайном в каждом файле, и собирать двенадцать мелких правок по восемнадцати
   копиям одного и того же CSS — верный способ развести страницы между собой.
   Все правила живут внутри мобильных медиазапросов, десктоп не затронут.
   ========================================================================== */


/* --- М1. H1 на мобильном был 34/34 — мелко для первого экрана. ------------ */
@media (max-width:760px){
  .h1{font-size:clamp(38px,11.3vw,54px);line-height:1.02}
}


/* --- М10 + М12. Сокращенный логотип WOODSIDE в шапке и в бургер-меню.
   Знак нарисован одним SVG (viewBox 298×20), где «WOODSIDE» занимает первые
   147 единиц, а дальше идет «RESIDENCE». viewBox из CSS не переопределяется,
   поэтому знак не режем, а обрезаем контейнером — так же, как это сделано
   в макете: слово одно, высота вдвое больше прежних 10px. -------------------*/
/* 07.09 (правка заказчика): «проверить лого в мобильной версии — править,
   сейчас подрезано». Буквы не резались, но знак и правда показывался
   сокращённым: с 26.08 на телефоне контейнер обрезал его до слова WOODSIDE.
   Номер телефона из шапки снят, место освободилось — знак показываем целиком,
   он растягивается по остатку строки.
   09.09 (решение Milena): сокращение снято и на самых узких экранах. Раньше
   ниже 361px контейнер резал знак до «WOODSIDE», и заказчица второй раз
   отметила пункт как «подрезано» — обрезанное слово читается хуже, чем
   мелкий, но целый знак. Теперь правило одно на весь мобильный диапазон. */
@media (max-width:900px){
  .hdr-logo{overflow:visible;flex:1 1 auto;min-width:0;width:auto}
  .hdr-logo svg{width:100%;height:auto;max-width:none;flex:none}
}


/* --- М2. Генплан: карточка-виджет занимала 302px высоты. ------------------ */
@media (max-width:760px){
  .gp-card{padding:16px 14px}
  .gp-chips{margin-bottom:16px;row-gap:6px}
  .gp-chips .chip{height:28px}
  .gp-card .n{font-size:26px}
  .gp-card .s{font-size:14px;margin-top:2px}
  .gp-card .btn{margin-top:16px;min-height:48px}
  .gp-card .btn + .btn{margin-top:8px}
  .gp-side{gap:16px}
  .gp-list{gap:8px}
  .gp-list li{min-height:20px;font-size:14px}
  .gp-ic{width:20px;height:20px}
}


/* --- М3. Карточки участков: номер и сотки — ровно 18/20, как просила Аня.
   Цену и строку «за сотку» не трогаем: про них в правке не было. ----------- */
@media (max-width:760px){
  .lot-b h3{font-size:18px;line-height:20px}
}


/* --- М4. «Инфраструктура поселка готова» — по макету (Figma 5082-3549):
   заголовок, шкала с зайцем, и только под шкалой — процент справа.
   На сайте процент стоял НАД шкалой. ---------------------------------------*/
@media (max-width:900px){
  .ready-prog{display:flex;flex-direction:column}
  .ready-bar{order:1}
  .ready-pct{order:2;margin:16px 0 0}
}
/* Кегль и интерлиньяж сняты с кадра Ани (430×361): заголовок в две строки
   занимает 80px, то есть 40px кегль при интерлиньяже 1.0. На сайте было
   34px при 0.8 — вдвое плотнее и заметно мельче макета. */
@media (max-width:760px){
  .ready h2{font-size:clamp(32px,9.3vw,44px);line-height:1}
}


/* --- М5. «Клубная инфраструктура»: круглая стрелка выглядит кнопкой, но
   ничего не делает (аккордеон открывается по всей строке). На мобильном
   убираем, чтобы не обещать нажатие. ---------------------------------------*/
@media (max-width:900px){
  .acc-head .arw{display:none}
}


/* --- М6. «Окружение»: колода фотографий приподнята на 4.7% и налезала
   на текст — между колонками нужен запас больше подъема. --------------------*/
@media (max-width:900px){
  .env-grid{row-gap:48px}
  .env-cap{margin-top:26px}
}


/* --- М7. «Документы поселка»: карточки плиткой в две колонки, как в макете,
   а не одним столбцом. ------------------------------------------------------*/
@media (max-width:520px){
  .docs-table{grid-template-columns:1fr 1fr}
  .doc{padding:16px 14px;gap:10px;border-right:1px solid var(--line)}
  .doc:nth-child(2n){border-right:none}
  .doc b{font-size:13px}
  .doc .dl{font-size:12px}
}


/* --- М8. «Более 6 лет подряд»: три фотографии основателей в один ряд. ------*/
@media (max-width:520px){
  .avo-team{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .avo-team .ph{aspect-ratio:330/434}
  .avo-team figcaption{margin-top:8px;font-size:12px;line-height:1.2}
}


/* --- М9. «Контакты»: три мессенджера одной строкой и одного размера. -------*/
@media (max-width:620px){
  .cont-acts--msg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cont-acts--msg .cont-msg{justify-content:center;min-width:0;height:52px;padding:0 5px;gap:5px;font-size:12px}
  .cont-acts--msg .cont-msg svg{width:18px;height:18px}
}


/* --- М11. Подвал: «Разделы», «Контакты» и «Документы» шли встык. ----------*/
@media (max-width:600px){
  .ft-cols{row-gap:40px}
  .ft-cols h4{margin-bottom:14px}
}


/* --- М12. Бургер-меню: выравнивание по центру, крупнее шрифт,
   мессенджеры одной строкой и одного размера. ------------------------------*/
@media (max-width:760px){
  .menu-body{text-align:center;padding-left:var(--pad);padding-right:var(--pad)}
  .menu-nav{align-items:center;gap:14px}
  .menu-nav a{width:auto;font-size:26px}
  .menu-nav a:hover{transform:none}
  .menu-nav a.menu-sub{font-size:18px;padding-left:0}
  .menu-nav a.menu-sub + a.menu-sub{margin-top:-4px}

  .menu-foot{text-align:center;padding-left:var(--pad);padding-right:var(--pad)}
  .menu-foot .ph{font-size:26px}
  .menu-foot .ad{margin-top:12px}

  .menu-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;justify-items:stretch}
  .menu-acts .btn{grid-column:1 / -1}
  .menu-acts .mbtn{justify-content:center;min-width:0;height:52px;padding:0 5px;gap:5px;font-size:12px}
  .menu-acts .mbtn svg{width:18px;height:18px}
}


/* --- М13 (правка 07.09). «Инфраструктура поселка готова»: между заголовком
   и бегущей строкой просили 110px, было 22. Отступ задаёт .ready-prog —
   на мобильном шкала стоит в нём первой (см. М4), поэтому до неё от
   заголовка ровно это расстояние. ------------------------------------------*/
@media (max-width:760px){
  .ready-prog{margin-top:110px}
}


/* --- М14 (правка 07.09). Генплан на телефоне.
   Просили: виджет сделать меньше — чипсы по левому краю, «6 участков осталось
   в продаже» по правому, всё одной строкой; легенду перенести ПОД генплан.
   Чипсы и счёт в ОДНУ физическую строку не встают: при читаемом кегле им нужно
   ~390px, а внутри карточки на телефоне 277–347. Поэтому чипсы прижаты влево,
   счёт — вправо следующей строкой, и он сам стал однострочным («6 участков
   осталось в продаже» вместо двух строк).
   Порядок задаём на .gp-grid: обёртку .gp-side распускаем через display:contents,
   тогда карточка, карта и легенда становятся соседями и раскладываются по order.
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  .gp-grid{display:flex;flex-direction:column;gap:16px}
  .gp-side{display:contents}
  .gp-card{order:1}
  .gp-map{order:2;align-self:stretch}
  .gp-list{order:3;flex:0 0 auto}

  /* 09.09 (правка Оли, повтор): «сделать их в одной строке». Флексом счёт
     переносило на вторую строку — чипсы и подпись в одну ФИЗИЧЕСКУЮ строку
     не влезают: им нужно ~420px, а внутри карточки на телефоне 322. Ставим
     сетку из двух колонок: чипсы держат свою ширину, счёт занимает остаток
     и переносится внутри себя («6 участков» / «осталось в продаже»). Ряд
     один — чипсы слева, счёт справа, — а высота виджета стала меньше
     прежней двухрядной. */
  .gp-card{display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:center;column-gap:10px;row-gap:12px;padding:12px 14px}
  .gp-chips{margin-bottom:0;flex-wrap:nowrap;gap:6px}
  .gp-chips .chip{height:24px;font-size:11px;padding:0 7px;gap:3px;white-space:nowrap}
  .gp-chips .chip svg{width:12px;height:12px}
  .gp-count{display:flex;flex-wrap:wrap;justify-content:flex-end;
    align-items:baseline;column-gap:5px;text-align:right}
  /* кнопки — во всю ширину карточки, каждая своим рядом */
  .gp-card > .btn{grid-column:1 / -1}
  .gp-card .n{font-size:16px;line-height:1.15}
  .gp-card .n em{font-size:1em}
  .gp-card .s{margin-top:0;font-size:12px;line-height:1.15}
  .gp-card .btn{margin-top:0;min-height:48px}
  .gp-card .btn + .btn{margin-top:0}
}

/* На самых узких экранах (≤340px) чипсы и счёт в один ряд уже не помещаются:
   подпись наезжает на чип «3 солнечных». Там счёт возвращается своей строкой
   под чипсами, по-прежнему прижатый вправо. */
@media (max-width:340px){
  .gp-card{grid-template-columns:minmax(0,1fr)}
}


/* --- М15 (правка 07.09). «Клубная инфраструктура»: просили протестировать
   аккордеон, «плохо работает».

   Прогон показал, что механика в порядке: пункты открываются и закрываются,
   галерея переключается, высота раскрытия набирается плавно (12→143px за
   полсекунды), кадры не копятся при повторных нажатиях, одновременно открыт
   всегда один пункт. Не работает другое — ПОНЯТНОСТЬ: правка М5 от 26.08
   спрятала на мобильном стрелку у пункта, и три строки выглядят просто
   текстом. Нажимать на них никто не догадывается.

   Возвращаем указатель, но не прежней длинной стрелкой (её убрали как раз
   потому, что она читалась отдельной кнопкой), а шевроном — он есть у каждого
   пункта и переворачивается у открытого. Рисуем псевдоэлементом внутри
   самой кнопки: отдельной цели для нажатия не появляется.
   Только #club — аккордеон вопросов на /faq правка не затрагивает. ---------*/
@media (max-width:900px){
  #club .acc-head{position:relative;padding-right:46px}
  #club .acc-head::after{content:'';position:absolute;right:18px;top:50%;
    width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
    transform:translate(0,-70%) rotate(45deg);opacity:.45;
    transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .25s ease}
  #club .acc-item.on .acc-head::after{transform:translate(0,-25%) rotate(-135deg);opacity:.9}
}


/* --- М16 (правка 07.09). «В меню кнопки соцсетей поправить, чтобы
   не наслаивались друг на друга».

   Сами кнопки лежат ровной сеткой в три колонки и не пересекаются — замер
   на 320/360/390/430 это подтвердил. Наслаивалось содержимое: на 320px
   кнопка получает 83px, а значок с подписью TELEGRAM занимают 85–86, и
   текст вылезал за края, доставая до соседней кнопки. Поджимаем кегль,
   значок и внутренние поля так, чтобы содержимое влезало в кнопку.
   То же самое у кнопок в блоке контактов — там колонки такие же узкие. -----*/
@media (max-width:380px){
  .menu-acts .mbtn,
  .cont-acts--msg .cont-msg{font-size:11px;letter-spacing:0;gap:4px;padding:0 4px}
  .menu-acts .mbtn svg,
  .cont-acts--msg .cont-msg svg{width:16px;height:16px}
}