/* Лента вдохновений - кладка в колонки, перенесена из финального макета:
   четыре колонки на десктопе, две на телефоне, плитки разной высоты.
   columns вместо grid - иначе плитки выравниваются по самой высокой в ряду. */
.feed{columns:4 220px;column-gap:14px}
.feed>figure{break-inside:avoid;margin:0 0 14px}
.feed image-slot{display:block;width:100%;height:100%}
/* Подпись поверх картинки проявляется при наведении - на снимке она мешала бы
   рассматривать интерьер. */
.feed .feed-ov{opacity:0;transition:opacity var(--dur-med) var(--ease-out)}
.feed figure:hover .feed-ov,.feed figure:focus-within .feed-ov{opacity:1}
/* Там, где наведения нет (телефон, планшет), подпись видна всегда. */
@media (hover:none){.feed .feed-ov{opacity:1}}

@media (max-width:880px){
  .feed{columns:2 140px;column-gap:10px}
  .feed>figure{margin-bottom:10px}
}

/* Пока видны баннер куки или плашка языка, у страницы есть нижний отступ под них:
   иначе закреплённые окна ложатся на подвал и нажать переключатели нельзя.
   На десктопе окна стоят по разным углам - хватает большего из двух, на телефоне
   они друг над другом - высоты складываются. */
body{padding-bottom:max(var(--cookie-space, 0px), var(--hint-space, 0px))}
@media (max-width:880px){body{padding-bottom:calc(var(--cookie-space, 0px) + var(--hint-space, 0px))}}

/* DESOW — мобильная адаптация (подключается на всех страницах сайта) */
@media (max-width:880px){
  /* все многоколоночные сетки складываются в одну колонку */
  [style*="grid-template-columns: minmax"],[style*="grid-template-columns: repeat"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns: minmax"]>*,[style*="grid-template-columns: repeat"]>*{min-width:0 !important;max-width:100% !important}
  /* липкие панели становятся обычными */
  section [style*="position: sticky"]{position:static !important;top:auto !important}
  /* хиро и первые экраны: меньше отступ сверху */
  [style*="padding-top: 132px"]{padding-top:96px !important}
  [style*="padding: 150px"]{padding-top:104px !important}
  /* типографика */
  /* хиро: заголовок и врезка-фото */
  .hero-type{font-size:clamp(28px,8.6vw,46px) !important}
  .hero-slot{display:none !important}
  h1[style*="anywhere"]{overflow-wrap:normal !important;word-break:keep-all !important}
  h2[style*="--display-xl"]{font-size:clamp(26px,8vw,38px) !important}
  /* контейнерные отступы */
  [style*="var(--container-pad)"]{padding-left:20px !important;padding-right:20px !important}
  /* большие флекс-ряды переносим */
  footer [style*="display: flex"]{flex-wrap:wrap}
  /* картинки и демо-блоки не выше половины экрана */
  [style*="clamp(320px,34vw,480px)"]{height:min(52vw,340px) !important}
  /* кастомный курсор скрыт (дублирует правило pointer:coarse на всякий случай) */
  .dsw-cur-ring,.dsw-cur-dot{display:none !important}
  /* Первый экран на телефоне не растягиваем на всю высоту: контента там
     меньше, чем на десктопе, и снизу оставалась заметная пустота. */
  #top{min-height:0 !important}
  /* горизонтальный скролл запрещён */
  html,body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  /* на мобильных маска строк не должна резать буквы при инфляции шрифта */
  .hero-type .hl{overflow:visible !important}
  /* на мобильном киккер слева, чтобы не висел одиноко справа */
  .hero-kicker{text-align:left !important;padding-right:0 !important}
  /* помеченные флекс-ряды карточек складываются в колонку */
  .mfold{flex-direction:column !important;min-height:0 !important}
  .mfold>*{flex:none !important;width:100% !important;min-height:240px}
  /* крупная типографика карточек */
  h3[style*="--display-l"],h2[style*="--display-l"]{font-size:clamp(22px,6.6vw,30px) !important}
  [style*="--display-xxl"]{font-size:clamp(30px,9vw,44px) !important}
  /* декоративные слова-обводки не распирают карточки */
  [style*="text-stroke: 1px"],[style*="text-stroke: 1.5px"],[style*="text-stroke: 2px"]{font-size:clamp(40px,12vw,64px) !important}
  /* длинные капсулы-бейджи переносятся */
  [style*="border-radius: 99px"]{white-space:normal}
  /* таблицы и широкие блоки скроллятся, а не рвут страницу */
  table{display:block;overflow-x:auto}
  /* раскрывающиеся карточки партнёров: компактнее на телефоне */
  [data-screen-label="Кому подходит"] .rv>*{gap:12px !important}
  [data-screen-label="Кому подходит"] h3{font-size:17px !important}
  /* FAQ: компактные ряды, плюс не вылезает */
  #faq [style*="padding: 16px 26px"]{padding:14px 14px !important}
  #faq [style*="padding: 22px 26px"]{padding:16px 14px !important}
  #faq span[style*="width: 34px"]{width:20px !important}
  #faq p[style*="margin: 12px 0px 0px 50px"],#faq p[style*="margin: 12px 0 0 50px"]{margin-left:34px !important}
  /* заголовки и абзацы всегда умещаются */
  h1,h2,h3,p{max-width:100% !important;overflow-wrap:break-word}
  /* принудительные nowrap-строки переносятся (кроме бегущей строки) */
  [style*="white-space: nowrap"]{white-space:normal !important}
  [style*="text-overflow: ellipsis"]{white-space:nowrap !important}
  .marquee [style*="white-space: nowrap"],.marquee span{white-space:nowrap !important}
}
@media (max-width:880px){
  /* мобильное меню */
  .dsw-mnav-overlay{position:fixed;inset:0;z-index:90;background:var(--surface-inverse);color:var(--text-inverse);overflow-y:auto;display:flex;flex-direction:column;padding:84px 24px 32px;animation:mnavIn 380ms var(--ease-out) both}
  @keyframes mnavIn{from{opacity:0;transform:translateY(-14px)}}
  .dsw-mnav-link{display:flex;align-items:baseline;gap:14px;color:var(--text-inverse);text-decoration:none;padding:13px 0;border-bottom:1px solid color-mix(in srgb,#fff 10%,transparent)}
  .dsw-mnav-link .n{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--lav-400);width:22px;flex:none}
  .dsw-mnav-link .t{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,6.4vw,30px);letter-spacing:-.01em;line-height:1.05}
  .dsw-mnav-link .d{margin-left:auto;font-size:11px;color:color-mix(in srgb,#fff 45%,transparent);text-align:right}
  .dsw-mnav-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:26px 0 4px}
  .dsw-mnav-burger{all:unset;cursor:pointer;width:44px;height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .dsw-mnav-burger i{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform 300ms var(--ease-out),opacity 200ms}
  .dsw-mnav-burger[data-open="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .dsw-mnav-burger[data-open="true"] i:nth-child(2){opacity:0}
  .dsw-mnav-burger[data-open="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (min-width:881px){
  .dsw-mnav-burger,.dsw-mnav-overlay{display:none !important}
}
/* Зоны нажатия на телефоне - не меньше 40px, иначе в мелкую ссылку трудно попасть
   пальцем. Где можно, добавляем прозрачный отступ с отрицательным полем, чтобы
   текст остался на месте; тонкие кнопки просто делаем выше. */
@media (max-width:880px){
  /* вкладки дизайн-системы, капсулы соцсетей, низкие кнопки карточек */
  .dsw-tab,.soc-pill{min-height:40px !important}
  .dsw-btn[style*="height: 32px"]{height:40px !important}
  /* чипы инструментов в демо на главной и рубрики блога */
  button[style*="padding: 8px 10px"],button[style*="padding: 8px 16px"][style*="border-radius: 99px"]{min-height:40px !important}
  /* ползунки: нативная дорожка остаётся по центру, растёт только зона захвата */
  input[type=range]{height:40px !important}
  /* демо-плеер на главной: ползунок и метки «01 · Джапанди» под ним.
     В одну строку метки на узком экране налезали друг на друга - переносим
     в две («01 ·» / «ДЖАПАНДИ»). Текст прижат к низу, зона нажатия растёт
     вниз прозрачным отступом; контейнеру даём место под обе зоны */
  [style*="padding-bottom: 26px"]>input[type=range]{margin:-12px 0 !important}
  [style*="padding-bottom: 26px"]:has(>input[type=range]){padding-bottom:52px !important}
  [style*="padding-bottom: 26px"]>button[style*="position: absolute"]{display:flex !important;flex-direction:column !important;justify-content:flex-end !important;min-height:40px !important;width:min-content !important;min-width:56px !important;font-size:10px !important;letter-spacing:.05em !important;padding-bottom:11px !important;bottom:-11px !important}
  /* строки меток центрируются под своей точкой, первая метка прижата влево, как в макете */
  [style*="padding-bottom: 26px"]>button[style*="position: absolute"]{text-align:center !important;align-items:center !important}
  [style*="padding-bottom: 26px"]>button[style*="position: absolute"]:first-of-type{text-align:left !important;align-items:flex-start !important}
  /* на самых узких экранах (320px) метки иначе задевают друг друга */
  @media (max-width:360px){
    [style*="padding-bottom: 26px"]>button[style*="position: absolute"]{font-size:9px !important;letter-spacing:0 !important;min-width:48px !important}
  }
  /* подписка и «Все статьи» в блоке блога */
  input[type=email][style*="padding: 10px 16px"]{padding-top:12px !important;padding-bottom:12px !important}
  a[style*="align-self: flex-end"][style*="margin-top: 14px"]{padding:9px 0 !important;margin-top:5px !important}
  /* подвал: колонки ссылок (в том числе «Документы»), тема и язык */
  footer a[style*="opacity: 0.85"]{display:block;padding:9px 0 !important;margin:-5px 0 !important}
  /* пункты RU / EN во всплывающем меню языка */
  footer .fadeup a{display:flex;align-items:center;min-height:40px}
  /* плашка языка встаёт над баннером куки, иначе на узком экране закрывает его кнопку */
  .lang-hint{bottom:calc(20px + var(--cookie-space, 0px)) !important}
  footer button{min-height:40px !important}
  /* «Сначала посмотреть инструменты» на «Контактах» */
  a[style*="--lav-300"][style*="font-size: 14px"]{padding:9px 0 !important}
}