/* Единая структура отступов: боковое поле и вертикальный ритм одинаковы во всех блоках.
   Все значения кратны 4 юнитам фигма-сетки (--u = 1px при ширине 1440). */
.fg-preview{
 --sp-4:calc(4 * var(--u));
 --sp-8:calc(8 * var(--u));
 --sp-12:calc(12 * var(--u));
 --sp-16:calc(16 * var(--u));
 --sp-24:calc(24 * var(--u));
 --sp-28:calc(28 * var(--u));
 --sp-44:calc(44 * var(--u));
 --sp-gutter:calc(88 * var(--u));   /* левое/правое поле контента — 22 x 4 */
 --sp-section:calc(120 * var(--u)); /* поле блока сверху/снизу — 30 x 4 */
 /* Шапка блока (заголовок + подзаголовок) и его содержимое — одна мысль,
    поэтому зазор между ними вдвое меньше поля самого блока. */
 --sp-head:calc(56 * var(--u));
}
@media(min-width:901px){
 /* Левое поле контента — одно и то же во всех блоках */
 .fg-preview .fg-hero h1,
 .fg-preview .fg-hero-cta,
 .fg-preview .fg-engineering h2,
 .fg-preview .fg-engineering .fg-fact-0,
 .fg-preview .fg-collection>h2,
 .fg-preview .fg-interlude .fg-rule{left:var(--sp-gutter)}
 /* Производство: заголовок в 32px справа от вертикальной линии (она на 156u). */
 .fg-preview .fg-factory h2{left:calc(189 * var(--u))}
 .fg-preview .fg-interlude .fg-number,
 .fg-preview .fg-interlude-note{left:calc(var(--sp-gutter) + var(--sp-16))}
 /* Правое поле — зеркально левому */
 .fg-preview .fg-collection>.fg-door-grid{left:var(--sp-gutter);right:var(--sp-gutter)}
 /* Подписи выровнены по второй колонке сетки, которая сдвинулась вместе с полем */
 .fg-preview .fg-door-caption,
 .fg-preview .fg-project-caption{left:calc(364 * var(--u))}
 /* Каталог. Под сеткой появился ряд подписей (низ сетки — 1178u), поэтому кнопка
    «Весь каталог» отодвинута на 120u ниже сетки, а прежние привязки пересчитаны:
    низ светлого прямоугольника = низ кнопки + 88px, секция заканчивается на нем.
    88 задано в px, а не в юнитах: высота кнопки не следует сетке (font-size клампится),
    поэтому фиксированный пиксельный зазор держится ровнее на всех ширинах. */
 /* Высота фона следует за состоянием карточек: закрыто — 120u от низа карточек,
    открыто — 120u от низа кнопки в подписи. Верх прямоугольника — 391u. */
 .fg-preview .fg-collection{height:calc(936 * var(--u));transition:height .7s cubic-bezier(.16,1,.3,1)}
 .fg-preview .fg-collection-base{height:calc(545 * var(--u));transition:height .7s cubic-bezier(.16,1,.3,1)}
 .fg-preview .fg-collection:has(.is-selected){height:calc(1338 * var(--u))}
 .fg-preview .fg-collection:has(.is-selected) .fg-collection-base{height:calc(947 * var(--u))}
 /* Блоки на потоке: то же поле и тот же вертикальный ритм */
 .fg-preview .fg-geography{padding:var(--sp-section) var(--sp-gutter) 0}
 .fg-preview .fg-geography .fg-live-map{width:calc(100% + 2 * var(--sp-gutter))}
 .fg-preview .fg-final{padding:var(--sp-section) var(--sp-gutter)}
 /* Контакты: отступ крошки → заголовок как на странице проектов (figma.css:181). */
 .fg-preview.page-template-contacts-v2 .page-head h1{margin-top:calc(17 * var(--u))}
 /* Внутренние страницы — то же боковое поле, что и блоки главной */
 .fg-preview .page-head .wrap,
 .fg-preview .cat>.wrap,
 .fg-preview .prj>.wrap,
 .fg-preview .cta-band>.wrap,
 .fg-catalog .filters .wrap{padding-inline:var(--sp-gutter)}
 /* Контакты: содержимое под шапкой на той же линии, что заголовок и лид.
    Базовый .wrap ограничен max-width:1440px и центрируется — отсюда расхождение. */
 .fg-preview .contact-page>.wrap{max-width:none;padding-inline:var(--sp-gutter)}
 .fg-preview footer.site{padding:var(--sp-section) var(--sp-gutter) var(--sp-24)}
}

@media(max-width:900px){
 /* Контакты: тот же отступ крошки → заголовок, что у проектов (figma.css:207). */
 .fg-preview.page-template-contacts-v2 .page-head h1{margin-top:16px}
 /* То же боковое поле 24px, что у .page-head .wrap на мобильной (figma.css:205). */
 .fg-preview .contact-page>.wrap{padding-inline:24px}
 /* География: тот же разрыв заголовок → текст, что на десктопе, в мобильном масштабе. */
 .fg-preview .fg-geography>p{margin-top:32px}
}