/* Grid container styling */
/* Grid container styling */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Four equal-width columns by default */
    gap: 20px;
    flex-grow: 1; /* Allow the grid container to fill available space */
}

/* Individual grid item styling */
.grid-item {
    background: var(--background); /* White background for grid items */
    border: 1px solid var(--border_color); /* Light gray border */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px var(--box_shadow_color); /* Subtle shadow for depth */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space evenly */
    height: 100%; /* Make all items equal height */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Hover effects */
.grid-item:hover {
    background: var(--hover_bg_color); /* Change background on hover */
    transform: translateY(-4px); /* Slight lift on hover */
    box-shadow: 0 8px 16px var(--hover_shadow_color); /* Stronger shadow on hover */
    cursor: pointer;
}

/* Title styles */
.grid-item .title {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: var(--header_color); /* Dark blue text */
    margin-bottom: 10px;
}

.grid-item .title:hover {
    text-decoration: underline;
}

/* Date and time styling */
.date-time {
    margin-bottom: 10px; /* Add margin for spacing */
    font-size: 14px;
    color: var(--secondary_text_color); /* Gray color for date and time */
}

/* Tag styling */
.tag {
    padding: 8px 12px; /* Padding around the tag */
    background: var(--blue_light); /* Background color for tags */
    color: #fff; /* White text color for contrast */
    border-radius: 5px !important; /* Fully rounded corners for tags */
    display: inline-block; /* Make tags inline-block for padding and margin */
    transition: background 0.3s ease; /* Smooth transition for hover effect */
}

.tag:hover {
    background: var(--blue_dark); /* Darker color on hover */
}

/* Topics styling */
.topics {
    margin: 10px 0; /* Add margin for spacing */
}

.topics ul {
    list-style: none; /* Remove default list styles */
    padding: 0; /* Remove default padding */
    margin: 10px 0; /* Add margin for spacing */
    display: flex; /* Use flexbox for tags */
    flex-wrap: wrap; /* Allow tags to wrap to the next line */
}

.topics li {
    margin: 5px; /* Add margin between tags */
}

/* Location styles */
.grid_item .location {
    margin-top: 5px; /* Space above location */
    font-weight: 600; /* Bold for emphasis */
}

.grid_item .city {
    margin-top: 5px;
    font-weight: 700;
}

/* Make the grid link cover the entire grid item */
.grid_link {
    display: flex; /* Use flexbox to maintain the structure */
    flex-direction: column; /* Ensure the content is stacked vertically */
    height: 100%; /* Make the link cover the entire height of the grid item */
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit text color from parent */
}

/* Icons within grid items */
.grid_item i {
    width: 16px;
    height: auto;
}

.grid_item .topic,
.grid_item .location,
.grid_item .city {
    display: block;
}

.grid_item .details {
    margin-top: 10px;
    font-size: 14px;
}

.grid_item .date {
    font-weight: bold;
}

.grid_item .time {
    color: var(--secondary_text_color); /* Gray color for time */
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .grid_container {
        grid-template-columns: repeat(3, 1fr); /* Three columns for tablets */
    }
    .grid_item {
        padding: 12px; /* Reduce padding on smaller screens */
    }
}

@media (max-width: 768px) {
    .grid_container {
        grid-template-columns: repeat(2, 1fr); /* Two columns for mobile devices */
    }

    .grid_item .title {
        font-size: 16px; /* Slightly smaller text on small screens */
    }

    .grid_item .details {
        font-size: 12px; /* Smaller font size for details */
    }
}

@media (max-width: 480px) {
    .grid_container {
        grid-template-columns: 1fr; /* Single column layout for very small screens */
    }

    .grid_item .title {
        font-size: 14px; /* Further decrease font size */
    }

    .grid_item .details {
        font-size: 12px; /* Keep details font size consistent */
    }

    .grid_item {
        padding: 10px; /* Reduce padding further for very small screens */
    }
}