/* ==========================================================================
   Macahé Burguer — Macahé Drops (lista)
   Depende de design-system.css. CSP do projeto: style-src 'self'.
   ========================================================================== */

.mb-drop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mb-space-3);
    max-width: 760px;
}

.mb-drop {
    display: flex;
    align-items: center;
    gap: var(--mb-space-4);
    padding: var(--mb-space-5) var(--mb-space-6);
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius-lg);
    color: var(--mb-text);
    text-decoration: none;
    transition: transform var(--mb-dur-fast) var(--mb-ease),
                box-shadow var(--mb-dur-fast) var(--mb-ease),
                border-color var(--mb-dur-fast) var(--mb-ease);
}

.mb-drop:hover {
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: var(--mb-shadow-2);
    color: var(--mb-text);
    text-decoration: none;
}

.mb-drop__name {
    flex-grow: 1;
    font-family: var(--mb-font-display);
    font-size: 20px;
    letter-spacing: var(--mb-tracking-title);
}

.mb-drop__badge {
    flex-shrink: 0;
}

.mb-drop__badge--live {
    background: var(--mb-chili);
    color: var(--mb-text-inverse);
}

.mb-drop__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: mb-drop-pulse 1.6s ease-in-out infinite;
}

@keyframes mb-drop-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.mb-drop__badge--upcoming {
    background: var(--mb-blue-tint);
    color: var(--mb-blue-pressed);
}

.mb-drop__badge--ended {
    background: var(--mb-bg-alt);
    color: var(--mb-text-muted);
}

.mb-drop__arrow {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--mb-border-strong);
    transition: transform var(--mb-dur-fast) var(--mb-ease);
}

.mb-drop:hover .mb-drop__arrow {
    transform: translateX(4px);
    color: var(--mb-blue);
}

.mb-drop--ended {
    opacity: .6;
}

.mb-drop--ended:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--mb-border);
}

.mb-drop--ended .mb-drop__arrow {
    color: var(--mb-border-strong);
}

.mb-drop--ended:hover .mb-drop__arrow {
    transform: none;
    color: var(--mb-border-strong);
}

@media (prefers-reduced-motion: reduce) {
    .mb-drop__dot {
        animation: none;
    }
}

@media (max-width: 599px) {
    .mb-drop {
        flex-wrap: wrap;
        row-gap: var(--mb-space-3);
    }

    .mb-drop__arrow {
        display: none;
    }
}