/* ==========================================================================
   QuickLinks Card Panel
   Responsive grid of navigation cards for the Landing Page DetailView.
   Uses DevExpress Blazor CSS variables for consistent theming.
   ========================================================================== */

.quicklink-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    padding: 0.75rem 0;
}

.quicklink-card {
    border: 1px solid var(--dxbl-border-color, #dee2e6);
    border-radius: 14px;
    padding: 1rem;
    background: var(--dxbl-surface-bg, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    min-height: 150px;
    transition: box-shadow 0.2s ease;
}

.quicklink-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.quicklink-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
}

.quicklink-icon {
    font-size: 1.4rem;
}

.quicklink-badge {
    font-size: .75rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: var(--dxbl-primary, #0d6efd);
    color: white;
}

.quicklink-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.quicklink-description {
    font-size: .875rem;
    opacity: .75;
    flex: 1;
}

.quicklink-button {
    margin-top: 1rem;
    align-self: flex-start;
}