/* Activities Grid Styles */

.activities-grid-section {
    width: 100%;
}

.activity-card {
    position: relative;
    transition: all 0.3s ease-in-out;
}

.activity-card img{
    transition: all 0.3s ease-in-out;

}

.activity-card:hover {
    transform: translateY(-4px);
}

.activity-card:hover img {
    transform: scale(1.05);
}

/* Desktop - fluid responsive grid */
@media (min-width: 1024px) {
    .activities-grid-wrapper {
        display: grid;
        grid-template-columns: 
            minmax(min(240px, 100%), min(354px, 26%)) 
            minmax(min(380px, 100%), min(636px, 47%)) 
            minmax(min(240px, 100%), min(354px, 26%));
        gap: clamp(1.5rem, 2vw, 3rem);
        justify-content: center;
    }
}

/* Tablet - custom bento layout */
@media (min-width: 783px) and (max-width: 1023px) {
    .activities-grid-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    
    /* Top large image - full width */
    .activities-center-column > .activity-card:first-child {
        width: 100%;
    }
    
    /* Left column - 3 cards in grid below top image */
    .activities-left-column {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        width: 100%;
    }
    
    /* Center content block - full width */
    .activities-center-column > .bg-tertiary-200 {
        width: 100%;
    }
    
    /* Right column - 3 cards in grid */
    .activities-right-column {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        width: 100%;
    }
    
    /* Bottom large image - full width */
    .activities-center-column > .activity-card:last-child {
        width: 100%;
    }
    
    /* Reorder the columns */
    .activities-center-column {
        display: contents;
    }
    
    .activities-center-column > *:nth-child(1) {
        order: 1; /* Top large image */
    }
    
    .activities-left-column {
        order: 2; /* Left 3 cards */
    }
    
    .activities-center-column > *:nth-child(2) {
        order: 3; /* Content block */
    }
    
    .activities-right-column {
        order: 4; /* Right 3 cards */
    }
    
    .activities-center-column > *:nth-child(3) {
        order: 5; /* Bottom large image */
    }
    
    .activities-grid-section .bg-secondary-300 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    /* Adjust card heights for tablet */
    .activity-card.h-72 {
        height: 14rem !important;
    }
    
    .activity-card.h-\[500px\],
    .activity-card.h-\[400px\],
    .activity-card.h-96 {
        height: 18.75rem !important; /* 300px */
    }
    
    .activity-card.h-\[500px\] img,
    .activity-card.h-\[400px\] img,
    .activity-card.h-96 img {
        height: 18.75rem !important; /* 300px */
    }
}

/* Mobile - single column, but maintain proportions */
@media (max-width: 782px) {
    .activities-grid-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .activities-left-column,
    .activities-center-column,
    .activities-right-column {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }
    
    /* All cards use consistent heights on mobile */
    .activity-card.h-72,
    .activity-card.h-\[500px\],
    .activity-card.h-96 {
        height: 16rem !important;
        min-height: 16rem !important;
    }
    
    .activity-card.h-72 img,
    .activity-card.h-\[500px\] img,
    .activity-card.h-96 img {
        height: 16rem !important;
    }
    
    /* Round all corners on mobile */
    .activity-card {
        border-radius: 0.5rem !important;
    }
    
    .activities-grid-section .bg-secondary-300 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    /* Content block adjustments */
    .activities-center-column .bg-tertiary-200 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* Small mobile - extra compact */
@media (max-width: 480px) {
    .activity-card.h-72,
    .activity-card.h-\[500px\],
    .activity-card.h-96 {
        height: 14rem !important;
        min-height: 14rem !important;
    }
    
    .activity-card.h-72 img,
    .activity-card.h-\[500px\] img,
    .activity-card.h-96 img {
        height: 14rem !important;
    }
    
    .activities-center-column .bg-tertiary-200 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}