﻿/* Partner highlight cards */
.myscoreiq-highlight {
    margin-top: 14px;
    background: #fff;
    border: 1px solid rgba(15,138,75,0.10);
    border-radius: 16px;
    padding: 14px 14px;
    box-shadow: 0 10px 22px rgba(15,23,42,0.06);
}

    .myscoreiq-highlight h3 {
        margin: 0 0 6px;
        font-size: 1.05rem;
        color: var(--green-dark);
    }

    .myscoreiq-highlight p {
        margin: 0 0 10px;
        color: var(--text-muted);
        font-size: 0.95rem;
    }

    .myscoreiq-highlight ul {
        margin: 0 0 12px;
        padding-left: 18px;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .myscoreiq-highlight li {
        margin: 6px 0;
    }

/* Rotator */
.partner-rotator {
    position: relative;
    margin-top: 12px;
}

.partner-slide {
    display: none;
}

    .partner-slide.is-active {
        display: block;
    }

@media (max-width:640px) {
    .myscoreiq-highlight {
        padding: 12px;
    }

        .myscoreiq-highlight ul {
            margin-bottom: 10px;
        }
}
/* Add this to your CSS (recommended: /css/partner-rotator.css or a new /css/hero-partials.css)
   Fixes the “stacks on left” issue by forcing a 2-col layout for the partials area. */

/* Ensure the partials wrapper is a true 2-column grid on desktop */
.hero--with-partials {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 24px;
    align-items: start;
}

    /* Make sure the right column actually sits in column 2 */
    .hero--with-partials .hero-left {
        grid-column: 1;
    }

    .hero--with-partials .hero-right {
        grid-column: 2;
    }

    /* Prevent wide content from forcing wrap/stack */
    .hero--with-partials > * {
        min-width: 0;
    }

    /* Optional: keep the wizard a reasonable width but still responsive */
    .hero--with-partials .wizard-container {
        width: 100%;
        max-width: 520px;
        justify-self: end; /* nudges it to the right edge of the right column */
    }

/* Mobile: stack */
@media (max-width: 980px) {
    .hero--with-partials {
        grid-template-columns: 1fr;
    }

        .hero--with-partials .hero-right {
            grid-column: auto;
        }

        .hero--with-partials .wizard-container {
            max-width: 100%;
            justify-self: stretch;
        }
}
