/* ==========================================================================
   Dual Marquee Hero - Marquee Images (Addronix Addons)
   ========================================================================== */

/* Wrapper */
.aafe-dual-marquee-hero__wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: var(--aafe-dual-marquee-hero-bg, #fafeff);
    padding: 80px 16px;
    color: #171717;
}

/* Grid Layout */
.aafe-dual-marquee-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

/* Left Content Area */
.aafe-dual-marquee-hero__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.aafe-dual-marquee-hero__top-text-heading {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
}

.aafe-dual-marquee-hero__top-text {
    display: inline-block;
    color: #3569f1;
}

.aafe-dual-marquee-hero__heading {
    margin: 0;
    width: 100%;
    color: #171717;
}

.aafe-dual-marquee-hero__subtitle {
    width: 100%;
    color: #333333;
    max-width: 450px;
}

/* Button */
.aafe-dual-marquee-hero__cta-wrap {
    display: flex;
    margin-top: 10px;
}

.aafe-dual-marquee-hero__cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    background-color: #3569f1;
    color: #ffffff;
    border-radius: 70px;
    padding: 14px 28px;
}

.aafe-dual-marquee-hero__cta:hover {
    background-color: #2954c2;
    color: #ffffff;
}

/* Right Content Area (Marquee) */
.aafe-dual-marquee-hero__wrap-images {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 600px;
    height: 350px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    gap: 12px;
}

.aafe-dual-marquee-hero__gradient {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9;
    pointer-events: none;
    height: 100px;
}

.aafe-dual-marquee-hero__gradient--top {
    top: -1px;
    background-image: linear-gradient(180deg, var(--aafe-fade-color, var(--aafe-dual-marquee-hero-bg, #fafeff)) 15%, transparent 100%);
}

.aafe-dual-marquee-hero__gradient--bottom {
    bottom: -1px;
    background-image: linear-gradient(0deg, var(--aafe-fade-color, var(--aafe-dual-marquee-hero-bg, #fafeff)) 15%, transparent 100%);
}

/* Columns */
.aafe-dual-marquee-hero__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 48%;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 25s; /* Default duration fallback */
}

/* Mobile: hide second column to save space */
.aafe-dual-marquee-hero__column--one {
    width: 100%;
    animation-name: aafe-dual-marquee-hero-marquee-up;
}

.aafe-dual-marquee-hero__column--two {
    display: none;
    animation-name: aafe-dual-marquee-hero-marquee-down;
}

/* Items Wrap */
.aafe-dual-marquee-hero__items-wrap,
.aafe-dual-marquee-hero__item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Images */
.aafe-dual-marquee-hero__image-wrap {
    width: 100%;
    position: relative;
    border-radius: 12px;
    height: 200px;
    overflow: hidden;
    margin-bottom: 12px; /* Default margin replacing gap */
}

.aafe-dual-marquee-hero__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover Pause Logic */
.aafe-dual-marquee-hero__wrap-images--hover-pause:hover .aafe-dual-marquee-hero__column {
    animation-play-state: paused;
}

/* Animations */
@keyframes aafe-dual-marquee-hero-marquee-up {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

@keyframes aafe-dual-marquee-hero-marquee-down {
    0% { transform: translateY(-50%); }
    100% { transform: translateY(0); }
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .aafe-dual-marquee-hero__column {
        width: 48%;
    }
    .aafe-dual-marquee-hero__column--one {
        width: 48%;
    }
    .aafe-dual-marquee-hero__column--two {
        display: flex;
        transform: translateY(-50%); 
    }
    .aafe-dual-marquee-hero__wrap-images {
        height: 500px;
        gap: 16px;
    }
    .aafe-dual-marquee-hero__image-wrap {
        height: 280px;
        margin-bottom: 16px;
    }

    .aafe-dual-marquee-hero__gradient {
        height: 150px;
    }
}

/* Desktop (992px and up) */
@media (min-width: 992px) {
    .aafe-dual-marquee-hero__wrapper {
        padding: 100px 24px;
    }
    .aafe-dual-marquee-hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 65px;
    }
    .aafe-dual-marquee-hero__wrap-images {
        height: 700px;
        gap: 20px;
    }
    .aafe-dual-marquee-hero__image-wrap {
        height: 350px;
        margin-bottom: 20px;
    }

    .aafe-dual-marquee-hero__gradient {
        height: 220px;
    }
}