/* ═══════════════════════════════════════════════
   PRODUCT PAGE — page-specific styles only.
   Базовые примитивы (.surface-*, .breadcrumb, .eyebrow,
   .pill, .btn, .container, .section, .section-header,
   .hub, .cta-band, .reveal) переиспользуются из дизайн-системы.
═══════════════════════════════════════════════ */

/* ── Ритм секций карточки продукта компактнее общего на 30% ── */
.section {
    padding-top: calc(var(--section-y) * 0.7);
    padding-bottom: calc(var(--section-y) * 0.7);
    /* якоря липкой навигации по разделам не должны прятаться под .spec-nav */
    scroll-margin-top: var(--spec-nav-h);
}

/* ── Split hero (text | visual stage) ── */
.prod-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 56px var(--gutter) 64px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
}
.prod-hero__title {
    font-size: var(--fs-h1);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: #fff;
    margin: 16px 0 20px;
}
.prod-hero__lede {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.62);
    max-width: 52ch;
}
.prod-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}
.prod-hero__chip {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 7px 13px;
}
.prod-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}
/* visual stage — рендер-плейсхолдер в стиле орбит showcase */
.prod-hero__stage {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prod-hero__orbits {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.prod-hero__icon {
    width: 52%;
    height: 52%;
    position: relative;
    z-index: 1;
    animation: hero-svg-in 0.9s var(--ease-out) 0.4s both;
}
/* Растровая картинка раздела (вместо SVG-иконки) — тот же центр сцены. */
.prod-hero__icon-img {
    width: 62%;
    height: 62%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    animation: hero-svg-in 0.9s var(--ease-out) 0.4s both;
}
@keyframes hero-svg-in {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── О продукте — 2 колонки ── */
.prod-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
/* heading — идентично .section-header h2 */
.prod-about__title {
    font-size: var(--fs-h2);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--c-ink-1);
    margin: 10px 0 24px;
}
.prod-about__text p:not(.section-eyebrow) {
    font-size: var(--fs-body);
    color: var(--c-mid);
    line-height: 1.85;
    margin-bottom: 18px;
}
.prod-about__text p:last-child { margin-bottom: 0; }
.prod-about__media {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--c-line);
    background:
        linear-gradient(135deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.prod-about__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(12,15,16,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12,15,16,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
}
.prod-about__media span {
    position: relative;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-ghost);
}
.prod-about__media img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 24px;
}
/* Реальное фото — без плашки-контейнера и сеточного паттерна, только картинка
   в своих пропорциях. Плейсхолдер (нет фото) сохраняет оформленный бокс. */
.prod-about__media--photo {
    aspect-ratio: auto;
    border: none;
    background: none;
}
.prod-about__media--photo::before {
    content: none;
}
.prod-about__media--photo img {
    height: auto;
    padding: 0;
}

/* ── Spec table ── */
.prod-specs {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--c-line);
}
.prod-specs th,
.prod-specs td {
    text-align: left;
    padding: 16px 22px;
    border-bottom: 1px solid var(--c-line);
    font-size: 14px;
}
.prod-specs tr:last-child th,
.prod-specs tr:last-child td { border-bottom: none; }
.prod-specs th {
    width: 38%;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-mid);
    background: var(--c-bg);
    border-right: 1px solid var(--c-line);
    vertical-align: top;
}
.prod-specs td { color: var(--c-ink-1); }
.prod-specs tbody tr { transition: background 0.18s; }
.prod-specs tbody tr:hover td { background: var(--c-teal-ghost); }

.prod-specs__group-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-ink-1);
    margin: 40px 0 14px;
}
.prod-specs__group-title:first-child { margin-top: 0; }

/* Компактная таблица характеристик внутри карточки модификации — тот же
   стиль, но меньше отступов, без фона у th. */
.prod-specs--compact th,
.prod-specs--compact td {
    padding: 10px 14px;
    font-size: 13px;
}
.prod-specs--compact th {
    background: none;
    width: 42%;
}

/* ── Модификации ── */
.prod-variant-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}
.prod-variant {
    background: var(--c-white);
    border: 1px solid var(--c-line);
}
.prod-variant__media {
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}
.prod-variant__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px;
}
.prod-variant__body { padding: 28px 28px 8px; }
.prod-variant__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-ink-1);
    margin-bottom: 16px;
}
.prod-variant__body .prod-specs { border: none; }
.prod-variant__body .prod-specs th { border-right: none; }

/* ── Возможности (текстовые блоки + свои скриншоты) ── */
.prod-capability { margin-bottom: 56px; }
.prod-capability:last-child { margin-bottom: 0; }
.prod-capability__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-ink-1);
    margin-bottom: 10px;
}
.prod-capability__intro {
    font-size: var(--fs-body);
    color: var(--c-mid);
    margin-bottom: 18px;
}
.prod-capability__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.prod-capability__list li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--c-ink-1);
    padding-left: 18px;
    position: relative;
}
.prod-capability__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 0;
    background: var(--c-teal);
}

/* ── Возможности — сетка текст/просмотрщик ── */
.prod-capability__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* ── Просмотрщик скриншотов: большое фото + стрелки + превью снизу ── */
.shot-viewer__stage {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.shot-viewer__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}
.shot-viewer__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 15, 16, 0.72);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    z-index: 1;
}
.shot-viewer__arrow:hover {
    background: var(--c-teal);
    color: var(--c-ink);
}
.shot-viewer__arrow--prev { left: 14px; }
.shot-viewer__arrow--next { right: 14px; }
.shot-viewer__caption {
    margin-top: 12px;
    font-size: 13px;
    color: var(--c-mid);
    text-align: center;
}
.shot-viewer__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
}
.shot-viewer__thumb {
    flex: 0 0 auto;
    width: 76px;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 1px solid var(--c-line);
    background: var(--c-bg);
    cursor: pointer;
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.2s, border-color 0.2s;
}
.shot-viewer__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shot-viewer__thumb:hover { opacity: 0.85; }
.shot-viewer__thumb.is-active {
    opacity: 1;
    border-color: var(--c-teal);
}

/* ── Advantages grid ── */
/* У сетки нет ни фона, ни рамки — каждая карточка рисует свой контур целиком,
   а соседние склеиваются отрицательными полями в одну волосяную линию.
   Незаполненная ячейка последнего ряда тогда просто отсутствует: там фон
   секции, без плашки и без обрамления. Работает на любом числе колонок. */
.prod-adv-grid {
    display: grid;
    /* Колонок — сколько преимуществ у продукта, но не больше 4 (--adv-cols из шаблона). */
    grid-template-columns: repeat(var(--adv-cols, 4), 1fr);
}
.prod-adv {
    background: var(--c-white);
    padding: 36px 32px;
    margin: -1px 0 0 -1px;
    border: 1px solid var(--c-line);
    position: relative;
    overflow: hidden;
    transition: background 0.3s var(--ease-out);
}
.prod-adv::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--c-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.34s var(--ease-out);
}
.prod-adv:hover { background: var(--c-bg); }
.prod-adv:hover::before { transform: scaleX(1); }
.prod-adv__num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-teal-deep);
    letter-spacing: 0.08em;
}
.prod-adv__title {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--c-ink-1);
    margin: 16px 0 10px;
}
.prod-adv__text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--c-mid);
}

/* ── Use cases ── */
.prod-uc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.prod-uc {
    border: 1px solid var(--c-line);
    background: var(--c-white);
    transition: box-shadow 0.25s, border-color 0.25s;
}
.prod-uc:hover {
    box-shadow: var(--shadow-lift);
    border-color: var(--c-line-2);
}
.prod-uc__media {
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(135deg, var(--c-ink) 0%, var(--c-ink-2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--c-line);
    position: relative;
    overflow: hidden;
}
.prod-uc__media svg { width: 44px; height: 44px; }
.prod-uc__body { padding: 24px 26px 28px; }
.prod-uc__title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--c-ink-1);
    margin-bottom: 8px;
}
.prod-uc__text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--c-mid);
}

/* ── Related grid (up to 4 hub tiles) ── */
/* Число связанных материалов не всегда кратно 4 — гасим фон/gap контейнера,
   чтобы незаполненные ячейки не показывали серую плашку (см. .spec-siblings). */
.prod-related .hub {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 0;
    background: transparent;
    border: none;
}
.prod-related .hub-tile {
    margin: -1px 0 0 -1px;
    border: 1px solid var(--c-line);
}
/* Заголовки плиток — на одной горизонтали независимо от длины описания
   (базовый .hub-tile__body центрирует контент, из-за чего заголовок «плавает»). */
.prod-related .hub-tile__body {
    justify-content: flex-start;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .prod-hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .prod-hero__stage { max-width: 360px; }
    .prod-about { grid-template-columns: 1fr; gap: 32px; }
    .prod-adv-grid { grid-template-columns: repeat(2, 1fr); }
    .prod-uc-grid { grid-template-columns: repeat(2, 1fr); }
    .prod-related .hub { grid-template-columns: repeat(2, 1fr); }
    .prod-capability__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
    .prod-adv-grid { grid-template-columns: 1fr; }
    .prod-uc-grid { grid-template-columns: 1fr; }
    .prod-related .hub { grid-template-columns: 1fr; }
    .prod-specs th { width: 44%; }
    .prod-variant-grid { grid-template-columns: 1fr; }
}