/* tc-carousel base */
.tc-carousel {
    position: relative;
    width: 100%;
}

.tc-layout-main {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: stretch;
}

.tc-left-container {
    flex: 0 0 50%;
    width: 50%;
    position: relative;
    overflow: hidden; /* Ensures sliding content does not touch or overflow into the other section */
    min-height: 200px;
}

.tc-right-container {
    flex: 0 0 50%;
    width: 50%;
    position: relative;
    overflow: hidden; /* Cliping boundary */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tc-track {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    display: flex;
}

.tc-track-content {
    align-items: center;
}

.tc-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    display: flex;
    z-index: 0;
}

.tc-slide-image {
    align-items: stretch;
}

.tc-slide-content {
    align-items: center;
}

.tc-slide.active {
    position: relative; /* Changing this makes the height based on the active slide. Wait, the user wants it based on the LONGEST testimonial. */
    /* Wait, if we need it based on the longest testimonial, we can make them all relative but hidden, or use a script to set height, or make the active one absolute and the track sizing based on all elements? No, standard CSS way: make all elements relative but position them in a grid so they overlap and take the max height. */
}

/* Updated max-height solution using CSS Grid for the track */
.tc-track-content, .tc-track-images {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.tc-slide {
    grid-area: 1 / 1 / 2 / 2;
    position: relative; /* Overlap them all using grid */
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    pointer-events: none;
}

.tc-slide.active,
.tc-slide.exit-left,
.tc-slide.enter-right {
    position: relative;
}

.tc-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    pointer-events: auto;
}

/* Animations - apply to all inner tracks */
.tc-slide-image,
.tc-slide-content {
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), ease-in-out;
}

/* Slide Transition (Right to Left) */
.tc-slide-image,
.tc-slide-content {
    transform: translateX(100%);
    opacity: 0;
}
.tc-slide-image.active,
.tc-slide-content.active {
    transform: translateX(0);
    opacity: 1;
}
.tc-slide-image.exit-left,
.tc-slide-content.exit-left {
    transform: translateX(-100%);
    opacity: 0;
    visibility: visible;
}
.tc-slide-image.enter-right,
.tc-slide-content.enter-right {
    transform: translateX(100%);
    opacity: 0;
    visibility: visible;
}

/* Content specific layout */
.tc-content-inner {
    width: 100%;
    text-align: left;
    padding: 0 40px; 
    box-sizing: border-box;
}

.tc-image-wrapper {
    width: 100%;
    height: 100%;
    padding: 0; /* REMOVED padding to remove the random space to the left of the image */
}
.tc-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tc-quote-icon {
    display: flex;
    justify-content: flex-start;
}

.tc-text {
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.6;
}

.tc-author {
    font-weight: bold;
}

@media (max-width: 767px) {
    .tc-layout-main {
        flex-direction: column;
    }
    .tc-left-container, .tc-right-container {
        flex: 0 0 100%;
        width: 100%;
    }
    .tc-content-inner {
        padding: 20px 0;
        text-align: center;
    }
    .tc-quote-icon {
        justify-content: center;
    }
}