.wml-negative-color-cards-wrapper {
    width: 100%;
}

.wml-negative-color-cards-container {
    display: grid;
    grid-template-columns: repeat(var(--wml-ncc-cols-lg, 4), 1fr);
    gap: var(--wml-ncc-gap, 2rem);
    width: 100%;
    /* Default variables */
    --card-bg: rgba(0, 0, 0, 0.6);
}

@media (max-width: 991px) {
    .wml-negative-color-cards-container {
        grid-template-columns: repeat(var(--wml-ncc-cols-md, 2), 1fr);
    }
}

@media (max-width: 479px) {
    .wml-negative-color-cards-container {
        grid-template-columns: repeat(var(--wml-ncc-cols-sm, 1), 1fr);
    }
}

.wml-negative-color-card {
    position: relative;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    filter: drop-shadow(1px 2px 1px var(--wml-ncc-shadow-1, rgba(0, 0, 50, 0.7))) drop-shadow(2px 4px 3px var(--wml-ncc-shadow-2, rgba(0, 0, 0, 0.5)));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: box-shadow 0.3s ease;
    /* Hidden by default - JS will show them */
    opacity: 0;
    transform: translateY(20px);
    /* Link support */
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Add cursor pointer for links */
a.wml-negative-color-card {
    cursor: pointer;
}

/* When animation is DISABLED - JS adds this class - show cards instantly */
.wml-show-cards .wml-negative-color-card {
    opacity: 1;
    transform: none;
}

/* Fallback: If JS hasn't run after 1.5s, show cards anyway */
.wml-negative-color-cards-wrapper:not(.wml-init) .wml-negative-color-card {
    animation: wmlFallbackShow 0s 1.5s forwards;
}

@keyframes wmlFallbackShow {
    to {
        opacity: 1;
        transform: none;
    }
}

/* When animation is ENABLED - cards stay hidden until in-view */
.wml-has-scroll-animation .wml-negative-color-card.in-view {
    animation: wmlFadeIn 0.6s ease-out forwards;
}

/* Staggered animation delays - scoped to scroll animation */
.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(1) {
    animation-delay: 0s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(2) {
    animation-delay: 0.15s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(3) {
    animation-delay: 0.3s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(4) {
    animation-delay: 0.45s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(5) {
    animation-delay: 0.6s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(6) {
    animation-delay: 0.75s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(7) {
    animation-delay: 0.9s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(8) {
    animation-delay: 1.05s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(9) {
    animation-delay: 1.2s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(10) {
    animation-delay: 1.35s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(11) {
    animation-delay: 1.5s;
}

.wml-has-scroll-animation .wml-negative-color-card.in-view:nth-child(12) {
    animation-delay: 1.65s;
}

.wml-negative-color-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--wml-ncc-overlay-color, rgba(0, 0, 0, 0.6));
    z-index: 1;
    filter: url(#turb);
    /* Using ID selector for now, will scope in PHP if needed */
}

.wml-negative-color-card-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    /* Allow clicks to pass through to the card/link */
}

.wml-negative-color-card h2,
.wml-negative-color-card p {
    pointer-events: auto;
    /* Re-enable for text selection */
}

.wml-negative-color-card h2 {
    color: var(--wml-ncc-title-color, #fff);
    margin-bottom: 0.5rem;
}

.wml-negative-color-card p {
    color: var(--wml-ncc-desc-color, #f0f0f0);
    line-height: 1.1;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.wml-ncc-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #ffffff;
    color: #000000;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
    border: none;
    margin-top: 0.5rem;
}

.wml-ncc-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.wml-negative-color-card:hover {
    box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.5);
}

.wml-negative-color-cards-container:hover> :not(:hover) {
    filter: url(#colorCycle);
    transition: filter 0.3s ease, background-color 0.3s ease;
}



@keyframes wmlFadeIn {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(20px) rotateZ(10deg);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0) rotateZ(0);
    }
}