/* --- ROOT VARIABLES (Scoped by Widget Render) --- */
.process-wrapper-root {
    /* Fallbacks if not set by Elementor */
    --c-purple: #462680;
    --c-purple-dark: #351c63;
    --c-white: #ffffff;
    --c-text-dark: #222222;
    --gap: 30px;
    --anim-speed: 0.7s;
}

.process-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
    gap: var(--gap);
    padding: 20px 0;
    min-height: 400px;
}

/* --- CARD BASE --- */
.phase-card {
    position: relative;
    background: var(--c-purple);
    color: var(--c-white);
    border-radius: 8px;
    cursor: pointer;
    flex: 1;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 
        flex var(--anim-speed) cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.4s ease,
        color 0.4s ease,
        transform 0.3s ease;
    overflow: visible;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.process-container:not(.has-active) .phase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0, 0.2);
}

/* --- ARROWS --- */
.phase-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid var(--c-purple);
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.process-container.has-active .phase-card::after { opacity: 0; }

/* --- TEXT --- */
.card-header {
    padding: 20px;
    width: 100%;
    transition: all 0.5s ease;
    z-index: 2;
}
.phase-num {
    display: block; font-size: 14px; font-weight: bold;
    text-transform: uppercase; margin-bottom: 8px; opacity: 0.9;
}
.phase-title {
    font-size: 20px; font-weight: 700; margin: 0; line-height: 1.3;
}

/* --- CONTENT --- */
.card-content {
    display: none;
    padding: 0 40px 40px 40px;
    text-align: left;
    opacity: 0;
    width: 100%;
    color: var(--c-text-dark);
    animation: fadeIn 0.5s forwards 0.3s;
}
@keyframes fadeIn { to { opacity: 1; } }

/* --- CLOSE BTN --- */
.close-btn {
    position: absolute; top: 15px; right: 15px;
    font-size: 24px; color: #999; cursor: pointer;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
    z-index: 10; background: none; border: none;
}
.close-btn:hover { color: var(--c-purple); }

/* --- ACTIVE STATE --- */
.phase-card.active {
    flex: 3.5;
    aspect-ratio: auto;
    min-height: 500px;
    background: #ffffff;
    color: var(--c-text-dark);
    border: 1px solid #ddd;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: default;
    overflow: hidden;
}
.phase-card.active .card-header { text-align: left; padding: 40px 40px 20px 40px; }
.phase-card.active .phase-num { color: var(--c-purple); }
.phase-card.active .phase-title { font-size: 28px; }
.phase-card.active .card-content { display: block; }
.phase-card.active .close-btn { opacity: 1; pointer-events: auto; }

/* --- INACTIVE SIBLING STATE --- */
.process-container.has-active .phase-card:not(.active) {
    flex: 0.5;
    aspect-ratio: auto;
    /* Darken bg slightly for contrast */
    filter: brightness(0.9); 
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.process-container.has-active .phase-card:not(.active) .card-header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    padding: 0;
    white-space: nowrap;
    width: auto;
}
.process-container.has-active .phase-card:not(.active) .phase-num {
    margin-bottom: 10px; font-size: 12px;
}
.process-container.has-active .phase-card:not(.active) .phase-title {
    font-size: 16px;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
    .process-container { flex-direction: column; height: auto; }
    .phase-card { width: 100%; aspect-ratio: auto; min-height: 100px; flex: none; margin-bottom: 10px; }
    .phase-card::after { display: none; }
    .process-container.has-active .phase-card:not(.active) {
        flex: none; height: 60px; flex-direction: row;
    }
    .process-container.has-active .phase-card:not(.active) .card-header {
        writing-mode: horizontal-tb; transform: none;
    }
}