/* ============================================================
   THE HATED CREW — mobile.css
   Responsive overrides
============================================================ */

@media (max-width: 768px) {

    /* Hide custom cursor on touch devices */
    #cursor-dot,
    #cursor-ring {
        display: none;
    }

    body {
        cursor: auto;
    }

    a, button, .card, .news-card {
        cursor: pointer;
    }

    /* Navbar */
    .navbar {
        padding: 14px 20px;
    }

    .navbar.scrolled {
        padding: 10px 20px;
    }

    .nav-links {
        gap: 18px;
    }

    .nav-links a {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    /* Hero */
    .hero h1 {
        font-size: clamp(52px, 16vw, 80px);
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    /* Sections */
    section {
        padding: 60px 16px;
    }

    /* Cards */
    .card {
        width: 160px;
    }

    .grid {
        gap: 20px;
    }

    /* Music cards */
    .music-card {
        flex-direction: column;
        gap: 20px;
    }

    .music-card img {
        width: 100%;
        max-width: 280px;
    }

    /* Track layout */
    .track-layout {
        flex-direction: column;
        gap: 40px;
    }

    .track-card {
        width: 100%;
        max-width: 420px;
    }

    /* About */
    .about-main,
    .about-main.reverse {
        flex-direction: column;
    }

    .about-image img {
        width: 100%;
        max-width: 360px;
    }

    .about-stats {
        gap: 32px;
        padding: 40px 16px;
    }

    /* News */
    .news-card {
        width: 100%;
        max-width: 380px;
    }

    /* Contact */
    .contact-section {
        flex-direction: column;
        gap: 40px;
    }

    .contact-form-wrapper {
        min-width: unset;
        width: 100%;
    }

    /* Platform buttons */
    .platform-links {
        gap: 8px;
    }

    .platform-btn {
        padding: 9px 14px;
        font-size: 10px;
    }

    /* CTA */
    .cta {
        padding: 60px 16px;
    }

    /* Divider */
    .divider {
        width: 80%;
    }

    /* Page header */
    .page-header {
        padding-top: 120px;
        padding-bottom: 40px;
    }

    /* Merch grid */
    .merch-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 20px;
    }

    /* Reduce grain animation cost on mobile */
    body::before {
        animation: none;
    }

}

@media (max-width: 480px) {

    .hero h1 {
        font-size: clamp(44px, 18vw, 64px);
    }

    .nav-logo {
        font-size: 1.05rem;
    }

    .nav-links {
        gap: 12px;
    }

    .card {
        width: 145px;
    }

    .platform-btn span {
        display: none; /* icon only on very small screens */
    }

    .platform-btn {
        padding: 10px 12px;
    }

}