/* Component: Related Solutions
   Figma: "related-solutions-section" component set (node 2268-2132, UI Kit Website file) —
   desktop (2268:2133) + mobile (2268:2146, a Splide-style carousel with dot pagination and
   arrow controls) variants; section defaults/copy from node 20580-17815 on the main site file.

   Cards intentionally reuse the exact same values/mechanics as the All Solutions hub's
   .smv2-card (css/solutions-main-v2.css) — same card, only the footer action differs (no
   tags/corner-arrow, global .sd-link-button instead) — see that file for the source of truth
   this mirrors. The markup carries the same .smv2-card class hooks as All Solutions; because
   that page's selectors and stylesheet are scoped to .page-solutions-main-v2, this component
   applies the shared card contract within its own section scope. */

.related-solutions {
    --rs-fg-primary: #262626;
    --rs-fg-tertiary: rgba(0, 0, 0, .55);
    --rs-border: rgba(0, 0, 0, .1);
    font-family: 'Google Sans Flex', sans-serif;
}

.related-solutions__wrapper {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.related-solutions__heading {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Font size/weight/line-height/letter-spacing come from the global .sd-type-heading-xl
   primitive (css/typography.css) — this rule only carries what that primitive doesn't. Max
   width is admin-controllable via .compare-v2-text-width-control, same mechanism as every
   other section title (see includes/related-solutions-runtime.php + title_max_width field). */
.related-solutions__title {
    margin: 0;
    color: var(--rs-fg-primary) !important;
}

/* Max width is admin-controllable via .compare-v2-text-width-control, same mechanism as the
   title (see includes/related-solutions-runtime.php + subtitle_max_width field); no CSS
   max-width default needed here since the Theme Settings default (680px) already covers it. */
.related-solutions__subtitle {
    margin: 0;
    color: rgba(0, 0, 0, .75) !important;
}

.related-solutions__card-title {
    color: var(--rs-fg-primary) !important;
}

/* Splide's own core CSS (.splide.is-initialized:not(.is-active) .splide__list{display:block})
   out-specifies a plain 2-class selector on the "destroyed" desktop/tablet state (destroy:true
   above the 767px breakpoint, see js/slider.js .splide-related-solutions) — same fix already
   established in this codebase for the same class of problem, see front-page-v3-components/
   hero/hero.css's is-initialized comment. Both rules kept: the compound one wins post-mount,
   the plain one is the pre-JS/no-JS fallback so the grid isn't broken before Splide runs. */
.related-solutions__grid .splide__list,
.related-solutions__grid.splide.is-initialized:not(.is-active) .splide__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-solutions__grid .splide__slide {
    min-width: 0;
    display: flex;
}

/* Splide's core CSS ships `.splide{visibility:hidden}`, only reversed by `.is-rendered` — which
   Splide skips adding when `destroy:true` applies (desktop/tablet, above the 767px breakpoint).
   Same fix already established in this codebase, see front-page-v3-components/hero/hero.css's
   identical comment/override for its own Splide instance. */
.related-solutions__grid.splide {
    visibility: visible;
}

/* Card geometry only. Appearance and interaction come from the global
   .smv2-card primitive in style.css/style.min.css. */
.related-solutions__card {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/* The "Learn more" link-button sits inside this whole-card anchor rather than being its own
   focusable target, so its hover visuals are driven by the card's own state — same integration
   pattern as .sd-readmore in blog-shortcodes.css. */
.related-solutions__card:hover .sd-link-button__label,
.related-solutions__card:focus-visible .sd-link-button__label {
    color: currentColor;
    text-decoration-color: currentColor;
}

.related-solutions__card:hover .sd-link-button__icon,
.related-solutions__card:focus-visible .sd-link-button__icon {
    transform: translateX(2px);
}

.related-solutions__card-text {
    margin: 0;
}

/* ---------- Mobile: grid becomes a Splide carousel (peek + dots + arrows), per the Figma
   mobile variant — see js/slider.js .splide-related-solutions init (destroy:true above 767px,
   so this stays a plain grid on tablet/desktop; Splide only actually mounts below that). ---- */

@media (max-width: 767px) {
    .related-solutions__wrapper {
        gap: 32px;
    }

    .related-solutions__grid .splide__list {
        display: flex;
        /* Splide applies the 24px gap as slide margin. Reset the desktop grid
           gap here or mobile gets 48px and loses the Figma next-card peek. */
        gap: 0;
    }

    .related-solutions__card {
        width: 304px;
        height: 100%;
        min-height: 224px;
        flex: 0 0 304px;
    }

    .related-solutions__footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24px;
    }

    .related-solutions__grid .splide__pagination {
        /* Splide's own core CSS hides pagination via `.splide:not(.is-overflow)
           .splide__pagination{display:none}` — with fixedWidth slides it doesn't reliably
           add .is-overflow, so this section always wants pagination visible once active. */
        display: flex !important;
        position: static;
        justify-content: flex-start;
        gap: 0;
        margin: 0;
        padding: 0;
    }

    .related-solutions__grid .splide__pagination__page {
        width: 8px;
        height: 8px;
        margin: 8px;
        background: rgba(0, 0, 0, .15);
        opacity: 1;
    }

    .related-solutions__grid .splide__pagination__page.is-active {
        background: var(--rs-fg-primary);
        transform: none;
    }

    .related-solutions__grid .splide__arrows {
        position: static;
        display: flex;
        gap: 16px;
    }

    .related-solutions__grid {
        position: relative;
    }

    .related-solutions__grid .splide__arrow {
        position: static;
        transform: none;
    }

    .related-solutions__grid .splide__arrow--prev img {
        transform: rotate(180deg);
    }
}

@media (min-width: 768px) {
    .related-solutions__footer {
        display: none;
    }
}