/* ============================================
   WESPZ EPK — RESPONSIVE STYLES
   ============================================ */

/* ── Large Desktop (1280px+) ──────────────── */
@media (min-width: 1280px) {
    .hero-name { font-size: 13rem; }
}

/* ── Desktop (1100px) ─────────────────────── */
@media (max-width: 1100px) {
    .wrap { padding: 0 32px; }

    .about-content { padding: 80px 48px; }

    .contact-left,
    .contact-right { padding: 80px 48px; }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

/* ── Tablet (900px) ───────────────────────── */
@media (max-width: 900px) {

    /* Nav */
    .nav-center { display: none; }
    .nav-social  { display: none; }
    .nav-book    { display: none; }
    .hamburger   { display: flex; }

    /* Hero */
    .hero-content .wrap {
        grid-template-columns: 1fr;
        padding-bottom: 80px;
    }
    .hero-right  { display: none; }
    .hero-name   { font-size: clamp(5rem, 18vw, 8rem); }
    .hero-scroll { display: none; }

    /* About */
    .about { grid-template-columns: 1fr; }
    .about-image {
        height: 420px;
        min-height: unset;
    }
    .about-image-overlay {
        background: linear-gradient(
            to top,
            var(--black) 0%,
            transparent 60%
        );
    }
    .about-content { padding: 60px 32px; }

    /* Stats */
    .stats-bar .wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .stat-item:nth-child(2)           { border-right: none; }
    .stat-item                        { border-bottom: 1px solid var(--border); }
    .stat-item:nth-last-child(-n+2)   { border-bottom: none; }

    /* Phases */
    .phases-grid { grid-template-columns: 1fr; }
    .phase-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 48px 0;
    }
    .phase-item:not(:first-child) { padding-left: 0; }
    .phase-item:last-child        { border-bottom: none; padding-bottom: 0; }

    /* Discography */
    .disc-grid { grid-template-columns: repeat(2, 1fr); }

    /* Stream */
    .stream-grid { grid-template-columns: 1fr; }

    /* Videos */
    .video-grid { grid-template-columns: 1fr; }
    .video-item.featured {
        grid-row: auto;
        min-height: auto;
    }
    .video-item.featured iframe {
        position: static;
        height: auto;
        aspect-ratio: 16/9;
    }

    /* Stage */
    .stage-intro {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 48px;
    }
    .stage-grid { grid-template-columns: repeat(2, 1fr); }
    .stage-card:nth-child(2n)         { border-right: none; }
    .stage-card                       { border-bottom: 1px solid var(--border); }
    .stage-card:nth-last-child(-n+2)  { border-bottom: none; }

    /* Connect */
    .connect-grid { grid-template-columns: repeat(2, 1fr); }
    .connect-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Contact */
    .contact { grid-template-columns: 1fr; }
    .contact-left {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 64px 32px;
    }
    .contact-right { padding: 64px 32px; }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        padding: 60px 0 48px;
    }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .footer-bottom-links { flex-wrap: wrap; gap: 16px; }
}

/* ── Mobile Large (768px) ─────────────────── */
@media (max-width: 768px) {

    /* Phases */
    .phases { padding: 80px 0; }
    .phases-header { margin-bottom: 48px; }

    /* Discography */
    .discography { padding: 80px 0; }
    .disc-header { margin-bottom: 40px; }

    /* Stream */
    .stream-section { padding: 80px 0; }

    /* Videos */
    .videos { padding: 80px 0; }

    /* Stage */
    .stage { padding: 80px 0; }

    /* Connect */
    .connect { padding: 80px 0; }

    /* About */
    .about-quote p { font-size: 1.15rem; }

    /* Stats */
    .stat-item { padding: 40px 24px; }
    .stat-num  { font-size: 3rem; }

    /* Form */
    .form-row { grid-template-columns: 1fr; }
    .form-title { font-size: 1.5rem; }

    /* Now playing card */
    .now-playing-card { width: 100%; }
}

/* ── Mobile (600px) ───────────────────────── */
@media (max-width: 600px) {

    /* Global */
    .wrap { padding: 0 20px; }

    /* Hero */
    .hero { min-height: 600px; }
    .hero-name { font-size: clamp(4rem, 20vw, 6rem); }
    .hero-content { padding-bottom: 60px; }
    .hero-desc { font-size: 14px; }
    .hero-btns { flex-direction: column; }
    .hero-btns .btn { width: 100%; justify-content: center; }

    /* Ticker */
    .ticker-item { font-size: 9px; padding: 0 16px; }

    /* About */
    .about-image  { height: 320px; }
    .about-content { padding: 48px 20px; }
    .about-tags   { gap: 6px; }
    .about-tag    { font-size: 9px; padding: 6px 10px; }

    /* Stats */
    .stats-bar .wrap { grid-template-columns: 1fr 1fr; }
    .stat-item       { padding: 32px 16px; }
    .stat-num        { font-size: 2.5rem; }

    /* Phases */
    .phases { padding: 60px 0; }
    .phase-num   { font-size: 5rem; }
    .phase-title { font-size: 1.25rem; }

    /* Discography */
    .discography { padding: 60px 0; }
    .disc-grid   { grid-template-columns: 1fr 1fr; }
    .disc-name   { font-size: 0.95rem; }

    /* Stream */
    .stream-section { padding: 60px 0; }
    /* ============================================
   STREAM SECTION — Responsive
   ============================================ */

@media (max-width: 900px) {

    /* Header */
    .stream-header {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 48px;
    }

    /* Embeds */
    .stream-embeds-grid {
        grid-template-columns: 1fr;
        margin-bottom: 56px;
    }

    /* Platforms */
    .stream-platforms-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 56px;
    }

    /* Releases */
    .stream-release-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px 24px;
    }
    .stream-release-links {
        width: 100%;
        justify-content: flex-start;
    }

    /* CTA */
    .stream-cta-banner  { padding: 36px 32px; }
    .stream-cta-content { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {

    /* Platforms */
    .stream-platforms-grid { grid-template-columns: 1fr; }

    /* Platform card */
    .stream-platform-card { padding: 24px 20px; }

    /* Releases */
    .stream-release-item  { padding: 18px 20px; }
    .stream-release-title { font-size: 1rem; }
    .stream-release-num   { font-size: 1.5rem; width: 28px; }

    /* Release links */
    .stream-release-link  { padding: 7px 10px; font-size: 9px; }
    .stream-release-link span { display: none; }
    .stream-release-link svg  { width: 16px; height: 16px; }

    /* CTA */
    .stream-cta-banner    { padding: 28px 20px; }
    .stream-cta-btns      { flex-direction: column; width: 100%; }
    .stream-cta-btns .btn { width: 100%; justify-content: center; }
}


    /* Videos */
    .videos      { padding: 60px 0; }
    .video-grid  { grid-template-columns: 1fr; }

    /* Stage */
    .stage       { padding: 60px 0; }
    .stage-grid  { grid-template-columns: 1fr 1fr; }
    .stage-card  { padding: 32px 20px; }
    .stage-name  { font-size: 1rem; }

    /* Connect */
    .connect      { padding: 60px 0; }
    .connect-grid { grid-template-columns: 1fr; }
    .connect-card { padding: 24px 20px; }

    /* Contact */
    .contact-left,
    .contact-right { padding: 48px 20px; }
    .contact-left h2 { font-size: 1.8rem; }

    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 48px 0 36px;
    }
    .footer-brand { grid-column: auto; }
    .footer-logo-text { font-size: 2rem; }
    .footer-bottom { padding: 20px 0; }
    .footer-bottom-links { gap: 12px; }

    /* Buttons */
    .btn-gold,
    .btn-outline { padding: 14px 28px; }

    /* Nav */
    .nav-logo { font-size: 22px; }

    /* Mobile menu */
    .mobile-menu a { font-size: clamp(1.8rem, 7vw, 2.8rem); }
    .mobile-menu   { gap: 24px; }
}

/* ── Mobile Small (400px) ─────────────────── */
@media (max-width: 400px) {

    .hero-name { font-size: clamp(3.5rem, 22vw, 5rem); }

    .disc-grid  { grid-template-columns: 1fr; }
    .stage-grid { grid-template-columns: 1fr; }

    .stage-card { border-right: none !important; }
    .stage-card { border-bottom: 1px solid var(--border) !important; }
    .stage-card:last-child { border-bottom: none !important; }

    .stat-num { font-size: 2.2rem; }

    .contact-left h2 { font-size: 1.6rem; }

    .footer-bottom-links { flex-direction: column; gap: 8px; }
}

/* ── Print Styles ─────────────────────────── */
@media print {

    .nav,
    .ticker,
    .hero-scroll,
    .hamburger,
    .mobile-menu,
    .stream-section,
    .videos,
    .hero-btns,
    .footer-social { display: none !important; }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .hero {
        height: auto;
        min-height: auto;
        padding: 40px 0;
    }

    .hero-bg-img,
    .hero-overlay,
    .hero-overlay-side { display: none; }

    .hero-name { color: #000 !important; font-size: 4rem; }
    .hero-desc { color: #333 !important; border-color: #c9a96e; }

    .about { grid-template-columns: 1fr; }
    .about-image { display: none; }
    .about-content { padding: 20px 0; }

    .contact { grid-template-columns: 1fr; }
    .contact-right { display: none; }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 10px;
        color: #666;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after { content: ''; }
}

/* ── Reduced Motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ticker-track { animation: none; }
    .hero-bg-img  { transition: none; }
    .scroll-line  { animation: none; }
    .hero-tag-dot { animation: none; }
}

/* ── High Contrast ────────────────────────── */
@media (prefers-color-scheme: light) {
    /* Site is intentionally dark — no light mode override */
    /* Keeping dark theme as brand identity */
}

/* ── Focus Styles (Accessibility) ────────── */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}