:root {
    --related-pages-gap: 20px;
}

.related-pages-widget {
    display: flex;
    flex-wrap: wrap;
    /* Default to left alignment (normal grid flow for incomplete rows) */
    justify-content: flex-start; 
    gap: var(--related-pages-gap);
}

/* Class added by PHP based on new control to center items in incomplete rows */
.related-pages-widget.rpw-align-center {
    justify-content: center;
}

.related-pages-widget.one-column {
    /* grid-template-columns: 1fr; */
}
.related-pages-widget.two-columns {
    /* grid-template-columns: repeat(2, 1fr); */
}
.related-pages-widget.three-columns {
    /* grid-template-columns: repeat(3, 1fr); */
}
.related-pages-widget.four-columns {
    /* grid-template-columns: repeat(4, 1fr); */
}

.related-page-card {
    display: grid;
    transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
    align-content: space-between;
    align-items: stretch;
    justify-items: stretch;
    cursor: pointer;
    margin: 0; /* Remove margin, container `gap` will handle spacing */
    /* Default to full width, will be overridden by column classes */
    flex-basis: 100%; 
    max-width: 100%;
}

.related-page-card h2 {
    margin: 0 !important;
    flex-grow: 1 !important;
}

.related-page-card p {
    margin: 10px 0 0 !important;
}
.related-page-card .elementor-button-wrapper {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    align-items: center; /* This will be overwritten by the Elementor control */
}
.related-page-card h2, .related-page-card p {
    margin-bottom: 20px !important;
    display: block !important;
    margin-top: 0px !important;
    padding: 0px !important;
}

/* Base styles for cards - these are applied by default (desktop) */
.related-pages-widget.related-pages-desktop-1-cols .related-page-card {
    flex-basis: 100%; max-width: 100%;
}
.related-pages-widget.related-pages-desktop-2-cols .related-page-card {
    flex-basis: calc((100% - var(--related-pages-gap)) / 2); max-width: calc((100% - var(--related-pages-gap)) / 2);
}
.related-pages-widget.related-pages-desktop-3-cols .related-page-card {
    flex-basis: calc((100% - (2 * var(--related-pages-gap))) / 3); max-width: calc((100% - (2 * var(--related-pages-gap))) / 3);
}
.related-pages-widget.related-pages-desktop-4-cols .related-page-card {
    flex-basis: calc((100% - (3 * var(--related-pages-gap))) / 4); max-width: calc((100% - (3 * var(--related-pages-gap))) / 4);
}

/* Tablet Overrides */
@media only screen and (max-width: 1024px) {
    .related-pages-widget.related-pages-tablet-1-cols .related-page-card {
        flex-basis: 100%; max-width: 100%;
    }
    .related-pages-widget.related-pages-tablet-2-cols .related-page-card {
        flex-basis: calc((100% - var(--related-pages-gap)) / 2); max-width: calc((100% - var(--related-pages-gap)) / 2);
    }
    .related-pages-widget.related-pages-tablet-3-cols .related-page-card {
        flex-basis: calc((100% - (2 * var(--related-pages-gap))) / 3); max-width: calc((100% - (2 * var(--related-pages-gap))) / 3);
    }
    .related-pages-widget.related-pages-tablet-4-cols .related-page-card {
        flex-basis: calc((100% - (3 * var(--related-pages-gap))) / 4); max-width: calc((100% - (3 * var(--related-pages-gap))) / 4);
    }
    /* Fallback if specific tablet classes are not generated but general .related-pages-widget is present */
    .related-pages-widget .related-page-card { /* Default tablet to 2 columns if not specified by php class */
        /* This is a general fallback - specific classes from PHP are preferred */
        /* flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); */
    }
}

/* Mobile Overrides */
@media only screen and (max-width: 767px) { /* Elementor's typical mobile breakpoint */
    .related-pages-widget.related-pages-mobile-1-cols .related-page-card {
        flex-basis: 100%; max-width: 100%;
    }
    .related-pages-widget.related-pages-mobile-2-cols .related-page-card {
        flex-basis: calc((100% - var(--related-pages-gap)) / 2); max-width: calc((100% - var(--related-pages-gap)) / 2);
    }
    /* Fallback for mobile */
    .related-pages-widget .related-page-card { /* Default mobile to 1 column */
         /* This is a general fallback - specific classes from PHP are preferred */
        /* flex-basis: 100%; max-width: 100%; */
    }
}

@keyframes fadeInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.related-page-card {
    opacity: 0; /* Initially, set the cards to invisible */
    animation-name: fadeInFromBottom;
    animation-duration: 0.6s; /* Adjust this value if you want the animation to be faster or slower */
    animation-fill-mode: forwards; /* This ensures the end state of the animation remains */
}