/**
 * ByGoo viewport canon · 2026
 * docs/design/VIEWPORTS.md
 *
 * Подключай на страницах кабинета / design-mocks:
 *   <link rel="stylesheet" href="_viewport-canon.css">
 * Контент: <div class="wrap wrap-canon">…</div>
 *
 * Запрещено: max-width 960–1200 как «десктоп» на широких мониторах.
 */
:root{
  --vp-gutter: clamp(16px, 2vw, 48px);
  --vp-wrap-1080: 1840px;
  --vp-wrap-1440: 2400px;
  --vp-wrap-4k: 3200px;
}

.wrap-canon{
  width: min(100% - (2 * var(--vp-gutter)), var(--vp-wrap-1080));
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--vp-gutter);
  box-sizing: border-box;
}

/* 1440 */
@media (min-width: 1440px) and (max-width: 2559px){
  .wrap-canon{
    width: min(100% - (2 * var(--vp-gutter)), var(--vp-wrap-1440));
  }
}

/* 4K */
@media (min-width: 2560px){
  .wrap-canon{
    width: min(100% - (2 * var(--vp-gutter)), var(--vp-wrap-4k));
    font-size: 16px;
  }
}

/* Телефон — стек, не оправдание узкого десктопа */
@media (max-width: 899px){
  .wrap-canon{
    width: min(100% - 24px, 100%);
    padding-inline: 12px;
  }
}