/* shared.css — общие компоненты (frozen). Значения из REST-узлов Figma.
   Брейкпоинты (фикс): 1240 контейнер, 900 планшет (burger), 600 мобайл.
   Page-css НЕ дублирует эти стили. */

/* ===== Кнопки ===== */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-sm);
  padding:16px 18px;font-size:var(--fs-14);line-height:var(--lh-14);font-weight:400;
  white-space:nowrap;transition:opacity .2s,background-color .2s,transform .2s}
.btn__icon{width:20px;height:20px;flex:0 0 auto}
.btn--dark{background:var(--c-brown);color:var(--c-cream)}
.btn--dark .btn__icon{filter:brightness(0) saturate(100%) invert(97%) sepia(6%) saturate(300%) hue-rotate(3deg) brightness(103%)} /* стрелка в крем */
/* fix (клиент): ховера были малоконтрастными. Тёмная кнопка → зелёная (заметный сдвиг),
   зелёная → темнее. */
.btn--dark:hover{background:var(--c-green)}
.btn--green{background:var(--c-green);color:var(--c-cream)}
.btn--green:hover{background:#333b22}
.btn:active{transform:translateY(1px)}

/* Акцент курсив-сериф (Playfair italic 700) — общий, для партиалов (cta и др.) */
.acc{font-family:var(--font-display);font-style:italic;font-weight:700}

.icn-btn{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);background:var(--c-beige)}
.icn-btn--lg{width:56px;height:56px}
.btn--dark.icn-btn{background:var(--c-brown)}
.btn--dark.icn-btn img{filter:brightness(0) invert(1)}

/* ===== Логотип ===== */
.logo{display:inline-flex;align-items:center}
.logo img{width:auto;height:64px}
.logo--light img{filter:brightness(0) invert(1)} /* на тёмном фоне — белый */

/* ===== Header ===== */
/* Figma: шапка — сплошная крем-заливка (не прозрачный оверлей), hero-картинка ниже */
.header{position:relative;z-index:var(--z-header);background:var(--c-cream)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:92px;padding-top:20px;padding-bottom:20px}
.nav{display:flex;align-items:center;gap:25px}
.nav__link{font-size:var(--fs-20);line-height:var(--lh-20);color:var(--c-brown);transition:color .2s}
/* fix (клиент): brown→green был еле различим. Добавляем подчёркивание — явный ховер. */
.nav__link:hover{color:var(--c-green);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.nav__link--static{cursor:default}
/* Выпадашка «Коттеджные поселки» — стиль как список гамбургер-меню */
.nav__item{position:relative;display:flex;align-items:center}
.nav__dropdown{position:absolute;top:100%;left:-20px;z-index:1;
  display:flex;flex-direction:column;gap:16px;min-width:220px;padding:20px 24px;
  background:var(--c-cream);border-radius:var(--r-sm);box-shadow:0 20px 40px rgba(42,43,28,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.nav__item:hover .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav__dropdown .menu__list a{transition:color .2s}
.nav__dropdown .menu__list a:hover{color:var(--c-green);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.nav__sep{font-family:var(--font-display);font-style:italic;font-weight:700;font-size:var(--fs-disp-16);color:var(--c-beige)}
/* Бургер — тёмная залитая плашка-подложка (Figma close/hamburger btn #2A2B1C r8) */
.header__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:56px;height:56px;
  background:var(--c-brown);border-radius:var(--r-sm)}
.header__burger span{display:block;height:2px;width:24px;margin:0 auto;background:var(--c-cream);transition:.2s}

/* ===== Footer ===== */
.footer{background:var(--c-brown);color:var(--c-cream);border-radius:var(--r-lg) var(--r-lg) 0 0}
.footer__inner{padding-top:48px;padding-bottom:48px;display:flex;flex-direction:column;gap:48px}
.footer__cols{display:flex;gap:48px;align-items:stretch}
.footer__nav-wrap{display:flex;flex-direction:column;gap:48px;flex:1 1 0}
.footer__col{display:flex;justify-content:space-between;gap:40px}
.footer__label{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-grey)}
.footer__menu{display:flex;flex-direction:column;gap:24px;text-align:right}
.footer__menu a{font-size:var(--fs-14);line-height:var(--lh-14)}
.footer__menu a:hover{color:var(--c-gold)}
.footer__divider{width:1px;align-self:stretch;background:var(--c-grey)}
/* Контакты: колонка контактов (телефон/сети/часы/кнопка сверху, email/адрес снизу) + лейбл справа */
.footer__contacts{flex:1 1 0;display:flex;gap:40px;align-items:stretch}
.footer__contacts-main{flex:1 1 0;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.footer__contacts-top{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.footer__contacts-phone-nets{display:flex;flex-direction:column;gap:12px}
.footer__phone{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500;white-space:nowrap}
.footer__social{display:flex;gap:18px}
.footer__social a{display:inline-flex}
.footer__social img{width:20px;height:20px;filter:brightness(0) invert(1)}
.footer__hours{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-grey)}
.footer__cta-btn{align-self:flex-start;background:var(--c-cream);color:var(--c-brown);
  border-radius:12px;padding:8px 16px;font-size:var(--fs-20);line-height:var(--lh-20);transition:opacity .2s}
/* fix (клиент): крем-кнопка → золото на ховере (было еле заметное opacity) */
.footer__cta-btn:hover{background:var(--c-gold);opacity:1}
.footer__contacts-bottom{display:flex;flex-direction:column;gap:12px}
.footer__contacts-bottom a{font-size:var(--fs-16);line-height:var(--lh-16);font-weight:500}
.footer__contacts-bottom a:hover{color:var(--c-gold)}
.footer__addr{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-grey)}
.footer__contacts-label{flex:0 0 auto;align-self:flex-start;text-align:right;white-space:nowrap}
.footer__line{border:none;border-top:1px solid var(--c-grey)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer__bottom-col{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-grey);flex:1 1 0}
.footer__bottom-col--right{text-align:right;align-items:flex-end}
.footer__bottom-col a:hover{color:var(--c-gold)}
.footer__dev{color:var(--c-cream);text-decoration:none;transition:opacity .2s}
.footer__dev:hover{opacity:.7}

/* ===== CTA ===== */
.cta{padding-top:72px;padding-bottom:72px}
.cta__card{position:relative;border-radius:var(--r-md) 20px;border-radius:20px;overflow:hidden;
  min-height:460px;padding:40px;display:flex;color:var(--c-cream)}
.cta__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.cta__card::after{content:"";position:absolute;inset:0;background:rgba(42,43,28,.55);z-index:0}
/* Figma: декор — крупные концентрические дуги-окружности, свипающие через весь баннер */
.cta__decor{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none}
.cta__body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;gap:76px;width:100%}
.cta__top{display:flex;justify-content:space-between;gap:40px}
.cta__title{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-tight);max-width:761px}
.cta__brand{display:flex;flex-direction:column;gap:24px;align-items:flex-end}
.cta__brand-btns{display:flex;gap:4px}
.cta__brand-btns .icn-btn{background:var(--c-cream)}
.cta__brand-btns .icn-btn img{width:20px;height:20px}
.cta__bottom{display:flex;flex-direction:column;gap:24px;align-items:flex-end}
.cta__coords{align-self:flex-end;display:flex;flex-direction:column;gap:12px;text-align:right;font-size:var(--fs-20);line-height:var(--lh-20)}
.cta__action{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.cta__text{font-size:var(--fs-24);line-height:var(--lh-24);max-width:960px}

/* ===== Формы ===== */
.form{display:flex;flex-direction:column;gap:24px;width:100%}
.form__head{display:flex;flex-direction:column;gap:18px;text-align:center}
.form__title{font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--c-brown)}
.form__subtitle{font-size:var(--fs-20);line-height:var(--lh-20);font-weight:400;color:var(--c-brown)}
.form__fields{display:flex;flex-direction:column;gap:24px}
.form__row{display:flex;gap:24px}
.form__row .field{flex:1 1 0;min-width:0}
.form__note{font-size:var(--fs-14);line-height:var(--lh-14);color:#969696;text-align:center}
.form__note-accent{color:var(--c-brown);text-decoration:underline;text-underline-offset:2px}
/* Кнопка формы — по центру, hug (Figma btn центрирован, без стрелки) */
.form .btn{align-self:center}
/* Поле: лейбл над инпутом (Figma Onest bold 12/16 #2A2B1C), инпут бежевый */
.field{display:flex;flex-direction:column;gap:12px}
.field__label{font-size:12px;line-height:16px;font-weight:700;color:var(--c-brown)}
.field__input{width:100%;height:56px;padding:0 18px;border:1px solid rgba(255,255,255,.3);border-radius:12px;
  background:var(--c-beige);font-size:var(--fs-14);color:var(--c-brown)}
.field__input--area{height:auto;min-height:56px;padding:16px 18px;resize:vertical;font-family:inherit}
.field__input::placeholder{color:#969696}
.field__input:focus{outline:none;border-color:var(--c-green)}
.checkbox{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-grey)}
.checkbox__input{position:absolute;opacity:0;width:0;height:0}
.checkbox__box{position:relative;flex:0 0 auto;width:20px;height:20px;border:1px solid var(--c-grey);border-radius:4px;margin-top:1px}
.checkbox__box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .12s}
.checkbox__input:checked+.checkbox__box{background:var(--c-green);border-color:var(--c-green)}
.checkbox__input:checked+.checkbox__box::after{opacity:1}
.checkbox__input:focus-visible+.checkbox__box{outline:2px solid var(--c-green);outline-offset:2px}
.checkbox__label a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ===== Попапы ===== */
.popup{position:fixed;inset:0;z-index:var(--z-popup);display:flex;align-items:flex-start;justify-content:center;padding:10px;overflow-y:auto;overscroll-behavior:contain}
.popup[hidden]{display:none}
.popup__overlay{position:fixed;inset:0;background:rgba(0,0,0,.84)}
.popup__card{position:relative;width:610px;max-width:100%;margin:auto;background:var(--c-cream);border-radius:var(--r-lg);padding:48px}
.popup__close{position:absolute;top:24px;right:24px;z-index:2}
.popup__close img{filter:brightness(0) saturate(100%) invert(45%) sepia(6%) saturate(300%) brightness(95%)}
/* Попап политики: широкая карточка, скролл внутри тела, заголовок закреплён сверху. */
.popup__card--policy{width:820px;max-height:calc(100vh - 20px);display:flex;flex-direction:column;padding:40px}
.popup__policy-title{font-size:26px;line-height:1.2;margin:0 40px 20px 0;color:var(--c-green)}
.popup__policy-body{overflow-y:auto;overscroll-behavior:contain;padding-right:12px;-webkit-overflow-scrolling:touch}
.popup__policy-body h2{font-size:18px;line-height:1.3;margin:24px 0 8px;color:var(--c-green)}
.popup__policy-body h2:first-child{margin-top:0}
.popup__policy-body p{font-size:14px;line-height:1.55;margin:0 0 8px;color:var(--c-text,#2a2b1c)}
.popup__policy-body a{color:var(--c-green);text-decoration:underline}
@media(max-width:640px){.popup__card--policy{padding:24px 20px;max-height:calc(100vh - 12px)}.popup__policy-title{font-size:20px}}

/* ===== Мобильное меню ===== */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--c-white)}
.menu[hidden]{display:none}
.menu__panel{display:flex;flex-direction:column;min-height:100%}
.menu__header{display:flex;align-items:center;justify-content:space-between;min-height:96px;padding-top:20px;padding-bottom:20px}
.menu__body{display:flex;flex-direction:column;gap:48px;padding:48px}
.menu__group{display:flex;flex-direction:column;gap:16px}
.menu__label{font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-grey)}
.menu__list{display:flex;flex-direction:column;gap:16px;font-size:var(--fs-20);line-height:var(--lh-20);color:var(--c-brown)}
/* fix (клиент): у ссылок полноэкранного меню не было ховера */
.menu__list a{transition:color .2s}
.menu__list a:hover{color:var(--c-green);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.menu__footer{margin-top:auto;background:var(--c-brown);color:var(--c-cream);padding:48px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.menu__footer .menu__bottom-col{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-14);line-height:var(--lh-14);color:var(--c-grey)}

body.no-scroll{overflow:hidden}

/* Слайдеры: инерционный тач-скролл (iOS) + курсор-хват при драге мышью */
[data-slider-track]{-webkit-overflow-scrolling:touch}
[data-slider-track]:active{cursor:grabbing}

/* ===== Адаптив общих компонентов (планшет расширен до 1080 — iPad Pro 1024) ===== */
@media (max-width:1080px){
  .header__nav,.header__cta{display:none}
  .header__burger{display:flex}
  /* Футер: одна колонка секций, всё по левому краю (Figma 4544:1853) */
  .footer__cols{flex-direction:column;gap:32px}
  .footer__divider{width:auto;height:1px}
  .footer__nav-wrap{flex-direction:row;gap:40px}
  .footer__col{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:16px;justify-content:flex-start}
  .footer__menu{text-align:left}
  .footer__contacts{flex-direction:column;gap:24px}
  .footer__contacts-label{order:-1;text-align:left;align-self:flex-start}
  .footer__contacts-main{flex-direction:row;justify-content:flex-start;gap:40px}
  .footer__contacts-top,.footer__contacts-bottom{flex:1 1 0}
  .cta__title{font-size:44px;line-height:52px}
  /* fix (клиент): на планшете кнопка растягивалась на всю ширину. Figma — компактная (hug).
     Стек текст+кнопка, кнопка по контенту слева (не stretch). Full-width только на мобиле (≤600). */
  .cta__action{flex-direction:column;align-items:flex-start;gap:24px}
}
@media (max-width:600px){
  /* Мобила: контакты сверху, затем 2 колонки навигации, низ по центру (Figma 4545:2377) */
  .footer__contacts{order:1}
  .footer__divider{order:2}
  .footer__nav-wrap{order:3;gap:24px}
  .footer__contacts-main{flex-direction:column;gap:24px}
  .footer__col{gap:16px}
  .footer__menu{text-align:left}
  /* R-53: низ футера по макету — © и «Разработка» по левому краю, лого по центру */
  .footer__bottom{flex-direction:column;align-items:center;text-align:center;gap:24px}
  .footer__bottom-col,.footer__bottom-col--right{flex:none;text-align:center;align-items:center}
  .footer__logo{align-self:center}
  .cta__card{padding:24px}
  .cta__title{font-size:32px;line-height:38px}
  /* CTA мобила (Figma 4545:2189/2191/2192): выключка влево, порядок лого→заголовок→соцкнопки, без вылета */
  .cta__body{gap:48px}
  .cta__top{flex-direction:column;align-items:flex-start;gap:32px}
  .cta__brand{display:contents}
  .cta__logo{order:1}
  .cta__title{order:2}
  .cta__brand-btns{order:3}
  .cta__bottom{align-items:flex-start}
  .cta__coords{align-self:flex-start;text-align:left}
  /* Мобила (Figma): кнопка CTA — на всю ширину, текст по центру */
  .cta__action{align-items:stretch}
  .cta__action .btn{justify-content:center}
  .popup__card{padding:24px}
  .popup__close{top:24px;right:24px}
  .form__row{flex-direction:column}
  .form__title{font-size:28px;line-height:34px}
}

/* --- ic-masks: вынесенные из инлайна mask-иконки (Фаза 0 WP-посадки) --- */
.ic--bus{--m:url('../icons/icon-bus.svg')}
.ic--card{--m:url('../icons/icon-card.svg')}
.ic--city{--m:url('../icons/icon-city.svg')}
.ic--electro{--m:url('../icons/icon-electro.svg')}
.ic--gas2{--m:url('../icons/icon-gas2.svg')}
.ic--hol{--m:url('../icons/icon-hol.svg')}
.ic--house2{--m:url('../icons/icon-house2.svg')}
.ic--infra{--m:url('../icons/icon-infra.svg')}
.ic--kidgarden{--m:url('../icons/icon-kidgarden.svg')}
.ic--kids{--m:url('../icons/icon-kids.svg')}
.ic--list{--m:url('../icons/icon-list.svg')}
.ic--medicine{--m:url('../icons/icon-medicine.svg')}
.ic--mortgage{--m:url('../icons/icon-mortgage.svg')}
.ic--person{--m:url('../icons/icon-person.svg')}
.ic--pin{--m:url('../icons/icon-pin.svg')}
.ic--procent{--m:url('../icons/icon-procent.svg')}
.ic--road{--m:url('../icons/icon-road.svg')}
.ic--scan{--m:url('../icons/icon-scan.svg')}
.ic--map-pin{--m:url('../icons/icon-map-pin.svg')}
.ic--school{--m:url('../icons/icon-school.svg')}
.ic--sport{--m:url('../icons/icon-sport.svg')}
.ic--square{--m:url('../icons/icon-square.svg')}

/* honeypot (Фаза 0 WP) */
.hp-field{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
[data-form-status],[data-form-error]{margin-top:8px;font-size:14px}
[data-form-error]{color:#c0392b}

/* Fix: hero в режиме «фото» — фон должен покрывать бокс (cover), а не показываться в натуре.
   object-fit:cover в базовом классе для фонового div не работает. Касается всех посёлков (photo hero). */
.hero__video--photo, .phero__video--photo{background-size:cover;background-position:center;background-repeat:no-repeat}