/* ═══════════════════════════════════
   MARQUEE BAND
═══════════════════════════════════ */
.marquee-band {
    background: linear-gradient(90deg, #123217, #17351b, #0b1f0e);
    border-top: 1px solid rgba(82, 168, 98, 0.25);
    border-bottom: 1px solid rgba(82, 168, 98, 0.25);
    overflow: hidden;
    position: relative;
    z-index: 10;
    padding: 0.9rem 0;
}

.marquee-band:hover .marquee-track {
    animation-play-state: paused;
}

/* Track */
.marquee-track {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    animation: marquee 30s linear infinite;
    will-change: transform;
}

/* Animation */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Event block */
.mq-evt {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    white-space: nowrap;
}

/* Badge */
.mq-badge {
    font-family: "Fragment Mono", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    flex-shrink: 0;

    background: rgba(82, 168, 98, 0.15);
    border: 1px solid rgba(82, 168, 98, 0.4);
    color: #fff;
}

.mq-badge-gold {
    background: rgba(232, 184, 75, 0.12);
    border-color: rgba(232, 184, 75, 0.4);
    color: #ca980e;
}

/* Title */
.mq-title {
    font-family: "Playfair Display", serif;
    font-weight: 700;
    color: var(--cream);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
}

/* Detail */
.mq-detail {
    font-family: "Fragment Mono", monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: rgba(223, 240, 226, 0.97);
}

/* Separator */
.mq-sep-dot {
    color: rgba(174, 174, 174, 0.683);
    padding: 0 0.4rem;
}

/* Button */
.mq-btn {
    font-family: "Fragment Mono", monospace;
    font-size: 0.48rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.35rem 0.9rem;
    border-radius: 3px;
    text-decoration: none;
    flex-shrink: 0;

    color: var(--gold);
    border: 1px solid rgba(232, 184, 75, 0.5);

    transition: all 0.25s ease;
}

.mq-btn:hover {
    background: var(--gold);
    color: var(--void);
}

/* ═══════════════════════════════════
   RESPONSIVE
═══════════════════════════════════ */

/* Tablet */
@media (max-width: 768px) {
    .marquee-track {
        animation-duration: 22s;
    }

    .mq-evt {
        padding: 0.8rem 1.5rem;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .marquee-track {
        animation-duration: 16s;
        gap: 2rem;
    }

    .mq-evt {
        padding: 0.7rem 1rem;
        gap: 0.5rem;
    }

    .mq-title {
        font-size: clamp(0.7rem, 3.5vw, 0.9rem);
    }

    .mq-detail {
        font-size: 0.45rem;
    }

    .mq-badge {
        font-size: 0.38rem;
        padding: 0.15rem 0.45rem;
    }

    .mq-btn {
        font-size: 0.42rem;
        padding: 0.28rem 0.65rem;
    }
}

/* Small phones */
@media (max-width: 400px) {
    .marquee-track {
        animation-duration: 12s;
    }

    .mq-title {
        font-size: 0.75rem;
    }
}