.carousel-text-rows-block {
    width: 98%;
    margin: 0 auto;
}

.carousel-text-row {
    display: flex;
    flex-direction: column; /* Default for mobile: stack */
    margin-bottom: 20px;
    gap: 20px;
}

.row-carousel {
    width: 100%;
    position: relative;
}

.row-text {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: url('../images/div-bg-grain.png');
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
}

.row-text-content {
    flex-grow: 1;
}

.row-title {
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-family: var(--font-main);
    font-size: clamp(1.1rem, 2vw, 1.6rem)
}

.row-text-content p {
    font-family: var(--font-serif), serif;
    margin: 0 !important;
    font-size: 1.1rem;
}

.row-button-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

@media (max-width: 767px) {
    .row-button-container {
        justify-content: right;
    }

    .row-title {
        margin-bottom: 2px;
        font-size: clamp(0.9rem, 2.1vw, 1.5rem);
    }

    .row-text-content p {
        font-size: clamp(0.8rem, 2vw, 1.1rem);
    }
}

.row-button {
    background-image: url('../images/button-bg-yellow.png');
    background-color: transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: none;
    color: var(--color-dark-grey-klu) !important;
    cursor: pointer;
    display: inline-block;
    font-family: var(--font-main);
    font-size: 1rem;
    padding: 0.8em 1.5em;
    text-align: center;
    text-decoration: none;
    transition: transform 0.2s ease;
    max-width: 100%;
    box-sizing: border-box;
}

.row-button:hover {
    transform: scale(1.05);
    color: var(--color-dark-grey-klu) !important;
}

.photo-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.photo-carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.photo-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.photo-carousel-item.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.photo-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-carousel-item.photo-item {
    cursor: pointer;
}

/* Hide navigation arrows as requested */
.carousel-prev,
.carousel-next {
    display: none;
}

/* Mobile specific alternating - but request says "On mobile, the carousel and text position should alternate in each row." */
/* Usually, alternating is done on desktop, and stacking on mobile. 
   But the user specifically said: "On mobile, the carousel and text position should alternate in each row."
   And "Odd rows left carousel right text, even rows the other way." usually refers to desktop layout.
   Wait, "On mobile, the carousel and text position should alternate in each row." 
   If they stack on mobile, how do they alternate? 
   Maybe he means they should NOT stack on mobile? Or the order in the stack should alternate?
   "Odd rows left carousel right text, even rows the other way." -> This implies a horizontal layout.
*/

@media (min-width: 768px) {
    .carousel-text-row {
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
    }

    /* Desktop should ALWAYS be carousel left, text right */
    .row-even {
        flex-direction: row;
    }

    .row-carousel {
        flex: 0 0 29%;
    }

    .row-text {
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
    }
}

@media (max-width: 767px) {
    .carousel-text-row {
        flex-direction: row;
        align-items: stretch;
        gap: 15px;
    }

    .row-even {
        flex-direction: row-reverse;
    }

    .row-carousel {
        flex: 0 0 48%;
    }

    .row-text {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
    }

    .row-text-content {
        font-size: 14px;
    }

    .row-button-container {
        margin-top: 3px;
    }

    .row-button {
        font-size: 0.7rem;
    }
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-prev svg,
.carousel-next svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0,0,0,0.5);
}