/* ==========================================================================
   ARJUNA HARJAI - Responsive Styles
   Mobile-First Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet Landscape & Below (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --text-5xl: 3rem;
        --text-6xl: 3.5rem;
    }

    .container {
        padding: 0 var(--space-lg);
    }

    /* About */
    .about-content {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--space-2xl);
    }

    .about-stats {
        gap: var(--space-xl);
    }

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

    /* Press */
    .press-content {
        gap: var(--space-2xl);
    }

    .gallery-grid {
        gap: var(--space-sm);
    }

    /* Contact */
    .contact-content {
        gap: var(--space-2xl);
    }

    /* Music Player */
    .music-player-container {
        grid-template-columns: 1fr 340px;
    }

    /* Video Slider */
    .slider-arrow {
        width: 40px;
        height: 40px;
    }

    .slider-arrow svg {
        width: 20px;
        height: 20px;
    }

    /* Content carousel */
    .content-carousel .carousel-track > * {
        flex: 0 0 calc((100% - var(--space-xl)) / 2);
    }

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

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

    .upcoming-grid .upcoming-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

    /* Countdown */
    .countdown-value {
        font-size: var(--text-xl);
    }

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

    /* YouTube Banners */
    .video-banner-title h3 {
        font-size: var(--text-lg);
    }

    /* Reels */

    .phone-mockup {
        border-radius: 30px;
    }

    .reel-frame {
        border-radius: 22px;
    }
}

/* --------------------------------------------------------------------------
   Tablet Portrait & Below (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --text-4xl: 2rem;
        --text-5xl: 2.5rem;
        --text-6xl: 3rem;
        --space-4xl: 4rem;
        --navbar-height: 70px;
    }

    .section {
        padding: var(--space-3xl) 0;
    }

    /* Navigation - Mobile Menu */
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xl);
        transform: translateX(100%);
        transition: transform var(--transition-base);
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-link {
        font-size: var(--text-xl);
    }

    /* Hero */
    .hero-content {
        padding: var(--space-lg);
    }

    .hero-subtitle {
        font-size: var(--text-base);
    }

    .tagline-text {
        font-size: var(--text-lg);
    }

    .hero-cta {
        flex-direction: column;
        align-content: space-around;
        gap: var(--space-md);
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
    }

    .scroll-indicator {
        display: none;
    }

    /* About */
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-image {
        max-width: 350px;
        margin: 0 auto;
    }

    .about-intro {
        font-size: var(--text-xl);
    }

    .about-stats {
        justify-content: center;
    }

    /* Music Player */
    .music-player {
        grid-template-columns: auto 1fr;
        padding: var(--space-lg);
    }

    .player-artwork {
        width: 80px;
        height: 80px;
        grid-row: span 1;
    }

    .player-controls {
        grid-column: 1 / -1;
        justify-content: center;
        order: 3;
    }

    .player-progress {
        grid-column: 1 / -1;
        order: 4;
    }

    .player-volume {
        display: none;
    }

    .player-title {
        font-size: var(--text-lg);
    }

    /* Track List */
    .track-item {
        padding: var(--space-md) var(--space-lg);
    }

    /* Streaming */
    .streaming-buttons {
        flex-direction: column;
        align-items: center;
    }

    .streaming-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* Music Player - Stack */
    .music-player-container {
        grid-template-columns: 1fr;
    }

    .now-playing {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .track-list-scroll {
        max-height: 300px;
    }

    .filter-btn {
        padding: var(--space-xs) var(--space-md);
        font-size: var(--text-xs);
    }

    /* Video Slider */
    .slider-arrow {
        width: 36px;
        height: 36px;
    }

    .video-banner-title {
        flex-direction: column;
        gap: var(--space-xs);
        padding: var(--space-md) var(--space-lg);
    }

    /* Discography */
    .disco-filters {
        gap: var(--space-sm);
    }

    /* Press */
    .press-content {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact */
    .contact-content {
        grid-template-columns: 1fr;
    }

    .contact-info {
        text-align: center;
    }

    .contact-details {
        display: inline-block;
        text-align: left;
    }

    .social-links {
        justify-content: center;
    }

    .contact-form {
        padding: var(--space-xl);
    }

    /* About Streaming */
    .about-streaming {
        justify-content: center;
    }

    /* Countdown */
    .countdown-timer {
        gap: var(--space-xs);
        padding: var(--space-sm) var(--space-md);
    }

    .countdown-value {
        font-size: var(--text-lg);
    }

    .countdown-segment {
        min-width: 40px;
    }

    /* News */
    .news-grid {
        grid-template-columns: 1fr;
    }

    /* Upcoming */
    .upcoming-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .upcoming-grid .upcoming-card:last-child {
        max-width: 100%;
    }

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

    /* Content carousel */
    .content-carousel .carousel-track {
        padding-left: 44px;
        padding-right: 44px;
    }

    .content-carousel .carousel-track > * {
        flex: 0 0 100%;
    }

    .phone-mockup {
        border-radius: 26px;
        padding: 6px;
    }

    .phone-notch {
        width: 60px;
        height: 18px;
    }

    .reel-frame {
        border-radius: 20px;
    }

    /* Footer */
    .footer {
        padding: var(--space-2xl) 0;
    }

    .footer-top {
        flex-direction: column;
        gap: var(--space-xl);
        text-align: center;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Mobile Large (max-width: 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    :root {
        --text-3xl: 1.75rem;
        --text-4xl: 1.75rem;
        --text-5xl: 2rem;
        --text-6xl: 2.5rem;
        --space-3xl: 2.5rem;
    }

    .container {
        padding: 0 var(--space-md);
    }

    .section-title {
        font-size: var(--text-3xl);
    }

    /* Hero */
    .hero-name {
        letter-spacing: 0.15em;
    }

    .hero-subtitle {
        letter-spacing: 0.1em;
    }

    /* About */
    .about-stats {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .stat-item {
        padding: var(--space-md) 0;
        border-bottom: 1px solid var(--color-border);
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    /* Music Player */
    .music-player {
        padding: var(--space-md);
    }

    .player-artwork {
        width: 60px;
        height: 60px;
    }

    .player-title {
        font-size: var(--text-base);
    }

    .player-btn-main {
        width: 48px;
        height: 48px;
    }

    .player-btn-main svg {
        width: 20px;
        height: 20px;
    }

    /* Track List */
    .track-item {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .track-number {
        min-width: 24px;
    }

    .track-name {
        font-size: var(--text-sm);
    }

    .track-album {
        font-size: var(--text-xs);
    }

    /* Discography */
    .disco-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }

    /* Press Downloads */
    .download-card {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .download-icon {
        width: 40px;
        height: 40px;
    }

    .download-title {
        font-size: var(--text-sm);
    }

    /* Contact Form */
    .contact-form {
        padding: var(--space-lg);
    }

    .form-group label {
        font-size: var(--text-xs);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }

    /* Hero Streaming */
    .hero-streaming {
        gap: var(--space-md);
    }

    .hero-streaming a {
        width: 38px;
        height: 38px;
    }

    .hero-streaming a svg {
        width: 20px;
        height: 20px;
    }

    /* Music Player */
    .now-playing {
        padding: var(--space-md);
    }

    .track-list-header {
        padding: var(--space-md);
    }

    .track-list-item {
        padding: var(--space-sm) var(--space-md);
        gap: var(--space-sm);
    }

    .track-list-badge {
        display: none;
    }

    .track-list-scroll {
        max-height: 250px;
    }

    /* Video Slider */
    .slider-arrow {
        width: 32px;
        height: 32px;
    }

    .slider-arrow svg {
        width: 16px;
        height: 16px;
    }

    .video-banner-title h3 {
        font-size: var(--text-base);
    }

    .video-banner-title span {
        font-size: var(--text-xs);
    }

    /* Countdown */
    .countdown-value {
        font-size: var(--text-base);
    }

    .countdown-segment {
        min-width: 36px;
    }

    .countdown-label {
        font-size: 0.6rem;
    }

    /* News */
    .news-content h3 {
        font-size: var(--text-base);
    }
    .news-content {
        padding: var(--space-lg);
    }
    .news-date {
        left: var(--space-md);
        bottom: var(--space-md);
        padding: 8px 12px;
        font-size: var(--text-xs);
    }
    .news-media {
        aspect-ratio: 4 / 3;
    }
    .news-media img {
        object-position: 50% 0%;
    }

    /* Credits */
    .credits-grid {
        grid-template-columns: 1fr;
    }

    .brand-item span {
        font-size: var(--text-base);
    }

    .phone-mockup {
        border-radius: 22px;
        padding: 5px;
        border-width: 2px;
    }

    .phone-notch {
        width: 50px;
        height: 14px;
        top: 5px;
    }

    .phone-home-indicator {
        width: 70px;
        bottom: 8px;
    }

    .reel-frame {
        border-radius: 17px;
    }

    .reel-sound-indicator {
        width: 28px;
        height: 28px;
    }

    .reel-sound-indicator svg {
        width: 14px;
        height: 14px;
    }

    /* YouTube Banners */
    .video-banner-title h3 {
        font-size: var(--text-base);
    }

    .video-banner-title span {
        font-size: var(--text-xs);
    }

    /* Lightbox */
    .lightbox-close {
        top: var(--space-md);
        right: var(--space-md);
    }
}

/* --------------------------------------------------------------------------
   Mobile Small (max-width: 375px)
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
    :root {
        --text-5xl: 1.75rem;
        --text-6xl: 2rem;
    }

    .hero-name {
        letter-spacing: 0.1em;
    }

    .hero-subtitle {
        font-size: var(--text-sm);
    }

    .tagline-text {
        font-size: var(--text-base);
    }

    .about-intro {
        font-size: var(--text-lg);
    }

    /* Music Player */
    .music-player {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .player-artwork {
        margin-bottom: var(--space-md);
    }

    .player-info {
        margin-bottom: var(--space-md);
    }

    .player-progress {
        width: 100%;
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Footer Nav */
    .footer-nav {
        gap: var(--space-md);
    }

    .footer-nav a {
        font-size: var(--text-xs);
    }
}

/* --------------------------------------------------------------------------
   Large Desktop (min-width: 1400px)
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    :root {
        --container-max: 1320px;
    }

    .hero-name {
        font-size: 5rem;
    }

    .disco-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .music-player-container {
        max-width: 1100px;
        grid-template-columns: 1fr 420px;
    }

    .video-slider {
        max-width: 1100px;
    }
}

/* --------------------------------------------------------------------------
   Touch Device Optimizations
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover states on touch devices */
    .video-play {
        opacity: 1;
        background: rgba(196, 163, 90, 0.7);
    }

    .disco-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.4);
    }

    /* Larger touch targets */
    .nav-link {
        padding: var(--space-md);
    }

    .filter-btn {
        min-height: 44px;
    }

    .social-link {
        width: 52px;
        height: 52px;
    }

    /* Show overlays on touch */
    .reel-overlay {
        opacity: 1;
    }

    .upcoming-overlay {
        opacity: 1;
        background: rgba(0, 0, 0, 0.4);
    }

    /* Disable hover animations */
    .card-lift:hover,
    .disco-card:hover,
    .track-list-item:hover,
    .news-card:hover,
    .upcoming-card:hover,
    .reel-card:hover {
        transform: none;
    }

    /* Slider touch targets */
    .slider-arrow {
        width: 44px;
        height: 44px;
    }
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
    .film-grain,
    .navbar,
    .hero-cta,
    .hero-streaming,
    .scroll-indicator,
    .music-player,
    .music-player-container,
    .video-slider,
    .disco-filters,
    .streaming-links,
    .about-streaming,
    .brands-marquee,
    .social-links,
    .contact-form,
    .footer-social,
    .countdown-timer,
    .youtube-banners,
    .phone-mockup {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .section {
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
    }

    .hero {
        height: auto;
        min-height: auto;
        padding: 2rem 0;
    }

    .hero-background,
    .hero-overlay {
        display: none;
    }

    .hero-name {
        background: none;
        -webkit-text-fill-color: black;
        color: black;
    }
}

/* --------------------------------------------------------------------------
   High Contrast Mode
   -------------------------------------------------------------------------- */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #ffd700;
        --color-text: #ffffff;
        --color-text-muted: #cccccc;
        --color-border: #444444;
    }

    .btn-primary {
        border: 2px solid var(--color-bg);
    }

    .nav-link::after {
        height: 2px;
    }
}

/* --------------------------------------------------------------------------
   Dark Mode (already dark, but ensure consistency)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    /* Already using dark theme, no changes needed */
}

/* Light mode override if needed in future */
@media (prefers-color-scheme: light) {
    /* Could add light mode styles here if needed */
}

/* --------------------------------------------------------------------------
   Landscape Orientation on Mobile
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: var(--space-xl) 0;
    }

    .hero-content {
        padding: var(--space-md);
    }

    .hero-name {
        font-size: 2rem;
    }

    .hero-subtitle {
        margin-bottom: var(--space-md);
    }

    .hero-tagline {
        margin-bottom: var(--space-md);
    }

    .scroll-indicator {
        display: none;
    }
}