/* ==========================================================================
   БАССЕЙНЫ и ПРУДЫ И ВОДОЁМЫ — точная вёрстка по утверждённым макетам
   fixes/Бассейны — Desktop.pdf         (артборд 1440 × 6383, поля 60, контент 1320)
   fixes/Бассейны — Mobile.pdf          (артборд  393 × 8353, поля 12, контент  369)
   fixes/Пруды и водоёмы — Desktop.pdf  (артборд 1440 × 7029)
   fixes/Пруды и водоёмы — Mobile.pdf   (артборд  393 × 8353)
   Страницы собраны из одних блоков; отличия «Прудов» — в конце файла (.bs--pd).
   Геометрия вынута из содержимого PDF (clip- и placement-прямоугольники),
   типографика — из materials/DESIGN.md.
   Мобильная раскладка базовая, десктопная включается с 1024px.
   ========================================================================== */

.bs{
  --w:1320px;          /* контент десктопа */
  --gut:12px;          /* поля мобильной версии */
  --line:#505050;      /* background_dark_grey — рамки макета */
  overflow-x:clip;
}
.bs-shell{width:100%;margin-inline:auto;padding-inline:var(--gut)}

/* ---------- Общие элементы ---------- */
.bs-eyebrow{display:none;font-size:16px;font-weight:400;line-height:16px;
  text-transform:uppercase;color:#fff;margin:0}

/* desktop-h_1 / mobile-h_1_mobile */
.bs-h2{font-size:32px;font-weight:700;line-height:33.28px;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff;margin:0}

/* desktop-big_text / mobile-big_text_mobile */
.bs-h1{font-size:40px;font-weight:700;line-height:.89;letter-spacing:-.08em;
  text-transform:uppercase;color:#fff;margin:0}

/* Кнопка макета */
.bs-btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:54px;padding:0 20px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-size:14px;font-weight:700;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:#fff;text-align:center;cursor:pointer;
  transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.bs-btn:hover,.bs-btn:focus-visible{background:#fff;border-color:#fff;color:#121212}
.bs-btn--fill,.bs-btn--hero{background:#fff;border-color:#fff;color:#121212}
.bs-btn--fill:hover,.bs-btn--fill:focus-visible,
.bs-btn--hero:hover,.bs-btn--hero:focus-visible{background:rgba(255,255,255,.04);border-color:var(--line);color:#fff}

/* Крупные номера (desktop-numbers 96/700/-0.04em).
   line-height подобран так, чтобы верх цифры совпадал с верхом бокса. */
.bs-num{display:block;font-size:32px;font-weight:700;letter-spacing:-.04em;
  line-height:21.9px;color:#fff;font-variant-numeric:tabular-nums}

/* ==========================================================================
   MOBILE (базовая раскладка, макет 393px)
   ========================================================================== */

/* ---------- Герой ---------- */
.bs-hero{position:relative}
.bs-hero__bg{position:relative;height:448px;overflow:hidden;background:#1e1e1e;
  clip-path:polygon(0 0,100% 0,100% 100%,48.93% 64.33%,0 100%)}
.bs-hero__bg picture{display:block;height:100%}
.bs-hero__bg img{display:block;width:100%;height:100%;object-fit:cover}
/* затемнение сверху — как в макете (кадр под шапкой уходит почти в чёрный) */
.bs-hero__bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,18,18,.70) 0%,rgba(18,18,18,.55) 20%,
    rgba(18,18,18,.34) 40%,rgba(18,18,18,.12) 56%,rgba(18,18,18,0) 68%)}
.bs-hero__crumbs{position:absolute;left:0;right:0;top:105px;z-index:2}
.bs-hero__crumbs .crumbs{padding-block:0}
.bs-hero__body{text-align:center}
.bs-hero__body .bs-h1{margin-top:37.9px}
.bs-hero__lead{margin:34px auto 0;max-width:342px;
  font-size:16px;font-weight:600;line-height:20px;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff}
.bs-hero__text{margin:15.5px auto 0;max-width:352px;
  font-size:16px;font-weight:400;line-height:17px;color:#fff}
.bs-hero__cta{margin-top:29px}

/* ---------- Секции ---------- */
.bs-sec{padding-top:118.3px}

/* ---------- Типы бассейнов ---------- */
.bs-types__grid{margin-top:25.4px;display:flex;flex-direction:column;gap:12px}
.bs-tcard{border:1px solid var(--line);padding:16px;min-height:427px;
  display:flex;flex-direction:column}
.bs-tcard__media{height:231px;overflow:hidden;background:#1e1e1e;flex:none}
.bs-tcard__media img{width:100%;height:100%;object-fit:cover}
.bs-tcard__h{margin:14.7px 0 0;font-size:20px;font-weight:700;line-height:19px;
  text-transform:uppercase;color:#fff}
.bs-tcard__p{margin:13.5px 0 0;font-size:16px;font-weight:400;line-height:17px;color:#fff}
.bs-types__cta{margin-top:24px}

/* ---------- Технологии и оборудование ---------- */
.bs-tech__sub{margin:23.5px 0 0;font-size:20px;font-weight:700;line-height:23px;
  text-transform:uppercase;color:#fff}
.bs-tech__note{margin:14px 0 0;font-size:16px;font-weight:400;line-height:17px;color:#fff}
.bs-tech__list{margin:31.5px 0 0;padding:0;list-style:none;border-bottom:1px solid #fff}
.bs-trow{display:grid;grid-template-columns:78px minmax(0,1fr);
  min-height:74px;padding:25px 16px 0;border-top:1px solid #fff}
.bs-trow p{margin:0;font-size:14px;font-weight:400;line-height:16px;color:#fff}

/* ---------- Этапы реализации ---------- */
.bs-stages__grid{margin-top:24.4px;display:flex;flex-direction:column;gap:12px}
.bs-stages__photo{order:-1;margin:0 0 8px;height:324px;overflow:hidden;background:#1e1e1e}
.bs-stages__photo img{width:100%;height:100%;object-fit:cover}
.bs-scard{position:relative;border:1px solid var(--line);padding:29px 16px 16px;
  min-height:289px;display:flex;flex-direction:column;overflow:hidden}
.bs-scard .bs-num{font-size:96px;line-height:65.6px}
.bs-scard__txt{margin-top:auto}
.bs-scard__h{margin:0;font-size:20px;font-weight:700;line-height:19px;
  text-transform:uppercase;color:#fff}
.bs-scard__p{margin:12px 0 0;font-size:16px;font-weight:400;line-height:17px;color:#fff}

/* ---------- Преимущества ---------- */
.bs-adv__grid{margin-top:24.4px;display:flex;flex-direction:column;gap:8px}
.bs-adv__row{display:contents}
.bs-adv__img{margin:0;overflow:hidden;background:#1e1e1e}
.bs-adv__img img{display:block;width:100%;height:100%;object-fit:cover}
.bs-adv__img--1{display:none}
.bs-adv__img--2{order:-1;height:324px;margin-bottom:20px}
.bs-acard{border:1px solid var(--line);padding:19px 16px 16px;min-height:321px;
  display:flex;flex-direction:column}
.bs-acard__num{height:52px;overflow:hidden;border-bottom:1px solid var(--line);flex:none}
.bs-acard__num .bs-num{font-size:96px;line-height:65.6px}
.bs-acard__txt{margin-top:auto}
.bs-acard__h{margin:0;font-size:20px;font-weight:700;line-height:19px;
  text-transform:uppercase;color:#fff}
.bs-acard__p{margin:12px 0 0;font-size:16px;font-weight:400;line-height:17px;color:#fff}
.bs-adv__cta{margin-top:24px}
.bs-adv__cta .bs-btn{height:48px}
.bs-end{height:120px}

/* ==========================================================================
   DESKTOP (макет 1440px)
   ========================================================================== */
@media (min-width:1024px){
  .bs{--gut:60px}
  .bs-shell{max-width:calc(var(--w) + 2 * var(--gut))}
  .bs-eyebrow{display:block}

  .bs-h1{font-size:128px}
  .bs-h2{font-size:48px;line-height:52px;letter-spacing:0}
  .bs-btn{height:48px;font-size:16px}

  /* --- Герой --- */
  .bs-hero__bg{height:638px;
    clip-path:polygon(0 0,100% 0,100% 100%,49.48% 63.09%,0 100%)}
  .bs-hero__crumbs{top:82px}
  .bs-hero__body .bs-h1{margin-top:97.7px}
  .bs-hero__lead{margin-top:31.2px;max-width:600px;font-size:20px;line-height:24px;
    letter-spacing:-.01em}
  .bs-hero__text{margin-top:18.1px;max-width:470px}
  .bs-hero__cta{margin-top:34px;display:flex;justify-content:center}
  .bs-hero__cta .bs-btn{width:426px}
  .bs-btn--hero{background:rgba(255,255,255,.04);border-color:var(--line);color:#fff}
  .bs-btn--hero:hover,.bs-btn--hero:focus-visible{background:#fff;border-color:#fff;color:#121212}

  /* --- Заголовок секции: подпись слева, заголовок в правой колонке --- */
  .bs-sec{padding-top:167.4px}
  .bs-head{display:grid;grid-template-columns:660fr 660fr;align-items:start}
  .bs-head__eyebrow{grid-column:1;padding-top:5px}
  .bs-head__body{grid-column:2}

  /* --- Типы бассейнов --- */
  .bs-types{padding-top:173.5px;text-align:center}
  .bs-types .bs-h2{margin-top:.9px}
  .bs-types__grid{margin-top:41.6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;text-align:left}
  .bs-tcard{min-height:0;height:673px;padding:16px}
  .bs-tcard__media{flex:1 1 auto;height:auto;min-height:0}
  .bs-tcard__h{margin-top:8px;font-size:32px;line-height:30px}
  .bs-tcard__p{margin-top:15px}
  .bs-types__cta{margin-top:20px}

  /* --- Технологии --- */
  .bs-tech{padding-top:167.5px}
  .bs-tech__sub,.bs-tech__note{display:none}
  .bs-tech__list{margin-top:30.6px;margin-left:auto;width:985px}
  .bs-trow{grid-template-columns:325px minmax(0,1fr);min-height:107px;padding:18px 16px 0}
  .bs-trow .bs-num{font-size:96px;line-height:65.6px}
  .bs-trow p{font-size:20px;line-height:21px;padding-top:18px;max-width:340px}

  /* --- Этапы --- */
  .bs-stages{padding-top:166.5px}
  .bs-stages__grid{margin-top:32.6px;display:grid;
    grid-template-columns:650fr 315fr 315fr;column-gap:20px;row-gap:22px}
  .bs-stages__photo{order:0;grid-column:1;grid-row:1 / span 2;align-self:end;
    height:760px;margin:0}
  .bs-scard{height:373px;min-height:0;padding:30px 16px 20px}
  .bs-scard--1{grid-column:1;grid-row:1 / span 2;height:768px;
    border:0;background:transparent;padding:16px;z-index:2}
  .bs-scard--1 .bs-scard__p{max-width:540px}
  .bs-scard--1 .bs-num{margin-top:14px}
  .bs-scard--2{grid-column:2;grid-row:1}
  .bs-scard--3{grid-column:3;grid-row:1}
  .bs-scard--4{grid-column:2;grid-row:2}
  .bs-scard--5{grid-column:3;grid-row:2}
  .bs-scard__h{font-size:24px;line-height:22.8px}
  .bs-scard__p{margin-top:18px;font-size:20px;line-height:21px}

  /* --- Преимущества --- */
  .bs-adv{padding-top:167.4px}
  .bs-adv__grid{margin-top:30.6px;display:block}
  .bs-adv__row{display:grid;gap:20px}
  .bs-adv__row--1{grid-template-columns:314fr 651fr 313fr}
  .bs-adv__row--2{margin-top:19px;grid-template-columns:650fr 315fr 315fr}
  .bs-adv__img--1{display:block;height:321px}
  .bs-adv__img--2{order:0;margin:0;height:321px;border:1px solid var(--line);padding:16px}
  .bs-adv__img--2 img{height:281px}
  .bs-acard{min-height:0;height:321px;padding:19px 16px 20px}
  .bs-acard__h{font-size:24px;line-height:22.8px}
  .bs-acard__p{margin-top:24px}
  .bs-adv__cta{margin-top:23px}
  .bs-end{height:170px}
}

/* ---------- Планшет 600–1023px ---------- */
@media (min-width:600px) and (max-width:1023px){
  .bs-shell{max-width:744px}
  .bs-h1{font-size:72px}
  .bs-h2{font-size:40px;line-height:42px}
  .bs-hero__lead{max-width:34ch}
  .bs-hero__text{max-width:56ch}
  .bs-types__grid,.bs-adv__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bs-tcard--wide{grid-column:1 / -1}
  .bs-stages__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .bs-stages__photo{grid-column:1 / -1;margin-bottom:0}
  .bs-adv__img--2{grid-column:1 / -1;margin-bottom:0}
}

/* ==========================================================================
   ПРУДЫ И ВОДОЁМЫ — отличия от «Бассейнов»
   Всё остальное (ритм секций, типографика, карточки) совпадает с макетом
   «Бассейнов» до пикселя, поэтому переопределяем только расхождения.
   ========================================================================== */

/* ---------- Герой: два слоя ----------
   В макете кадр перевёрнут (рябь сверху, камень свисает вниз) и разложен
   на два слоя: фон режется клином, камень лежит поверх и клином НЕ режется —
   поэтому свисает ниже вершины. Клин замерен по рендеру макета.
   Бокс .bs-hero__drop повторяет геометрию object-fit:cover фонового кадра,
   проценты внутри него — положение альфа-бокса вырезки (tools/pd-assets.mjs). */
.bs--pd .bs-hero__bg{
  clip-path:polygon(0 0,100% 0,100% 100%,49.5% 50.9%,0 100%)}
/* фон «Прудов» под шапкой светлый — затемнение мягче, чем в «Бассейнах»,
   но достаточное, чтобы хлебные крошки читались */
.bs--pd .bs-hero__bg::after{
  background:linear-gradient(180deg,rgba(18,18,18,.55) 0%,rgba(18,18,18,.34) 14%,
    rgba(18,18,18,.12) 26%,rgba(18,18,18,0) 38%)}
/* Бокс камня повторяет геометрию object-fit:cover фонового кадра:
   ширина = max(ширина бокса, высота бокса × пропорции кадра) — так формула
   работает в обоих режимах cover (упор в ширину и упор в высоту). */
.bs--pd .bs-hero__drop{
  position:absolute;left:50%;top:224px;transform:translate(-50%,-50%);
  width:max(100%,393px);aspect-ratio:786 / 896;pointer-events:none;z-index:1}
.bs--pd .bs-hero__drop img{
  position:absolute;left:36.77%;top:41.56%;width:30%;height:53.75%}

/* Планшет: с 600 px показываем десктопный кадр героя (мобильный слишком
   высокий — камень наезжал бы на заголовок). Бокс остаётся 448 px. */
@media (min-width:600px) and (max-width:1023px){
  .bs--pd .bs-hero__bg{
    clip-path:polygon(0 0,100% 0,100% 76.8%,49.43% 39.97%,0 76.8%)}
  .bs--pd .bs-hero__drop{width:max(100%,1011px);aspect-ratio:1760 / 780}
  .bs--pd .bs-hero__drop img{left:42.78%;top:30.31%;width:16.17%;height:74.58%}
  .bs--pd .bs-hero__body .bs-h1{margin-top:62px}
}

@media (min-width:1024px){
  /* десктоп: кадр обрывается на 76.8 % от 638 px (490 px), вершина — 39.97 % */
  .bs--pd .bs-hero__bg{
    clip-path:polygon(0 0,100% 0,100% 76.8%,49.43% 39.97%,0 76.8%)}
  /* абзац героя в макете «Прудов» шире: три строки с переносом
     после «ФУНКЦИОНАЛЬНЫЕ» и «АРХИТЕКТУРНУЮ И» */
  .bs--pd .bs-hero__lead{max-width:660px}
  .bs--pd .bs-hero__drop{top:319px;width:max(100%,1440px);aspect-ratio:1760 / 780}
  .bs--pd .bs-hero__drop img{left:42.78%;top:30.31%;width:16.17%;height:74.58%}

  /* карточка-модификатор «во всю ширину сетки» (у «Прудов» — пятая, фото 1288 × 553) */
  .bs-tcard--wide{grid-column:1 / -1}

  /* фото этапов занимает всю высоту двух рядов карточек (768 px), не 760 */
  .bs--pd .bs-stages__photo{height:768px}
  /* подпись первого этапа в макете «Прудов» умещается в строку */
  .bs--pd .bs-scard--1 .bs-scard__p{max-width:620px}

  /* второй кадр преимуществ — без рамки и полей, фото во весь бокс */
  .bs--pd .bs-adv__img--2{border:0;padding:0}
  .bs--pd .bs-adv__img--2 img{height:100%}
}

/* ==========================================================================
   ФОНТАНЫ — отличия от «Бассейнов» (правка №96)
   Макеты: references/Фонтаны — Desktop.pdf (1440 × 7382), Mobile.pdf (393 × 8353).
   Состав блоков совпадает с «Бассейнами»; расходятся герой, видимость
   подзаголовка «Технологий» и рамка второго кадра «Преимуществ».
   ========================================================================== */

/* ---------- Герой: фон + скульптура поверх клина ----------
   Кадр перевёрнут (рябь сверху, скульптура свисает вниз) и разложен на два
   слоя: фон режется клином, скульптура лежит поверх и клином НЕ режется,
   поэтому свисает ниже вершины. Бокс .bs-hero__drop повторяет прямоугольник,
   который рисует object-fit: cover, проценты внутри него — положение
   альфа-бокса вырезки (tools/uf-assets.mjs).
   До 600 px работает мобильный кадр (обрезан по центру), с 600 px —
   десктопный: он прижат к верху, ширина кадра = max(ширина бокса,
   высота бокса × пропорции кадра 4096/2286). */
.bs--f{--f-hero-h:448px}
/* вода под шапкой светлая — затемняем ровно настолько, чтобы читались крошки */
.bs--f .bs-hero__bg::after{
  background:linear-gradient(180deg,rgba(18,18,18,.62) 0%,rgba(18,18,18,.40) 12%,
    rgba(18,18,18,.16) 24%,rgba(18,18,18,0) 36%)}
.bs--f .bs-hero__drop{
  position:absolute;left:50%;top:224px;transform:translate(-50%,-50%);
  width:max(100%,393px);aspect-ratio:393 / 448;pointer-events:none;z-index:1}
.bs--f .bs-hero__drop img{
  position:absolute;left:25.45%;top:30.60%;width:45.2%;height:70.38%}
.bs--f .bs-hero__crumbs{top:108px}

@media (min-width:600px){
  .bs--f .bs-hero__bg img{object-position:50% 0}
  .bs--f .bs-hero__drop{top:0;transform:translateX(-50%);
    width:max(100%,calc(var(--f-hero-h) * 4096 / 2286));aspect-ratio:4096 / 2286}
  .bs--f .bs-hero__drop img{left:39.33%;top:27.43%;width:19.67%;height:62.59%}
}

@media (min-width:1024px){
  /* десктоп: бокс 1440 × 699, вершина клина 49.44 % / 66.4 % (замер по рендеру) */
  .bs--f{--f-hero-h:699px}
  .bs--f .bs-hero__bg{height:699px;
    clip-path:polygon(0 0,100% 0,100% 100%,49.44% 66.4%,0 100%)}
  .bs--f .bs-hero__crumbs{top:82px}
  .bs--f .bs-hero__body .bs-h1{margin-top:39.7px}

  /* в макете «Фонтанов» подзаголовок и сноска блока «Технологии» видимы */
  .bs--f .bs-tech__sub,.bs--f .bs-tech__note{display:block}
  .bs--f .bs-tech__sub{margin-top:24px;max-width:660px;font-size:20px;line-height:24px}
  .bs--f .bs-tech__note{margin-top:18px;max-width:300px}

  /* второй кадр «Преимуществ» — без рамки и полей, фото во весь бокс */
  .bs--f .bs-adv__img--2{border:0;padding:0}
  .bs--f .bs-adv__img--2 img{height:100%}
}