/* 
====================================================================================================
PROJECT: INFINITY FLOW COMPUTERS (IFC)
FILE: partners.css
DESCRIPTION: 3D Flip Cards, Glow Effects, and Light Mode adaptations for the Partner Network.
====================================================================================================
*/

/* 
--------------------------------------------------------------------------
1. ОСНОВНАЯ ФИЗИКА 3D (CORE 3D MECHANICS)
--------------------------------------------------------------------------
*/
.perspective-1000 {
    perspective: 1200px;
}

.preserve-3d {
    transform-style: preserve-3d;
}

/* 
Аппаратное ускорение (Hardware Acceleration).
backface-visibility: hidden - прячет "изнанку" элемента при повороте.
translateZ(0) - заставляет браузер использовать видеокарту (GPU) для рендеринга.
*/
.card-front,
.card-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.rotate-y-180 {
    transform: rotateY(180deg);
}

/* Физика вращения (Упругая кривая Apple) */
.card-inner {
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1);
    will-change: transform;
    /* Подсказка браузеру для оптимизации */
}

/* 
--------------------------------------------------------------------------
2. СОСТОЯНИЯ: НАВЕДЕНИЕ И КЛИК (HOVER & ACTIVE)
--------------------------------------------------------------------------
*/

/* Для десктопов (ПК с мышью) */
@media (hover: hover) {
    .partner-wrapper:hover {
        z-index: 50;
        /* Карточка выходит на передний план, чтобы не перекрываться соседями */
    }

    .partner-wrapper:hover .card-inner {
        transform: rotateY(180deg);
    }

    /* Эффект для логотипа (увеличивается и светится) */
    .partner-wrapper:hover .card-front-img {
        transform: scale(1.1);
        opacity: 1 !important;
        filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.4));
    }
}

/* 
Для мобильных устройств (Срабатывает от JS добавления класса .active) 
*/
.partner-wrapper.active {
    z-index: 50;
}

.partner-wrapper.active .card-inner {
    transform: rotateY(180deg);
}

.partner-wrapper.active .card-front-img {
    transform: scale(1.1);
    opacity: 1 !important;
}

/* 
--------------------------------------------------------------------------
3. ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ (GLOW BORDER & LOGO)
--------------------------------------------------------------------------
*/

/* Градиентное свечение рамки на оборотной стороне */
.glow-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(45deg, rgba(168, 85, 247, 0.5), rgba(34, 211, 238, 0.5), rgba(168, 85, 247, 0.5));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.partner-wrapper:hover .glow-border::before,
.partner-wrapper.active .glow-border::before {
    opacity: 1;
}

/* Фикс для логотипов, чтобы они НИКОГДА не ломали сетку */
.logo-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.logo-container img {
    width: auto;
    height: auto;
    max-width: 65%;
    max-height: 45%;
    object-fit: contain;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.3, 1);
}


/* 
==========================================================================
4. АДАПТАЦИЯ ДЛЯ СВЕТЛОЙ ТЕМЫ (LIGHT MODE)
Переопределение фонов, теней и цветов.
==========================================================================
*/

/* Лицевая сторона (Белое стекло) */
html.light-mode .card-front {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Логотипы в светлой теме становятся черными */
html.light-mode .card-front-img {
    filter: brightness(0) !important;
    opacity: 0.8 !important;
}

html.light-mode .partner-wrapper:hover .card-front-img,
html.light-mode .partner-wrapper.active .card-front-img {
    filter: brightness(0) drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1)) !important;
}

/* Оборотная сторона (Белая карточка с мягкой тенью) */
html.light-mode .card-back {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1) !important;
}

/* Тексты и заголовки */
html.light-mode .card-back h3,
html.light-mode .text-white {
    color: #111827 !important;
    /* Глубокий черный текст */
}

/* Свечение рамки в светлой теме делаем нежнее */
html.light-mode .glow-border::before {
    background: linear-gradient(45deg, rgba(168, 85, 247, 0.3), rgba(34, 211, 238, 0.3), rgba(168, 85, 247, 0.3));
}

/* Кнопка с телефоном (Инвертируем фон) */
html.light-mode .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #111827 !important;
}

html.light-mode .bg-white\/5:hover {
    background-color: #a855f7 !important;
    /* Фиолетовый при наведении */
    color: #ffffff !important;
}

/* Фикс для видимости контактных блоков в обоих режимах */
header .bg-surface {
    background-color: var(--bg-panel) !important;
}

/* В светлой теме текст номеров должен быть почти черным */
html.light-mode header .text-content {
    color: #111827 !important;
}

/* Оставляем центральную ссылку яркой, но читаемой */
html.light-mode header a[href*="ifcit.uz"] {
    color: #0891b2 !important;
    /* Глубокий циан */
}

/* Убеждаемся, что рамки видны на белом */
html.light-mode header .border-line,
html.light-mode header .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* --- ФИКС КОНТАКТНЫХ КНОПОК --- */

/* В Тёмной теме (По умолчанию) */
.contact-pill {
    background-color: rgba(255, 255, 255, 0.03) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.contact-pill a {
    /* Если это не центральная ссылка, делаем текст белым */
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Центральная ссылка в тёмной теме пусть остается неоновой */
.contact-pill a[href*="ifcit.uz"] {
    color: #00e5ff !important;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

/* В Светлой теме */
html.light-mode .contact-pill {
    background-color: #f3f4f6 !important;
    /* Светло-серый фон */
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

html.light-mode .contact-pill a {
    color: #111827 !important;
    /* Чёрный текст */
}

html.light-mode .contact-pill a[href*="ifcit.uz"] {
    color: #0891b2 !important;
    /* Темно-бирюзовый для контраста */
    text-shadow: none;
}

/* Эффект при наведении */
.contact-pill:hover {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.light-mode .contact-pill:hover {
    background-color: #ffffff !important;
    border-color: #a855f7 !important;
}

/* ФИКС ВИДИМОСТИ ТЕКСТОВЫХ КАРТОЧЕК (MALIKA / ABU SAXIY) В СВЕТЛОЙ ТЕМЕ */
html.light-mode .partner-wrapper .card-front h2 {
    /* Меняем белый градиент на черный/темно-серый */
    background-image: linear-gradient(to bottom, #000000 0%, #4b5563 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* Принудительно делаем видимыми все внутренние спаны в заголовках */
html.light-mode .partner-wrapper .card-front h2 span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Фикс для маленьких надписей сверху (PTR_013, PTR_014 и т.д.) */
html.light-mode .partner-wrapper span.text-content-dim {
    color: #111827 !important;
    opacity: 0.6 !important;
}

/* Фикс для надписи OFFICIAL PARTNER */
html.light-mode .partner-wrapper .card-front span.text-cyan-500 {
    color: #0891b2 !important;
    /* Делаем циан чуть темнее для контраста */
    font-weight: 700 !important;
}

/* Фикс для логотипов со сплошным фоном (например, PTR_008) */
.partner-wrapper:has(span:contains("PTR_008")) .card-front-img,
article:nth-child(8) .card-front-img {
    /* Убираем фильтры, которые превращают всё в заливку */
    filter: none !important;

    /* Если фон у картинки белый, этот режим сделает его прозрачным на светлом фоне */
    mix-blend-mode: multiply;

    /* Делаем картинку аккуратнее */
    opacity: 0.9 !important;
    grayscale: 1;
    /* Оставляем ч/б стиль */
}

/* Дополнительно для темной темы, если там тоже "белый кирпич" */
body:not(.light-mode) .partner-wrapper:has(span:contains("PTR_008")) .card-front-img,
body:not(.light-mode) article:nth-child(8) .card-front-img {
    filter: invert(1) grayscale(1) !important;
    /* Инвертируем только цвета, не заливая всё яркостью */
    mix-blend-mode: screen;
    /* Убирает черный фон, оставляя белые буквы */
}

/* Прямой фикс для 8-й карточки (Brand Store) */
html.light-mode article:nth-child(8) .card-front-img {
    filter: grayscale(1) contrast(1.2) !important;
    /* Просто ч/б фото без заливки черным */
    opacity: 1 !important;
}

article:nth-child(8) .card-front-img {
    filter: grayscale(1) brightness(1.5) !important;
    /* Для темной темы */
}

/* Делаем номера телефонов в шапке белыми */
header a[href^="tel"] {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    /* Легкое свечение для стиля */
    transition: all 0.3s ease;
}

/* Эффект при наведении на номер */
header a[href^="tel"]:hover {
    color: #a855f7 !important;
    /* Станет фиолетовым при наведении */
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

/* Убедимся, что рамки вокруг номеров тоже четкие */
header .bg-surface.border-line {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Делаем номера телефонов в шапке белыми */
header a[href^="tel"] {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    /* Легкое свечение для стиля */
    transition: all 0.3s ease;
}

/* Эффект при наведении на номер */
header a[href^="tel"]:hover {
    color: #a855f7 !important;
    /* Станет фиолетовым при наведении */
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

/* Убедимся, что рамки вокруг номеров тоже четкие */
header .bg-surface.border-line {
    border-color: rgba(255, 255, 255, 0.15) !important;
}