/* ---------- GENERIC CAROUSEL BLOCK ---------- */
.generic-carousel-block { padding: 60px 0; background: #f4f5f7; position: relative; }

/* Navigation */
.gc-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 20px; }
.gc-nav button { background: #fff; border: 1px solid #ddd; padding: 10px 15px; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.gc-nav button:hover { background: #E81A5F; color: #fff; border-color: #E81A5F; }

/* ---------- TRACK & HORIZONTAL LOGIC ---------- */
.gc-viewport { 
    overflow: hidden; 
    width: 100%; 
}

.gc-track {
    /* Aggressively force horizontal alignment */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; 
    gap: 30px;
    transition: transform 0.5s ease-in-out;
}

/* Card Sizing */
.gc-track[class*="cols-3"] > .gc-card { 
    flex: 0 0 calc(33.333% - 20px); 
}

.gc-track[class*="cols-4"] > .gc-card { 
    flex: 0 0 calc(25% - 22.5px); 
}

/* Fallback width */
.gc-track > .gc-card {
    flex: 0 0 calc(33.333% - 20px);
}

/* ---------- CARD & IMAGE STYLING ---------- */
.gc-card {
    background: #fff; 
    border-radius: 12px; 
    overflow: hidden;
    text-decoration: none; 
    color: inherit; 
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Removed overflow: hidden so the icon can bleed out */
.gc-img-wrap { 
    position: relative; 
    height: 200px; 
}

/* New inner wrapper to clip the image when it scales on hover */
.gc-img-overflow {
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    overflow: hidden; 
}

.gc-img { 
    width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    transition: 0.3s; 
}

/* Red Overlapping Icon (Safely overlapping the bottom) */
.gc-icon {
    position: absolute; 
    bottom: -20px; 
    left: 30px;
    width: 50px; height: 50px; 
    background: #E81A5F; 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 20px; 
    z-index: 10;
    animation: gentlePulse 2s infinite;
}

/* Radiating Pulse Animation */
@keyframes gentlePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(232, 26, 95, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(232, 26, 95, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(232, 26, 95, 0);
    }
}

/* Hover Overlay & Button */
.gc-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(14,27,42,0.6); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: 0.3s; z-index: 5;
}
.gc-btn { background: #222; color: #fff; padding: 10px 24px; border-radius: 30px; font-weight: 600; font-size: 14px; transform: translateY(20px); transition: 0.3s; }

.gc-card:hover .gc-overlay { opacity: 1; }
.gc-card:hover .gc-btn { transform: translateY(0); }
.gc-card:hover .gc-img { transform: scale(1.05); }

/* Content */
.gc-content { padding: 40px 30px 30px; }
.gc-content h3 { font-size: 20px; color: #222; margin-bottom: 12px; }
.gc-content p { font-size: 14px; color: #777; line-height: 1.6; }

/* Entry Animation */
.dissolve-init { opacity: 0; transform: scale(0.95); transition: all 0.6s ease-out; }
.dissolve-in { opacity: 1; transform: scale(1); }

/* Responsive Overrides for Flexbox Layout */
@media (max-width: 900px) {
    /* Tablet: Show 2 cards at a time (50% width minus gap) */
    .gc-track[class*="cols-3"] > .gc-card, 
    .gc-track[class*="cols-4"] > .gc-card,
    .gc-track > .gc-card { 
        flex: 0 0 calc(50% - 15px) !important; 
    }
}

@media (max-width: 600px) {
    /* Mobile: Show 1 card at a time (100% width) */
    .gc-track[class*="cols-3"] > .gc-card, 
    .gc-track[class*="cols-4"] > .gc-card,
    .gc-track > .gc-card { 
        flex: 0 0 100% !important; 
    }
}