/* Custom styles for the desktop accordion transitions */
.comboedge-interactive-hero .desktop-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: flex var(--ce-hero-transition-speed, 0.6s) cubic-bezier(0.25, 1, 0.5, 1), width var(--ce-hero-transition-speed, 0.6s) cubic-bezier(0.25, 1, 0.5, 1);
    will-change: flex, width;
}

.comboedge-interactive-hero .desktop-card.active {
    flex: 1 1 0%;
    cursor: default;
}

.comboedge-interactive-hero .desktop-card.tab {
    width: 4.5rem;
    flex: none;
    cursor: pointer;
    transition: flex var(--ce-hero-transition-speed, 0.6s) cubic-bezier(0.25, 1, 0.5, 1), width 0.2s ease;
}

.comboedge-interactive-hero .desktop-card.tab:hover {
    width: calc(4.5rem + 1.5rem) !important;
}

@media (min-width: 1024px) {
    .comboedge-interactive-hero .desktop-card.tab {
        width: 5.5rem;
    }
    .comboedge-interactive-hero .desktop-card.tab:hover {
        width: calc(5.5rem + 1.5rem) !important;
    }
}

/* Content fading */
.comboedge-interactive-hero .card-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    transition-delay: 0s;
}

.comboedge-interactive-hero .desktop-card.active .card-content {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s;
}

/* Vertical text fading */
.comboedge-interactive-hero .vertical-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    opacity: 1;
    transition: opacity 0.3s ease;
}

.comboedge-interactive-hero .desktop-card.active .vertical-title {
    opacity: 0;
    pointer-events: none;
}

/* Mobile carousel transitions */
.comboedge-interactive-hero .mobile-slide {
    transition: opacity var(--ce-hero-transition-speed, 0.5s) ease-in-out;
}