/*
==============================================================================
SavvyGreat Material 3 home refinement v4
Copyright (c) 2026 SavvyGreat. All rights reserved.
==============================================================================
*/

/* Keep the home surface immediately below the measured context bar. */
.sghome-m3 {
    margin-top: var(--sghome-context-gap-v4, 0px) !important;
}

/* Marquee motion is driven by sg-home-m3-v4.js using an exact pixel distance. */
.sghome-m3-breaking,
.sghome-m3-breaking-window {
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.sghome-m3-breaking::-webkit-scrollbar,
.sghome-m3-breaking-window::-webkit-scrollbar,
.sghome-m3-breaking-track::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.sghome-m3-breaking-track {
    display: flex !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    animation: none !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.sghome-m3-breaking-track.is-sghome-css-marquee {
    animation: sghomeM3MarqueeV4 var(--sghome-marquee-v4-duration, 22s) linear infinite !important;
}

@keyframes sghomeM3MarqueeV4 {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(calc(-1 * var(--sghome-marquee-v4-distance, 800px)), 0, 0);
    }
}

/* Category-aware Material Symbols replace unreliable SG Biz logo images. */
.sghome-m3-biz-card-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 20px;
    background: var(--sghome-primary-container, #eaddff);
    color: var(--sghome-on-primary-container, #21005d);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sghome-primary, #6750a4) 12%, transparent);
    transition:
        background 180ms linear,
        color 180ms linear,
        transform 300ms cubic-bezier(.2, 0, 0, 1);
}

.sghome-m3-biz-card-icon .material-symbols-rounded {
    font-size: 34px;
    font-variation-settings: "FILL" 1, "wght" 520, "GRAD" 0, "opsz" 32;
}

.sghome-m3-biz-card:hover .sghome-m3-biz-card-icon,
.sghome-m3-biz-card:focus-visible .sghome-m3-biz-card-icon {
    background: var(--sghome-primary, #6750a4);
    color: var(--sghome-on-primary, #fff);
    transform: scale(1.04) rotate(-2deg);
}

@media (max-width: 599px) {
    .sghome-m3-biz-card-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
    }

    .sghome-m3-biz-card-icon .material-symbols-rounded {
        font-size: 30px;
    }
}

/* Keep the requested marquee moving even when older styles set reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .sghome-m3-breaking,
    .sghome-m3-breaking-window {
        overflow: hidden !important;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 97%, transparent) !important;
        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 97%, transparent) !important;
    }

    .sghome-m3-breaking-group[aria-hidden="true"] {
        display: flex !important;
    }

    .sghome-m3-breaking-track {
        animation: none !important;
        transform: translate3d(0, 0, 0);
    }

    .sghome-m3-breaking-track.is-sghome-css-marquee {
        animation: sghomeM3MarqueeV4 var(--sghome-marquee-v4-duration, 28s) linear infinite !important;
    }
}