/* ============================================================
   Доп. стили темы: логотип-картинка, лайтбокс галереи, попап видео
   ============================================================ */

/* ---- Логотип-картинка (если загружен через «Свойства сайта») ---- */
.nav__logo-img{
  height:clamp(28px,2.8vw,40px);
  width:auto;display:block;flex:none;
}
.footer__logo-img{
  height:clamp(24px,2.4vw,38px);
  width:auto;display:block;flex:none;
}

/* ---- Карусель галереи (карточка + лайтбокс) ---- */
.bcar{display:flex;height:100%;will-change:transform;transition:transform .42s var(--ease)}
.bcar__slide{flex:0 0 100%;width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden}

/* В карточке: фото на всю площадь, свайп по горизонтали (вертикаль — скролл страницы) */
.work__main{touch-action:pan-y;cursor:grab}
.work__main:active{cursor:grabbing}
.work__main .bcar__slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}

/* ---- Лайтбокс-галерея ---- */
.boats-lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(6,8,10,.93);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.boats-lightbox.open{opacity:1;visibility:visible}
.boats-lightbox__stage{
  position:absolute;inset:0;
  overflow:hidden;
  touch-action:none;            /* жесты: свайп листать/закрывать */
}
.boats-lightbox__stage .bcar{ height:100%; }
/* отступы внутри слайда, а не сцены — тогда один слайд = ровно экран,
   и соседние фото не выглядывают по краям */
.boats-lightbox__stage .bcar__slide{ padding:clamp(14px,4vw,60px); }
.boats-lightbox__stage .bcar{ transition:transform .42s var(--ease); }
.boats-lightbox__stage .bcar__slide img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  -webkit-user-drag:none;user-select:none;
}

/* стрелки */
.boats-lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:54px;height:54px;border:0;border-radius:0;cursor:pointer;
  background:rgba(255,255,255,.12);transition:background .25s ease;
}
.boats-lightbox__nav:hover{background:rgba(255,255,255,.28)}
.boats-lightbox__prev{left:clamp(10px,2vw,28px)}
.boats-lightbox__next{right:clamp(10px,2vw,28px)}
.boats-lightbox__nav::before{
  content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;
  border-top:2px solid #fff;border-right:2px solid #fff;
}
.boats-lightbox__prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.boats-lightbox__next::before{transform:translate(-70%,-50%) rotate(45deg)}

/* счётчик */
.boats-lightbox__counter{
  position:absolute;left:0;right:0;bottom:clamp(12px,2.4vw,28px);z-index:2;
  text-align:center;color:rgba(255,255,255,.85);
  font-size:14px;letter-spacing:.03em;pointer-events:none;
}

/* один кадр — без стрелок и счётчика */
.boats-lightbox.is-single .boats-lightbox__nav,
.boats-lightbox.is-single .boats-lightbox__counter{display:none}

.boats-lightbox__close,
.boats-vpopup__close{
  position:absolute;top:clamp(14px,2vw,26px);right:clamp(14px,2vw,26px);
  width:46px;height:46px;border:0;border-radius:0;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;z-index:2;
}
.boats-lightbox__close:hover,
.boats-vpopup__close:hover{background:rgba(255,255,255,.28)}

/* ---- Попап видео ---- */
.boats-vpopup{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,8,10,.94);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
  padding:clamp(16px,4vw,56px);
}
.boats-vpopup.open{opacity:1;visibility:visible}
.boats-vpopup__inner{
  width:min(1100px,100%);
  aspect-ratio:16/9;
  transform:scale(.96);
  transition:transform .3s ease;
}
.boats-vpopup.open .boats-vpopup__inner{transform:scale(1)}
.boats-vpopup__video{
  width:100%;height:100%;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  display:block;
}

/* плитка с видео — намёк, что кликабельно */
.vcard[data-video]{cursor:pointer}

body.boats-no-scroll{overflow:hidden}

/* ---- Заголовок «Почему пластик»: строки репитера ---- */
.hdpe__title span{display:block}

/* ---- Главное фото 16:9 + миниатюры под ним (на всех экранах) ---- */
.works .work{ align-items:start; max-height:none; }
.works .work__gallery{
  display:flex;flex-direction:column;
  height:auto;overflow:visible;   /* чтобы миниатюры не обрезались */
}
.works .work__main{ flex:none;width:100%;aspect-ratio:16/9;min-height:0;height:auto; }
.works .work__thumbs{ display:flex;flex:none; }

/* Планшет и мобилка: одна колонка, высота строк по контенту */
@media(max-width:1080px){
  .works .work{ grid-template-columns:1fr;grid-template-rows:auto auto; }
}

/* ---- Колонки и карусель не должны распирать блок под количество фото ---- */
.work__info, .work__gallery, .work__main,
.model__info, .model__gal{ min-width:0; }
.bcar, .bcar__slide{ min-width:0; }

/* ---- Миниатюры галереи: один ряд с горизонтальной прокруткой ----
   (без переноса и без распирания блока, сколько бы фото ни было) */
.work__thumbs{
  flex-wrap:nowrap;
  min-width:0;                    /* не растягивать галерею под содержимое */
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;   /* по умолчанию скрыт */
}
.work__thumb{ flex:0 0 auto; }    /* фиксированная ширина, не сжимается */

/* Скролбар под стиль сайта — виден только при наведении или во время скролла */
.work__thumbs:hover,
.work__thumbs.is-scrolling{ scrollbar-color:var(--accent) transparent; }
.work__thumbs::-webkit-scrollbar{ height:5px; }
.work__thumbs::-webkit-scrollbar-track{ background:transparent; }
.work__thumbs::-webkit-scrollbar-thumb{ background:transparent; }   /* невидим по умолчанию */
.work__thumbs:hover::-webkit-scrollbar-thumb,
.work__thumbs.is-scrolling::-webkit-scrollbar-thumb{ background:var(--accent); }

/* ---- НАШИ ЛОДКИ: галерея как у работ + чередование лево/право ---- */
.lineup .work__gallery{ display:flex;flex-direction:column;height:auto;overflow:visible; }
.lineup .work__main{ flex:none;width:100%;aspect-ratio:16/9;min-height:0;height:auto; }
.lineup .work__thumbs{ display:flex;flex:none; }
.model__gal{ min-width:0; }
.model--rev .model__gal{ order:2; }                 /* зеркалим колонку с фото */
.model__specs{ grid-template-columns:repeat(2,1fr); } /* характеристик может быть разное число */
@media(max-width:1080px){
  .model--rev .model__gal{ order:0; }               /* на мобилке фото всегда сверху */
}

/* ---- Буллеты-пагинация «Выполненные работы» ---- */
.works{ padding-bottom:clamp(30px,4.5vw,64px); }   /* чтобы точки не обрезались */

.works__dots{
  position:relative;
  display:flex;align-items:center;gap:10px;
  width:max-content;max-width:min(78vw,260px);
  margin:clamp(22px,3vw,40px) auto 0;
  padding:8px 12px;
  overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.works__dots::-webkit-scrollbar{ display:none; }
/* плавное затухание по краям, только когда точки прокручиваются */
.works__dots.is-scroll{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent);
}
.works__dot{
  flex:none;width:9px;height:9px;border-radius:0;border:0;padding:0;cursor:pointer;
  background:rgba(140,140,140,.4);
  transition:transform .25s var(--ease),background .25s var(--ease),opacity .25s var(--ease);
}
.works__dot:hover{ background:rgba(140,140,140,.7); }
.works__dot.is-active{ background:var(--accent);transform:scale(1.35); }
.works__dot--mid{ transform:scale(.78); }
.works__dot--far{ transform:scale(.55);opacity:.5; }

/* ============================================================
   ВИДЕО-ПЛИТКИ: адаптивная бенто-сетка + страницы
   ============================================================ */
.vcases{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(28px,4vw,56px); }
.vcases__track{ display:grid; grid-template-areas:"p"; }
.vcases__page{
  grid-area:p;
  justify-self:stretch; align-self:start;   /* на всю ширину контейнера */
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.vcases__page.is-active{ opacity:1;visibility:visible;pointer-events:auto; }

.vgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(6px,1vw,14px); grid-auto-flow:dense;
  width:100%;
}
/* На всю ширину контейнера. Высота ОДИНАКОВАЯ у 6- и 9-сетки (обе 16:9),
   поэтому при ≤6 видео это 2 ряда более крупных клеток той же высоты —
   страницы слайдера не «прыгают» по высоте. */
.vgrid--6{ grid-template-rows:repeat(2,1fr); aspect-ratio:16/9; }
.vgrid--9{ grid-template-rows:repeat(3,1fr); aspect-ratio:16/9; }

/* Бенто-заполнение: один/несколько тайлов растягиваются, чтобы не было пустых клеток */
.vgrid[data-n="1"] .vtile{ grid-column:span 3; grid-row:span 2; }
.vgrid[data-n="2"] .vtile{ grid-column:span 3; }
.vgrid[data-n="3"] .vtile{ grid-row:span 2; }
.vgrid[data-n="4"] .vtile:nth-child(1),
.vgrid[data-n="4"] .vtile:nth-child(4){ grid-column:span 2; }
.vgrid[data-n="5"] .vtile:nth-child(1){ grid-column:span 2; }
.vgrid[data-n="7"] .vtile:nth-child(1),
.vgrid[data-n="7"] .vtile:nth-child(3){ grid-column:span 2; }
.vgrid[data-n="8"] .vtile:nth-child(1){ grid-column:span 2; }

.vtile{ position:relative; overflow:hidden; background:#0a0c0e; cursor:pointer; }
.vtile__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.vtile__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  transition:background .3s var(--ease);
}
.vtile:hover .vtile__overlay,
.vtile:focus-visible .vtile__overlay{ background:rgba(0,0,0,.3); }
.vtile__overlay svg{
  opacity:.92; transform:scale(.85);
  transition:transform .3s var(--ease);
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.vtile:hover .vtile__overlay svg{ transform:scale(1); }

/* буллеты страниц видео (квадратные, как и остальной дизайн) */
.vcases__dots{ display:flex; justify-content:center; gap:10px; margin-top:clamp(18px,2.5vw,30px); }
.vcases__dot{
  width:9px;height:9px;border:0;padding:0;cursor:pointer;
  background:rgba(140,140,140,.4);
  transition:transform .25s var(--ease),background .25s var(--ease);
}
.vcases__dot:hover{ background:rgba(140,140,140,.7); }
.vcases__dot.is-active{ background:var(--accent); transform:scale(1.3); }

/* Мобилка: простая сетка 2×N из квадратов, без бенто-растягиваний */
@media(max-width:680px){
  .vgrid,
  .vgrid--6,
  .vgrid--9{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; aspect-ratio:auto; width:100%; grid-auto-flow:row; }
  .vgrid .vtile{ grid-column:auto !important; grid-row:auto !important; aspect-ratio:1; }
  /* нечётное количество: последняя плитка занимает обе клетки — без пустого места */
  .vgrid .vtile:last-child:nth-child(odd){ grid-column:1 / -1 !important; aspect-ratio:2 / 1 !important; }
}

/* ---- Плавающая кнопка звонка (только мобилка) ---- */
.call-fab{
  display:none;                 /* на десктопе скрыта */
  position:fixed; right:16px; bottom:16px; z-index:300;
  width:54px; height:54px;
  align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.32);
  text-decoration:none;
}
.call-fab__ico{
  position:relative; z-index:1; display:flex;
  animation:callBreath 2s ease-in-out infinite;   /* «дыхание» иконки */
}
.call-fab::before,
.call-fab::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--accent);
  animation:callPulse 2s ease-out infinite;        /* расходящиеся «волны» */
}
.call-fab::after{ animation-delay:1s; }
@keyframes callBreath{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.14)} }
@keyframes callPulse{ 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2.1);opacity:0} }

@media(max-width:680px){ .call-fab{ display:flex; } }

@media(prefers-reduced-motion:reduce){
  .call-fab__ico{ animation:none; }
  .call-fab::before,
  .call-fab::after{ display:none; }
}

/* ---- Реквизиты ИП в подвале (футер всегда тёмный) ---- */
.footer__requisites{
  flex:1 1 100%;
  margin-top:6px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.08); /* как у .footer */
}
.footer__requisites p{
  margin:0 0 3px;
  font-size:clamp(11px,.9vw,13px);
  line-height:1.65;
  color:rgba(255,255,255,.52);                /* читаемо, как .footer__legal */
}
.footer__requisites p:first-child{
  color:rgba(255,255,255,.78);
  font-weight:500;
}
.footer__requisites p:last-child{ margin-bottom:0; }

/* ---- Чтобы админ-бар WordPress не перекрывал шапку сайта ---- */
.admin-bar .nav{ top:32px; }
.admin-bar .mobile-menu{ top:32px; }
@media screen and (max-width:782px){
  .admin-bar .nav{ top:46px; }
  .admin-bar .mobile-menu{ top:46px; }
}

/* ---- Факты: ширина карточек подстраивается под количество (макс. 5 в ряд) ---- */
.make__facts.cols-1{grid-template-columns:1fr}
.make__facts.cols-2{grid-template-columns:repeat(2,1fr)}
.make__facts.cols-3{grid-template-columns:repeat(3,1fr)}
.make__facts.cols-4{grid-template-columns:repeat(4,1fr)}
.make__facts.cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1080px){
  .make__facts.cols-4,
  .make__facts.cols-5{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .make__facts[class*="cols-"]{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .make__facts[class*="cols-"]{grid-template-columns:1fr}
}