/* Страницы сайта Widnia. Кирпичики берём из base.css, здесь — только разметка страниц. */

/* Полоса «это демонстрация» */
.demo-bar__row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
.demo-bar__text { opacity: 0.8; }
.demo-bar__row strong { white-space: nowrap; }

/* Шапка */
.site-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.site-head__row { display: flex; align-items: center; gap: var(--s-4); min-height: 4rem; }
.site-head__logo { display: inline-flex; color: var(--c-ink); }
.logo { height: 28px; width: auto; display: block; }

.site-head__login { white-space: nowrap; }
.site-head__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
}
.site-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-weight: 600; font-size: var(--t-0); padding-block: var(--s-2); }
.site-nav a[aria-current='page'] { color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.35em; }

@media (max-width: 899px) {
  .site-head__row { gap: var(--s-2); }
  .site-head .lang-switch { margin-left: auto; order: 2; }
  .site-head__toggle { margin-left: 0; order: 3; }
  .site-nav { display: none; width: 100%; padding-bottom: var(--s-4); order: 4; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: var(--s-2); }
  .site-head__row { flex-wrap: wrap; }
}
@media (min-width: 900px) {
  .site-head__toggle { display: none; }
  .site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
}

/* Первый экран: фотография во всю ширину, текст поверх затемнения */
.hero {
  position: relative;
  isolation: isolate;
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  z-index: -2;
}
/* Затемнение слева направо: слева текст лежит на плотном фоне, справа видно дом */
.hero__veil {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 12, 14, 0.92) 0%, rgba(10, 12, 14, 0.78) 42%, rgba(10, 12, 14, 0.35) 100%),
    linear-gradient(180deg, rgba(10, 12, 14, 0.45) 0%, transparent 35%);
}
.hero__inner { padding-block: var(--s-9) var(--s-8); display: grid; gap: var(--s-6); }
.hero__text { max-width: 34rem; }
.hero, .hero a:not(.btn), .hero .lead, .hero .eyebrow { color: #f6f5f2; }
.hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.hero .lead { color: #e7e5e0; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.hero .eyebrow { color: #efa63d; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.hero .btn { background: #f6f5f2; color: #16181a; }
.hero .btn:hover { background: #ffffff; color: #16181a; }
.hero .btn--ghost { background: transparent; color: #f6f5f2; border-color: rgba(246, 245, 242, 0.55); }
.hero .btn--ghost:hover { background: rgba(246, 245, 242, 0.14); color: #f6f5f2; }
.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s-6); margin: var(--s-5) 0 0; }
.hero__facts dt { font-size: var(--t--1); color: #e3e0d9; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.hero__facts dd {
  margin: 0; font-family: var(--f-display); font-size: var(--t-3); color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
/* Подпись лежит на фотографии, поэтому под ней своя тёмная плашка —
   иначе читаемость зависела бы от того, что попало в кадр. */
.hero__credit {
  position: absolute; right: var(--s-4); bottom: var(--s-3); margin: 0;
  padding: 0.2rem var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(10, 12, 14, 0.72);
  font-size: var(--t--1); color: #f1efeb;
}
@media (min-width: 62rem) {
  .hero__inner { padding-block: 7rem 6rem; }
}

/* Тёплый градиент переехал на следующий блок */
.section--warm {
  background: linear-gradient(180deg, var(--c-accent-soft), var(--c-bg) 72%);
  border-bottom: 1px solid var(--c-line);
}

/* Внутри карточки заголовок не кричит */
.card h2 { font-size: var(--t-2); }
.card h3 { font-size: var(--t-1); }

/* Сетки */
.grid-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.why-card h3 { font-size: var(--t-1); }
.invest-card img { border-radius: var(--r-sm); border: 1px solid var(--c-line); }

/* Карточка квартиры: план на подложке сверху, под ним цена и удобства.
   Форма у карточек разная — четыре варианта скруглений, план выступает
   за подложку и чуть наклонён, статус висит на краю. */
.unit-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.unit-card--v0 { border-radius: 38px 6px 38px 6px; }
.unit-card--v1 { border-radius: 6px 38px 6px 38px; }
.unit-card--v2 { border-radius: 44px 44px 8px 8px; }
.unit-card--v3 { border-radius: 8px 8px 44px 44px; }

.unit-card__plan {
  position: relative;
  display: grid; place-items: center;
  padding: var(--s-4) var(--s-4) var(--s-3);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--c-accent-soft), transparent 70%),
    var(--c-surface-2);
  border-bottom: 1px solid var(--c-line);
  border-radius: inherit;
  border-end-start-radius: 0; border-end-end-radius: 0;
}
.unit-card__plan img {
  max-height: 150px; width: auto;
  filter: drop-shadow(0 6px 12px rgba(22, 24, 26, 0.12));
  transition: transform 0.2s ease;
}
.unit-card:hover .unit-card__plan img { transform: scale(1.04); }

/* Статус всегда в одном месте — слева сверху, на всех карточках одинаково */
.unit-card__plan .badge {
  position: absolute; top: var(--s-3); left: var(--s-4);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1);
}
.unit-card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); }
.unit-card__price { font-family: var(--f-display); font-size: var(--t-2); margin: 0; }
.unit-card__per { font-family: var(--f-text); font-size: var(--t--1); color: var(--c-ink-2); }
.unit-card__params { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; font-size: var(--t--1); }
.unit-card__params span {
  padding: 0.15rem var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
}
.unit-card__link { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-md); }
.unit-card:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* Удобства: значок и подпись */
.feature-list { list-style: none; margin: var(--s-1) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.chip-feature {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t--1); color: var(--c-ink-2);
}
.chip-feature svg { flex: none; color: var(--c-accent); }
.chip-feature--more { color: var(--c-ink-3); padding-left: calc(16px + var(--s-2)); }
.features-title { font-size: var(--t-0); font-family: var(--f-text); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-2); margin-top: var(--s-2); }

/* Фильтры */
.filters { display: grid; gap: var(--s-4); }
.filters__title { font-size: var(--t-1); }
.filters__grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.filters__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.filters fieldset { border: 0; margin: 0; padding: 0; }
.filters legend { font-weight: 600; font-size: var(--t--1); padding: 0; }
.pair { display: flex; gap: var(--s-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--s-3);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  background: var(--c-surface); font-weight: 600;
}
.chip input:checked + span { background: var(--c-ink); color: var(--c-ink-inverse); border-color: var(--c-ink); }
.chip input:focus-visible + span { box-shadow: var(--ring); }
.check { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--t-0); }
.check input { margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; }

.pager { display: flex; gap: var(--s-3); align-items: center; justify-content: center; }

/* Страница квартиры */
.back-link { font-weight: 600; text-decoration: none; }
.unit-head { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.price-big { font-family: var(--f-display); font-size: var(--t-4); margin: 0; }
.unit-plan { max-width: 320px; }
.facts { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0; }
.facts dt { font-size: var(--t--1); color: var(--c-ink-2); }
.facts dd { margin: 0; font-weight: 600; }
.facts--big dd { font-family: var(--f-display); font-size: var(--t-2); font-weight: 600; }
.list { margin: 0; padding-left: 1.1rem; }
.list li + li { margin-top: var(--s-2); }

.plan-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.plan-legend__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--c-ink); color: var(--c-ink-inverse); font-size: var(--t--1); font-weight: 600;
}

/* График истории цены */
.chart { width: 100%; max-width: 520px; }
.chart__line { stroke: var(--c-accent); stroke-width: 2.5; stroke-linejoin: round; }
.chart__dots circle { fill: var(--c-accent); }
.chart__label { fill: var(--c-ink-2); font: 500 11px var(--f-text), sans-serif; }
.chart__label--end { text-anchor: end; }

/* Комплекс */
.map img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--c-line); margin-block: var(--s-3); }
.map figcaption { line-height: 1.5; }
.scheme figcaption { font-size: var(--t-0); }
.scheme svg { max-height: 320px; }
.map summary { cursor: pointer; font-weight: 600; }
.map iframe { border: 1px solid var(--c-line); border-radius: var(--r-sm); margin-top: var(--s-3); }

/* Форма заявки */
.lead-form { max-width: 34rem; }

/* Документы */
.prose p { max-width: 68ch; }

/* Подвал */
.site-foot { border-top: 1px solid var(--c-line); background: var(--c-surface-2); margin-top: var(--s-9); padding-block: var(--s-7) var(--s-5); }
.site-foot__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.site-foot__logo { display: inline-flex; color: var(--c-ink); }
.site-foot__logo .logo { height: 26px; }
.site-foot__title { font-size: var(--t-0); font-family: var(--f-text); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink-2); }
.site-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-foot__list a { text-decoration: none; }
.site-foot__bottom { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }

/* Телефон: приставка +48 всегда на месте, вводятся только девять цифр */
.phone-field { display: flex; align-items: stretch; }
.phone-field__prefix {
  display: inline-flex; align-items: center;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line-strong); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--c-surface-2);
  color: var(--c-ink-2); font-weight: 600;
}
.phone-field .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* Аватарка вошедшего покупателя в шапке */
.site-head__account { display: inline-flex; align-items: center; gap: var(--s-2); padding-left: 0.3rem; }
.avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface-2);
}
.avatar--letter {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: var(--c-ink-inverse);
  font-size: var(--t--1); font-weight: 700; border-color: transparent;
}
.account-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.account-head .avatar { width: 56px; height: 56px; }
.account-head__who { flex: 1 1 14rem; }
.account-head__out { flex: 0 0 auto; }

/* Свой вход в панель — только у того, кто есть в списке сотрудников. */
.account-staff { border-left: 3px solid var(--c-accent); }

/* Сохранённый телефон: строка со значением и кнопкой «Zmień». */
.saved-field > summary { list-style: none; cursor: pointer; }
.saved-field > summary::-webkit-details-marker { display: none; }
.saved-field__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
}
.saved-field__row:hover { border-color: var(--c-line-strong); }
.saved-field > summary:focus-visible .saved-field__row { outline: none; box-shadow: var(--ring); }
.saved-field__text { display: grid; gap: 2px; min-width: 0; }
.saved-field__label { font-size: var(--t--1); color: var(--c-ink-3); }
.saved-field__value { font-weight: 600; }
.saved-field[open] .saved-field__row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.saved-field__edit {
  padding: var(--s-4); border: 1px solid var(--c-line); border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md); background: var(--c-surface);
}
.saved-field__edit .field { margin: 0; }

/* Меню под аватаркой в шапке. */
.site-head__acc { position: relative; }
.account-menu {
  position: absolute; top: calc(100% + var(--s-2)); right: 0; z-index: 30;
  min-width: 13rem; padding: var(--s-2);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.account-menu__who {
  padding: var(--s-2) var(--s-3); margin: 0;
  font-size: var(--t--1); color: var(--c-ink-3);
  overflow: hidden; text-overflow: ellipsis;
}
.account-menu__item {
  display: block; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); color: var(--c-ink); text-decoration: none;
}
.account-menu__item:hover, .account-menu__item:focus-visible { background: var(--c-surface-2); }
.account-menu__item--out { color: var(--c-error); border-top: 1px solid var(--c-line); border-radius: 0 0 var(--r-sm) var(--r-sm); margin-top: var(--s-1); padding-top: var(--s-3); }