/* ==========================================================================
   TECH-CARD.CSS — стили страницы конкретной единицы техники
   --------------------------------------------------------------------------
   Все цвета — через var(--c-*) из sys/color-theme.css.
   Отступы секций — через var(--pad-section) / var(--pad-section-sm).

   Общие компоненты НЕ описаны здесь (всё в shared):
     - .lightbox-*              → components/lightbox.css
     - .badge*                  → components/badges.css
     - .card-price + --lg       → components/cards.css
     - .price-block / .price-note → components/cards.css
     - .service-card (базовая)  → components/cards.css
     - .cta-row                 → buttons.css
     - .visually-hidden         → base.css

   Порядок подключения в head_styles.html:
     1) sys/color-theme.css
     2) sys/fonts.css
     3) sys/typography.css
     4) base.css
     5) components/*.css
     6) sys/seo-text.css
     7) tech-card.css ← этот файл

   Брейкпоинты: 900px (планшет), 768px (смартфон), 560px (узкий).
   ========================================================================== */


/* ==========================================================================
   1. ОБЩАЯ ОБВЯЗКА СТРАНИЦЫ
   ========================================================================== */
.tech-page {
    padding-bottom: 0;                       /* нижний отступ не нужен — footer сам даёт воздух */
}


/* ==========================================================================
   2. HERO-БЛОК (галерея + инфо)
   --------------------------------------------------------------------------
   Двухколоночная сетка: слева sticky-галерея, справа инфо.
   На планшете (≤900px) — одна колонка, галерея перестаёт быть sticky.
   ========================================================================== */
.tech-hero {
    padding: 50px 0;                         /* 50px — уникально для hero (меньше стандартных 60) */
    background: linear-gradient(135deg, var(--c-bg-soft) 0%, var(--c-bg-card) 100%); /* мягкий градиент от изумрудного к белому */
}

.tech-hero-grid {
    display: grid;                                                  /* grid — две колонки */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);           /* 1fr 1fr, но minmax(0,1fr) — не даёт колонкам раздуваться от контента */
    gap: 48px;                                                      /* крупный зазор — галерея и инфо визуально разделены */
    align-items: start;                                             /* выравниваем по верхнему краю — не по центру */
    width: 100%;
}


/* ==========================================================================
   3. ГАЛЕРЕЯ (STICKY)
   ========================================================================== */
.tech-gallery {
    position: sticky;                        /* «прилипает» при скролле — галерея видна рядом с текстом */
    top: 20px;                               /* отступ от верха экрана при «прилипании» */
    min-width: 0;                            /* фикс flex/grid-раздувания от длинного img */
}

/* Основное фото (Контейнер) */
.tech-gallery-main {
    position: relative;                      /* Важно для корректной работы зума и позиционирования */
    width: 100%;                             /* Контейнер на всю ширину колонки */
    aspect-ratio: 4 / 3;                     /* ЖЕСТКО ФИКСИРУЕМ ПРОПОРЦИИ КОНТЕЙНЕРА (4:3) */
    border: 1px solid var(--c-border);       /* изумрудная рамка */
    overflow: hidden;                        /* обрезаем зум-эффект по краям */
    background: var(--c-bg-card);            /* белый фон (как в карточках), чтобы поля смотрелись аккуратно */
    display: flex;                           /* Flex для центрирования картинки внутри */
    align-items: center;                     /* Центрируем по вертикали */
    justify-content: center;                 /* Центрируем по горизонтали */
}

.tech-main-img {
    display: block;                          /* убираем inline-отступы baseline */
    width: 100%;                             /* Картинка занимает всю ширину контейнера */
    height: 100%;                            /* Картинка занимает всю высоту контейнера */
    object-fit: contain;                     /* КЛЮЧЕВОЕ: вписываем картинку ЦЕЛИКОМ, без искажений и обрезки (не растягивается) */
    cursor: zoom-in;                         /* курсор-лупа — «кликни, чтобы увеличить» */
    /* transition и transform убраны, чтобы картинка не дёргалась при наведении */
}

/* Миниатюры */
.tech-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 4 миниатюры в ряд */
    gap: 8px;                                /* зазор между миниатюрами */
    margin-top: 10px;                        /* отступ от главного фото */
}

.tech-thumb-btn {
    padding: 0;                              /* кнопка без внутренних отступов — img на всю ширину */
    border: 2px solid var(--c-border);       /* рамка миниатюры */
    overflow: hidden;                        /* обрезаем img по рамке */
    cursor: pointer;                         /* курсор-рука */
    background: var(--c-bg-card);            /* белый фон */
    aspect-ratio: 4 / 3;                     /* Жестко задаем пропорции контейнера миниатюры */
    transition: border-color 0.2s ease;      /* плавная смена рамки */
}

.tech-thumb-btn:hover,
.tech-thumb-btn.active {
    border-color: var(--c-accent);           /* изумрудная рамка — «выбрано/наведено» */
}

.tech-thumb-btn img {
    display: block;                          /* убираем inline-отступы */
    width: 100%;                             /* на всю ширину кнопки */
    height: 100%;                            /* на всю высоту кнопки */
    object-fit: contain;                     /* Миниатюры тоже не искажаем, вписываем целиком */
}


/* ==========================================================================
   4. ИНФО-КОЛОНКА
   ========================================================================== */
.tech-info {
    display: flex;                           /* колонка элементов с gap */
    flex-direction: column;                  /* направление сверху вниз */
    gap: 16px;                               /* единый вертикальный ритм */
    min-width: 0;                            /* фикс раздувания от длинного слова */
}

/* Метка категории */
.tech-category {
    display: inline-block;                   /* по ширине текста */
    font-size: 11px;                         /* мелко — метка */
    background: var(--c-chip-bg);            /* светло-серый фон */
    padding: 3px 8px;                        /* компактные отступы */
    color: var(--c-text-strong);             /* чуть темнее обычного — читаемость на сером */
    font-weight: 600;                        /* SemiBold — выделяется в строке */
    align-self: flex-start;                  /* прижимаем к левому краю, не растягиваем */
    text-transform: uppercase;               /* КАПС — метка */
    letter-spacing: 0.3px;                   /* лёгкая разрядка */
}

.tech-title {
    font-size: 32px;                         /* крупный H1 — главный акцент hero */
    font-weight: 800;                        /* ExtraBold */
    line-height: 1.2;                        /* плотно — многострочный H1 не «разваливается» */
    color: var(--c-heading);                 /* тёмно-изумрудный */
    margin: 0;                               /* сброс отступов */
    word-wrap: break-word;                   /* длинные слова не вылезают */
    overflow-wrap: anywhere;                 /* современный аналог, разрывает даже без пробелов */
}

/* Ряд бейджей-статусов */
.tech-badges {
    display: flex;                           /* бейджи в строку */
    flex-wrap: wrap;                         /* перенос, если бейджей много */
    gap: 8px;                                /* зазор между бейджами */
}

/* Краткое описание (лид) */
.tech-lead {
    font-size: 14.5px;                       /* чуть меньше базы — «вводный» текст */
    line-height: 1.6;                        /* комфортный интерлиньяж */
    color: var(--c-text);                    /* основной серый */
    margin: 0;                               /* сброс отступов */
}


/* ==========================================================================
   5. БЛОК ЦЕНЫ И CTA
   ========================================================================== */
.tech-cta {
    display: flex;                           /* кнопки в строку */
    flex-wrap: wrap;                         /* перенос на мобильных */
    gap: 12px;                               /* Зазор между кнопками, если их будет несколько */
    align-items: center;                     /* выравнивание по центру */
    justify-content: flex-start;             /* ВАЖНО: прижимает кнопку к левому краю, не дает улететь в центр */
    margin-top: 0;                           /* сброс верхнего отступа */
    margin-bottom: 0;                        /* сброс нижнего отступа */
}


/* ==========================================================================
   6. SEO-СНИППЕТ (краткое описание в hero)
   ========================================================================== */
.tech-seo-snippet {
    margin-top: 0;                           /* сброс */
    padding-top: 20px;                       /* воздух над текстом */
    border-top: 1px solid var(--c-border);   /* линия-разделитель от цены */
    font-size: 14px;                         /* базовый размер */
    line-height: 1.6;                        /* читаемый интерлиньяж */
    color: var(--c-text);                    /* основной серый */
}

.tech-seo-snippet p {
    margin: 0 0 12px;                        /* зазор между абзацами */
}

.tech-seo-snippet p:last-child {
    margin-bottom: 0;                        /* у последнего отступ не нужен */
}

.tech-seo-snippet strong {
    color: var(--c-heading);                 /* акцент на ключевых словах */
    font-weight: 700;                        /* жирный */
}


/* ==========================================================================
   7. ТАБЛИЦА ХАРАКТЕРИСТИК
   ========================================================================== */
.tech-specs-section {
    padding: var(--pad-section) 0;           /* стандартные отступы секции */
}

.specs-grid {
    display: block;                          /* обёртка без собственной сетки */
    width: 100%;                             /* на всю ширину */
}

.specs-block {
    width: 100%;                             /* на всю ширину */
    max-width: 700px;                        /* ограничение — таблица не растягивается на 1200px */
    margin: 0 auto;                          /* центрируем */
}

.specs-table {
    display: table;                          /* явно table — не даёт дочерним display:block ломать раскладку */
    width: 100%;                             /* на всю ширину блока */
    border-collapse: collapse;               /* слитные границы между ячейками */
    background: var(--c-bg-card);            /* белый фон таблицы */
    border: 1px solid var(--c-border);       /* изумрудная внешняя рамка */
    table-layout: fixed;                     /* фиксированная раскладка — колонки 45/55 не зависят от контента */
}

.specs-table tr:nth-child(even) {
    background: var(--c-bg-muted);           /* зебра — чётные строки светлее, легче читать */
}

.specs-table td {
    padding: 14px 20px;                      /* внутренние отступы ячеек */
    font-size: 14px;                         /* размер текста */
    color: var(--c-text);                    /* основной серый */
    border-bottom: 1px solid var(--c-bg-soft); /* тонкая светлая линия между строками */
    vertical-align: top;                     /* текст начинается сверху, если многострочный */
    word-wrap: break-word;                   /* длинные значения не вылезают */
    overflow-wrap: anywhere;                 /* даже без пробелов — рвёт */
    line-height: 1.5;                        /* комфортный интерлиньяж */
}

.specs-table td:first-child {
    color: var(--c-text-muted);              /* термин — приглушённый */
    width: 45%;                              /* фиксированная доля ширины */
    font-weight: 500;                        /* Medium — термин не «жирный» */
}

.specs-table td:last-child {
    font-weight: 700;                        /* значение — жирное */
    color: var(--c-heading);                 /* тёмно-изумрудный — акцент на значении */
    text-align: right;                       /* по правому краю — «столбец значений» */
    width: 55%;                              /* остальная ширина */
}

.specs-table tr:last-child td {
    border-bottom: none;                     /* у последней строки нижняя граница не нужна */
}


/* ==========================================================================
   8. ПОЛНОЕ ОПИСАНИЕ И СОПУТСТВУЮЩИЕ УСЛУГИ
   ========================================================================== */
.tech-tasks-section,
.tech-services-section {
    padding: var(--pad-section) 0;           /* стандартные отступы секции */
}

.tech-full-desc {
    font-size: 14.5px;                       /* чуть меньше базы */
    line-height: 1.7;                        /* крупнее интерлиньяж — длинный текст */
    color: var(--c-text-strong);             /* чуть темнее — читаемость */
}

.tech-full-desc p {
    margin: 0 0 16px;                        /* зазор между абзацами */
}

/* Сетка карточек услуг */
.services-grid {
    display: grid;                           /* grid для карточек */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* от 280px, тянутся поровну */
    gap: 20px;                               /* зазор между карточками */
}

/* Содержимое service-card */
.service-card h3 {
    font-size: 17px;                         /* чуть меньше базового H3 */
    font-weight: 700;                        /* жирный */
    color: var(--c-heading);                 /* тёмно-изумрудный */
    margin: 0 0 8px;                         /* только снизу */
}

.service-card p {
    font-size: 13px;                         /* мелкий */
    color: var(--c-text-muted);              /* приглушённый — описание вторично */
    margin: 0 0 12px;                        /* только снизу */
    line-height: 1.5;                        /* комфортный интерлиньяж */
}

.service-price {
    font-size: 16px;                         /* крупнее текста */
    font-weight: 700;                        /* жирный */
    color: var(--c-price);                   /* изумрудный — цена = акцент */
}


/* ==========================================================================
   9. КАЛЬКУЛЯТОР (обёртка; стили внутри calculator.css)
   ========================================================================== */
.tech-calc-section {
    padding: var(--pad-section) 0;           /* стандартные отступы секции */
    background: var(--c-bg-soft);            /* светло-изумрудный — выделяет калькулятор */
    border-top: 1px solid var(--c-border);   /* верхний разделитель */
}


/* ==========================================================================
   10. ПОХОЖАЯ ТЕХНИКА
   ========================================================================== */
.tech-related-section {
    padding: var(--pad-section) 0;           /* стандартные отступы секции */
}


/* ==========================================================================
   11. АДАПТИВНОСТЬ
   ========================================================================== */

/* --- Планшет (≤900px) --- */
@media (max-width: 900px) {
    .tech-hero-grid {
        grid-template-columns: 1fr;          /* одна колонка — галерея над инфо */
        gap: 32px;                           /* меньше зазор — вертикальный ритм */
    }

    .tech-gallery {
        position: static;                    /* sticky отключаем — на узком экране мешает */
    }

    .tech-title {
        font-size: 26px;                     /* H1 меньше — влезает на планшете */
    }

    .card-price--lg .card-price__value {
        font-size: 26px;                     /* цена соразмерно заголовку */
    }
}

/* --- Смартфон (≤768px) --- */
@media (max-width: 768px) {
    .tech-hero,
    .tech-specs-section,
    .tech-tasks-section,
    .tech-services-section,
    .tech-calc-section,
    .tech-related-section {
        padding: var(--pad-section-sm) 0;    /* 40px — компактнее на телефоне */
    }

    .tech-title {
        font-size: 22px;                     /* H1 ещё меньше */
    }

    .card-price--lg .card-price__value {
        font-size: 22px;                     /* цена соразмерно */
    }
}

/* --- Узкий экран (≤560px) --- */
@media (max-width: 560px) {
    .tech-gallery-thumbs {
        grid-template-columns: repeat(3, 1fr); /* 3 в ряд вместо 4 — крупнее миниатюры */
    }

    /* Таблица характеристик → карточки */
    .specs-table,
    .specs-table tbody,
    .specs-table tr,
    .specs-table td {
        display: block;                      /* ломаем таблицу: всё блоками */
        width: 100%;                         /* на всю ширину */
    }

    .specs-table {
        border: none;                        /* внешняя рамка не нужна — рамки у карточек */
        background: transparent;             /* фон тоже — у карточек свой */
    }

    .specs-table tr {
        background: var(--c-bg-card);        /* белый фон «карточки-строки» */
        border: 1px solid var(--c-border);   /* изумрудная рамка */
        border-bottom: none;                 /* нижнюю убираем — сливаем с соседней */
        padding: 14px 16px;                  /* внутренние отступы карточки */
    }

    .specs-table tr:last-child {
        border-bottom: 1px solid var(--c-border); /* у последней — вернуть нижнюю рамку */
    }

    .specs-table td {
        padding: 0;                          /* внутренние отступы уже у tr */
        border: none;                        /* границы ячеек не нужны */
        text-align: left;                    /* сбрасываем right из десктопа — специфичность та же, порядок решает */
        font-size: 14px;                     /* базовый размер */
    }

    /* Термин (первая ячейка) — верхняя строка карточки */
    .specs-table td:first-child {
        font-size: 11px;                     /* мелко — метка поля */
        color: var(--c-text-muted);          /* приглушенный */
        text-transform: uppercase;           /* КАПС — метка */
        letter-spacing: 0.3px;               /* разрядка */
        font-weight: 600;                    /* полужирный */
        margin-bottom: 4px;                  /* отступ до значения */
    }

    /* Значение (вторая ячейка) — крупная строка карточки */
    .specs-table td:last-child {
        font-size: 15px;                     /* крупнее термина */
        font-weight: 700;                    /* жирное значение */
        color: var(--c-heading);             /* тёмно-изумрудный */
        text-align: left;                    /* перебиваем right из десктопа */
        margin-bottom: 12px;                 /* отступ между карточками */
    }

    .specs-table tr:last-child td:last-child {
        margin-bottom: 0;                    /* у последней карточки нижний отступ не нужен */
    }
}