.project-detail--builder{min-height:100vh;padding:0;background:var(--project-page-bg)}
.project-detail--builder .project-detail__inner{width:100%;max-width:none}
.project-builder{width:100%;padding-top:var(--project-builder-pt,0);padding-bottom:var(--project-builder-pb,0);overflow:clip;background:var(--project-page-bg)}
.project-detail--builder .project-builder__block{background:var(--project-page-bg)}
.project-builder__block{width:100%;background:var(--pb-bg)}
.project-builder__inner{width:min(100%,var(--pb-max));margin:0 auto;padding:var(--pb-pt) var(--pb-px) var(--pb-pb)}
.project-builder__title{margin:0 0 22px;color:var(--pb-tc);font:var(--pb-tw) var(--pb-ts)/var(--pb-tlh) var(--pb-tf);text-align:var(--pb-ta);overflow-wrap:anywhere}
.project-builder__text{color:var(--pb-dc);font:var(--pb-dw) var(--pb-ds)/var(--pb-dlh) var(--pb-df);text-align:var(--pb-da);overflow-wrap:anywhere}.project-builder__text p{max-width:100%;margin:0 0 1em}.project-builder__text p:last-child{margin-bottom:0}
.project-builder__media-pair{display:flex;gap:var(--pb-gap);align-items:stretch}.project-builder__media-pair--desktop-row{flex-direction:row}.project-builder__media-pair--desktop-row>*{width:calc((100% - var(--pb-gap))/2)}.project-builder__media-pair--desktop-column{flex-direction:column}.project-builder__media-pair--desktop-column>*{width:100%}.project-builder__media-wide>*{width:100%}
.project-builder__media-trio{display:flex;gap:var(--pb-gap);align-items:stretch}.project-builder__media-trio--tall-right{flex-direction:row-reverse}.project-builder__media-trio-tall{width:calc((100% - var(--pb-gap))*2/3)}.project-builder__media-trio-tall .project-builder__media{width:100%;height:var(--pb-h)}.project-builder__media-trio-pair{width:calc((100% - var(--pb-gap))/3);display:flex;flex-direction:column;gap:var(--pb-gap)}.project-builder__media-trio-pair .project-builder__media{width:100%;height:calc((var(--pb-h) - var(--pb-gap))/2)}
.project-builder__media{display:block;height:var(--pb-h);max-width:100%;border:0;object-fit:var(--pb-fit);object-position:var(--pb-position);background:transparent}
.project-builder__block--title .project-builder__title,.project-builder__block--text .project-builder__text,.project-builder__block--title_text .project-builder__title,.project-builder__block--title_text .project-builder__text{max-width:1100px;margin-right:auto;margin-left:auto}
/* Отступы для телефона задаются отдельно от десктопных. Подменяем сами
   переменные, а не каждое правило: тогда все существующие расчёты — падинги
   блока, промежутки между медиа, ширина колонки в сетке 2/3 — подхватывают
   мобильные значения без изменений.

   Подмена стоит на .project-builder__inner, а не на самом блоке: у блока эти
   переменные заданы в атрибуте style, а инлайн-стиль сильнее любого правила
   из файла. На вложенном элементе переопределение работает и наследуется
   всему содержимому блока. */
@media(max-width:700px){.project-builder__inner{--pb-gap:var(--pb-gapm);--pb-pt:var(--pb-ptm);--pb-pb:var(--pb-pbm);--pb-px:var(--pb-pxm)}.project-builder__title{font-size:var(--pb-tsm)}.project-builder__text{font-size:var(--pb-dsm)}.project-builder__media-pair{flex-direction:var(--pb-mobile-layout,column)}.project-builder__media-pair>*{width:100%}.project-builder__media-pair--mobile-row>*{width:calc((100% - var(--pb-gap))/2)}.project-builder__media{height:var(--pb-hm)}.project-builder__media-trio{flex-direction:column}.project-builder__media-trio-tall,.project-builder__media-trio-pair{width:100%}.project-builder__media-trio-tall .project-builder__media{height:var(--pb-hm)}.project-builder__media-trio-pair .project-builder__media{height:calc((var(--pb-hm) - var(--pb-gap))/2)}}

/* Три медиа в один ряд равной ширины. На мобильном по умолчанию встают
   друг под друга — как и остальные парные блоки. */
.project-builder__media-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pb-gap, 32px);
  width: 100%;
}

.project-builder__media-row .project-builder__media {
  width: 100%;
  height: var(--pb-h, 760px);
  object-fit: var(--pb-fit, cover);
  object-position: var(--pb-position, 50% 50%);
}

@media (max-width: 900px) {
  .project-builder__media-row--mobile-column {
    grid-template-columns: 1fr;
  }

  .project-builder__media-row .project-builder__media {
    height: var(--pb-hm, 420px);
  }
}

/* ── Пропорции медиа на телефоне ──────────────────────────────────────
   Высота блока задаётся в пикселях и рассчитана на десктоп: 1000–1600px
   при ширине блока 800. На телефоне ширина падает до ~335px, и та же
   высота превращает фотографию в узкую вертикальную полосу — при режиме
   «обрезать» от квадратного снимка остаётся треть.

   Поэтому на узких экранах высоту ограничиваем: медиа не может быть выше,
   чем 1.25 своей ширины. Заданное значение продолжает действовать, пока
   оно меньше этого предела. */
@media (max-width: 900px) {
  .project-builder__media {
    /* Блок отступает по 20px с каждой стороны, поэтому предел считаем
       от ширины экрана за вычетом этих отступов. */
    max-height: calc(125vw - 50px);
  }

  /* В сетке из трёх и в паре «рядом» медиа занимает половину ширины,
     поэтому и предел вдвое меньше. */
  .project-builder__media-pair--mobile-row .project-builder__media,
  .project-builder__media-trio-pair .project-builder__media,
  .project-builder__media-row:not(.project-builder__media-row--mobile-column) .project-builder__media {
    max-height: calc(62vw - 40px);
  }

}

/* ── Ровный ряд ───────────────────────────────────────────────────────
   Высоту медиа задаёт блок, поэтому соседние фотографии одной высоты и ряд
   не получается рваным. По умолчанию медиа заполняет блок целиком — лишнее
   по краям обрезается. Режим «показать целиком» оставляет фон блока по краям
   и потому уменьшает видимую картинку; высота при этом всё равно общая.

   Ширину распределяет контейнер. Задавать её ещё и самому изображению
   нельзя — Safari тогда выносит второе медиа за пределы блока, и в паре
   видно только одно. Поэтому доля ширины задаётся через flex, и только
   когда медиа стоят в строку: в колонке этот же flex начал бы управлять
   высотой вместо ширины. */
.project-builder__media-pair--desktop-row > .project-builder__media {
  flex: 1 1 0;
  min-width: 0;
}

.project-builder__media-pair,
.project-builder__media-trio,
.project-builder__media-trio-pair {
  align-items: stretch;
}

@media (max-width: 700px) {
  /* На телефоне пара по умолчанию встаёт в колонку — ширину делить не нужно. */
  .project-builder__media-pair > .project-builder__media {
    flex: 0 0 auto;
  }

  .project-builder__media-pair--mobile-row > .project-builder__media {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ── Высота по медиа ──────────────────────────────────────────────────
   Высоту блока не задают в пикселях: её диктует само медиа, поэтому блок
   обтягивает фотографию вплотную и пустых полей не остаётся ни на какой
   ширине экрана.

   Когда медиа стоят в ряд, у них должна совпасть высота — иначе ряд
   выглядит рваным. Совпасть без обрезки можно только одним способом:
   раздать ширину пропорционально форме кадра. Широкому достаётся больше,
   вертикальному меньше, и при одной высоте каждый показывается целиком.

   Пропорции приходят из библиотеки в --m-ar (ширина, делённая на высоту)
   и служат одновременно долей ширины и пропорциями самой картинки. Если
   размеров у файла нет, доля даётся наравне со всеми, а высота остаётся
   по содержимому. */
.project-builder__block--h-auto .project-builder__media {
  height: auto;
  max-height: none;
  aspect-ratio: var(--m-ar, auto);
  /* Пропорции коробки и картинки совпадают, обрезать нечего. cover нужен
     лишь затем, чтобы округление в доли пикселя не давало светлых полосок
     по краям. */
  object-fit: cover;
}

/* Медиа в ряд: доля ширины по пропорциям, высоту задаёт сама картинка. */
.project-builder__block--h-auto .project-builder__media-pair--desktop-row,
.project-builder__block--h-auto .project-builder__media-row {
  align-items: flex-start;
}

.project-builder__block--h-auto .project-builder__media-pair--desktop-row > .project-builder__media,
.project-builder__block--h-auto .project-builder__media-row > .project-builder__media {
  flex: var(--m-ar, 1) 1 0;
  min-width: 0;
  width: auto;
  height: auto;
}

/* Ряд из трёх собран сеткой с равными колонками — для раздачи долей по
   пропорциям нужен flex. */
.project-builder__block--h-auto .project-builder__media-row {
  display: flex;
}

/* Одно медиа и колонка на всю ширину: пропорции берёт от самого файла. */
.project-builder__block--h-auto .project-builder__media-wide > .project-builder__media,
.project-builder__block--h-auto .project-builder__media-pair--desktop-column > .project-builder__media {
  width: 100%;
  height: auto;
  flex: 0 0 auto;
}

/* ── Сетка 2/3 + колонка ──────────────────────────────────────────────
   Колонка из двух половин должна сойтись по высоте с крупным кадром, и при
   этом ей нужен ещё отступ между половинами, которого у крупного нет. Ширину
   колонки поэтому считаем точно: из ширины ряда вычитаем отступы, а остаток
   делим по пропорциям. --ar-tall — пропорции крупного кадра, --k-col — сумма
   величин, обратных пропорциям половин; обе приходят из библиотеки.

   Когда размеров у файлов нет, запасные значения дают прежнюю раскладку
   в треть ширины. */
.project-builder__block--h-auto .project-builder__media-trio {
  align-items: flex-start;
}

.project-builder__block--h-auto .project-builder__media-trio-pair {
  flex: 0 0 auto;
  width: calc(
    (100% - var(--pb-gap) * (1 + var(--ar-tall, 0.5)))
    / (var(--ar-tall, 0.5) * var(--k-col, 2) + 1)
  );
}

.project-builder__block--h-auto .project-builder__media-trio-tall {
  flex: 1 1 0;
  min-width: 0;
}

.project-builder__block--h-auto .project-builder__media-trio-tall > .project-builder__media,
.project-builder__block--h-auto .project-builder__media-trio-pair > .project-builder__media {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  aspect-ratio: var(--m-ar, auto);
}

/* ── Узкие экраны ─────────────────────────────────────────────────────
   Когда медиа встают друг под друга, делить ширину не с кем: каждое
   показывается во всю ширину и в своих пропорциях. */
@media (max-width: 900px) {
  .project-builder__block--h-auto .project-builder__media-row--mobile-column {
    display: flex;
    flex-direction: column;
  }

  .project-builder__block--h-auto .project-builder__media-row--mobile-column > .project-builder__media,
  .project-builder__block--h-auto .project-builder__media-trio > * {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }

  .project-builder__block--h-auto .project-builder__media-trio {
    align-items: stretch;
  }

  .project-builder__block--h-auto .project-builder__media-trio-tall > .project-builder__media {
    height: auto;
    aspect-ratio: var(--m-ar, auto);
  }

  .project-builder__block--h-auto .project-builder__media-trio-pair > .project-builder__media {
    flex: 0 0 auto;
    height: auto;
    aspect-ratio: var(--m-ar, auto);
  }
}

@media (max-width: 700px) {
  .project-builder__block--h-auto .project-builder__media-pair:not(.project-builder__media-pair--mobile-row) > .project-builder__media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
  }

  /* Пару, оставленную в строку, раскладываем по тем же долям. */
  .project-builder__block--h-auto .project-builder__media-pair--mobile-row {
    align-items: flex-start;
  }

  .project-builder__block--h-auto .project-builder__media-pair--mobile-row > .project-builder__media {
    flex: var(--m-ar, 1) 1 0;
    min-width: 0;
    width: auto;
  }
}