/* =========================================================
   Market UI v2 - Navigation Cards Component
   Path: public/assets/marketv2/components/navigation-cards/navigation-cards.css
========================================================= */

.m-navigation-cards {
    display: block;
    min-width: 0;
}

.m-navigation-cards__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--m-navigation-card-min-width), 1fr));
    gap: var(--m-navigation-cards-gap);
    min-width: 0;
}

.m-navigation-cards--sm .m-navigation-cards__grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--m-navigation-card-min-width-sm), 1fr));
    gap: var(--m-navigation-cards-gap-sm);
}

.m-navigation-cards--lg .m-navigation-cards__grid {
    grid-template-columns: repeat(auto-fit, minmax(var(--m-navigation-card-min-width-lg), 1fr));
    gap: var(--m-navigation-cards-gap-lg);
}

.m-navigation-cards.is-scrollable .m-navigation-cards__grid {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    padding-block-end: 2px;
}

.m-navigation-cards.is-scrollable .m-navigation-card {
    flex: 0 0 min(78vw, var(--m-navigation-card-min-width-lg));
    scroll-snap-align: start;
}

.m-navigation-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--m-navigation-cards-gap-sm);
    min-width: 0;
    min-height: 100%;
    padding: var(--m-navigation-card-padding-y) var(--m-navigation-card-padding-x);
    border: var(--m-navigation-card-border-width) solid var(--m-navigation-card-border);
    border-radius: var(--m-navigation-card-radius);
    background: var(--m-navigation-card-bg);
    color: var(--m-navigation-card-text);
    box-shadow: var(--m-navigation-card-shadow);
    text-decoration: none;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.m-navigation-cards--sm .m-navigation-card {
    padding: var(--m-navigation-card-padding-y-sm) var(--m-navigation-card-padding-x-sm);
}

.m-navigation-cards--lg .m-navigation-card {
    padding: var(--m-navigation-card-padding-y-lg) var(--m-navigation-card-padding-x-lg);
}

.m-navigation-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--m-navigation-card-icon-size);
    height: var(--m-navigation-card-icon-size);
    border-radius: calc(var(--m-navigation-card-radius) - 4px);
    background: var(--m-navigation-card-accent-soft);
    color: var(--m-navigation-card-accent);
}

.m-navigation-cards--sm .m-navigation-card__icon {
    width: var(--m-navigation-card-icon-size-sm);
    height: var(--m-navigation-card-icon-size-sm);
}

.m-navigation-cards--lg .m-navigation-card__icon {
    width: var(--m-navigation-card-icon-size-lg);
    height: var(--m-navigation-card-icon-size-lg);
}

.m-navigation-card__content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.m-navigation-card__label,
.m-navigation-card__description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-navigation-card__label {
    color: var(--m-navigation-card-text-strong);
    font-weight: 800;
}

.m-navigation-card__description {
    color: var(--m-navigation-card-text-muted);
    font-size: 0.82em;
}

.m-navigation-card__badge {
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--m-navigation-card-accent);
    font-size: 0.82em;
    font-weight: 800;
}

.m-navigation-card.is-active {
    background: var(--m-state-active-bg, var(--m-navigation-card-bg-active));
    border-color: var(--m-state-active-border, var(--m-navigation-card-border-active));
    box-shadow:
        var(--m-state-shadow-active, var(--m-navigation-card-shadow-hover)),
        inset 0 0 0 var(--m-state-active-ring-width, 2px) var(--m-state-active-border, var(--m-navigation-card-border-active));
}

.m-navigation-card.is-active::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    inset-block-end: -1px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: var(--m-navigation-card-accent);
}

@media (hover: hover) {
    .m-navigation-card[href]:hover {
        background: var(--m-state-hover-bg, var(--m-navigation-card-bg-hover));
        border-color: var(--m-state-hover-border, var(--m-navigation-card-border-hover));
        box-shadow:
            var(--m-state-shadow-hover, var(--m-navigation-card-shadow-hover)),
            inset 0 0 0 var(--m-state-hover-ring-width, 1px) var(--m-state-hover-border, var(--m-navigation-card-border-hover));
        text-decoration: none;
        transform: translateY(var(--m-state-hover-translate-y, -1px));
    }
}

.m-navigation-card:focus {
    outline: none;
}

.m-navigation-card:focus-visible {
    box-shadow: 0 0 0 var(--m-state-focus-width, 3px) var(--m-state-focus-ring, var(--m-navigation-card-focus));
}

.m-navigation-card.is-disabled,
.m-navigation-card[aria-disabled="true"] {
    background: var(--m-navigation-card-disabled-bg);
    color: var(--m-navigation-card-disabled-text);
    cursor: not-allowed;
    box-shadow: none;
}

.m-navigation-card.is-disabled .m-navigation-card__label,
.m-navigation-card.is-disabled .m-navigation-card__description {
    color: inherit;
}

@media (max-width: 575.98px) {
    .m-navigation-cards__grid {
        grid-template-columns: 1fr;
    }

    .m-navigation-cards:not(.is-scrollable) .m-navigation-card {
        min-height: 3.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .m-navigation-card {
        transition: none !important;
    }

    .m-navigation-card[href]:hover {
        transform: none;
    }
}