/*
 * promo.css — лендинг yasnavizhu.ru. Слой ПОВЕРХ ядра: tokens.css → components.css
 * → common.css → этот файл. Своего :root здесь нет и быть не может, кнопки, витрины,
 * плитки и этикетки берутся из components.css.
 *
 * Зачем отдельный файл, если приложение уже собрано: лендинг — единственная страница,
 * которую смотрят с монитора, а не с телефона. Отсюда всё, что здесь есть, и ничего
 * сверх: широкая колонка, музейный ритм секций и обложка крупнее экранного заголовка.
 *
 * Ритм страницы — из источника направления (LogoArchive, DESIGN.md §0): центрированный
 * заголовок → экспонат → заголовок → экспонат. Это лекарство от прежнего лендинга, где
 * семь блоков подряд были одной конструкции и низ страницы переставали читать.
 *
 * Скрипта на странице нет ни одного — и блоков, спрятанных до его отработки, тоже
 * (задача #1150: страница показывалась пустой, если скрипт не отработал).
 */

/* ── Колонка и ритм ───────────────────────────────────────────────────── */

/* Лендинг шире экрана приложения: --container 520px — размер под телефон в оболочке. */
.promo { width: 100%; max-width: 1120px; padding: 0 var(--gutter); margin: 0 auto; }

/* Секция = один разворот музея. Разрыв между ними крупный: это пауза, а не отступ. */
.promo-sec {
    width: 100%;
    padding: clamp(64px, 11vw, 128px) 0;
}
/* Полосы тона чередуются: разворот с экспонатом уходит на слой глубже холста.
   Границы между секциями рисует тон, а не линия. */
.promo-sec--deep { background: var(--edge); }

.promo-sec__head { max-width: 46ch; margin: 0 auto calc(var(--space-6) * 1.5); }
/* Подзаголовок раздела читают с монитора, а не с телефона: 14px здесь — мелкий
   текст под заголовком в 60px, а не «вторичная строка». */
.promo-sec__head .subtitle { margin-top: var(--space-5); font-size: var(--fs-base); }

/* ── Шапка и обложка ──────────────────────────────────────────────────── */

/* Шапка лендинга — только логотип по центру. Общий `header` из common.css здесь не
   годится: он флекс шириной с экран приложения (520), и логотип на телефоне уезжал
   за левый край. Ссылок в шапке нет намеренно — страница ведёт в одну дверь. */
.promo-top {
    display: block; width: 100%; max-width: none;
    padding: var(--space-6) var(--gutter) 0;
    text-align: center;
}
.promo-logo { height: clamp(48px, 9vw, 64px); width: auto; max-width: 100%; }

.promo-hero { padding: clamp(40px, 7vw, 72px) 0 clamp(56px, 9vw, 96px); text-align: center; }

/* Обложка крупнее заголовка экрана: на мониторе 48px — это подзаголовок, а не
   обложка. Перепад кегля к тексту держим им, а текст ниже 16px не опускаем. */
.promo-hero .title { font-size: var(--fs-display); }
.promo-hero .subtitle {
    max-width: 36ch; margin: var(--space-6) auto 0;
    font-size: var(--fs-lg);
}

/* Одно золотое действие. Кнопка не тянется во всю колонку — на мониторе это полоса. */
.promo-act { max-width: 340px; margin: var(--space-6) auto 0; }
.promo-act--wide { max-width: 380px; }

/* Строка под кнопкой: чем платим и чем не платим. */
.promo-fine { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--mark); text-align: center; }

/* ── Экспонат: настоящие карты колоды ─────────────────────────────────── */

/* Три карты в ряд — витрина обложки. Никакого веера и наклонов: движения и
   трансформаций в направлении нет, экспонат висит ровно. */
.promo-deck {
    display: flex; justify-content: center; gap: clamp(6px, 2vw, 20px);
    margin: clamp(40px, 7vw, 72px) calc(var(--gutter) * -1) 0;
}
.promo-deck img {
    width: clamp(118px, 30vw, 230px); height: auto; display: block;
    border: 1px solid var(--hair);
    border-radius: var(--radius-sm);
}

/* Витрина-строка «карта дня»: тот же компонент, что на главной приложения, но
   экспонат крупнее — здесь он единственный на разворот. */
.promo-daily { max-width: 640px; margin: 0 auto; padding: var(--space-6); }
.promo-daily.case--row > .deck-card { width: clamp(104px, 26vw, 168px); }

/* ── Плитки услуг ─────────────────────────────────────────────────────── */

/* Две колонки — правило приложения. На мониторе колонка 1120px, и две плитки в ней
   растягиваются в полосы, поэтому с 760px их четыре. Плитка при этом та же. */
@media (min-width: 760px) {
    .promo .tiles { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
}

/* Карта в плитке — экспонат, а не обложка во всю ширину: восемь картинок по
   360 px превращают раздел в простыню, в которой подписи не читают. Держим карту
   целиком (английские подписи колоды не режем) и ограничиваем её ростом. */
.promo .tiles--catalog .tile > img {
    height: clamp(150px, 17vw, 210px);
    width: auto;
    margin-left: auto; margin-right: auto;
}

/* ── Услуги без карт: витрина-строка ──────────────────────────────────── */

/* Знак услуги вместо карты: у гороскопа и сонника карты нет, поддельную не рисуем —
   на витрине висит наш собственный рисованный знак. Плиткой такой знак выглядел
   недоделанным: 132 px картинки и два слова подписи рядом с витринами карт. Строка
   даёт место под этикетку и меняет ТИП объекта — три раздела подряд одной
   конструкции читаются как один длинный список. */
.promo-rows { display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .promo-rows { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

.promo-row { text-decoration: none; padding: var(--space-5); transition: var(--transition); }
.promo-row:hover { border-color: var(--border); }
.promo-row__mark {
    width: clamp(84px, 22vw, 104px); flex: 0 0 auto;
    align-self: center;          /* знак — пятно на всю высоту строки, а не значок сверху */
    border-radius: var(--radius-sm);
}
/* Лила показана фрагментом своей доски — это фотография экспоната, а не знак,
   поэтому у неё волосяная рамка, как у карты в витрине. */
.promo-row__mark[src$=".webp"] { border: 1px solid var(--hair); }

/* Цена в строке витрины. Золотом её красить нельзя: золото — роль действия,
   а не «важного числа». Цифры моноширинные, чтобы столбец не плясал. */
.promo-price {
    font-family: var(--font-body); font-size: var(--fs-sm);
    color: var(--body); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.tile__line { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--mark); }

/* Хвост каталога строкой. Восемь витрин подряд читаются как склад: до смысла и до
   двери по ним не доходят. Четыре расклада остаются экспонатами, остальные живут
   строкой — они и в приложении выбираются по названию, а не по картинке. */
.promo-more {
    margin-top: var(--space-6); text-align: center;
    font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--body);
}
.promo-more a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); transition: var(--transition); }
.promo-more a:hover { border-bottom-color: var(--border); }

/* ── Разворот с текстом ───────────────────────────────────────────────── */

/* Единственное место страницы, где текст читают подряд, а не сканируют.
   Длина строки 60–75 знаков, кегль читаемого текста — не ниже 16px. */
.promo-read { max-width: 34em; margin: 0 auto; }
.promo-read .note + .note { margin-top: var(--space-5); }

/* Голос Ясны — крупная строка курсивом. Это и есть якорь низа страницы:
   ниже второго экрана иначе остаётся один сплошной текст. */
.promo-pull {
    font-family: var(--font-voice); font-style: italic;
    font-size: var(--fs-h3); line-height: var(--lh-normal);
    color: var(--ink);
    text-align: center;
    max-width: 24ch; margin: var(--space-6) auto;
}

/* Врезка «как у всех»: чужая манера показана этикеткой, а не пересказана. */
.promo-vs { max-width: 520px; margin: 0 auto; }
.promo-vs__quote { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--body); }

/* ── Подвал ───────────────────────────────────────────────────────────── */

.promo-foot {
    width: 100%;
    border-top: 1px solid var(--hair);
    padding: var(--space-6) 0 calc(var(--space-6) * 2);
    text-align: center;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--body);
}
.promo-foot p { margin-top: var(--space-3); }
.promo-foot__mark { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); }
.promo-foot__fine { font-size: var(--fs-xs); color: var(--mark); }
.promo-foot a { color: inherit; }
.promo-foot a:hover { color: var(--ink); }