/*
 * Chillex Pro Child — templates CSS
 * Дизайн-система v1.0 (по research 22 брендов HVAC)
 * Принцип: Refined Industrial Premium — без гигантизма, по бенчмарку Carrier/Trane/Daikin
 */

/* ===== TOKENS ===== */
:root {
    /* Backgrounds */
    --c-bg-primary: #0B1220;
    --c-bg-secondary: #0F172A;
    --c-bg-section: #F8FAFC;
    --c-bg-section-alt: #F1F5F9;
    --c-bg-card: #FFFFFF;

    /* Text */
    --c-text-primary: #0B1220;
    --c-text-body: #1F2937;
    --c-text-muted: #475569;
    --c-text-faint: #94A3B8;
    --c-text-inverse: #FFFFFF;
    --c-text-inverse-muted: #CBD5E1;

    /* Accents */
    --c-accent-cool: #06B6D4;
    --c-accent-cool-dark: #0E7490;
    --c-accent-cool-light: #67E8F9;
    --c-accent-warm: #F59E0B;
    --c-accent-warm-dark: #D97706;

    /* Borders */
    --c-border: #E2E8F0;
    --c-border-strong: #CBD5E1;
    --c-border-subtle: #F1F5F9;
    --c-border-dark: #334155;

    /* Type */
    --font-display: "Manrope", "Inter", "Onest", system-ui, -apple-system, sans-serif;
    --font-body: "Inter", "Manrope", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

    /* Sizes — без гигантизма! */
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-3xl: 40px;
    --fs-4xl: 48px;

    /* Spacing */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* Radius */
    --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(11,18,32,0.06), 0 1px 2px rgba(11,18,32,0.04);
    --shadow-md: 0 4px 6px rgba(11,18,32,0.07), 0 2px 4px rgba(11,18,32,0.06);
    --shadow-lg: 0 10px 15px rgba(11,18,32,0.08), 0 4px 6px rgba(11,18,32,0.05);

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 960px;
    --section-py: 64px;
    --section-py-lg: 80px;
    --section-py-mobile: 48px;
    --hero-h-desktop: 560px;
    --hero-h-mobile: 400px;

    /* Motion */
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
}

/* ===== Базовая типографика ===== */
.chx-page-content,
.chx-page-content * {
    box-sizing: border-box;
}

.chx-page-content {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--c-text-body);
}

.chx-page-content h1,
.chx-page-content h2,
.chx-page-content h3,
.chx-page-content h4 {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--c-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

.chx-page-content h1 { font-size: clamp(28px, 3vw + 1rem, 44px); }
.chx-page-content h2 { font-size: clamp(24px, 2vw + 1rem, 32px); }
.chx-page-content h3 { font-size: 22px; }
.chx-page-content h4 { font-size: 18px; }

.chx-page-content p { margin: 0 0 var(--s-4) 0; }

.chx-page-content a {
    color: var(--c-accent-cool-dark);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.chx-page-content a:hover { color: var(--c-accent-cool); }

/* ===== Container ===== */
.chx-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}
.chx-container-narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Eyebrow ===== */
.chx-eyebrow {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent-cool);
    margin-bottom: var(--s-3);
}

/* ===== Buttons ===== */
.chx-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 12px 24px;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: var(--r-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.chx-btn-primary {
    background: var(--c-accent-warm);
    color: var(--c-text-primary);
}
.chx-btn-primary:hover {
    background: var(--c-accent-warm-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.chx-btn-secondary {
    background: var(--c-bg-primary);
    color: var(--c-text-inverse);
}
.chx-btn-secondary:hover {
    background: var(--c-bg-secondary);
}
.chx-btn-outline {
    background: transparent;
    color: var(--c-accent-cool);
    border-color: var(--c-accent-cool);
}
.chx-btn-outline:hover {
    background: var(--c-accent-cool);
    color: var(--c-text-inverse);
}
.chx-btn-ghost {
    background: rgba(255,255,255,0.05);
    color: var(--c-text-inverse);
    border: 1px solid rgba(255,255,255,0.18);
}
.chx-btn-ghost:hover {
    background: rgba(255,255,255,0.1);
}
.chx-btn-lg { padding: 14px 32px; font-size: var(--fs-md); }

/* ===== Hero ===== */
.chx-hero {
    position: relative;
    background: linear-gradient(135deg, #0B1220 0%, #1E293B 60%, #0F172A 100%);
    color: var(--c-text-inverse);
    min-height: var(--hero-h-desktop);
    padding: 80px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.chx-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
}
.chx-hero h1 {
    color: var(--c-text-inverse);
    margin: var(--s-3) 0 var(--s-4) 0;
    font-size: clamp(28px, 3.2vw + 1rem, 44px);
}
.chx-hero .chx-eyebrow {
    color: var(--c-accent-cool-light);
}
.chx-hero p.lead {
    font-size: var(--fs-md);
    line-height: 1.6;
    color: var(--c-text-inverse-muted);
    max-width: 640px;
    margin-bottom: var(--s-8);
}
.chx-hero__actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

/* Декоративные круги cyan */
.chx-hero::before,
.chx-hero::after {
    content: "";
    position: absolute;
    right: -150px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(6,182,212,0.18);
    border-radius: 50%;
    pointer-events: none;
}
.chx-hero::before { width: 560px; height: 560px; }
.chx-hero::after  { width: 340px; height: 340px; right: -50px; opacity: 0.6; }

@media (max-width: 768px) {
    .chx-hero { min-height: var(--hero-h-mobile); padding: 60px 0; }
    .chx-hero h1 { font-size: 28px; }
    .chx-hero p.lead { font-size: var(--fs-base); }
    .chx-hero::before { width: 360px; height: 360px; right: -200px; }
    .chx-hero::after  { width: 220px; height: 220px; right: -100px; }
}

/* ===== Sections ===== */
.chx-section {
    padding: var(--section-py) 0;
}
.chx-section--alt { background: var(--c-bg-section); }
.chx-section--dark {
    background: var(--c-bg-primary);
    color: var(--c-text-inverse);
}
.chx-section--dark h1, .chx-section--dark h2, .chx-section--dark h3 {
    color: var(--c-text-inverse);
}
@media (max-width: 768px) {
    .chx-section { padding: var(--section-py-mobile) 0; }
}

.chx-section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--s-12) auto;
}
.chx-section__head .lead {
    font-size: var(--fs-md);
    color: var(--c-text-muted);
    margin-top: var(--s-3);
}
.chx-section--dark .chx-section__head .lead {
    color: var(--c-text-inverse-muted);
}

/* ===== Card ===== */
.chx-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    transition: all var(--duration-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--c-accent-cool);
}
.chx-card__icon {
    width: 48px;
    height: 48px;
    background: var(--c-bg-section);
    border-radius: var(--r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-4);
}
.chx-card__icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--c-accent-cool);
    stroke-width: 1.75;
    fill: none;
}
.chx-card__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: var(--s-2);
    color: var(--c-text-primary);
    font-family: var(--font-display);
    line-height: 1.3;
}
.chx-card__desc {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: 1.5;
    margin-bottom: var(--s-4);
    flex-grow: 1;
}
.chx-card__link {
    color: var(--c-accent-warm);
    font-weight: 700;
    font-size: var(--fs-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: auto;
}
.chx-card__link:hover { color: var(--c-accent-warm-dark); }

/* ===== Grid ===== */
.chx-grid {
    display: grid;
    gap: var(--s-6);
}
.chx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.chx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.chx-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1023px) {
    .chx-grid--4, .chx-grid--5 { grid-template-columns: repeat(2, 1fr); }
    .chx-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
    .chx-grid--3, .chx-grid--4, .chx-grid--5 { grid-template-columns: 1fr; }
}

/* ===== Badge ===== */
.chx-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: 4px 10px;
    background: var(--c-bg-section);
    color: var(--c-text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
}
.chx-badge--cool { background: rgba(6,182,212,0.1); color: var(--c-accent-cool-dark); }
.chx-badge--warm { background: rgba(245,158,11,0.15); color: var(--c-accent-warm-dark); }

/* ===== Pillar nav (sticky chip-bar) ===== */
.chx-pillarnav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--c-bg-card);
    border-bottom: 1px solid var(--c-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.chx-pillarnav__inner {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-3) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.chx-pillarnav a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--c-bg-section);
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--r-md);
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-out);
}
.chx-pillarnav a:hover, .chx-pillarnav a.active {
    background: var(--c-bg-primary);
    color: var(--c-text-inverse);
}

/* ===== FAQ accordion ===== */
.chx-faq {
    max-width: var(--container-narrow);
    margin: 0 auto;
}
.chx-faq__item {
    border-bottom: 1px solid var(--c-border);
}
.chx-faq__item summary {
    cursor: pointer;
    padding: var(--s-5) 0;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-text-primary);
    font-family: var(--font-display);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.chx-faq__item summary::-webkit-details-marker { display: none; }
.chx-faq__item summary::after {
    content: "+";
    font-size: 24px;
    color: var(--c-accent-cool);
    font-weight: 400;
    transition: transform var(--duration-base) var(--ease-out);
}
.chx-faq__item[open] summary::after { transform: rotate(45deg); }
.chx-faq__item__body {
    padding: 0 0 var(--s-5) 0;
    color: var(--c-text-muted);
    font-size: var(--fs-base);
    line-height: 1.6;
}

/* ===== CTA banner (тёмный с двумя кнопками) ===== */
.chx-cta-banner {
    background: var(--c-bg-primary);
    color: var(--c-text-inverse);
    padding: var(--section-py) 0;
    text-align: center;
}
.chx-cta-banner h2 {
    color: var(--c-text-inverse);
    margin-bottom: var(--s-3);
}
.chx-cta-banner p {
    color: var(--c-text-inverse-muted);
    font-size: var(--fs-md);
    max-width: 600px;
    margin: 0 auto var(--s-8) auto;
}
.chx-cta-banner__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Stock status badges ===== */
.chx-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 12px;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.chx-stock::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
}
.chx-stock--available { background: rgba(16,185,129,0.1); color: #047857; }
.chx-stock--available::before { background: #10B981; }
.chx-stock--soon { background: rgba(245,158,11,0.15); color: var(--c-accent-warm-dark); }
.chx-stock--soon::before { background: var(--c-accent-warm); }
.chx-stock--order { background: rgba(100,116,139,0.1); color: var(--c-text-muted); }
.chx-stock--order::before { background: var(--c-text-faint); }

/* ===== Brand logos strip (для секции бренды) ===== */
.chx-brands {
    display: flex;
    gap: var(--s-12);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0.65;
}
.chx-brands__name {
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 800;
    color: var(--c-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--duration-fast) var(--ease-out);
}
.chx-brands__name:hover { color: var(--c-text-primary); }

/* ===== Specs table ===== */
.chx-specs {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.chx-specs th, .chx-specs td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--c-border-subtle);
    text-align: left;
}
.chx-specs tr:last-child th,
.chx-specs tr:last-child td { border-bottom: none; }
.chx-specs th {
    background: var(--c-bg-section);
    font-weight: 600;
    color: var(--c-text-muted);
    width: 40%;
}
.chx-specs td {
    color: var(--c-text-body);
    font-family: var(--font-mono);
    font-size: 13px;
}

/* ===== Утилиты ===== */
.chx-text-center { text-align: center; }
.chx-mt-4 { margin-top: var(--s-4); }
.chx-mt-8 { margin-top: var(--s-8); }
.chx-mb-4 { margin-bottom: var(--s-4); }
.chx-mb-8 { margin-bottom: var(--s-8); }

/* Focus visible — accessibility */
.chx-page-content *:focus-visible {
    outline: 2px solid var(--c-accent-cool);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .chx-page-content *,
    .chx-page-content *::before,
    .chx-page-content *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}