.cr-ortho-gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--e-global-color-secondary, #f0f0f0); /* Fallback */
    /* Border Radius handled by Elementor Control */
}

.cr-ortho-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.cr-ortho-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through to gallery if needed, but usually we want to block interaction on gallery if content is there? */
    /* Actually, we want button to be clickable. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items and text-align handled by control */
    padding: 20px;
}

.cr-ortho-content > * {
    pointer-events: auto; /* Enable interaction for content elements */
    max-width: 800px;
}

.cr-ortho-headline {
    margin: 0;
    /* Typography and color handled by Elementor */
}

.cr-ortho-description {
    margin: 0;
    /* Typography and color handled by Elementor */
}

.cr-ortho-grid {
    display: flex;
    width: 150%; /* Extra width to cover rotation */
    height: 150%; /* Extra height to cover rotation */
    margin-left: -25%;
    margin-top: -25%;
    gap: var(--gap-x, 20px);
    transform-origin: center center;
    transform: rotate(var(--ortho-angle, 10deg));
    will-change: transform;
}

.cr-mode-up-right .cr-ortho-grid {
    transform: rotate(var(--ortho-angle, 10deg));
}

.cr-mode-up-left .cr-ortho-grid {
    transform: rotate(calc(var(--ortho-angle, 10deg) * -1));
}

.cr-mode-alternating .cr-ortho-grid {
    transform: rotate(var(--ortho-angle, 10deg));
}

.cr-ortho-col {
    flex: 0 0 calc((100% - (var(--col-count, 4) - 1) * var(--gap-x, 20px)) / var(--col-count, 4));
    position: relative;
}

.cr-ortho-track {
    display: flex;
    flex-direction: column;
    gap: var(--gap-y, 20px);
    will-change: transform;
    animation: cr-scroll-up var(--anim-duration, 30s) linear infinite;
}

.cr-ortho-item {
    width: 100%;
    flex-shrink: 0;
}

.cr-ortho-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Default shadow if not set */
}

/* Animation Keyframes */
@keyframes cr-scroll-up {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, calc(-33.3333% - var(--gap-y, 20px) / 3), 0);
    }
}

/* Alternating Mode Logic */
.cr-mode-alternating .cr-ortho-col:nth-child(even) .cr-ortho-track {
    animation-direction: reverse;
}

/* Pause on Hover */
.cr-ortho-gallery:hover .cr-ortho-track {
    /* Handled by inline style via control */
}