: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 */
}

/* =====================================================================
   v1.5.0 — Layout system, list view, modern stagger animation
   Everything below is additive; legacy column classes above still work.
   ===================================================================== */

.related-pages-widget {
    --rpw-min-card-width: 260px;
    --rpw-stagger: 120ms;
    --rpw-duration: 600ms;
}

/* New title class keeps heading semantics flexible without restyling. */
.related-page-card .rpw-card-title {
    margin: 0 0 20px !important;
    padding: 0 !important;
    display: block !important;
}
.rpw-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.rpw-card-body .rpw-card-title { flex-grow: 1; }

/* ----- Auto (responsive) columns: CSS grid, no breakpoints needed ----- */
.related-pages-widget.rpw-cols-auto {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--rpw-min-card-width), 100%), 1fr));
    gap: var(--related-pages-gap);
}
.related-pages-widget.rpw-cols-auto .related-page-card {
    flex-basis: auto;
    max-width: none;
    width: auto;
}

/* ----- Modern list view ----- */
.related-pages-widget.rpw-layout-list {
    display: flex;
    flex-direction: column;
    gap: var(--related-pages-gap);
}
.related-pages-widget.rpw-layout-list .related-page-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-basis: 100%;
    max-width: 100%;
    text-align: left;
}
.related-pages-widget.rpw-layout-list .rpw-card-body {
    flex-direction: column;
    justify-content: center;
}
.related-pages-widget.rpw-layout-list .rpw-card-title { margin-bottom: 6px !important; }
.related-pages-widget.rpw-layout-list .related-page-card p { margin: 0 !important; }
.related-pages-widget.rpw-layout-list .elementor-button-wrapper { margin-top: 12px; }

/* Chevron arrow, pure CSS so no icon font dependency */
.rpw-arrow { display: none; }
.related-pages-widget.rpw-layout-list.rpw-list-arrow .rpw-arrow {
    display: block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-left: 16px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.45;
    transition: transform 200ms ease, opacity 200ms ease;
}
.related-pages-widget.rpw-layout-list.rpw-list-arrow .related-page-card:hover .rpw-arrow {
    transform: rotate(-45deg) translate(3px, 3px);
    opacity: 0.9;
}

/* ----- Staggered entrance (CSS-only, driven by --rpw-i set in PHP) ----- */
.related-pages-widget.rpw-animate .related-page-card {
    opacity: 0;
    animation-name: fadeInFromBottom;
    animation-duration: var(--rpw-duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-delay: calc(var(--rpw-i, 0) * var(--rpw-stagger));
}

/* Animations off: never hide content. Overrides the legacy unconditional rule. */
.related-pages-widget:not(.rpw-animate) .related-page-card {
    opacity: 1;
    animation: none;
}

/* Accessibility + editor safety: show everything immediately. */
@media (prefers-reduced-motion: reduce) {
    .related-pages-widget .related-page-card {
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
    }
}
.elementor-edit-area-active .related-page-card,
body.elementor-editor-active .related-page-card {
    opacity: 1 !important;
    animation-delay: 0ms !important;
}