/*
 * ИИАТОМ-Маркет — public.css. Общие компоненты публичных страниц, переиспользуемые больше чем
 * одним page-css (inc/class-am-assets.php::enqueue_public() подключает этот файл на КАЖДОЙ
 * публичной странице автоматически, если он существует на диске — до этой правки его не было,
 * поэтому карточка инструмента и блок «до/после» были продублированы байт-в-байт в
 * home.css/catalog.css/category.css (до трёх копий) вместо одного общего места (ponytail-находка
 * ревью, была отмечена докблоками этих трёх файлов как «сознательная плата», пока файла не было).
 *
 * Только var(--am-*) из tokens.css, CONTRACT.md §10.
 */

/* =========================================================================================
 * 1. Карточка инструмента (parts/tool-card.php) — home.php, catalog.php, category.php.
 * =======================================================================================*/

.am-tool-card {
    position: relative; /* containing block для растянутой CTA-ссылки — см. __cta::after ниже */
    display: flex;
    flex-direction: column;
    gap: var(--am-s-3);
    padding: var(--am-pad-card);
    border-radius: var(--am-r-lg);
    background: var(--am-surface-sunken);
    border: 1px solid var(--am-border-soft);
    transition: border-color var(--am-dur-base) var(--am-ease-out),
                background-color var(--am-dur-base) var(--am-ease-out),
                box-shadow var(--am-dur-base) var(--am-ease-out),
                transform var(--am-dur-base) var(--am-ease-out);
}

.am-tool-card:hover,
.am-tool-card:focus-within {
    border-color: var(--am-link);
    background: var(--am-surface);
    box-shadow: var(--am-sh-raised);
    transform: translateY(-2px);
}

.am-tool-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--am-s-2);
}

.am-tool-card__cat {
    color: var(--am-text-subtle);
    font-size: var(--am-fs-2xs);
    text-transform: uppercase;
    letter-spacing: var(--am-ls-eyebrow);
}

.am-tool-card__badge {
    flex-shrink: 0;
}

.am-tool-card__name {
    font-size: var(--am-fs-h3);
}

.am-tool-card__name a {
    position: relative; /* остаётся кликабельным поверх растянутой CTA-ссылки, см. __cta::after */
    z-index: 1;
    color: var(--am-text);
}

.am-tool-card__name a:hover {
    color: var(--am-link);
}

.am-tool-card__desc {
    color: var(--am-text-muted);
    font-size: var(--am-fs-sm);
}

.am-tool-card__example {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--am-s-3);
    border: 1px dashed var(--am-border-dashed);
    border-radius: var(--am-r-md);
}

.am-tool-card__example-label {
    color: var(--am-link-hover);
    text-transform: uppercase;
    font-size: var(--am-fs-eyebrow);
    letter-spacing: var(--am-ls-eyebrow);
}

.am-tool-card__example-text {
    color: var(--am-text-label);
    font-size: var(--am-fs-sm);
}

.am-tool-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--am-s-3);
}

.am-tool-card__eta {
    color: var(--am-text-subtle);
    font-size: var(--am-fs-2xs);
}

.am-tool-card__price {
    color: var(--am-link-hover);
    font-size: var(--am-fs-2xs);
    font-weight: var(--am-fw-bold);
}

.am-tool-card__cta {
    margin-left: auto;
    min-height: 44px; /* hit-area ≥44px */
}

/* Вся карточка кликабельна ("stretched link"): ::after — псевдоэлемент самой CTA-ссылки,
   но контейнер для его position:absolute — ближайший position:relative выше по дереву, т.е.
   .am-tool-card целиком (у самой ссылки position не задан намеренно — иначе ::after растянулся
   бы только на кнопку). Заголовок-ссылка (пять тулов со своей страницей, см. докблок партиала)
   остаётся кликабельной отдельно благодаря z-index:1 выше. */
.am-tool-card__cta::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Реальная причина «клик не долетает»: .am-btn:active (components.css) ставит на САМУ кнопку
   transform:translateY(1px). Любой transform≠none на элементе становится НОВЫМ containing
   block для его position:absolute потомков (CSS Transforms spec) — растянутый ::after в
   момент нажатия схлопывается с целой карточки до размера видимой кнопки, и клик по остальной
   части карточки не долетает до ссылки. Диагностика живым Playwright: elementFromPoint
   в состоянии :active возвращал произвольный дочерний узел карточки вместо ссылки. См. тот же
   комментарий в pages/app-tools.css (идентичная разметка карточки, кабинет). */
.am-tool-card__cta:active {
    transform: none;
}

.am-tool-card__cta-arrow {
    flex-shrink: 0;
    transition: transform var(--am-dur-fast) var(--am-ease-out);
}

.am-tool-card__cta:hover .am-tool-card__cta-arrow {
    transform: translateX(3px);
}

/* =========================================================================================
 * 2. Блок «до/после» (parts/before-after.php) — home.php, category.php.
 * =======================================================================================*/

.am-before-after {
    display: flex;
    flex-direction: column;
    gap: var(--am-s-4);
}

.am-before-after__title {
    font-size: var(--am-fs-h3);
    font-weight: var(--am-fw-bold);
    color: var(--am-text);
}

.am-before-after__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--am-s-3);
}

.am-before-after__panel {
    padding: var(--am-s-5);
    border-radius: var(--am-r-lg);
}

.am-before-after__panel--before {
    /* Раньше сырой --am-gray-100 (не переворачивается по теме) под текстом на --am-text
     * (переворачивается) — в тёмной теме оба почти сходились в светлоте, текст пропадал.
     * --am-surface-sunken — та же роль «слегка утопленная поверхность», но семантическая. */
    background: var(--am-surface-sunken);
    border: 1px solid var(--am-border-soft);
}

.am-before-after__panel--after {
    background: var(--am-grad-panel);
}

.am-before-after__panel-label {
    display: block;
    margin-bottom: var(--am-s-2);
    font-size: var(--am-fs-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--am-ls-eyebrow);
}

.am-before-after__panel--before .am-before-after__panel-label {
    color: var(--am-text-subtle);
}

.am-before-after__panel--after .am-before-after__panel-label {
    color: var(--am-action);
}

.am-before-after__panel-text {
    font-size: var(--am-fs-sm);
}

.am-before-after__panel--before .am-before-after__panel-text {
    color: var(--am-text);
}

.am-before-after__panel--after .am-before-after__panel-text {
    color: var(--am-text-on-dark);
}

.am-before-after__metrics {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--am-s-3);
}

.am-before-after__metric {
    padding: var(--am-s-3);
    background: var(--am-surface);
    border: 1px solid var(--am-border-soft);
    border-radius: var(--am-r-md);
}

.am-before-after__metric-label {
    display: block;
    margin-bottom: 4px;
    color: var(--am-text-subtle);
    font-size: var(--am-fs-2xs);
}

.am-before-after__metric-value {
    color: var(--am-text);
    font-weight: var(--am-fw-bold);
    font-size: var(--am-fs-sm);
}

.am-before-after__cta {
    align-self: flex-start;
}

/* =========================================================================================
 * 3. Навигация по категориям — шапка/дровер (parts/site-header.php). ВОЛНА 1 (02.08.2026):
 *    было 4 «направления» плоским списком в шапке, стало 7 категорий — не помещаются
 *    построчно без переполнения, поэтому в десктопном меню они спрятаны в нативный
 *    <details>/<summary>-попап (та же техника, что уже применена в .am-accordion FAQ —
 *    раскрытие, Escape и клавиатура идут из браузера бесплатно, свой JS не нужен). Базовые
 *    .am-site-header__menu a / .am-drawer__menu a — components.css, здесь только иконка,
 *    выравнивание и сам попап.
 * =======================================================================================*/

.am-site-header__dir-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.am-site-header__dir-link svg {
    flex-shrink: 0;
    color: var(--am-text-subtle);
}

.am-site-header__has-dropdown {
    position: relative;
}

.am-site-header__dropdown > summary {
    cursor: pointer;
    list-style: none;
    /* Раньше без цвета вовсе — <summary> не подпадает под правило `.am-site-header__menu a`
     * (это не <a>), поэтому наследовал --am-text от body: тёмный текст на тёмной инверсной
     * шапке (или наоборот, но тоже низкий контраст) в обеих темах. Тот же паттерн, что и у
     * соседних пунктов меню — --am-text-on-inverse(-muted). */
    color: var(--am-text-on-inverse-muted);
    border-radius: var(--am-r-sm);
    transition: color var(--am-dur-base) var(--am-ease-out);
}

.am-site-header__dropdown > summary:hover,
.am-site-header__dropdown[open] > summary {
    color: var(--am-text-on-inverse);
}

.am-site-header__dropdown > summary:focus-visible {
    color: var(--am-text-on-inverse);
    outline: 2px solid var(--am-focus);
    outline-offset: 2px;
}

.am-site-header__dropdown > summary::-webkit-details-marker {
    display: none;
}

.am-site-header__dropdown > summary::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.am-site-header__dropdown[open] > summary::after {
    transform: translateY(1px) rotate(-135deg);
}

.am-site-header__dropdown-list {
    position: absolute;
    top: calc(100% + var(--am-s-2));
    left: 0;
    z-index: var(--am-z-dropdown);
    display: grid;
    gap: 2px;
    min-width: 240px;
    margin: 0;
    padding: var(--am-s-2);
    list-style: none;
    background: var(--am-surface);
    border: 1px solid var(--am-border);
    border-radius: var(--am-r-lg);
    box-shadow: var(--am-sh-dropdown);
}

.am-site-header__dropdown-list .am-site-header__dir-link {
    padding: var(--am-s-2) var(--am-s-3);
    border-radius: var(--am-r-md);
    color: var(--am-text);
}

.am-site-header__dropdown-list .am-site-header__dir-link:hover {
    background: var(--am-surface-sunken);
    color: var(--am-link);
}

/* =========================================================================================
 * 4. prefers-reduced-motion
 * =======================================================================================*/

@media (prefers-reduced-motion: reduce) {
    .am-tool-card:hover,
    .am-tool-card:focus-within {
        transform: none;
    }

    .am-tool-card__cta:hover .am-tool-card__cta-arrow {
        transform: none;
    }
}