/* =========================================
   CSS RESPONSIVE - Mobile, Tablet & Desktop Breakpoints
   ========================================= */

/* --- Base Mobile Styles (Default) --- */
/* These styles apply to all screen sizes, but are primarily for mobile-first design */

/* Hide desktop-only elements on mobile */
.hidden-mobile {
    display: none !important;
}

/* Show mobile-only elements */
.visible-mobile {
    display: block !important;
}

/* Mobile Header Adjustments */
@media (max-width: 767px) {
    header nav.hidden.md\:flex {
        display: none !important;
    }

    header div.hidden.md\:flex.items-center.space-x-6 {
        display: none !important;
    }

    header a.absolute.left-1\/2 {
        position: static;
        transform: none;
    }

    header .max-w-\[1400px\] {
        justify-content: space-between;
    }

    /* Mobile Hero Section Adjustments */
    section.px-4.sm\:px-6.md\:px-8.py-12.md\:py-24 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    section .flex-1.w-full {
        padding-bottom: 2rem;
    }

    .hidden.md\:block {
        display: none !important;
    }

    .md\:hidden {
        display: block !important;
    }

    /* Mobile Project Grid (1 Column) */
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Mobile FAQ Grid (1 Column) */
    .grid.grid-cols-1.md\:grid-cols-2.gap-4 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Mobile Footer Layout */
    footer .grid.grid-cols-1.md\:grid-cols-12 {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    footer .md\:col-span-5,
    footer .md\:col-span-2,
    footer .md\:col-span-2.md\:col-start-7 {
        grid-column: span 1 / span 1;
    }

    /* Mobile Case Study Layouts */
    .case-study-videos-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .case-study-metadata-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .case-study-credits-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .case-study-storyboard-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* Mobile Form Engine */
    .form-engine-card {
        padding: 1.5rem;
        border-radius: 1.5rem;
    }

    .form-selector {
        padding: 1rem;
    }
}

/* --- Tablet Styles (768px to 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-mobile {
        display: block !important;
    }

    .visible-mobile {
        display: none !important;
    }

    /* Tablet Project Grid (2 Columns for Work Page) */
    .work-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tablet Case Study Layouts */
    .case-study-metadata-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .case-study-storyboard-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* --- Desktop Styles (1024px and up) --- */
@media (min-width: 1024px) {
    .hidden-mobile {
        display: block !important;
    }

    .visible-mobile {
        display: none !important;
    }

    /* Desktop Typography Scaling */
    h1 {
        font-size: 4rem;
        line-height: 1.1;
    }

    h2 {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    /* Desktop Project Grid (3 Columns for Home, 2 for Work) */
    .home-projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    /* Desktop Case Study Layouts */
    .case-study-videos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .case-study-metadata-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
    }

    .case-study-credits-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .case-study-storyboard-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
    }

    /* Desktop Form Engine */
    .form-engine-card {
        max-width: 800px;
        margin: 0 auto;
        padding: 3rem;
    }

    .form-selector {
        padding: 1.25rem 1.5rem;
    }
}

/* --- Large Desktop Styles (1440px and up) --- */
@media (min-width: 1440px) {
    .max-w-\[1200px\] {
        max-width: 1200px;
    }

    .max-w-\[1400px\] {
        max-width: 1400px;
    }

    h1 {
        font-size: 5rem;
    }
}

/* --- Specific Component Responsive Tweaks --- */

/* Mobile Menu Overlay Full Screen */
@media (max-width: 767px) {
    #mobile-menu {
        padding: 0;
    }

    #mobile-menu nav a {
        font-size: 3rem;
    }
}

/* Voice Note Player Responsive */
@media (max-width: 767px) {
    .voice-note-player {
        padding: 1rem;
    }

    .voice-note-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }

    .voice-note-play-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Floating Voice Note Responsive */
@media (max-width: 767px) {
    #floating-voice-note {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        justify-content: space-between;
    }
}

/* Hero Video Container Responsive */
@media (max-width: 767px) {
    #hero-video-trigger {
        max-width: 100% !important;
    }

    #hero-video-trigger .w-16 {
        width: 3.5rem;
        height: 3.5rem;
    }
}

/* Footer Responsive Adjustments */
@media (max-width: 767px) {
    footer .md\:col-span-5 .flex.space-x-4 {
        margin-bottom: 2rem;
    }

    footer .border-t {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    footer .border-t .flex.space-x-6 {
        justify-content: center;
    }
}

/* Case Study "Back to Work" Button Responsive */
@media (max-width: 767px) {
    .back-to-work-btn {
        position: sticky;
        top: 5rem;
        z-index: 40;
        background-color: hsl(var(--background));
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        border: 1px solid hsl(var(--border));
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        margin-bottom: 1.5rem;
    }
}

/* Multi-step Form Progress Bar Responsive */
@media (max-width: 767px) {
    .form-progress-container {
        height: 3px;
    }
}

/* Accordion Responsive */
@media (max-width: 767px) {
    .accordion-header {
        font-size: 1.125rem;
    }

    .faq-item {
        padding: 1.25rem;
    }

    .faq-item h3 {
        font-size: 1rem;
    }
}

/* Service Cards Responsive */
@media (max-width: 767px) {
    .service-card {
        padding: 1.5rem;
    }
}

/* Project Card Text Responsive */
@media (max-width: 767px) {
    .project-card .card-title {
        font-size: 1rem;
    }

    .project-card .card-category {
        font-size: 0.75rem;
    }
}

/* Theme Toggle Button Responsive */
@media (max-width: 767px) {
    #theme-toggle {
        display: none; /* Hidden on mobile, use mobile menu toggle instead */
    }
}

/* Shop Link Responsive */
@media (max-width: 767px) {
    header a[href="#"] {
        display: none; /* Hide shop link on mobile header, move to mobile menu if needed */
    }
}