/* =============================================================================
   Главная 2.0 — дизайн «Практика автоматизации», волна 3 (20.09.2026)

   Источник: praktika-developer-library/05-pages/specs/home.md,
   05-pages/specs/layout-and-migration.md, 05-pages/home-desktop.svg (1440) и
   home-mobile.svg (390), 03-tokens/layout-contract.css, 03-tokens/tokens.css.

   Подключается ТОЛЬКО на главной ($useHomeCss в includes/header.php) — чтобы
   правки главной физически не могли задеть остальные 147 страниц.
   Общие классы (.pa-container, .pa-card-grid, .pa-card, .pa-button) живут в
   style.css: они задел под следующие волны.

   Все размеры/цвета — токенами. Литералов вне системы 2.0 здесь нет.
   ============================================================================= */

/* --------------------------------------------------------------- Общее --- */

.home-main{
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-body-size);
    line-height: var(--font-body-line);
}

/* Шапка 2.0 — position: fixed, полный выступ --hdr-extent (108 / 72 px).
   Первый экран держит отступ сам, как и остальные страницы сайта. */
.home-hero{ padding-top: calc(var(--hdr-extent) + var(--space-7)); }
@media (max-width: 1023px){
    .home-hero{ padding-top: calc(var(--hdr-extent) + var(--space-6)); }
}

/* Между крупными секциями — section-gap 96 / 64 mobile: половина сверху,
   половина снизу, чтобы просвет между двумя соседними секциями был ровно
   заявленным, а не удвоенным. */
.home-section{ padding-block: calc(var(--section-gap-mobile) / 2); }
@media (min-width: 1024px){ .home-section{ padding-block: calc(var(--section-gap) / 2); } }

.home-section__head{ margin-bottom: var(--space-6); }
.home-section__title{
    margin: 0;
    font-size: var(--font-heading-2-size);
    line-height: var(--font-heading-2-line);
    font-weight: var(--font-heading-2-weight);
    letter-spacing: var(--font-heading-2-tracking);
    color: var(--color-heading);
}
.home-section__lead{
    margin: var(--space-4) 0 0;
    max-width: 62ch;
    font-size: var(--font-body-size);
    line-height: var(--font-body-line);
    color: var(--color-text-secondary);
}
@media (max-width: 767px){
    .home-section__title{ font-size: 26px; line-height: 34px; }
    .home-section__lead{ font-size: var(--font-body-small-size); line-height: var(--font-body-small-line); }
}

/* ----------------------------------------------------------------- Hero --- */

.home-hero__inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    padding-bottom: var(--section-gap-mobile);
}
/* Ниже 1024 hero одноколоночный (layout-and-migration.md). */
@media (min-width: 1024px){
    .home-hero__inner{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--grid-gap);
        align-items: center;
        padding-bottom: var(--section-gap);
    }
}

.home-hero__eyebrow{
    margin: 0 0 var(--space-4);
    font-size: var(--font-label-size);
    line-height: var(--font-label-line);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-tracking);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* H1: 48/56 на desktop, 32/40 на mobile — clamp без ручных брейкпоинтов.
   Без line-clamp: при переводе и 200% zoom заголовок просто растёт. */
.home-hero__title{
    margin: 0;
    font-size: clamp(32px, 2.2vw + 22px, var(--font-display-size));
    line-height: 1.16;
    font-weight: var(--font-display-weight);
    letter-spacing: var(--font-display-tracking);
    color: var(--color-heading);
    text-wrap: balance;
}

.home-hero__lead{
    margin: var(--space-6) 0 0;
    max-width: 46ch;
    font-size: var(--font-lead-size);
    line-height: var(--font-lead-line);
    color: var(--color-text-secondary);
}
@media (max-width: 767px){
    .home-hero__lead{ font-size: var(--font-body-size); line-height: var(--font-body-line); }
}

/* Текст → CTA: space-6; между кнопками space-4. При нехватке места кнопки
   становятся вертикальными и занимают ширину (layout-and-migration.md). */
.home-hero__actions{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.home-hero__actions .pa-button{ flex: 1 1 200px; }
@media (min-width: 1280px){
    .home-hero__actions .pa-button{ flex: 0 0 auto; min-width: 244px; }
}

/* Иллюстрация «документ-план»: настоящая HTML/CSS-карточка, не картинка. */
.home-plan{
    background: var(--color-bg-section);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-5);
}
@media (min-width: 768px){ .home-plan{ padding: var(--space-6) var(--space-5); } }

.home-plan__rule{
    height: 4px;
    background: var(--color-brand);
    margin-bottom: var(--space-5);
}
.home-plan__label{
    margin: 0 0 var(--space-4);
    font-size: var(--font-label-size);
    line-height: var(--font-label-line);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-tracking);
    text-transform: uppercase;
    color: var(--color-accent);
}
.home-plan__title{
    margin: 0 0 var(--space-6);
    font-size: var(--font-heading-3-size);
    line-height: var(--font-heading-3-line);
    font-weight: var(--font-heading-3-weight);
    color: var(--color-heading);
}
.home-plan__steps{ margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-5); }
.home-plan__step{
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    color: var(--color-text);
}
.home-plan__step svg{ flex: none; color: var(--color-accent); }

/* ---------------------------------------------------- Полоса фактов ----- */
/* Подтверждённые владельцем утверждения (CLAUDE.md «Продукты», reference-файл
   ИП Миловидов). Придуманных цифр здесь нет; логотипы клиентов и отзывы без
   разрешения не добавляем — см. home.md «Доверие и редакционный долг». */

.home-facts{
    border-block: 1px solid var(--color-border);
    padding-block: var(--space-5);
}
.home-facts__list{
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
}
.home-facts__item{
    display: flex; align-items: center; gap: var(--space-2);
    min-width: 0;
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    color: var(--color-text-secondary);
}
.home-facts__item svg{ flex: none; width: 20px; height: 20px; color: var(--color-success); }
.home-facts__item b{ color: var(--color-text); font-weight: 600; }

/* -------------------------------------------------------------- Услуги --- */

.home-service{
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.home-service:hover{ border-color: var(--color-accent); }
.home-service:focus-within{ border-color: var(--color-accent); }

.home-service__icon{ display: block; color: var(--color-accent); margin-bottom: var(--space-5); }
.home-service__title{
    margin: 0 0 var(--space-3);
    font-size: var(--font-heading-3-size);
    line-height: var(--font-heading-3-line);
    font-weight: var(--font-heading-3-weight);
    color: var(--color-heading);
}
.home-service__text{
    margin: 0 0 var(--space-5);
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    color: var(--color-text-secondary);
}
/* Одна основная ссылка на карточку: кликабельна вся карточка через ::after,
   но в таб-порядке и в дереве доступности это ровно один элемент. */
.home-service__link{
    margin-top: auto;
    align-self: flex-start;
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.home-service__link::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; }
.home-service__link:hover{ color: var(--color-accent-hover); opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.home-service__link:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ----------------------------------------------------------- Принципы --- */

/* Принципов три. На двухколоночном брейкпоинте третья карточка осталась бы
   «сиротой» в отдельном ряду — до 1024 показываем их одной колонкой. */
@media (max-width: 1023px){
    .home-principles{ grid-template-columns: minmax(0, 1fr); }
}

.home-principle{
    background: var(--color-bg-section);
    display: flex;
    flex-direction: column;
}
.home-principle__icon{ display: block; color: var(--color-accent); margin-bottom: var(--space-5); }
.home-principle__title{
    margin: 0 0 var(--space-3);
    font-size: var(--font-heading-3-size);
    line-height: var(--font-heading-3-line);
    font-weight: var(--font-heading-3-weight);
    color: var(--color-heading);
}
.home-principle__text{
    margin: 0;
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    color: var(--color-text-secondary);
}

/* ------------------------------------------------ Отрасли и кейсы (SEO) --- */
/* Макета этого блока нет: сохраняем внутреннюю перелинковку старой главной
   компактным списком вместо девяти карточек-«заглушек» без ссылок. */

.home-links{
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px){ .home-links{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--space-5); } }
@media (min-width: 1024px){ .home-links{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.home-links a{
    display: inline-block;
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 2px;
}
.home-links a:hover{ color: var(--color-accent); border-bottom-color: var(--color-accent); opacity: 1; }
.home-links a:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 3px; }

.home-cases{
    margin: var(--space-6) 0 0;
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    color: var(--color-text-secondary);
}
.home-cases a{ color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ FAQ --- */
/* Разметку .faq-* не меняем: на ней висит аккордеон в main.js и ещё 11 страниц.
   Здесь только визуальная надстройка главной, под токены 2.0. */

.home-faq .faq-list{ max-width: var(--article-max); margin-inline: 0; }
.home-faq .faq-item{ border-bottom: 1px solid var(--color-border); }
.home-faq .faq-question{
    padding: var(--space-5) var(--space-7) var(--space-5) 0;
    font-size: var(--font-body-size);
    line-height: var(--font-body-line);
    font-weight: 600;
    color: var(--color-heading);
}
.home-faq .faq-question:hover{ color: var(--color-accent); }
.home-faq .faq-question:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 2px; }
.home-faq .faq-answer__inner{
    padding: 0 0 var(--space-5);
    max-width: 68ch;
    font-size: var(--font-body-small-size);
    line-height: var(--font-body-small-line);
    color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------- Форма --- */

.home-form-card{
    background: var(--color-bg-section);
    border-radius: var(--radius-dialog);
    padding: var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}
@media (min-width: 768px){ .home-form-card{ padding: var(--space-7); } }
@media (min-width: 1024px){
    /* Колонки одной высоты: на макете «Или позвоните» стоит в низу карточки,
       на одной линии с кнопкой. Держится margin-top:auto у __callme. */
    .home-form-card{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-7); align-items: stretch; }
    .home-form-card__aside{ display: flex; flex-direction: column; }
    .home-form-card__aside .home-form-card__callme{ margin-top: auto; }
}

.home-form-card__title{
    margin: 0;
    font-size: var(--font-heading-2-size);
    line-height: var(--font-heading-2-line);
    font-weight: var(--font-heading-2-weight);
    letter-spacing: var(--font-heading-2-tracking);
    color: var(--color-heading);
}
@media (max-width: 767px){ .home-form-card__title{ font-size: 26px; line-height: 34px; } }
.home-form-card__text{
    margin: var(--space-5) 0 0;
    max-width: 40ch;
    font-size: var(--font-body-size);
    line-height: var(--font-body-line);
    color: var(--color-text-secondary);
}
.home-form-card__callme{ margin: var(--space-7) 0 0; }
.home-form-card__callme dt{
    font-size: var(--font-caption-size);
    line-height: var(--font-caption-line);
    color: var(--color-text-secondary);
}
.home-form-card__callme dd{
    margin: var(--space-2) 0 0;
    font-size: var(--font-heading-3-size);
    line-height: var(--font-heading-3-line);
    font-weight: var(--font-heading-3-weight);
}
.home-form-card__callme a{ color: var(--color-heading); text-decoration: none; }
.home-form-card__callme a:hover{ color: var(--color-accent); opacity: 1; }

/* Поля/лейблы/ошибки/кнопка/сообщения формы — общий класс .lead-form* в
   style.css (глобально, без флага), с 20.09: перенесено туда при возврате
   hero-формы на tehpodderzhka-1c.php, чтобы вторая страница не дублировала
   те же правила. Разметка формы на главной — <form class="lead-form" ...>. */

/* Скрытый визуально, доступный AT (для honeypot-подписи и т.п.). */
.home-visually-hidden{
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}