/* Компоненты группы «blocks», которых дизайн-система IDS не даёт.
   Строго на токенах --ids__*, без своих цветовых литералов: тогда компоненты
   автоматически работают и в тёмной теме (IDS переключает семантические токены
   по классу .dark на <html>). Файл подключается в MainAsset после site.css.

   Группа шире, чем название: сюда же (не в отдельные файлы — их не заводили)
   входят карточки и реестр-строки из раздела кита «Карточки»/«Реестр»/«Таблицы»,
   а не только «Крупные блоки». Один файл — один компонент CSS в MainAsset::$css,
   отдельных cards.css/ledger.css/tables.css не существует.

   Специфичность против IDS: `.ids a { color: var(--ids__link); text-decoration:
   underline; }` (ids.css) весит 0,1,1 (класс + тег). Чтобы наши правила на теге
   <a> (кнопка-действие, бейдж реестра, карточка-ссылка) реально победили, им нужна
   ХОТЯ БЫ такая же специфичность — иначе они проигрывают в самом .ids a, где бы
   в каскаде ни стояли. Поэтому везде, где меняется цвет/подчёркивание ссылки,
   селектор — `a.имя-класса`, а не голый `.имя-класса`: специфичность 0,1,1,
   ничья с `.ids a` разрешается порядком файлов (blocks.css — последний), тем же
   приёмом, что уже использован в site.css (`.site-brand a`). */

/* ============================================================================
   Карточки
   ============================================================================
   Карточка работы (обложка + подпись, вся кликабельна) и её приглушённый тизер
   не заводят класс .card — это ровно та же разметка, что на /projects
   (figure > a > img.ids__rounded + figcaption, время — снаружи ссылки), и своей
   рамки/подложки у них по прод-дизайну нет. Класс .card — только для того, чего
   на сайте раньше не было: фичи с подложкой, тарифа и карточки-ссылки наружу. */

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* height: 100% — чтобы карточка заполняла высоту .ids__sequence-item, который
       flex-контейнер .ids__sequence уже растянул по высоте строки (align-items
       по умолчанию stretch): без этого варианты с разной длиной текста в одной
       строке сетки визуально не выравниваются по нижнему краю. */
    gap: var(--ids__gap-s);
    padding: var(--ids__spacer-m);
    background: var(--site__surface-paper);
    border-radius: var(--ids__radius-m);
    box-sizing: border-box;
}

.card h3 {
    margin: 0;
}

.card p {
    margin: 0;
}

/* --- Карточка-фича (bookov.app): подложка + картинка + короткий текст. ------ */

.card--feature img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.card--feature p {
    color: var(--ids__text-caption);
}

/* Обёртка «рамка устройства» — тот же .card--feature, но обложка внутри —
   мокап экрана, а не свободное фото (bookov.app, «Your library, organised»).
   Тёмный корпус — сырыми токенами палитры, не семантическими
   --ids__surface/--ids__text: у настоящего телефона корпус тёмный всегда,
   вне зависимости от темы сайта — тот же выбор, что и в .block-dark ниже. */
.device-frame {
    padding: var(--ids__spacer-s);
    background: var(--ids__color-gray-900);
    border-radius: var(--ids__radius-m);
    box-shadow: var(--site__shadow-card);
}

.device-frame img {
    border-radius: var(--ids__radius-s);
}

/* Вариант без картинки — честная имитация карточки-заметки внутри интерфейса
   (дата + цитата, набранные прямо в тёмном «экране»), а не поддельный
   скриншот чужого приложения. */
.device-frame--note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    aspect-ratio: 16 / 10;
    gap: var(--ids__gap-s);
    padding: var(--ids__spacer-m);
}

.device-frame__note-date {
    margin: 0;
    color: var(--ids__color-gray-400);
    font-size: 0.8em;
}

.device-frame__note-quote {
    margin: 0;
    color: var(--ids__color-gray-100);
    font-family: var(--site__font-serif);
    font-size: 1.1em;
    line-height: 1.4;
}

/* --- Карточка с ценой: цена прижата к низу независимо от длины описания. ---- */

.card--price__value {
    /* margin-top: auto на flex-элементе в колонке толкает и себя, и всё после
       себя к низу контейнера — здесь это последний элемент, поэтому просто
       прижимается к низу, а название и описание остаются прижатыми к верху. */
    margin-top: auto;
    padding-top: var(--ids__gap-s);
    font-size: 1.3em;
}

/* --- Карточка-ссылка наружу: вся <a>, хост-подпись сверху, стрелка в углу. -- */

a.card--link {
    position: relative;
    text-decoration: none;
    color: var(--ids__text);
    /* Текст карточки — не цветом ссылки: тон ссылки только у подписи-хоста и
       у стрелки, иначе заголовок и описание сливаются с обычными ссылками
       на странице и нельзя быстро отличить «карточку наружу» от абзаца со
       ссылкой внутри. */
    transition: box-shadow var(--ids__duration-base) var(--ids__easing-base);
}

a.card--link:hover {
    color: var(--ids__text);
    box-shadow: var(--site__shadow-card);
}

.card--link__host {
    display: block;
    color: var(--ids__link);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card--link p {
    color: var(--ids__text-caption);
}

.card--link__arrow {
    position: absolute;
    top: var(--ids__spacer-m);
    right: var(--ids__spacer-m);
    color: var(--ids__link);
    font-size: 1.3em;
    line-height: 1;
}

/* --- Карточка продукта (kirill.green): обложка сверху — фото ИЛИ цветная
       панель с заголовком, — под ней ссылка-название, описание и платформы. -- */

.card--product__cover {
    position: relative;
}

.card--product__cover img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Монограмма поверх фото — крупная полупрозрачная буква в углу, необязательная
   деталь референса. Цвет и тень — через токены (--ids__color-white и
   затемнённый --ids__color-gray-950), а не литералы white/black: значение
   по-прежнему приходит из палитры, а не придумано на глаз. */
.card--product__monogram {
    position: absolute;
    right: var(--ids__spacer-s);
    bottom: var(--ids__spacer-s);
    color: var(--ids__color-white);
    text-shadow: 0 1px 6px color-mix(in srgb, var(--ids__color-gray-950) 45%, transparent);
    font-family: var(--site__font-serif);
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1;
}

/* Панель вместо фото — приём «обложка может быть фото ИЛИ цветным полем с
   текстом», а не попытка воспроизвести чужой деколь пиксель в пиксель.
   Тёмно-синего готового токена в палитре (assets/ids/css/tokens/palette.css)
   нет — получаем нужный тон смешиванием синего с почти чёрным серым, а не
   цветовым литералом. */
.card--product__cover--panel {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: var(--ids__spacer-m);
    background: color-mix(in srgb, var(--ids__color-blue-500) 55%, var(--ids__color-gray-950));
    border-radius: var(--ids__radius-m);
}

.card--product__panel-title {
    max-width: 14ch;
    color: var(--ids__color-white);
    font-family: var(--site__font-serif);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* Строка платформ прижата к низу тем же приёмом, что и цена в .card--price —
   разной длины описания над ней не сдвигают её на разной высоте в сетке. */
.card--product__platforms {
    margin-top: auto;
    padding-top: var(--ids__gap-s);
    color: var(--ids__text-caption);
    font-size: 0.85em;
}

/* --- Карточка со своей зоной цвета (kirill.green): фон и --ids__link карточки
       считаются из одной переменной --card-zone-color через color-mix() — меняя
       её в модификаторе, меняем сразу и подложку, и цвет ссылок внутри. ------ */

.card--zone {
    background: color-mix(in srgb, var(--card-zone-color) 14%, var(--site__surface-paper));
    --ids__link: var(--card-zone-color);
    --ids__hover: var(--card-zone-color);
}

.card--zone__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: var(--ids__radius-pill);
    background: color-mix(in srgb, var(--card-zone-color) 24%, transparent);
    font-size: 1.2em;
}

.card--zone__links {
    margin-top: auto;
    padding-top: var(--ids__gap-s);
}

/* Оранжевого и фиолетового в сырой палитре нет (только 5 цветовых семейств,
   см. assets/ids/css/tokens/palette.css) — получаем их смешиванием готовых
   токенов, а не цветовым литералом: красный+жёлтый даёт оранжевый оттенок,
   синий+красный — фиолетовый. */
.card--zone-a {
    --card-zone-color: var(--ids__color-red-500);
}

.card--zone-b {
    --card-zone-color: color-mix(in srgb, var(--ids__color-red-500) 45%, var(--ids__color-yellow-500));
}

.card--zone-c {
    --card-zone-color: color-mix(in srgb, var(--ids__color-blue-500) 55%, var(--ids__color-red-500));
}

.card--zone-d {
    --card-zone-color: var(--ids__color-gray-500);
}

/* ============================================================================
   Реестр (ledger)
   ============================================================================
   Приём с kirill.green: <dl>, каждая строка — grid с базовой линией и волосяными
   разделителями, сознательно не карточка. Слева бейдж-ссылка или <code>, справа
   описание. На узком экране — одна колонка (подпись над описанием). */

.ledger {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--site__hairline);
}

.ledger__row {
    display: grid;
    grid-template-columns: minmax(0, 15em) 1fr;
    column-gap: var(--ids__gap-l);
    align-items: baseline;
    padding: var(--ids__spacer-s) 0;
    border-bottom: 1px solid var(--site__hairline);
}

.ledger__row dt,
.ledger__row dd {
    margin: 0;
}

@media (width < 768px) {
    .ledger__row {
        grid-template-columns: 1fr;
        row-gap: var(--ids__gap-s);
    }
}

/* Бейдж слева — не строчная подчёркнутая ссылка, а пилюля: в списке из
   десятков строк подчёркивание слева спорило бы с волосяными линиями сверху/
   снизу. Класс общий для <a> (ведущая строка) и <span> (немая строка —
   «в разработке», см. ниже): рамка и отступы нужны в обоих случаях. */
.ledger__badge {
    display: inline-block;
    padding: 0.15em 0.7em;
    border: 1px solid var(--site__hairline-strong);
    border-radius: var(--ids__radius-pill);
    font-size: 0.85em;
    line-height: 1.4;
}

a.ledger__badge {
    text-decoration: none;
}

a.ledger__badge:hover {
    border-color: var(--ids__hover);
}

/* Вариант под «Рутину» (CLAUDE.md): слева не бейдж-ссылка, а статус-метка
   «сделал руками» / «автоматизировал» — это смысловая ось раздела. Разница —
   не цветом (в семантике только токены, а зелёный/серый спорили бы с тем же
   приёмом у is-muted) и не эмодзи, а начертанием рамки: сплошная — сделано
   один раз руками, пунктирная — переведено в автоматизацию, повторного
   ручного действия больше нет. */
.ledger__badge--manual {
    border-style: dashed;
}

/* Строка «в разработке»: тот же язык, что у тизеров карточек — общий сайтовый
   приём «серым без ссылки», а не два разных для одной идеи. Приглушение даёт
   .is-muted (site.css), здесь ничего сверх него не нужно. */

/* ============================================================================
   Таблицы
   ============================================================================
   Разметку и базовые стили (границы, sticky-шапка) даёт assets/ids/css/
   components/ids.css — она уже безусловно накрывает любой <table> внутри
   <body class="ids">. Здесь — только то, чего там нет: обёртка с прокруткой,
   выравнивание чисел и подпись <caption>. */

/* Таблица обязана прокручиваться сама, а не растягивать страницу — оборачиваем
   КАЖДУЮ таблицу, а не только специально широкую: так безопаснее по умолчанию. */
.table-scroll {
    overflow-x: auto;
}

.table-scroll table {
    width: 100%;
    margin: 0;
}

/* Модификатор для демонстрации залипающей шапки: без контейнера с ограниченной
   высотой sticky не от чего «отлипать» — шапка держится верха БЛИЖАЙШЕГО
   прокручиваемого предка, а без max-height + overflow-y это была бы вся
   страница (шапка залипла бы под хедером сайта, а не внутри таблицы). */
.table-scroll--sticky {
    max-height: 14rem;
    overflow-y: auto;
}

/* Числа по правому краю + табличные (моноширинные по цифрам) начертания —
   иначе колонка сумм «прыгает» из-за разной ширины цифр в пропорциональном
   шрифте. */
.table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

caption {
    caption-side: top;
    margin-bottom: var(--ids__gap-s);
    color: var(--ids__text-caption);
    font-size: 0.85em;
    text-align: left;
}

/* ============================================================================
   Крупные блоки
   ============================================================================ */

/* --- Действие (герой, призыв): пилюля на --site__action, отдельно от ссылок. */

a.block-action {
    display: inline-block;
    margin-top: var(--ids__gap-m);
    padding: 0.65em 1.4em;
    border-radius: var(--ids__radius-pill);
    background: var(--site__action);
    color: var(--site__action-text);
    font-weight: 600;
    text-decoration: none;
}

a.block-action:hover {
    background: var(--site__action-hover);
    color: var(--site__action-text);
}

/* --- Героблок: заголовок + лид + действие. ---------------------------------- */

.block-hero__lead {
    max-width: 45ch;
    font-size: 1.2em;
    line-height: var(--ids__density, 1.5);
}

/* --- Второй, более развитый героблок (bookov.app): крупный serif-заголовок,
       кнопка+бейдж в одну строку и большое фото ниже с плеером поверх. Не
       переписывает .block-hero — модификатор добавляет только то, чего у
       простого героблока нет: заголовок крупнее и фигуру с изображением. --- */

.block-hero--media__title {
    max-width: 14ch;
    font-size: 2.4em;
    line-height: 1.08;
}

.block-hero--media__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ids__gap-m);
    margin-top: var(--ids__gap-m);
}

.block-hero--media__figure {
    position: relative;
    margin: var(--ids__spacer-l) 0 0;
}

.block-hero--media__figure img {
    display: block;
    width: 100%;
}

.block-hero--media__play {
    position: absolute;
    left: var(--ids__spacer-m);
    bottom: var(--ids__spacer-m);
}

/* --- «Текст и изображение», зеркальные варианты через flex-direction. ------ */

.block-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--ids__gap-l);
}

@media (width < 768px) {
    .block-split {
        grid-template-columns: 1fr;
    }
}

.block-split__media img {
    width: 100%;
}

.block-split__media figcaption {
    margin-top: var(--ids__gap-s);
}

/* Зеркальный вариант: картинка первой по разметке (порядок в DOM для читалок
   и поиска по странице остаётся «текст → картинка», меняется только порядок
   отрисовки) — тот же приём, что и с фичами на bookov.app, где половина
   блоков зеркальна, чтобы взгляд не скользил по странице одной диагональю. */
.block-split--reverse .block-split__media {
    order: -1;
}

/* --- Асимметричный ценовой блок «Консультации» (kirill.green): две карточки
       НАМЕРЕННО разной ширины, а не сетка .ids__sequence.L из трёх одинаковых
       (см. «Карточка с ценой» в разделе «Карточки») — здесь ровно два тарифа,
       и частные лица (широкая карточка, идёт первой) — основная аудитория
       текста на странице, поэтому у их карточки больше веса, а не потому что
       она дороже. Карточки — переиспользуют .card (подложка, паддинг, флекс-
       колонка), модификаторы ниже добавляют только доли ширины. ------------ */

.block-pricing {
    display: flex;
    gap: var(--ids__gap-l);
}

.block-pricing__item--wide {
    flex: 2 1 0;
}

.block-pricing__item--narrow {
    flex: 1 1 0;
}

.block-pricing__note {
    margin: 0;
    color: var(--ids__text-caption);
    font-size: 0.85em;
}

/* Цена прижата к низу тем же приёмом, что и .card--price__value — независимо
   от длины текста над ней обе карточки уравновешены по нижнему краю. */
.block-pricing__price {
    margin-top: auto;
    padding-top: var(--ids__gap-s);
    color: var(--site__action);
    font-size: 1.4em;
    font-weight: 700;
}

.block-pricing__price span {
    color: var(--ids__text-caption);
    font-size: 0.7em;
    font-weight: 400;
}

.block-pricing__payment {
    margin-top: var(--ids__gap-m);
    color: var(--ids__text-caption);
    font-size: 0.85em;
}

@media (width < 768px) {
    .block-pricing {
        flex-direction: column;
    }
}

/* --- Тёмная секция с градиентными пятнами. ---------------------------------- */

.block-dark {
    position: relative;
    overflow: hidden;
    padding: var(--ids__spacer-xl) var(--ids__spacer-l);
    border-radius: var(--ids__radius-m);
    /* Секция тёмная ВСЕГДА, а не только в тёмной теме сайта — поэтому фон и
       текст не через семантические --ids__text/--ids__background (они
       переворачиваются вместе с темой), а через сырые токены палитры
       (assets/ids/css/tokens/palette.css). Это по-прежнему токены, не
       литералы: значение придёт из одного места и не разойдётся с IDS. */
    background: var(--ids__color-gray-950);
    color: var(--ids__color-gray-100);
    /* Свой акцент ссылок внутри секции — версии токенов для тёмного фона
       (те же значения, что .dark даёт всему сайту в тёмной теме): обычный
       светлый --ids__link на чёрном фоне в светлой теме сайта было бы плохо
       читаемым. Это и есть «зона цвета» пример, встроенный по необходимости —
       отдельный, более наглядный пример зоны — следующим блоком в разметке. */
    --ids__link: var(--ids__color-blue-450);
    --ids__hover: var(--ids__color-green-450);
}

.block-dark__blob {
    position: absolute;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    pointer-events: none;
}

/* Только эти три правила — с цветовым литералом: сами пятна декоративные и
   цветные по определению (см. задачу), а не часть семантики текста/фона. */
.block-dark__blob--a {
    top: -9rem;
    left: -6rem;
    background: #7c5cff;
    transform: rotate(12deg);
}

.block-dark__blob--b {
    right: -5rem;
    bottom: -10rem;
    background: #ff5c8a;
    transform: rotate(-18deg);
}

.block-dark__blob--c {
    top: 35%;
    right: 15%;
    width: 16rem;
    height: 16rem;
    background: #33d6c0;
    transform: rotate(30deg);
}

.block-dark__content {
    position: relative;
    z-index: 1;
    max-width: 55ch;
}

/* --- Блок-призыв к действию: центрированный, на тёплой подложке. ------------ */

.block-cta {
    padding: var(--ids__spacer-l);
    border-radius: var(--ids__radius-m);
    background: var(--site__surface-paper);
    text-align: center;
}

.block-cta p {
    max-width: 45ch;
    margin: 0 auto;
    color: var(--ids__text-caption);
}

/* --- Вопросы-ответы: статичный список (аргумент — в kit__section-note). ---- */

.block-faq {
    display: flex;
    flex-direction: column;
    gap: var(--ids__spacer-m);
}

.block-faq__item h4 {
    margin: 0 0 0.3em;
}

.block-faq__item p {
    margin: 0;
    color: var(--ids__text-caption);
}

/* --- Хронология событий: вертикальный таймлайн. ----------------------------- */

.timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--site__hairline-strong);
}

.timeline__item {
    position: relative;
    padding: 0 0 var(--ids__spacer-m) var(--ids__spacer-m);
}

.timeline__item::before {
    content: "";
    position: absolute;
    top: 0.35em;
    left: -0.35em;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: var(--ids__link);
}

.timeline__item:last-child {
    padding-bottom: 0;
}

.timeline__date {
    display: block;
    margin-bottom: 0.2em;
    color: var(--ids__text-caption);
    font-size: 0.85em;
}

.timeline__item h4 {
    margin: 0 0 0.2em;
}

.timeline__item p {
    margin: 0;
    color: var(--ids__text-caption);
}

/* --- Блок чисел/статистики. -------------------------------------------------- */

.stats__item {
    text-align: center;
}

.stats__value {
    margin: 0;
    font-family: var(--site__font-serif);
    font-size: 2.6em;
    line-height: 1;
}

.stats__label {
    margin: 0.3em 0 0;
    color: var(--ids__text-caption);
}

/* --- Строка статусов платформ + заявление о цене + форма ожидания (bookov.app,
       «Native apps only» + «Free to use»). --------------------------------- */

.block-platforms {
    display: flex;
    flex-direction: column;
    gap: var(--ids__spacer-m);
}

.platform-status {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ids__gap-l);
}

.platform-status__item {
    flex: 1 1 8em;
    text-align: center;
}

.platform-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4em;
    height: 2.4em;
    margin-bottom: var(--ids__gap-s);
    border-radius: var(--ids__radius-pill);
    background: var(--site__surface-paper);
    font-size: 1.3em;
}

.platform-status__name {
    margin: 0;
    font-weight: 600;
}

/* Статус — приглушённый текст у ещё не вышедших платформ (.is-muted, site.css):
   та же сайтовая конвенция «серым без ссылки», что и у тизеров работ и у
   зон-карточек выше, просто применённая здесь к строке текста, а не к целой
   карточке или ссылке. */
.platform-status__state {
    margin: 0.2em 0 0;
    color: var(--ids__text-caption);
    font-size: 0.85em;
}

.block-platforms__pitch {
    margin: 0;
}

.block-platforms__pitch-accent {
    color: var(--site__action);
}

/* Инлайн-форма: поле растягивается, кнопка держит свою ширину — align-items:
   flex-end подравнивает низ поля (label + инпут) и низ кнопки, у которой
   лейбла нет. */
.block-platforms__form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--ids__gap-s);
}

.block-platforms__form .field {
    flex: 1 1 16em;
    margin-bottom: 0;
}

/* --- Футер-блок со ссылками (демо более развитого футера, не текущий
       глобальный <footer> из layout.php — тот с одной строкой копирайта). --- */

.block-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ids__gap-l);
    padding-top: var(--ids__spacer-m);
    border-top: 1px solid var(--site__hairline);
}

.block-footer__col {
    flex: 1 1 12em;
}

.block-footer__col h4 {
    margin: 0 0 var(--ids__gap-s);
    color: var(--ids__text-caption);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.block-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--ids__gap-s);
    margin: 0;
    padding: 0;
    list-style: none;
}