/* ============================================
   Стили страницы Index (русская версия)
   ============================================ */

/* --- Блок героя: ширина 676px на больших экранах --- */
.hero-info-block {
    max-width: 676px;
}

/* --- Слайдер карточек функций --- */
#functions-slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    box-sizing: border-box;
}
#functions-slider-track {
    width: max-content !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}
.functions-slider::-webkit-scrollbar { height: 6px; }
.functions-slider::-webkit-scrollbar-track { background: var(--ns-stroke-2, #e5e7eb); border-radius: 3px; }
.functions-slide {
    flex-shrink: 0 !important;
    max-width: min(92vw, 420px) !important;
    width: min(92vw, 380px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
@media (min-width: 640px) {
    .functions-slide { width: min(85vw, 420px) !important; max-width: min(85vw, 460px) !important; }
}
@media (min-width: 768px) {
    .functions-slide { width: min(75vw, 440px) !important; max-width: min(75vw, 480px) !important; }
}
@media (min-width: 1024px) {
    .functions-slide { width: min(460px, 30vw) !important; max-width: 480px !important; }
}
@media (min-width: 1440px) {
    .functions-slide { width: min(500px, 28vw) !important; max-width: 520px !important; }
}
.functions-slide .bg-background-3 {
    min-width: 0 !important;
    overflow: hidden !important;
}
.functions-slide .function-card-media {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.functions-slide .function-card-poster {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
    display: block !important;
}
.functions-slide .function-card-video {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.functions-slider::-webkit-scrollbar-thumb { background: var(--ns-secondary, #374151); border-radius: 3px; }
.functions-slider::-webkit-scrollbar-thumb:hover { background: #1f2937; }
.function-card-media::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    background: rgba(0,0,0,0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 34px 34px;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,0.25);
}
.function-card-media:hover::after { opacity: 0; }
.function-card-media:hover .function-card-poster { opacity: 0; }
.function-card-media:hover .function-card-video { opacity: 1; }

/* --- Hover-стили для карточек Проблема/Решение --- */
.positioning-card-media:hover .positioning-card-poster { opacity: 0; }
.positioning-card-media:hover .positioning-card-video { opacity: 1; }

/* --- Стили калькулятора (тёмная тема) --- */
@keyframes calcInfoFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* При системной тёмной теме — светлые заголовки в блоке калькулятора */
@media (prefers-color-scheme: dark) {
    #calculator h2,
    #calculator .flex.flex-col.items-center.text-center.gap-y-4 p,
    #calculator h3,
    #calculator .text-tagline-2 {
        color: #f3f4f6 !important;
    }
    #calculator input,
    #calculator select {
        background-color: #ffffff !important;
        color: #1f2937 !important;
    }
    /* Иконки подсказок (кнопки «Подробнее») — светлые */
    #calculator button[title="Подробнее"],
    #calculator button[title="Подробнее"] svg {
        color: #f3f4f6 !important;
        fill: #f3f4f6 !important;
    }
    #calculator button[title="Подробнее"] {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    #calculator button[title="Подробнее"]:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }
    /* Белый фон блока сметы в тёмной теме */
    #calcResult {
        background-color: #ffffff !important;
        border-radius: 1rem;
        padding: 2rem;
    }
    #calcResult h3,
    #calcResult .text-tagline-1 {
        color: #1f2937 !important;
    }
    #calcResult th,
    #calcResult td {
        color: #1f2937 !important;
    }
    /* Белый фон строк таблицы сметы */
    #calcResult tbody tr {
        background-color: #ffffff !important;
        border-color: rgba(31, 41, 55, 0.08) !important;
    }
    #calcResult tbody tr:nth-child(even) {
        background-color: #f9fafb !important;
    }
    #calcResult .text-tagline-2 {
        color: #6b7280 !important;
    }
    #calcResult .text-heading-5 {
        color: #1f2937 !important;
    }
    /* Разделительные линии в заголовке сметы */
    #calcResult .h-px {
        background-color: rgba(31, 41, 55, 0.1) !important;
    }
    /* Обводка таблицы */
    #calcResult .overflow-x-auto {
        border-color: rgba(31, 41, 55, 0.1) !important;
    }
    /* Фон заголовка таблицы */
    #calcResult thead tr {
        background-color: #f3f4f6 !important;
    }
    /* Фон карточек «Срок» и «Рабочих дней» */
    #calcResult .grid > div.bg-secondary\/5,
    #calcResult .grid > div.dark\:bg-accent\/5 {
        background-color: #f3f4f6 !important;
    }
    /* Карточка «Итого» — оставляем тёмный фон, но текст белый */
    #calcResult .grid > div.bg-secondary {
        background-color: #1f2937 !important;
    }
    #calcResult .grid > div.bg-secondary .text-tagline-2 {
        color: #ffffff !important;
    }
    #calcResult .grid > div.bg-secondary .text-heading-5 {
        color: #ffffff !important;
    }
    /* Верхний блок «Итоговая стоимость» (под кнопкой) — тёмный фон, белый текст */
    #calcResultTop .bg-secondary {
        background-color: #1f2937 !important;
    }
    #calcResultTop .text-tagline-2 {
        color: #ffffff !important;
    }
    #calcResultTop .text-heading-3 {
        color: #ffffff !important;
    }
}

/* ========================================
   Утилиты градиента для подписей карточек
   ======================================== */

/* Градиент снизу вверх */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

/* Начальный цвет: чёрный */
.from-black {
    --tw-gradient-from: #000 var(--tw-gradient-from-position, );
    --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position, );
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Промежуточный цвет: чёрный 70% */
.via-black\/70 {
    --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position, );
    --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.7) var(--tw-gradient-via-position, ), var(--tw-gradient-to);
}

/* Конечный цвет: прозрачный */
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position, );
}

/* Полужирный текст */
.font-semibold {
    font-weight: 600;
}

/* Межстрочный интервал: компактный */
.leading-snug {
    line-height: 1.375;
}

/* Адаптивный размер текста: base на md+ */
@media (min-width: 48rem) {
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* Тень текста */
.drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}