/*
 * assets/css/cai-pages.css — раскладка новых страниц Collager.ai (главная «AI Collage Maker» и /photo-mosaic-maker/).
 *
 * ЧТО:   только каркас страницы: ширина колонки, секции, заголовки, первый экран, текстовые абзацы, пара картинок,
 *        маршруты, пиктограммы разработчиков, пометки стенда. Вид самих блоков — assets/css/cai-blocks.css.
 * ЗАЧЕМ: 16.10.2026, стенд новых страниц (выкат позже).
 * ИНВАРИАНТЫ: всё под .cai-page — стили старой главной и кабинета не задеваются; 320–1400 px, поля 16 px,
 *        ничего не шире экрана.
 */

.cai-shell-header #header-wrap { background: #22232a; }
.cai-shell-header.sticky-header #header-wrap { background: #22232a; }

.cai-page { display: block; background: #fff; color: #444; font: 400 17px/1.65 'Lato', 'Segoe UI', Arial, sans-serif; clear: both; overflow-x: clip; }
.cai-page .cai-wrap { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.cai-page .cai-wrap--text { max-width: 820px; }
.cai-page .cai-sec { padding: 56px 0; scroll-margin-top: 80px; }
.cai-page .cai-sec--tint { background: #f6f6f8; }
.cai-page h1, .cai-page h2, .cai-page h3 { font-family: 'Raleway', 'Segoe UI', Arial, sans-serif; color: #2a2a33; letter-spacing: 0; text-transform: none; }
.cai-page h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.12; font-weight: 800; margin: 0 0 18px; }
.cai-page h2 { font-size: clamp(25px, 3.4vw, 36px); line-height: 1.2; font-weight: 700; margin: 0 0 18px; }
.cai-page h3 { font-size: 21px; line-height: 1.3; font-weight: 700; margin: 26px 0 12px; }
.cai-page p { margin: 0 0 16px; }
.cai-page a:not(.cai-btn):not(.cai-lb):not(.cai-card__link) { color: #d81f3f; text-decoration: underline; text-underline-offset: 2px; }
.cai-page a:not(.cai-btn):not(.cai-lb):hover { text-decoration: none; }
.cai-page figure { margin: 0; }
.cai-page figcaption, .cai-page .cai-figcap { margin-top: 10px; color: #777; font-size: 14px; line-height: 1.5; font-style: italic; }
.cai-page img { max-width: 100%; }
.cai-page .cai-lead { font-size: 19px; color: #555; }

.cai-page .cai-btn--xl { height: 54px; line-height: 54px; padding: 0 34px; font-size: 16px; }

/* первый экран */
.cai-page .cai-hero { padding: 40px 0 36px; }
.cai-page .cai-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: center; }
.cai-page .cai-hero__sub { font-size: 21px; line-height: 1.45; color: #333; margin-bottom: 10px; }
.cai-page .cai-hero__line { font-size: 17px; color: #555; }
.cai-page .cai-hero__cta { margin: 22px 0 10px; }
.cai-page .cai-hero__price { font-size: 15px; color: #666; margin-bottom: 6px; }
.cai-page .cai-hero__ai { font-size: 15px; }
.cai-page .cai-hero .cai-trust { margin-top: 34px; }
.cai-page .cai-only-mob { display: none; }
.cai-page .cai-hero--hub .cai-hero__text { max-width: 900px; }
.cai-page .cai-hero--hub .cai-viewer { margin-top: 26px; }

@media (max-width: 767px) {
    .cai-page { font-size: 16px; }
    .cai-page .cai-sec { padding: 40px 0; }
    .cai-page .cai-hero { padding: 24px 0 28px; }
    .cai-page .cai-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .cai-page h1 { font-size: 34px; }
    .cai-page .cai-hero--hub h1 { font-size: 28px; }
    .cai-page .cai-hero__sub { font-size: 18px; }
    .cai-page .cai-hero__cta .cai-btn { display: block; width: 100%; text-align: center; white-space: normal; height: auto; min-height: 54px; line-height: 1.3; padding: 16px 18px; }
    .cai-page .cai-hero__price, .cai-page .cai-hero__ai { font-size: 14px; }
    .cai-page .cai-only-desk { display: none; }
    .cai-page .cai-only-mob { display: block; }
    .cai-page .cai-cta .cai-btn { display: block; width: 100%; text-align: center; white-space: normal; height: auto; min-height: 54px; line-height: 1.3; padding: 16px 18px; }
}

/* пара картинок «издалека / вблизи» и одиночная картинка блока */
.cai-page .cai-pair { margin: 26px 0; }
.cai-page .cai-pair__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cai-page .cai-pair__grid .cai-lb, .cai-page .cai-single .cai-lb { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(20, 20, 30, .08); background: #f6f6f8; }
.cai-page .cai-pair__grid img, .cai-page .cai-single img { display: block; width: 100%; height: auto; }
.cai-page .cai-single { margin: 26px 0; }
.cai-page .cai-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 26px 0; }
@media (max-width: 720px) { .cai-page .cai-trio { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cai-page .cai-pair__grid { grid-template-columns: minmax(0, 1fr); } }

/* карточка-маршрут (главная, блок 3) */
.cai-page .cai-route { max-width: 760px; margin: 30px 0 0; }
.cai-page .cai-route .cai-card__body { padding: 16px 20px 20px; }
.cai-page .cai-route h3 { margin: 0 0 8px; }
.cai-page .cai-route h3 a { color: #d81f3f; }

/* текстовые варианты блоков без картинки (боевой хост, пока демо не собраны) */
.cai-page .cai-textlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 24px; }
.cai-page .cai-textlist li { margin: 0; }

/* кейсы: пустая цифра у текстовой карточки */
.cai-page .cai-case__value:empty { display: none; }

/* разработчики */
.cai-page .cai-dev-icons { display: flex; gap: 22px; margin: 6px 0 18px; padding: 0; list-style: none; }
.cai-page .cai-dev-icons li { width: 64px; height: 64px; border-radius: 14px; background: #f1f1f5; display: flex; align-items: center; justify-content: center; color: #ff2b4e; font-size: 28px; }
.cai-page .cai-dev-line { font-size: 18px; }

/* финал и маршруты */
.cai-page .cai-cta { text-align: center; }
.cai-page .cai-cta p { max-width: 640px; margin-left: auto; margin-right: auto; }
.cai-page .cai-routes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: left; }
.cai-page .cai-routes li { margin: 0; }
.cai-page .cai-routes a { display: block; padding: 14px 16px; border: 1px solid #e7e7ea; border-radius: 10px; background: #fff; }
@media (max-width: 600px) { .cai-page .cai-routes { grid-template-columns: minmax(0, 1fr); } }
.cai-page .cai-footnav { margin: 0; padding: 22px 0; background: #f6f6f8; border-top: 1px solid #e7e7ea; font-size: 15px; }
.cai-page .cai-footnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
.cai-page .cai-footnav li { margin: 0; }

/* пометки стенда (видны только на хосте .local) */
.cai-page .cai-stand-mark, .cai-page .cai-stand-note { display: inline-block; margin: 4px 0 8px; padding: 2px 8px; border-radius: 4px; background: #fff1c2; color: #7a4b00; border: 1px dashed #d9a400; font: 700 12px/1.6 Arial, sans-serif; letter-spacing: .3px; text-transform: uppercase; font-style: normal; }
.cai-page .cai-stand-note { display: block; width: fit-content; max-width: 100%; }