/* ============================================================
   Дополнения к styles.css из экспорта.
   Отдельным файлом, чтобы styles.css можно было заменить
   при обновлении дизайна. Подключается после него.
   ============================================================ */

/* ------------------------------------------------------------
   Property Services — панели.
   В экспорте ширина задавалась инлайн-стилями из JS
   (flex: 0 0 55% / 15%). Здесь то же через класс is-active,
   анимация — transition на flex.
   ------------------------------------------------------------ */
.va-panel{flex:0 0 15%;min-width:0;transition:flex .5s cubic-bezier(.25,.1,.25,1)}
.va-panel.is-active{flex:0 0 55%}

.va-panel img{transform:scale(1.05);filter:grayscale(1);transition:transform .5s,filter .5s}
.va-panel.is-active img{transform:scale(1);filter:none}

.va-panel__veil{background:rgba(0,0,0,.7)}
.va-panel.is-active .va-panel__veil{background:rgba(0,0,0,.5)}

.va-panel__n{color:rgba(255,255,255,.8)}
.va-panel.is-active .va-panel__n{color:var(--color-wf-accent,#ff5900)}

.va-panel__vert{writing-mode:vertical-rl;transform:rotate(180deg);display:block}
.va-panel.is-active .va-panel__vert{display:none}

.va-panel__open{display:none}
.va-panel.is-active .va-panel__open{display:block;animation:va-fade .45s .1s both}
@keyframes va-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------
   Аккордеон услуг на мобильном
   ------------------------------------------------------------ */
.va-row__body{height:0;overflow:hidden;transition:height .4s cubic-bezier(.25,.1,.25,1)}
.va-row.is-open .va-row__plus{transform:rotate(45deg)}

/* ------------------------------------------------------------
   Лайтбокс галереи (в экспорте жил внутри JS-бандла)
   ------------------------------------------------------------ */
.va-lightbox{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;
  background:rgba(22,21,26,.94);padding:clamp(1rem,4vw,3rem);
}
.va-lightbox.is-open{display:flex;animation:va-fade .25s both}
.va-lightbox__img{max-width:100%;max-height:85vh;object-fit:contain;border-radius:8px}
.va-lightbox__close,.va-lightbox__nav{
  position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;
  width:48px;height:48px;border-radius:12px;font-size:1.6rem;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:background .2s;
}
.va-lightbox__close:hover,.va-lightbox__nav:hover{background:rgba(255,255,255,.22)}
.va-lightbox__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.va-lightbox__prev{left:clamp(.5rem,2vw,2rem)}
.va-lightbox__next{right:clamp(.5rem,2vw,2rem)}
.va-lightbox__count{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:.85rem;letter-spacing:.04em;
}
@media(max-width:640px){.va-lightbox__nav{width:40px;height:40px;font-size:1.3rem}}

/* ------------------------------------------------------------
   Доступность: видимый фокус. В экспорте он был снят вместе
   с обнулением стилей кнопок; WCAG 2.2 AA в условиях приёмки.
   ------------------------------------------------------------ */
:focus-visible{outline:2px solid var(--color-wf-accent,#ff5900);outline-offset:3px;border-radius:4px}

/* ------------------------------------------------------------
   Типографика текста из редактора.
   В экспорте весь текст приходил из кода с готовыми классами
   на каждом абзаце. Теперь его пишет менеджер, и там обычные
   <p>, <h2>, <ul> — оформляем их централизованно.
   ------------------------------------------------------------ */
.prose-vibe{color:var(--color-wf-ink-soft,#5c5f63);line-height:1.7}
.prose-vibe > * + *{margin-top:1.15em}
.prose-vibe h2{font-family:'Instrument Serif',ui-serif,Georgia,serif;font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.2;color:var(--color-wf-ink,#242629);margin-top:2.4em}
.prose-vibe h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:600;color:var(--color-wf-ink,#242629);margin-top:1.8em}
.prose-vibe p{margin:0}
.prose-vibe a{color:var(--color-wf-accent,#ff5900);text-decoration:underline;text-underline-offset:3px}
.prose-vibe strong{color:var(--color-wf-ink,#242629);font-weight:600}
.prose-vibe ul,.prose-vibe ol{padding-left:1.25em;margin:0}
.prose-vibe li + li{margin-top:.5em}
.prose-vibe ul{list-style:disc}
.prose-vibe ol{list-style:decimal}
.prose-vibe img{border-radius:14px;margin-block:2em}
.prose-vibe blockquote{border-left:2px solid var(--color-wf-accent,#ff5900);padding-left:1.25em;font-size:1.1em;color:var(--color-wf-ink,#242629)}
.prose-vibe hr{border:0;border-top:1px solid var(--color-wf-line,#e6e3dd);margin-block:2.5em}
.prose-vibe table{width:100%;border-collapse:collapse;font-size:.95em}
.prose-vibe th,.prose-vibe td{text-align:left;padding:.85em 0;border-bottom:1px solid var(--color-wf-line,#e6e3dd);vertical-align:top}
.prose-vibe th{color:var(--color-wf-ink-faint,#8a8d91);font-weight:400;width:38%}
.prose-vibe td{color:var(--color-wf-ink,#242629);font-weight:500}
.prose-vibe table,.prose-vibe pre{display:block;overflow-x:auto;max-width:100%}

/* Картинки в тексте не прыгают при загрузке.
   Правило намеренно ограничено .prose-vibe: в макете много картинок
   с классом h-full внутри блоков фиксированной высоты, и глобальный
   height:auto заставлял их вылезать за секцию — именно это ломало
   блоки Dining и Services. */
.prose-vibe img[width][height]{height:auto}

@media(prefers-reduced-motion:reduce){
  .va-panel,.va-panel img,.va-row__body{transition:none!important}
}

/* ============================================================
   Утилиты, которых нет в styles.css.
   Экспортный CSS собран только под те классы, что встречались
   в исходной разметке. Наши чанки используют ещё несколько —
   без этих правил блоки разъезжаются. Именно по этой причине
   ломались Dining, Services и секция Advantages.
   ============================================================ */
.pointer-events-none{pointer-events:none}
.inset-y-0{top:0;bottom:0}
.max-w-5xl{max-width:64rem}
.max-w-\[24rem\]{max-width:24rem}
.max-w-\[60ch\]{max-width:60ch}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.aspect-square{aspect-ratio:1/1}
.min-h-56{min-height:14rem}
.px-\[18px\]{padding-left:18px;padding-right:18px}
.space-y-2 > * + *{margin-top:.5rem}
.hover\:scale-\[1\.02\]:hover{transform:scale(1.02)}

@media (min-width:1024px){
  .lg\:grid-cols-\[1fr_minmax\(0\2c 560px\)\]{grid-template-columns:1fr minmax(0,560px)}
  .lg\:grid-cols-\[1fr_minmax\(0\2c 520px\)\]{grid-template-columns:1fr minmax(0,520px)}
}

/* ============================================================
   ВАЖНО: контент не должен зависеть от JavaScript.

   В styles.css у .reveal-up стоит opacity:0, и видимым блок
   становится только когда скрипт навесит .is-in. Если скрипт
   не загрузился, не выполнился или закэшировалась старая версия —
   половина страницы просто исчезает. Именно это и произошло
   с блоками Our Projects, Property Services и Advantages.

   Решение: по умолчанию всё видно. Прятать разрешаем только
   когда скрипт подтвердил свою работоспособность, добавив
   класс js-reveal на <html> (делается инлайном в <head>,
   до отрисовки, чтобы не было моргания).
   ============================================================ */
.reveal-up{opacity:1;transform:none}
html.js-reveal .reveal-up:not(.is-in){opacity:0;transform:translateY(16px)}

.reveal-word{opacity:1;transform:none}
html.js-reveal [data-words] .reveal-word{opacity:0;transform:translateY(10px)}

@media(prefers-reduced-motion:reduce){
  .reveal-up,.reveal-word{opacity:1!important;transform:none!important}
}
/* ============================================================
   Недостающие утилиты.
   styles.css собран только под классы из исходного экспорта,
   поэтому всё, чего там не было, нужно описывать здесь.
   ============================================================ */
.pl-4{padding-left:1rem}
.pr-\[5px\]{padding-right:5px}
.pt-2{padding-top:.5rem}
.gap-1{gap:.25rem}
.text-\[15px\]{font-size:15px}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.bg-\[rgba\(36\2c 38\2c 41\2c 0\.06\)\]{background-color:rgba(36,38,41,.06)}


.hdr-over:not(.is-solid){
  background:transparent;
  border-color:transparent;
  backdrop-filter:none;
}
.hdr-over:not(.is-solid) .text-wf-ink,
.hdr-over:not(.is-solid) .text-wf-ink-soft{color:#fff}
.hdr-over:not(.is-solid) .border-wf-line-strong{border-color:rgba(255,255,255,.35)}
.hdr-over:not(.is-solid) .bg-\[rgba\(36\2c 38\2c 41\2c 0\.06\)\]{background-color:rgba(255,255,255,.14)}
.hdr-over:not(.is-solid) .hover\:bg-\[rgba\(36\2c 38\2c 41\2c 0\.1\)\]:hover{background-color:rgba(255,255,255,.22)}
.hdr-over{transition:background-color .3s ease,border-color .3s ease}
.hdr-over .text-wf-ink,
.hdr-over .text-wf-ink-soft{transition:color .3s ease}

.home-main #top{position:sticky;top:0;z-index:0}
.home-main > :not(#top){position:relative;z-index:1;background:var(--color-wf-bg)}
.h-\[420px\]{height:420px}
@media(max-width:640px){.h-\[420px\]{height:300px}}
/* ============================================================
   Карточки-плашки. Используются в Dining и About.
   ============================================================ */
.va-card{
  position:relative;display:flex;flex-direction:column;
  min-height:200px;padding:2rem;
  border-radius:18px;background:var(--color-wf-surface,#f1efe9);
  border:1px solid var(--color-wf-line,#e6e3dd);
  transition:transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s;
}
.va-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.06)}

.va-card--accent{
  background:var(--color-wf-accent,#ff5900);
  border-color:var(--color-wf-accent,#ff5900);
}

.va-card__title{
  font-size:clamp(1.4rem,2vw,1.75rem);font-weight:600;letter-spacing:-.02em;
  color:var(--color-wf-ink,#242629);margin:0;
}
.va-card__value{
  font-size:clamp(2.75rem,4.5vw,4rem);font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--color-wf-ink,#242629);margin:0;
}
.va-card__text{
  margin:1rem 0 0;font-size:1.0625rem;line-height:1.45;
  color:var(--color-wf-ink-soft,#5c5f63);
}
.va-card__num{
  margin-top:auto;padding-top:1.5rem;
  font-size:.8125rem;font-weight:500;letter-spacing:.08em;
  color:var(--color-wf-ink-faint,#8a8d91);
}

/* На акцентной карточке весь текст белый */
.va-card--accent .va-card__title,
.va-card--accent .va-card__value{color:#fff}
.va-card--accent .va-card__text{color:rgba(255,255,255,.85)}
.va-card--accent .va-card__num{color:rgba(255,255,255,.75)}

@supports (corner-shape: squircle){
  .va-card{corner-shape:squircle}
}

/* ============================================================
   Утилиты, которых нет в styles.css.
   Без них сетки схлопываются в столбик.
   ============================================================ */
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
@media(min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ============================================================
   Слайдер в шапке страницы.
   Картинки лежат стопкой, видна одна — переключение меняет
   прозрачность. Без JS остаётся видна первая, то есть страница
   не ломается при отключённых скриптах.
   ============================================================ */
.va-slider{position:relative}
.va-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s cubic-bezier(.25,.1,.25,1);
}
.va-slide.is-active{opacity:1}

.va-slider__dots{
  position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);
  display:flex;gap:.5rem;z-index:2;
}
.va-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:99px;
  background:rgba(255,255,255,.45);cursor:pointer;
  transition:background .25s,width .25s;
}
.va-dot.is-active{background:#fff;width:24px}
.va-dot:hover{background:rgba(255,255,255,.75)}

@media(prefers-reduced-motion:reduce){
  .va-slide{transition:none}
}