/* ============================================================================
   СТРАНИЦА-РАССКАЗ planshefa.online (задача заказчика 10, `templates/web/story.html`).

   ⚠️ ЗДЕСЬ ТОЛЬКО РАСКЛАДКА РАССКАЗА. Цвета, шрифт, кнопки, карточки, плитки тарифов и
   «Вопрос — ответ» — общие детали `site.css` (правило «сайт = приложение», №177/№185): своих
   цветов в этом файле нет, только переменные палитры — поэтому тёмная тема работает сама.

   ⚠️ Размеры — в `rem`, как во всём сайте: масштаб задаёт `site.css` от ширины экрана (эталон —
   Pixel 8, 412 точек). Пиксели — только в условиях медиазапросов и в ширине колонки.
   ⚠️ Отдельным файлом, а не в конце `site.css`: тот правят параллельно, а метка `?v=` считается
   по всем стилям папки (`web/context.py`), так что правка здесь до браузера дойдёт.
   ============================================================================ */

/* Колонка рассказа: шире телефонной — это витрина, а не экран приложения. */
.st-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

/* --- Шапка: робот с названием и «Открыть» --- */
.st-top {
    position: sticky; top: 0; z-index: 10;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
    border-bottom: 0.0625rem solid var(--outline);
}
.st-top-in { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3.5rem; }

/* --- Первый экран --- */
.st-hero { display: grid; gap: 1.5rem; align-items: center; padding: 1.75rem 0 0.25rem; }
.st-hero h1 { font-size: 2rem; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; margin: 0 0 0.75rem; }
.st-lead { font-size: 1.0625rem; line-height: 1.5; color: var(--text-muted); margin: 0 0 1.25rem; }
/* На телефоне кнопки одна под другой во всю ширину, на широком — рядом. */
.st-actions .btn { flex: 1 1 13rem; }
.st-note { margin: 0.875rem 0 0; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }
.st-hero-shot { display: flex; justify-content: center; }

/* Снимок экрана в белой рамке — как на «Знакомстве» (`.wel-frame`): поле 5, скругление 21. */
.st-phone, .st-shot {
    display: block; padding: 0.3125rem;
    background: var(--surface);
    border: 0.0625rem solid var(--outline);
    border-radius: 1.3125rem;
}
.st-phone { width: min(100%, 15rem); box-shadow: var(--shadow-pop); }
.st-shot { width: min(100%, 13rem); justify-self: center; box-shadow: var(--shadow-card); }
.st-phone img, .st-shot img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius-card);
    background: var(--shot-backdrop);
}
/* Вертикальный ролик занимает место снимка; 45vh — уже подготовленный предел ширины плеера на ПК. */
.st-phone.st-phone-player { width: min(100%, 45vh); }
.st-phone-player video, .st-phone-player iframe {
    display: block; width: 100%; aspect-ratio: 9 / 16;
    border: 0; border-radius: var(--radius-card); background: #000;
}
.st-phone-player video { object-fit: contain; }

/* --- Разделы --- */
.st-section { margin: 2.25rem 0 0; }
.st-section > .land-title { margin-top: 0; }
.st-text { font-size: 1rem; line-height: 1.5; margin: 0 0 1rem; max-width: 46rem; }

/* Короткие факты плитками. */
.st-facts {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.st-facts li { background: var(--green-container); border-radius: var(--radius-card); padding: 0.875rem 1rem; }
.st-facts b { display: block; font-size: 1.125rem; line-height: 1.375rem; font-weight: 800; color: var(--green-accent); }
.st-facts span { display: block; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted); }

/* --- Шаги: номер, заголовок, текст; снимок экрана справа на широком, снизу на узком --- */
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.card.st-step { margin: 0; display: grid; gap: 1rem; padding: 1.125rem; }
.st-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-bottom: 0.5rem; border-radius: 50%;
    background: var(--btn-green); box-shadow: var(--glow-green);
    color: #fff; font-size: 1rem; font-weight: 800;
}
.st-step h3 { margin: 0 0 0.5rem; font-size: 1.25rem; line-height: 1.5rem; font-weight: 800; }
.st-step p { margin: 0 0 0.625rem; font-size: 0.9375rem; line-height: 1.375rem; }
.st-step p:last-child { margin-bottom: 0; }

/* Списки со значком: «меню слушается вас», «бесплатно / Plus». */
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.st-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.9375rem; line-height: 1.375rem; }
.st-list li > .ic { color: var(--green-accent); margin-top: 0.0625rem; }
/* Метка «Plus» у платного — общая оранжевая плашка (оранжевый на сайте = подписка). */
.badge.st-plus { padding: 0.0625rem 0.4375rem; font-size: 0.75rem; line-height: 1rem; vertical-align: 0.125rem; }

/* --- Аллергии: зелёная карточка со щитом --- */
.card.st-accent {
    display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 1.25rem;
    background: var(--green-container);
    box-shadow: inset 0 0 0 0.0625rem var(--green-border-soft), var(--shadow-card);
}
.st-accent-ic {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--btn-green); box-shadow: var(--glow-green); color: #fff;
}
.st-accent-ic .ic { width: 1.625rem; height: 1.625rem; }
.st-accent h2 { margin: 0 0 0.5rem; font-size: 1.375rem; line-height: 1.6875rem; font-weight: 800; }
.st-accent p { margin: 0 0 0.625rem; font-size: 0.9375rem; line-height: 1.375rem; }
.st-accent p:last-child { margin-bottom: 0; }

/* --- Кому подойдёт: общие плитки `.feature`. На телефоне — одна под другой, шире — ДВЕ В РЯД
   (2×2, просьба заказчика 24.09.2026): в четыре колонки заголовки ломались на три строки, а
   текст стоял узким столбиком по три слова. --- */
.story .features { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
.st-f-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; margin-bottom: 0.625rem; border-radius: 50%;
    background: var(--green-container); color: var(--green-accent);
}
.st-f-ic .ic { width: 1.375rem; height: 1.375rem; }

/* --- Бесплатно и Plus --- */
.st-cols { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.st-cols .card { margin: 0; }
.st-cols h3 { margin: 0 0 0.75rem; font-size: 1.125rem; line-height: 1.375rem; font-weight: 800; }
.card.st-plus-card { box-shadow: inset 0 0 0 0.0625rem var(--orange-border), var(--shadow-card); }
.st-plus-card .st-checks li > .ic { color: var(--orange); }
.plans.st-plans { margin-top: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* --- Вопросы: общие карточки «Вопрос — ответ», кегль крупнее — это витрина, а не справка.
   ⚠️ ОДНОЙ КОЛОНКОЙ на любой ширине (просьба заказчика 24.09.2026): в две колонки раскрытый ответ
   растягивал строку, и соседний вопрос висел над пустотой. --- */
.st-faq .faq-item > summary .grow { font-size: 1rem; line-height: 1.375rem; }
.st-faq .faq-answer { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.375rem; }

/* --- Скачать и попробовать --- */
#download [data-app-download] { margin-bottom: 0.875rem; }
.card.st-final { margin: 0; padding: 1.5rem 1.25rem; text-align: center; }
.st-final h2 { font-size: 1.375rem; line-height: 1.6875rem; }
.st-final p { margin: 0 0 1rem; }
.st-final .btn { min-width: min(100%, 18rem); }

/* --- Подвал. ⚠️ Запас снизу у `.footer` в `site.css` — под нижнее меню приложения; у рассказа
   меню нет, и запас был бы пустой полосой. --- */
.footer.st-footer { margin: 2.5rem 0 0; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
/* ⚠️ Только строки-ссылки подвала, а не кружки соцсетей: у `.social` своя раскладка по центру. */
.st-footer .st-wrap > a { display: inline-block; margin: 0 0.875rem 0.5rem 0; }
/* ⚠️ Подпись в кружке — белая: общее `.footer a` (серые ссылки подвала) сильнее `.social` и
   красило «MAX» и «VK» серым по цветному кружку. */
.footer.st-footer .social { color: #fff; }

/* Узкому планшету оставляем одну колонку: в двух заголовки ломались на три строки. */
@media (min-width: 680px) {
    .story .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ⚠️ ДВЕ КОЛОНКИ — ОТ 900 px, как меню слева у сайта. На планшете (768) колонка текста рядом со
   снимком выходила в треть экрана, и заголовок первого экрана ломался на четыре строки. */
@media (min-width: 900px) {
    .st-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); padding-top: 2.5rem; }
    .st-hero h1 { font-size: 2.5rem; }
    .st-phone { width: min(100%, 16rem); }
    .card.st-step { padding: 1.5rem; }
    .card.st-step.has-shot { grid-template-columns: minmax(0, 1fr) 13rem; align-items: center; gap: 1.75rem; }
    /* auto-fit сжимает ряд до трёх фактов, если в пустом каталоге нет числа рецептов. */
    .st-facts { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}
@media (max-width: 480px) {
    .card.st-accent { flex-direction: column; }
}