/* ==========================================================================
   Forest 1961 - Home page specific
   ========================================================================== */

/* ==========================================================================
   Intro - обычный блок в потоке документа (без pin/sticky). Текст
   перекрашивается посимвольно по мере скролла: прогресс = как верхний
   край блока приближается к верхнему краю экрана (0% - блок только
   показался снизу, 100% - верхний край блока у верхнего края экрана,
   весь блок при этом ещё виден). Цвета - фирменный коричневый, от
   светлого к тёмному (не серый->чёрный, как было раньше).
   Отступы взяты из референса (thebendclub.com), стандартизированы на
   10rem сверху и снизу (одинаковые, по прямому запросу).
   ========================================================================== */
.home-intro-content {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 4rem var(--container-padding);
}
.home-intro-content p {
    font-size: 1.6rem;
    line-height: 1.3;
    color: var(--color-brown);
    text-align: left;
    margin: 0; /* глобальный p{margin:0 0 1em} ломал симметрию верх/низ у контейнера */
}
.home-intro-content p .char { color: rgba(104, 74, 54, 0.32); }
.home-intro-content p .char.is-revealed { color: var(--color-brown); }

@media (min-width: 900px) {
    .home-intro-content { padding: 6rem var(--container-padding); }
    .home-intro-content p { font-size: 2.4rem; line-height: 1.2; }
}
@media (max-width: 700px) {
    .home-intro-content p { font-size: 1.3rem; }
}

/* ==========================================================================
   Why Forest - список строк (по образцу answers-секции референса):
   слева номер+крупный заголовок, справа описание помельче/приглушённее,
   тонкая линия между строками.
   ========================================================================== */
.why-forest-content {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 6rem var(--container-padding) 5rem;
}
.why-forest-content h2 {
    font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 600;
    margin: 0 auto 2.5rem;
    text-align: left;
}
.why-forest-list { border-top: 1px solid var(--color-stone-line); }
.why-forest-row {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: 2.5rem;
    padding: 2.2rem 0;
    border-bottom: 1px solid var(--color-stone-line);
    align-items: baseline;
}
.why-forest-row-left { display: flex; align-items: baseline; gap: 1.2rem; }
.why-forest-num {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-brown);
    flex-shrink: 0;
}
.why-forest-row-left h3 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.008em;
}
.why-forest-row p { color: #555; line-height: 1.7; margin: 0; max-width: 55ch; }

@media (max-width: 700px) {
    .why-forest-row { grid-template-columns: 1fr; gap: 1rem; padding: 1.6rem 0; }
    .why-forest-content { padding-top: 4rem; }
}


/* ==========================================================================
   Feature split - полноэкранные секции Номера/Ресторан/Впечатления.
   Обычный поток документа (НЕ pin/sticky) - фото слева с параллаксом,
   текстовая панель справа на цветном фоне. Заголовок "разжимается" по
   символам построчно при скролле (transform-origin снизу), текст+кнопка -
   обычный fade-up (.reveal).
   ========================================================================== */
.feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    /* Отступ до "внешнего" контентного края (совпадающего с шапкой) считаем
       отдельно ниже через --outer-inset, а не ограничением всей секции -
       фото должно оставаться full-bleed на широких экранах, только текст
       выравнивается по контейнеру. */
    --outer-inset: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
}
.feature-split-photo { position: relative; overflow: hidden; order: 1; }
.feature-split-photo img {
    position: absolute;
    top: -12%; left: 0;
    width: 100%;
    height: 124%; /* запас по высоте под параллакс-сдвиг, чтобы не было пустых краёв */
    object-fit: cover;
    will-change: transform;
}
.feature-split-text {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* текст справа (обычный порядок) - прижат к правому краю, как кнопка "Забронировать" в шапке */
    padding-top: 4rem;
    padding-bottom: 4rem;
    padding-left: var(--container-padding); /* внутренний край - к фото, обычный отступ */
    padding-right: var(--outer-inset); /* внешний край - до настоящей границы контента, даже если фото full-bleed */
    color: var(--color-text);
}
.feature-split-text > * { max-width: 420px; width: 100%; }
/* Шахматный порядок - каждая вторая секция отражает фото/текст местами */
.feature-split-flip .feature-split-photo { order: 2; }
.feature-split-flip .feature-split-text {
    order: 1;
    align-items: flex-start;
    padding-left: var(--outer-inset);
    padding-right: var(--container-padding);
}

.feature-split-title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 500;
    line-height: 1.15;
    margin-bottom: 1.8rem;
}
/* Каждое слово - отдельный inline-block с overflow:hidden, чтобы "рост"
   символа снизу не показывал видимый обрезок до начала анимации. Слова
   естественно переносятся браузером как обычный текст. */
.feature-split-title .char-word { display: inline-block; overflow: hidden; white-space: nowrap; line-height: inherit; }
.feature-split-title .char {
    display: inline-block;
    line-height: inherit;
    transform-origin: 50% 100%;
    transform: scaleY(0);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.feature-split-title .char.is-grown { transform: scaleY(1); opacity: 1; }

.feature-split-body p { font-size: 1.1rem; line-height: 1.75; margin-bottom: 2rem; color: #555; }

@media (max-width: 800px) {
    .feature-split { grid-template-columns: 1fr; min-height: auto; margin-bottom: 3rem; }
    .feature-split-photo { height: 50vh; }
    .feature-split-text { padding: 3rem var(--container-padding) 2rem; align-items: stretch; }
    /* На мобильном всегда текст первым, независимо от шахматного порядка на десктопе */
    .feature-split-text, .feature-split-flip .feature-split-text { order: 1; align-items: stretch; }
    .feature-split-photo, .feature-split-flip .feature-split-photo { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .feature-split-title .char { transform: none !important; opacity: 1 !important; transition: none !important; }
    .feature-split-photo img { transform: none !important; }
}

/* ==========================================================================
   Reviews - заголовок+рейтинг в обычном контейнере, ниже - бесконечная
   карусель на drag/свайп + автопрокрутка (JS-driven, не CSS-анимация -
   чтобы drag и авто-скролл не конфликтовали друг с другом).
   ========================================================================== */
.reviews-section {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 6rem var(--container-padding) 0;
}
.reviews-header h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 600; margin-bottom: 1rem; }
.reviews-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 1.05rem; }
.reviews-stars, .review-stars { display: inline-flex; gap: 2px; color: var(--color-brown); }
.reviews-stars .review-star, .review-stars .review-star { width: 18px; height: 18px; }
.reviews-see-all {
    margin-left: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-teal);
}
.reviews-see-all:hover { color: var(--color-teal-dark); }

.reviews-carousel-outer {
    width: 100%;
    margin: 2.5rem auto 0;
    padding: 0;
}
.reviews-carousel {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}
.reviews-carousel.is-dragging { cursor: grabbing; }
.reviews-track {
    display: flex;
    gap: 1.5rem;
    will-change: transform;
}
.review-card {
    flex: 0 0 auto;
    width: calc((100vw - 2 * 1.5rem) / 3);
    background: var(--color-stone);
    border-radius: var(--radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    pointer-events: none; /* карточки не должны мешать drag'у (ссылок/кнопок внутри нет) */
}
.review-card .review-stars { margin-bottom: 1rem; }
.review-card .review-stars .review-star { width: 16px; height: 16px; }
.review-text { font-size: 1rem; line-height: 1.65; color: #333; margin-bottom: 1.2rem; flex-grow: 1; }
.review-author { font-size: 0.9rem; font-weight: 600; color: var(--color-brown); margin: 0; }

@media (max-width: 1000px) {
    .review-card { width: calc((100vw - 1.5rem) / 2); } /* 2 карточки на планшете */
}
@media (max-width: 640px) {
    .review-card { width: calc(100vw - 4rem); } /* 1 карточка + край следующей на мобильном */
}

@media (max-width: 700px) {
    .reviews-section { padding-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-carousel { overflow-x: auto; }
}

/* ==========================================================================
   Final CTA - последний блок Главной, одна кнопка по центру
   ========================================================================== */
.final-cta {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 5rem var(--container-padding) 7rem;
    text-align: center;
}
.final-cta-btn { display: inline-flex; }