/* Premium Horizontal Accordion - Core Styles */

.pha-container { 
    display: flex; 
    width: 100%; 
    overflow: hidden; 
    border-radius: 10px; 
    background: #000; 
    --acc-speed: 0.7s;
    --acc-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

.pha-item { 
    position: relative; 
    flex: 1; 
    background-size: cover; 
    background-position: center; 
    transition: all var(--acc-speed) var(--acc-ease); 
    cursor: pointer; 
}

.pha-item.is-active { 
    flex: 4; 
}

.pha-item:focus-visible {
    outline: 3px solid #00FFCC;
    outline-offset: -3px;
}

.pha-overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%); 
    z-index: 1; 
    transition: background var(--acc-speed) var(--acc-ease); 
}

.pha-inner { 
    position: relative; 
    z-index: 2; 
    height: 100%; 
    padding: 40px; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    color: #fff; 
}

.pha-v-label { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotate(-90deg); 
    white-space: nowrap; 
    font-size: 1.2rem; 
    transition: 0.3s; 
    pointer-events: none; 
    opacity: 0.8; 
}

.pha-item.is-active .pha-v-label { 
    opacity: 0; 
}

.pha-expanded { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity calc(var(--acc-speed) * 0.7) calc(var(--acc-speed) * 0.3), 
                transform calc(var(--acc-speed) * 0.7) calc(var(--acc-speed) * 0.3); 
    visibility: hidden; 
    height: 0; 
}

.pha-item.is-active .pha-expanded { 
    opacity: 1; 
    transform: translateY(0); 
    visibility: visible; 
    height: auto; 
}

.pha-icon-wrapper { 
    margin-top: 20px; 
}

.pha-icon { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    color: #000; 
    text-decoration: none; 
    font-size: 1.5rem; 
    transition: transform 0.3s ease; 
    transform: rotate(var(--icon-rot, 0deg)); 
}

.pha-icon:hover { 
    transform: scale(1.1) rotate(calc(var(--icon-rot, 0deg) + 15deg)); 
}

/* =========================================
   Mobile & Tablet - Horizontal Swipe/Slide
   ========================================= */
@media (max-width: 1024px) {
    .pha-container { 
        flex-direction: row; /* Keep it horizontal */
        overflow-x: auto; /* Enable horizontal scrolling/swiping */
        overflow-y: hidden;
        scroll-snap-type: x mandatory; /* Creates the native "snap" feeling */
        scrollbar-width: none; /* Hides the ugly scrollbar in Firefox */
        -ms-overflow-style: none; /* Hides scrollbar in Edge */
    }
    
    /* Hides the scrollbar in Chrome/Safari/iOS so it looks like a sleek app */
    .pha-container::-webkit-scrollbar {
        display: none; 
    }
    
    .pha-item { 
        flex: 0 0 auto !important; /* Stops flexbox from squishing the tabs */
        width: 65vw; /* Inactive tabs take up 65% of the screen width */
        height: 100%; /* FIX: This tells the tab to fill the exact height you set in Elementor! */
        scroll-snap-align: center; /* Snaps the tab to the center of the screen when swiping */
    }
    
    .pha-item.is-active { 
        width: 85vw; /* Active tab expands to take up 85% of the screen */
    }
    
    .pha-v-label { 
        transform: translate(-50%, -50%) rotate(0deg); /* Text is easy to read */
        top: 50%; 
        white-space: normal; /* Allows the text to wrap to the next line */
        width: 90%; 
        text-align: center; 
        line-height: 1.3; 
    }

    /* Failsafe to ensure long words don't break the layout */
    .pha-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}