/* Zemex Company Directions Component */

.zemex-company-directions {
    width: 100%;
    padding: 80px 0;
}

.zemex-directions-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Заголовок секции */
.zemex-directions-title {
    font-family: 'TT Wellingtons', 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #000000;
    margin: 0 0 56px 0;
    text-align: center;
    padding: 0 72px;
}

/* Контейнер карточек */
.zemex-directions-cards {
    display: flex;
    gap: 24px;
    width: 100%;
    height: 336px;
    position: relative;
    padding: 0 64px;
}

/* Карточка */
.zemex-direction-card {
    flex: 1;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    background: #F9FBFC;
    cursor: pointer;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: stretch;
    min-width: 0;
}

/* Фоновое изображение */
.zemex-card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.zemex-card-background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zemex-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}

/* Контент карточки */
.zemex-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
}

/* Бейдж */
.zemex-card-badge {
    display: flex;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.zemex-card-badge > span {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(0, 191, 63, 0.12);
    border-radius: 32px;
    font-family: 'TT Wellingtons', 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #030813;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
    white-space: nowrap;
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Заголовок карточки */
.zemex-card-title {
    font-family: 'TT Wellingtons', 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 30.8px;
    letter-spacing: -0.28px;
    color: #030813;
    margin: 0;
    text-align: center;
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Описание карточки */
.zemex-card-description {
    font-family: 'TT Wellingtons', 'Gilroy', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.16px;
    color: #FFFFFF;
    margin: 16px 0 0 0;
    text-align: center;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
                max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Исправление для мобильной версии - убираем max-height ограничения */
@media (max-width: 768px) {
    .zemex-card-description {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Ссылка-оверлей */
.zemex-card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

/* Состояния при hover */

/* Активная карточка (на которую наведен курсор) */
.zemex-direction-card.is-active {
    flex: 2;
}

.zemex-direction-card.is-active .zemex-card-background {
    opacity: 1;
}

.zemex-direction-card.is-active .zemex-card-badge {
    opacity: 1;
}

.zemex-direction-card.is-active .zemex-card-badge > span {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.2);
}

.zemex-direction-card.is-active .zemex-card-title {
    color: #FFFFFF;
}

.zemex-direction-card.is-active .zemex-card-description {
    opacity: 1;
    max-height: 100px;
}

/* Сжатые карточки (соседние) */
.zemex-direction-card.is-compressed {
    flex: 0.5;
}

.zemex-direction-card.is-compressed .zemex-card-title {
    font-size: 24px;
}

.zemex-direction-card.is-compressed .zemex-card-badge {
    opacity: 0.5;
}

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
    .zemex-directions-title {
        font-size: 36px;
        margin-bottom: 40px;
    }
    
    .zemex-directions-cards {
        height: 350px;
        gap: 16px;
    }
    
    .zemex-direction-card {
        padding: 24px;
    }
    
    .zemex-card-title {
        font-size: 24px;
    }
    
    .zemex-card-description {
        font-size: 14px;
    }
    
    .zemex-direction-card.is-compressed .zemex-card-title {
        font-size: 20px;
    }
}

    /* Адаптивность для мобильных */
@media (max-width: 768px) {
    .zemex-company-directions {
        padding: 0;
    }
    
    .zemex-directions-container {
        padding: 0 16px;
    }
    
    .zemex-directions-title {
        font-size: 28px;
        margin-bottom: 32px;
    }
    
    .zemex-directions-cards {
        flex-direction: column;
        height: auto;
        gap: 16px;
        padding: 0;
    }
    
    .zemex-direction-card {
        flex: none;
        height: 246px; /* Height from Figma */
        padding: 24px 20px; /* Adjusted padding */
        transform: none !important;
        border-radius: 24px; /* Figma corner radius */
    }
    
    .zemex-card-content {
        padding: 0;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
    }
    
    /* Show background always */
    .zemex-card-background {
        opacity: 1;
    }
    
    .zemex-card-overlay {
        background: rgba(40, 36, 33, 0.52); /* #282421 with 0.52 opacity */
    }
    
    /* Badge styling */
    .zemex-card-badge {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
        opacity: 1;
    }
    
    .zemex-card-badge > span {
        background: rgba(244, 246, 249, 0.24); /* #f4f6f9 with 0.24 opacity from Figma */
        color: #FFFFFF;
        font-size: 12px;
        line-height: 18px;
        padding: 8px 16px;
        border-radius: 32px;
        display: flex;
        align-items: center;
    }
    
    .badge-text-prefix {
        opacity: 0.6;
        margin-right: 4px;
        background: transparent !important;
        padding: 0 !important;
    }
    
    .badge-text-suffix {
        opacity: 1;
        background: transparent !important;
        padding: 0 !important;
    }
    
    /* Title styling */
    .zemex-card-title {
        color: #FFFFFF;
        font-size: 23px;
        line-height: 24px;
        margin-bottom: auto; /* Push description to bottom if needed, or rely on spacing */
    }
    
    /* Description styling */
    .zemex-card-description {
        display: block;
        opacity: 1;
        max-height: none;
        overflow: visible;
        color: #FFFFFF;
        font-size: 14px;
        line-height: 19.6px; /* 140% */
        margin-top: 12px; /* Gap from Figma title to desc seems larger but content flows */
        margin-bottom: 0;
    }
    
    /* Disable hover effects */
    .zemex-direction-card.is-active,
    .zemex-direction-card.is-compressed {
        flex: none;
        transform: none;
    }
    
    /* Remove any mobile-active specific overrides as everything is active by default */
    .zemex-direction-card.mobile-active .zemex-card-description {
        animation: none;
    }
}

/* Анимация появления при скролле */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.zemex-direction-card {
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
}

.zemex-direction-card:nth-child(1) {
    animation-delay: 0.1s;
}

.zemex-direction-card:nth-child(2) {
    animation-delay: 0.2s;
}

.zemex-direction-card:nth-child(3) {
    animation-delay: 0.3s;
}

/* Улучшение доступности */
.zemex-direction-card:focus-visible {
    outline: 3px solid #00BF3F;
    outline-offset: 4px;
}

/* Предотвращение выделения текста при клике */
.zemex-direction-card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Плавная загрузка изображений */
.zemex-card-background-image {
    will-change: opacity;
    transition: opacity 0.3s ease-in-out;
}