/* Ensure the parent figure has a relative position */
figure {
    position: relative; /* Required for absolute positioning of figcaption */
    overflow: hidden; /* Ensures content stays within the figure */
    aspect-ratio: 4 / 3; /* Maintain a 4:3 aspect ratio for the figure */
    width: 100%; /* Ensure the figure spans the full width of its container */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style the card image */
figure img {
    object-fit: cover; /* Crop the image to fit the container while maintaining its aspect ratio */
    transition: transform 0.5s ease; /* Smooth zoom effect on hover */
}

/* Position the figcaption over the figure */
.read-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth transition for the background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1; /* Ensure the overlay is above the image */
    pointer-events: none; /* Prevent the overlay from blocking clicks */
}

/* Show the overlay on hover */
figure:hover .read-more-overlay {
    opacity: 1; /* Fully visible on hover */
}

/* Add a zoom effect to the image on hover */
figure:hover img {
    transform: scale(1.1); /* Slightly zoom in the image */
    z-index: 0; /* Ensure the image is below the overlay */
}

/* Initial state for the eye icon */
.read-more-overlay img {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    transform: translateX(-100%); /* Start off-screen to the left */
    opacity: 0; /* Initially hidden */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth animation */
}

/* Initial state for the "Read More" text */
.read-more-overlay h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white; /* Ensure the text is visible on the overlay */
    transform: translateX(100%); /* Start off-screen to the right */
    opacity: 0; /* Initially hidden */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth animation */
}

/* Animate the eye icon on hover */
figure:hover .read-more-overlay img {
    transform: translateX(0); /* Slide into place */
    opacity: 1; /* Fully visible */
}

/* Animate the "Read More" text on hover */
figure:hover .read-more-overlay h4 {
    transform: translateX(0); /* Slide into place */
    opacity: 1; /* Fully visible */
    margin-top: 8px; /* Add spacing between the eye icon and the text */
}