/* ==========================================================================
   home.css — стили секций главной страницы
   Файл:        assets/templates/2022/css/home.css
   Подключение: чанк styles_2022, сразу ПОСЛЕ brand.css (версия ?v=1.0)
   Все селекторы с префиксом hp- => на внутренних страницах файл инертен.
   ========================================================================== */

/* секции главной: hp-hero, hp-about, hp-cats, hp-steps, hp-works, hp-gallery, hp-form */
section[class^="hp-"]{box-sizing:border-box}
section[class^="hp-"] *,
section[class^="hp-"] *::before,
section[class^="hp-"] *::after{box-sizing:border-box}
section[class^="hp-"] img{max-width:100%}

/* --- Hero (спека 5.2) ----------------------------------------------------- */
.hp-hero{
  position:relative;
  width:100%;
  height:clamp(440px,46vw,620px);
  overflow:hidden;
  background:var(--bd-ink);
}
.hp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(20,37,59,0.88) 0%,rgba(20,37,59,0.55) 42%,rgba(20,37,59,0.10) 72%,rgba(20,37,59,0.05) 100%);
  pointer-events:none;
  z-index:1;
}
.hp-hero .slider.single-item{height:100% !important;margin:0 !important;background:var(--bd-ink)}
.hp-hero .slick-list,
.hp-hero .slick-track,
.hp-hero .slick-slide,
.hp-hero .slick-slide > div{height:100%}
.hp-hero__slide{height:100%}
.hp-hero__img{
  display:block;
  width:100%;
  height:100%;
  min-width:0 !important;
  object-fit:cover;
  object-position:center center;
}
.hp-hero__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  padding:0 clamp(24px,5vw,60px) 48px;
  pointer-events:none;
}
.hp-hero__inner{max-width:620px;width:100%}
.hp-hero__eyebrow{
  font-family:var(--bd-font-body);
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--bd-brass);
  margin:0 0 12px;
}
.hp-hero__title{
  font-family:var(--bd-font-head);
  font-weight:700;
  font-size:clamp(28px,4.2vw,44px);
  line-height:1.2;
  color:var(--bd-white);
  margin:0 0 16px;
}
.hp-hero__sub{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:#D4DAE4;
  margin:0 0 12px;
}
.hp-hero__price{
  display:inline-block;
  font-family:var(--bd-font-body);
  font-weight:800;
  font-size:18px;
  line-height:1.3;
  color:var(--bd-brass);
  text-decoration:none;
  margin:0 0 24px;
  pointer-events:auto;
}
.hp-hero__price:hover{color:var(--bd-brass-hover);text-decoration:none}
.hp-hero__arrow{margin-left:6px}
.hp-hero__actions{display:flex;flex-wrap:wrap;gap:12px;pointer-events:auto}
.hp-hero .slick-dots{
  text-align:right;
  padding:0 clamp(24px,5vw,60px) 0 0;
  margin:0;
  bottom:14px;
  z-index:3;
  pointer-events:auto;
}
.hp-hero .slick-dots li{width:auto;margin:0 4px}
.hp-hero .slick-dots li button{
  width:10px;
  height:10px;
  padding:0;
  border-radius:50%;
  background:rgba(255,255,255,0.45);
  font-size:0;
  line-height:0;
  text-indent:0;
}
.hp-hero .slick-dots li.slick-active button{background:var(--bd-brass)}
.hp-hero .slick-arrow{display:none}
@media (max-width:767px){
  .hp-hero{height:420px}
  .hp-hero::after{
    background:linear-gradient(180deg,rgba(20,37,59,0.90) 0%,rgba(20,37,59,0.65) 60%,rgba(20,37,59,0.35) 100%);
  }
  .hp-hero__overlay{padding:0 24px 40px;align-items:flex-end}
  .hp-hero__title{font-size:28px}
  .hp-hero__actions{flex-direction:column;align-items:stretch;width:100%}
  .hp-hero__actions .bd-btn{width:100%}
  .hp-hero .slick-dots{text-align:center;padding:0 0 10px}
}

/* --- Каталог-плитки (спека 5.3) ------------------------------------------- */
.hp-cats{background:var(--bd-white);padding:var(--bd-section-y) 0}
.hp-cats > .container{max-width:1200px}
.hp-cats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hp-cat{
  position:relative;
  display:block;
  border-radius:var(--bd-radius-tile);
  overflow:hidden;
  background:var(--bd-mist);
  box-shadow:var(--bd-shadow-tile);
  transition:transform 0.25s ease,box-shadow 0.25s ease;
  text-decoration:none;
}
.hp-cat:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(20,37,59,0.16);
  text-decoration:none;
}
.hp-cat__img{display:block;width:100%;height:230px;object-fit:cover}
.hp-cat__ph{
  height:230px;
  background:var(--bd-mist);
  color:var(--bd-text-muted);
  font-family:var(--bd-font-body);
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 16px;
}
.hp-cat__body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:40px 16px 14px;
  color:var(--bd-white);
  background:linear-gradient(0deg,rgba(20,37,59,0.92) 0%,rgba(20,37,59,0.00) 100%);
}
.hp-cat__name{
  font-family:var(--bd-font-head);
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  color:var(--bd-white);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hp-cat__price{
  display:block;
  font-family:var(--bd-font-body);
  font-weight:700;
  font-size:13px;
  line-height:1.3;
  color:var(--bd-brass);
  margin-top:4px;
}
.hp-cat__price--na{color:var(--bd-text-on-dark)}
@media (max-width:991px){.hp-cats__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.hp-cats__grid{grid-template-columns:1fr}}

/* --- Цифры-доказательства (спека 5.4) ------------------------------------ */
.hp-stats{background:var(--bd-ink);padding:56px 0}
.hp-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.hp-stat{min-width:0}
.hp-stat__num{
  font-family:var(--bd-font-head);
  font-weight:700;
  font-size:clamp(30px,3.4vw,40px);
  line-height:1.1;
  color:var(--bd-brass);
}
.hp-stat__label{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.4;
  color:var(--bd-text-on-dark);
  margin-top:6px;
}
@media (max-width:767px){.hp-stats__grid{grid-template-columns:repeat(2,1fr)}}

/* --- Технология: шаги и преимущества (спека 5.5) ------------------------- */
.hp-steps{background:var(--bd-mist-page);padding:var(--bd-section-y) 0}
.hp-steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hp-step{
  background:var(--bd-white);
  border-radius:var(--bd-radius-card);
  padding:22px;
  box-shadow:var(--bd-shadow-card);
}
.hp-step__num{
  font-family:var(--bd-font-head);
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  color:var(--bd-brass);
}
.hp-step__title{
  font-family:var(--bd-font-head);
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  color:var(--bd-ink);
  margin:8px 0 6px;
}
.hp-step__text{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.55;
  color:var(--bd-text-muted);
  margin:0;
}
.hp-steps__why{max-width:820px;margin:44px auto 0;text-align:center}
.hp-steps__why-title{
  font-family:var(--bd-font-head);
  font-weight:600;
  font-size:17px;
  line-height:1.35;
  color:var(--bd-ink);
  margin:0 0 10px;
}
.hp-steps__why-text{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  color:var(--bd-text-muted);
  margin:0 0 12px;
}
.hp-steps__why-link{
  font-family:var(--bd-font-body);
  font-weight:600;
  font-size:15px;
  color:var(--bd-ink);
  text-decoration:underline;
}
.hp-steps__why-link:hover{color:var(--bd-brass)}
.hp-steps__perks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:44px 0 0;
  padding:0;
  list-style:none;
}
.hp-perk{display:flex;align-items:flex-start;gap:14px}
.hp-perk__icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--bd-brass);
  color:var(--bd-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.hp-perk__icon .icon{font-size:18px;line-height:1}
.hp-perk__title{
  font-family:var(--bd-font-head);
  font-weight:600;
  font-size:15px;
  line-height:1.35;
  color:var(--bd-ink);
  margin:0 0 4px;
}
.hp-perk__text{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:14px;
  line-height:1.55;
  color:var(--bd-text-muted);
  margin:0;
}
@media (max-width:991px){
  .hp-steps__grid{grid-template-columns:repeat(2,1fr)}
  .hp-steps__perks{grid-template-columns:1fr}
}
@media (max-width:575px){.hp-steps__grid{grid-template-columns:1fr}}

/* --- Мы сделали (спека 5.6) ----------------------------------------------- */
.hp-works{background:var(--bd-white);padding:var(--bd-section-y) 0}
.hp-works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hp-work{
  display:block;
  border-radius:var(--bd-radius-card);
  overflow:hidden;
  background:var(--bd-white);
  box-shadow:var(--bd-shadow-card);
  text-decoration:none;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
}
.hp-work:hover{
  transform:translateY(-4px);
  box-shadow:var(--bd-shadow-card-hover);
  text-decoration:none;
}
.hp-work__img{display:block;width:100%;height:180px;object-fit:cover}
.hp-work__cap{
  padding:12px 14px;
  font-family:var(--bd-font-body);
  font-weight:600;
  font-size:13px;
  line-height:1.4;
  color:var(--bd-text);
}
@media (max-width:991px){.hp-works__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.hp-works__grid{grid-template-columns:1fr}}

/* --- Эллинги (спека 5.7) ------------------------------------------------- */
.hp-ellings{
  background:var(--bd-ink);
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.hp-ellings__media{
  flex:0 0 50%;
  width:50%;
  min-height:420px;
  background:var(--bd-ink-soft);
}
.hp-ellings__img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover}
.hp-ellings__body{
  flex:1 1 50%;
  width:50%;
  padding:56px clamp(24px,5vw,60px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:var(--bd-white);
}
.hp-ellings__title{
  font-family:var(--bd-font-head);
  font-weight:700;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.25;
  color:var(--bd-white);
  margin:0 0 14px;
}
.hp-ellings__sub{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  color:var(--bd-text-on-dark);
  margin:0 0 22px;
}
.hp-ellings__link{
  font-family:var(--bd-font-body);
  font-weight:600;
  font-size:15px;
  color:var(--bd-brass);
  text-decoration:underline;
  align-self:flex-start;
}
.hp-ellings__link:hover{color:var(--bd-brass-hover);text-decoration:underline}
.hp-ellings a{color:var(--bd-brass)}
.hp-ellings .b24-cntnt-block a{color:var(--bd-brass)}
.hp-ellings .b24-cntnt-block label,
.hp-ellings .b24-cntnt-block span{color:var(--bd-white)}
@media (max-width:991px){
  .hp-ellings__media,.hp-ellings__body{width:100%;flex:0 0 100%}
  .hp-ellings__media{height:300px;min-height:300px}
  .hp-ellings__img{height:300px;min-height:300px}
  .hp-ellings__body{padding:40px 24px}
}

/* --- Форма (спека 5.8) ---------------------------------------------------- */
.hp-form{
  background:linear-gradient(135deg,#14253B 0%,#1E3557 100%);
  padding:var(--bd-section-y) 0;
  text-align:center;
  color:var(--bd-white);
}
.hp-form__title{
  font-family:var(--bd-font-head);
  font-weight:700;
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.25;
  color:var(--bd-white);
  margin:0;
}
.hp-form__sub{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--bd-text-on-dark);
  margin:10px 0 28px;
}
.hp-form__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start}
.hp-form__row .bd-field{flex:0 1 260px}
.hp-form__row .bd-btn{flex:0 0 auto}
.hp-form__form{margin:0}
.hp-form form{margin:0}
.hp-form__consent{
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.72);
  margin:18px auto 0;
  max-width:640px;
}
.hp-form__consent-link{color:var(--bd-brass);text-decoration:underline}
.hp-form__consent-link:hover{color:var(--bd-white);text-decoration:none}
.hp-form .snackbar{background:var(--bd-white);color:var(--bd-ink)}
@media (max-width:575px){
  .hp-form__row{flex-direction:column;align-items:stretch}
  .hp-form__row .bd-field{width:100%;flex:0 0 auto;min-width:0}
  .hp-form__row .bd-btn{width:100%}
}

/* --- Карта (спека 5.9) ---------------------------------------------------- */
.hp-map{background:var(--bd-white);padding:0 0 40px}
.hp-map__link{
  text-align:center;
  margin:0 0 28px;
  font-family:var(--bd-font-body);
  font-weight:400;
  font-size:15px;
  line-height:1.5;
}
.hp-map__link a{text-decoration:underline}
.hp-map__box{width:100%;overflow:hidden}