/* Main container */
main {
    max-width: 960px;
    margin: 0 auto; /* Center the container */
    padding: 1rem; /* Add padding for spacing */
}

.preview {
    height: auto; /* Let the content height adapt based on the paragraphs */
    max-height: calc(3 * 1.5em); /* Show exactly 3 paragraphs assuming each paragraph is around 1.5em in height */
    overflow: hidden; /* Hide overflow content */
    text-overflow: ellipsis; /* Show ellipsis at the end */
    display: -webkit-box; /* Enable flexible box model */
    -webkit-line-clamp: 3; /* Limit to 3 lines/paragraphs */
    -webkit-box-orient: vertical; /* Vertical layout for box */
    word-wrap: break-word; /* Ensure words break and fit within the container */
    line-height: 1.5; /* Set line height for proper paragraph spacing */

    font-size: 1.25rem; /* Subtle size for dates */
    color: rgb(var(--gray)); /* Muted gray for dates */
    /*margin: 0;*/
    margin-top: 1.5rem;
}

/* Unordered list styles */
ul {
    display: flex;
    flex-direction: column; /* Stack all list items vertically */
    gap: 0; /* Remove gap; borders will act as separators */
    list-style: none; /* Remove bullets */
    margin: 0;
    padding: 0;
}

/* List items */
ul li {
    width: 100%; /* Full width for all items */
    text-align: center; /* Center-align content */
    display: flex;
    flex-direction: column; /* Stack item content vertically */
    align-items: center; /* Center content horizontally */
    padding: 1rem 0; /* Add vertical padding for spacing */
    border-bottom: 1px solid rgb(var(--gray)); /* Add a division line between items */
    border-top: 1px solid rgb(var(--gray)); /* Add top border for separation */
}

ul li:first-child {
    border-top: none; /* Remove top border from the first element */
}

ul li:last-child {
    border-bottom: none; /* Remove bottom border from the last element */
}

/* Images */
ul li img {
    width: 100%; /* Full width for images */
    border-radius: 12px; /* Rounded corners */
    margin-bottom: 1rem; /* Spacing below images */
    transition: box-shadow 0.3s ease; /* Smooth shadow transition */
}

/* Titles */
ul li .title {
    font-size: 2.5rem; /* Larger font size for titles */
    font-weight: bold; /* Highlight the title */
    color: rgb(var(--black)); /* Primary text color */
    line-height: 1.2; /* Improve readability */
    margin: 0 0 0.5rem 0; /* Add spacing below the title */
}

/* Details styling */
ul li .details {
    display: flex; /* Enable flex layout */
    flex-direction: row; /* Align items horizontally */
    align-items: center; /* Center-align content */
    place-content: center; /* Center content */
    font-size: 1rem; /* Subtle size for dates */
    color: rgb(var(--gray)); /* Muted gray for dates */
    margin: 0;
    gap: 0.5rem; /* Add spacing between date elements */
}

ul li .details > *:not(:last-child)::after {
    content: "•"; /* Add the bullet */
    margin-left: 0.25rem; /* Add spacing to the left of the bullet */
    color: inherit; /* Match the color of the text */
}

/* Anchor links */
ul li a {
    text-decoration: none;
    color: inherit; /* Inherit text color */
    display: block; /* Ensure block-level behavior */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effects */
ul li a:hover .title,
ul li a:hover .preview,
ul li a:hover .details {
    color: rgb(var(--accent)); /* Highlight text on hover */
}

ul li a:hover img {
    box-shadow: var(--box-shadow); /* Add shadow on hover */
}

/* Responsive styles for smaller screens */
@media (max-width: 720px) {
    ul li {
        padding: 1rem; /* Adjust padding for smaller screens */
    }

    ul li .title {
        font-size: 1.8rem; /* Smaller font size for small screens */
    }

    ul li img {
        border-radius: 8px; /* Slightly smaller corner radius */
    }
}