/* ==========================================================================
   Страницы со сказками (/istorii/<тема>/) — общие стили.
   Структура повторяет главную: фиксированный баннер (100vh) + наезжающая секция
   .next-section-overlay с облачным переходом .cloud-wave-divider (классы из style.css).
   Внутри секции: сказка с иллюстрациями -> советы для родителей -> призыв к конструктору.
   ========================================================================== */

/* --- Баннер: фиксированный, как первый экран главной --- */
.story-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    /* НЕ по центру: облачный пояс наезжающей секции идёт по низу баннера, при центрировании
       он перекрывал заголовок и кнопку на невысоких экранах. Как на главной — контент сверху. */
    align-items: flex-start;
    z-index: 1;
    background-color: #2b1a5e;
    background-image: url('/stars-bg.webp'), linear-gradient(160deg, #2b1a5e 0%, #4b2a7a 55%, #7b4fa8 100%);
    background-size: cover, cover;
    background-position: center top, center;
    background-repeat: no-repeat, no-repeat;
}

/* Когда есть главная иллюстрация сказки (задаётся инлайном: --story-bg) */
.story-banner.has-image {
    background-image: linear-gradient(to bottom, rgba(18, 10, 40, .40) 0%, rgba(18, 10, 40, .55) 45%, rgba(18, 10, 40, .78) 100%), var(--story-bg);
    background-size: cover, cover;
    background-position: center center, center 28%;
}

.story-banner-inner {
    padding-top: 150px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.story-title {
    color: #fff;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.12;
    margin-bottom: .6rem;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .5);
}

.story-sub {
    color: rgba(255, 255, 255, .92);
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto 1.6rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* --- Наезжающая секция --- */
/* Контент выше облачного пояса (у .cloud-wave-divider z-index 4), иначе облака перекрывают текст */
.story-section > *:not(.cloud-wave-divider) {
    position: relative;
    z-index: 6;
}

/* Облачный пояс на длинной странице: ограничиваем высоту и не растягиваем картинку по высоте,
   иначе на десктопе (background-size: 100% 100%) облака размазываются на всю длину сказки. */
.story-section .cloud-wave-divider {
    height: 900px;
    background-size: 100% auto;
    background-position: center top;
}

@media (min-width: 1025px) {
    /* Стык секций должен попадать в НЕПРОЗРАЧНУЮ зону картинки облаков (30–46% её высоты),
       иначе обрыв фона баннера просвечивает в «дырках» между облаками и видна ровная линия
       (на главной для этого top: -20vw при ширине <=1024px). Высота картинки = 56.25vw,
       значит 22vw = 39% высоты — середина непрозрачной зоны. Маска в vw, а не в px:
       иначе на другой ширине экрана стык уезжает с закрашенного места. */
    .story-section .cloud-wave-divider {
        top: -22vw;
        -webkit-mask-image: linear-gradient(to bottom, #000 25vw, transparent 33vw);
        mask-image: linear-gradient(to bottom, #000 25vw, transparent 33vw);
    }
}

.story-intro {
    padding-top: 150px;
    text-align: center;
}

.story-h2 {
    font-weight: 700;
    color: #22303f;
    font-size: 1.9rem;
    margin-bottom: 1.75rem;
}

/* --- Текст сказки --- */
.story-text {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.12rem;
    line-height: 1.85;
    color: #22303f;
}

.story-text p { margin-bottom: 1.35rem; }

.story-text .story-placeholder,
.story-advice .story-placeholder {
    padding: 1.6rem;
    border: 2px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
}

/* --- Иллюстрации внутри сказки --- */
.story-figure {
    margin: 2.5rem auto;
    text-align: center;
}

.story-figure img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 16px 38px rgba(21, 33, 61, .16);
}

.story-figure figcaption {
    margin-top: .8rem;
    font-size: .85rem;
    line-height: 1.6;
    color: #8b98a8;
}

/* --- Советы для родителей --- */
.story-advice {
    max-width: 760px;
    margin: 3.5rem auto 0;
    padding: 2.25rem 2rem;
    border-radius: 26px;
    background: linear-gradient(180deg, #f7f3ff 0%, #efe8ff 100%);
    border: 1px solid #e5dbfb;
}

.story-advice .story-h2 { font-size: 1.5rem; }

/* --- Призыв к конструктору --- */
.story-cta {
    max-width: 760px;
    margin: 3rem auto 0;
    padding: 2.5rem 2rem;
    border-radius: 26px;
    background: linear-gradient(180deg, #f3f8ff 0%, #e8f2ff 100%);
    text-align: center;
}

/* --- Адаптив --- */
@media (max-width: 1024px) {
    .story-intro { padding-top: 96px; }
}

@media (max-width: 767px) {
    .story-banner-inner { padding-top: 84px; }
    .story-title { font-size: 1.9rem; }
    .story-sub { font-size: 1rem; }
    .story-intro { padding-top: 80px; }
    .story-h2 { font-size: 1.45rem; }
    .story-text { font-size: 1.02rem; }
    .story-figure { margin: 2rem auto; }
    .story-figure figcaption { font-size: .78rem; line-height: 1.55; }
    .story-advice, .story-cta { padding: 1.6rem 1.15rem; }
}

/* --- Заголовки сцен и подписи с ароматами --- */
.story-scene {
    font-size: 1.32rem;
    font-weight: 700;
    color: #4b2a7a;
    margin: 2.4rem 0 1rem;
}

.story-lead {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    color: #5b6b7c;
    font-size: 1.05rem;
    line-height: 1.6;
}

.story-figure figcaption { text-align: left; }

.scent-label {
    display: block;
    font-weight: 700;
    color: #6b5b8a;
    font-size: .86rem;
    margin-bottom: .3rem;
}

.story-advice-sub {
    color: #6b5b8a;
    font-size: .98rem;
    margin: -.9rem 0 1.6rem;
}

.advice-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #3b2a6b;
    margin: 1.6rem 0 .6rem;
}

.advice-list {
    padding-left: 1.15rem;
    margin-bottom: 1rem;
}

.advice-list li { margin-bottom: .55rem; }

/* Невысокие экраны (ноутбуки с панелями браузера): текст баннера должен укладываться
   выше облачного пояса, иначе облака накрывают заголовок и кнопку */
@media (max-height: 760px) {
    .story-banner-inner { padding-top: 104px; }
    .story-title { font-size: 2.4rem; }
    .story-sub { font-size: 1.05rem; margin-bottom: 1.1rem; }
}

@media (max-height: 620px) {
    .story-banner-inner { padding-top: 92px; }
    .story-title { font-size: 1.95rem; }
    .story-sub { font-size: .95rem; margin-bottom: .85rem; }
}

/* Мобильные: подписи с ароматами заметно мельче текста сказки,
   чтобы не сливались с ним (правило в конце файла — иначе перебивается базовым выше) */
@media (max-width: 767px) {
    .scent-label { font-size: .79rem; }
}
/* Мобильные: мельче, чтобы не сливалось с текстом сказки (в конце файла — иначе перебивается базовым) */
@media (max-width: 767px) {
}

/* --- Заметка с ароматом: сцена есть, иллюстрация ещё не пришла --- */
.story-scent {
    max-width: 760px;
    margin: 1.5rem auto 2rem;
    font-size: .85rem;
    line-height: 1.6;
    color: #8b98a8;
}

/* Мобильные: мельче, чтобы не сливалось с текстом сказки (в конце файла — иначе перебивается базовым) */
@media (max-width: 767px) {
    .story-scent { font-size: .78rem; line-height: 1.55; }
}

/* --- Вопросы для бережного обсуждения (расширенный блок, сказка про лисичку) --- */
.advice-questions {
    list-style: none;
    counter-reset: q;
    padding: 0;
    margin: 1.2rem 0 1.6rem;
}

.advice-questions > li {
    counter-increment: q;
    position: relative;
    padding-left: 2.4rem;
    margin-bottom: 1.35rem;
}

.advice-questions > li:last-child { margin-bottom: 0; }

.advice-questions > li::before {
    content: counter(q);
    position: absolute;
    left: 0;
    top: .12rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #f0e9fb;
    color: #4b2a7a;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advice-q-topic {
    display: block;
    font-weight: 700;
    color: #3b2a6b;
    margin-bottom: .45rem;
}

.advice-q-text {
    margin: 0 0 .5rem;
    color: #3d4a5a;
}

.advice-q-text:last-child { margin-bottom: 0; }

.advice-q-note {
    margin: .5rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: #7c8b9c;
}

.advice-tip {
    margin-top: 1.5rem;
    padding: 1.15rem 1.3rem;
    border-radius: 16px;
    background: #fff9ec;
    border: 1px solid #f3e4c3;
}

.advice-tip-title {
    display: block;
    font-weight: 700;
    color: #8a6d1f;
    margin-bottom: .4rem;
}

.advice-tip p {
    margin: 0;
    color: #4a4433;
    font-size: .96rem;
    line-height: 1.6;
}

/* Мобильные: блок вопросов компактнее (в конце файла — иначе перебивается базовым) */
@media (max-width: 767px) {
    .advice-questions > li { padding-left: 2.1rem; }
    .advice-q-note { font-size: .84rem; }
    .advice-tip { padding: 1rem 1.05rem; }
}

/* --- Памятка для родителей про ароматы (под вводной строкой) --- */
.story-note {
    max-width: 660px;
    margin: -1.6rem auto 2.2rem;
    padding: .85rem 1.15rem;
    border-left: 3px solid #d8c9f0;
    border-radius: 0 12px 12px 0;
    background: #faf7ff;
    font-size: .88rem;
    line-height: 1.6;
    color: #6b7a8c;
}

@media (max-width: 767px) {
    .story-note { margin-top: -1.2rem; font-size: .84rem; padding: .8rem 1rem; }
}