// accordion.scss

.accordeon {
    .accordeon-item {
        border-bottom: 1px solid #ddd;
        cursor: pointer;
        transition: background-color 180ms ease, border-color 180ms ease;

        .closed-zone {
            display: flex;
            justify-content: space-between;
            align-items: center;

            // Keep a stable zone height (use min-height to avoid breaking on 2 lines)
            min-height: 54px;

            // Horizontal padding stays consistent
            padding: 0 20px;

            box-sizing: border-box;
            width: 100%;

            .accordeon-title {
                // Critical: allow wrapping inside flex context
                min-width: 0;
                flex: 1;

                // Make the title area take the full height of .closed-zone
                height: 100%;

                // Center text vertically (works for 1 or 2 lines)
                display: flex;
                align-items: center;

                // Wrapping
                white-space: normal;
                line-height: 1.35;

                margin: 0;
                padding-right: 16px; // Space before chevron
            }

            .vector-29 {
                flex-shrink: 0;

                // Center the chevron vertically too
                display: flex;
                align-items: center;

                transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
                transform: rotate(-180deg); // Default closed state

                // Avoid baseline alignment issues for image/SVG
                img,
                & {
                    vertical-align: middle;
                }
            }
        }

        .accordeon-internal-text {
            display: grid;
            grid-template-rows: 0fr;
            overflow: hidden;
            opacity: 0;
            transition:
                grid-template-rows 600ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
                padding 600ms cubic-bezier(0.4, 0, 0.2, 1);

            > * {
                min-height: 0;
            }
        }

        &.item-open {
            .accordeon-internal-text {
                grid-template-rows: 1fr;
                opacity: 1;
                padding-top: 8px;
            }

            .closed-zone {
                .vector-29 {
                    transform: rotate(0deg); // Open state
                }
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .accordeon-item {
            .accordeon-internal-text,
            .closed-zone .vector-29 {
                transition: none;
            }
        }
    }
}