/**
 * Horizontal Accordion Slides Block Styles
 *
 * Base layout styles for the accordion (3MW Blocks)
 * Client-specific styling (gradients, colors) in child theme
 *
 * @package TMW_Blocks
 * @since 1.0.0
 */

/* Accessibility: Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Section Styles */

/* Header Section */
.horizontal-accordion-header h2 {
    margin-bottom: var(--space-md);
}

.horizontal-accordion-header .section-subtitle {
    max-width: var(--max-width-content-md);
    margin-left: auto;
    margin-right: auto;
}

.horizontal-accordion-header .intro-cta {
    margin-bottom: var(--space-xl);
}

/* Accordion Container */
.horizontal-accordion-container {
    display: flex;
    gap: 0;
    height: clamp(400px, 65vh, 515px);

    /* Fixed height on desktop: min 600px, max 800px, prefer 65% viewport */
    border-radius: var(--radius-card);
    border: var(--border-width-thin) solid var(--color-border);
    overflow: hidden;
    position: relative;
}

/* Individual Accordion Panel */
.accordion-panel {
    position: relative;
    min-width: 100px;
    max-width: 100px;

    /* Collapsed width */

    /* flex-col utility class provides: display: flex; flex-direction: column */
    user-select: none;

    /* Prevent text/image selection on click */
    -webkit-user-select: none;

    /* Safari */
    -moz-user-select: none;

    /* Firefox */
    -ms-user-select: none;

    /* IE/Edge */
    z-index: 10;

    /* Collapsed panels stay above expanded content */
    isolation: isolate;

    /* Create stacking context to prevent overlap */
    transition: max-width 0.7s cubic-bezier(0.87, 0, 0.13, 1);
    background: rgb(255 255 255 / 50%);
}

/* Active (Expanded) Panel */
.accordion-panel.is-active {
    max-width: 100%;

    /* Takes remaining space */
    cursor: default;
    flex-direction: row;
    display: flex;
    align-items: stretch;

    /* Horizontal layout for active */
    z-index: 1;

    /* Active panel behind collapsed panels to prevent content overlap */
    margin-left: 0;

    /* Ensure proper spacing from collapsed panels */
    isolation: isolate;

    /* Create separate stacking context for content */
    overflow: hidden;

    /* Clip content within panel boundaries during transitions */
    background: var(--color-white);
}

/* Panel Border Separators */
.accordion-panel:not(:last-child) {
    border-right: var(--border-width-thin) solid var(--color-border);
}

/* Accordion Trigger Button - Invisible overlay for collapsed state interaction */
.accordion-trigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;

    /* Below icon and title so they remain visible */
    outline: none;
    -webkit-tap-highlight-color: transparent;

    /* Remove tap highlight on mobile */
}

/* Focus styles for keyboard navigation */
.accordion-trigger:focus-visible {
    outline: var(--focus-outline-width, 2px) solid var(--focus-outline-color, var(--color-primary));
    outline-offset: var(--focus-outline-offset, -4px);
    border-radius: var(--radius-card);
    z-index: 4;

    /* Bring focus outline above everything */
}

/* Hide trigger button when panel is active (expanded) - icon/title remain visible */
.accordion-panel.is-active .accordion-trigger {
    display: none;
    pointer-events: none;
}

/* Panel Icon - Collapsed state: centered, same top position across all panels */
.panel-icon-collapsed {
    position: absolute;
    top: var(--space-xl);

    /* Consistent top alignment across all panels */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    opacity: 1;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease-in-out, left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-icon-collapsed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Vertical Title - Collapsed state: centered, same bottom position across all panels */
.panel-title-vertical {
    position: absolute;
    bottom: var(--space-xl);

    /* Consistent bottom alignment across all panels */
    width: 100px;
    transform: rotate(-90deg) translateZ(0);

    /* Add translateZ for GPU acceleration */
    transform-origin: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease-in-out, left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden;

    /* Prevent subpixel rendering issues */
    -webkit-font-smoothing: antialiased;

    /* Improve font rendering on webkit browsers */
    -moz-osx-font-smoothing: grayscale;

    /* Improve font rendering on Firefox */
    will-change: transform;

    /* Optimize rendering */
}

/* Active Panel: Create left column for icon + title - display properties consolidated above */

/* Create narrow left column in active panel */
.accordion-panel.is-active::before {
    content: '';
    min-width: 100px;
    position: relative;
}

/* Position icon and title within the left 80px column - maintain same top/bottom alignment */
.accordion-panel.is-active .panel-icon-collapsed {
    left: 50px;
}

/* Panel Content (Expanded State) */
.panel-content {
    opacity: 0;
    visibility: hidden;
    height: 100%;
    transition: opacity 0.5s cubic-bezier(0.87, 0, 0.13, 1), visibility 0s cubic-bezier(0.87, 0, 0.13, 1), transform 0.7s cubic-bezier(0.87, 0, 0.13, 1);
    flex: 1;
    overflow: hidden;

    /* Prevent scrolling - content should fit in fixed height */
    display: flex;
    align-items: center;

    /* Vertically center content */
    justify-content: center;

    /* Center the content box horizontally */
    user-select: text;

    /* Re-enable text selection in expanded content */
    -webkit-user-select: text;

    /* Safari */
    -moz-user-select: text;

    /* Firefox */
    -ms-user-select: text;

    /* IE/Edge */
    pointer-events: none;

    /* Prevent interaction when hidden */
    transform: translateX(-30px);
}

.accordion-panel.is-active .panel-content {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.4s;

    /* Wait until panel expansion is well underway */
    pointer-events: auto;

    /* Enable interaction when visible */
    transform: translateX(0);
}

/* Panel Content Inner Wrapper - Two Column Layout */
.panel-content-inner {
    position: relative;
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    justify-content: space-around;


    /* Fixed minimum width prevents content reflow during transition */
    max-width: 100%;

    /* Prevent content from extending beyond panel boundaries */
    width: 100%;
    background: var(--color-white);

    /* White background only on content box */
    padding: var(--space-2xl) var(--space-sm);
}

/* Left Column - Content */
.panel-content-left {
    flex: 0 0 50%;

    /* Fixed width prevents text reflow */

}

/* Right Column - Image/Graphics */
.panel-content-right {
    flex: 0 0 50%;

    /* Fixed width prevents layout shift */

}

/* Panel Icon - Expanded State (in content) */
.panel-icon-expanded {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.panel-icon-expanded img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Panel Description */
.panel-description {
    margin-bottom: 1em;
    color: var(--color-text-secondary);
}

/* Panel CTA Button */
.panel-content .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Panel Slide Image */
.panel-slide-image {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.panel-slide-image img {
    object-fit: contain;
}

/* Decorative Graphics Container */
.panel-graphics {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Hover Effect on Collapsed Panels */
.accordion-panel:not(.is-active):hover {
    background-color: var(--color-white);
}

/* Focus States for Accessibility */
.accordion-panel:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;

    /* Positive offset ensures visibility */
}

.accordion-panel:focus:not(:focus-visible) {
    outline: none;
}

/* Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .accordion-panel,
    .panel-icon-collapsed,
    .panel-title-vertical,
    .panel-content {
        transition: none;
    }
}

/* Responsive Content Width (1025px to 1200px) */
@media (width <=1200px) and (width >=1025px) {
    /* Reduce content widths to fit narrower viewports while maintaining desktop layout */
    .panel-content-inner {
        padding: var(--space-xl) var(--space-xs);

        /* Reduce padding slightly */
    }

    .panel-icon-expanded {
        width: 64px;

        /* Reduce from 80px */
        height: 64px;
    }
}

/* Tablet (1024px and below) */
@media (width <=1024px) {
    .accordion-panel,
    .panel-icon-collapsed,
    .panel-title-vertical {
        transition: none;
    }

    .horizontal-accordion-container {
        flex-direction: column;
        min-height: auto;
        height: auto;
    }

    /* Mobile: Fade content from top instead of left */
    .accordion-panel.is-active .panel-content {
        transform: translateY(0);
    }

    .accordion-panel {
        flex: 0 0 72px;

        /* Collapsed height - 44px+ touch target */
        min-width: 100%;
        width: 100%;
        min-height: 72px;
        cursor: pointer;
    }

    .accordion-panel.is-active {
        flex-direction: column;
        flex: 0 0 auto;

        /* Auto height based on content */
        cursor: default;
    }

    .accordion-panel:not(:last-child) {
        border-right: none;
        border-bottom: var(--border-width-thin) solid var(--color-border);
    }

    /* Collapsed icon - move to left side with better positioning */
    .panel-icon-collapsed {
        left: var(--space-lg);
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
    }

    /* Vertical title - becomes horizontal with proper alignment */
    .panel-title-vertical {
        left: calc(var(--space-lg) + 48px + var(--space-md));
        right: var(--space-3xl);
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        text-align: left;
    }

    /* Add chevron indicator for collapsed panels */
    .accordion-panel:not(.is-active)::after {
        content: '';
        position: absolute;
        right: var(--space-lg);
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--color-text-secondary);
        border-bottom: 2px solid var(--color-text-secondary);
        opacity: 0.8;
        transition: all 0.3s ease;
        pointer-events: none;
    }

    .accordion-panel:not(.is-active):hover::after {
        opacity: 1;
        transform: translateY(-50%) rotate(45deg) translateX(2px);
    }

    /* Remove pseudo-element column in active state for tablet */
    .accordion-panel.is-active::before {
        display: none;
    }

    .accordion-panel.is-active .panel-icon-collapsed {
        position: relative;
        top: var(--space-md);
        transform: none;
        width: 80px;
        height: 80px;
        margin-left: var(--space-xl);
        padding: var(--space-xs) 0;
        left: 0;
    }

    .accordion-panel.is-active .panel-title-vertical {
        display: none;

        /* Hide collapsed title when expanded */
    }

    .panel-content {
        padding: var(--space-md) var(--space-xl);
        width: 100%;
        height: auto;
        transform: translateY(20px);

        /* Allow natural height expansion on tablet */
        overflow: visible;

        /* No scrolling on tablet - content expands */
    }

    .panel-content-inner {
        min-height: auto;
        min-width: 0;

        /* Override desktop min-width */
        padding: var(--space-md) 0;
    }

    .panel-slide-image img {
        max-height: 300px;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* Tablet/Mobile: Stack panel content vertically (991px and below) */
@media (width <=991px) {
    .panel-content-inner {
        flex-direction: column;
    }

    .panel-content-left,
    .panel-content-right {
        flex: 1 1 auto;
        width: 100%;
    }

    .panel-content-right {
        min-height: 200px;
    }
}

/* Mobile (768px and below) */
@media (width <=768px) {
    .horizontal-accordion-header {
        margin-bottom: var(--space-2xl);
        padding: 0 var(--space-md);
    }

    .accordion-panel {
        flex: 0 0 64px;

        /* Minimum 64px touch target */
        min-height: 64px;
    }

    /* Collapsed icon - smaller on mobile */
    .panel-icon-collapsed {
        width: 40px;
        height: 40px;
        left: var(--space-md);
    }

    /* Adjust title positioning for smaller icon */
    .panel-title-vertical {
        left: calc(var(--space-md) + 40px + var(--space-sm));
        right: var(--space-2xl);
        margin-left: var(--space-md);
    }

    /* Chevron adjustment for mobile */
    .accordion-panel:not(.is-active)::after {
        right: var(--space-lg);
        width: 8px;
        height: 8px;
    }

    .panel-content {
        padding: var(--space-lg) var(--space-md);
        height: auto;
        overflow: visible;
    }

    .panel-content-inner {
        min-width: 0;
    }

    .panel-content-left {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .accordion-panel.is-active .panel-icon-collapsed {
        width: 50px;
        height: 50px;
        margin-top: 0;
        margin-left: var(--space-md);
    }

    .panel-description {
        margin-right: 1em;
    }

    .panel-content .btn {
        width: 100%;
        text-align: center;
        margin-top: var(--space-md);
    }

    .panel-slide-image img {
        max-height: 250px;
        padding: var(--space-md);
    }
}

/* Extra small screens (480px and below) */
@media (width <=480px) {
    .horizontal-accordion-header {
        margin-bottom: var(--space-xl);
    }

    .accordion-panel {
        flex: 0 0 60px;
        min-height: 60px;
    }

    .panel-icon-collapsed {
        width: 36px;
        height: 36px;
        left: var(--space-sm);
    }

    .panel-title-vertical {
        left: calc(var(--space-sm) + 36px + var(--space-xs));
        right: var(--space-2xl);
    }

    .accordion-panel:not(.is-active)::after {
        right: var(--space-lg);
        width: 7px;
        height: 7px;
    }

    .panel-content {
        padding: var(--space-lg);
        height: auto;
        overflow: visible;
    }

    .panel-slide-image img {
        max-height: 200px;
    }
}