/* ═══════════════════════════════════════════════════
   MENU CARD — Burger menu items
   ═══════════════════════════════════════════════════ */

.menu-grid {
    display: grid;
    gap: var(--space-md);
    padding-inline: var(--space-md);
}

.menu-card {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);

    /* Scroll-driven */
    animation: cardSlideUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-card__badge {
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-end: var(--space-sm);
    background: var(--accent-red);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
}

.menu-card__badge--gold {
    background: var(--accent-gold);
    color: var(--text-main);
}

.menu-card__badge--green {
    background: var(--accent-green);
}

.menu-card__name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-block-end: 4px;
}

.menu-card__price {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-red);
    margin-block-end: var(--space-xs);
}

.menu-card__desc {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.menu-card__tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-block-start: var(--space-xs);
}

.menu-card__tag {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    color: var(--text-light);
}