/* =========================================
   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 */
    }
}

/* ==========================================================================
   PHONE POLISH LAYER (≤640px) — comfortable, friendly, clean
   Fluid type, bigger tap targets, tighter-but-airy spacing everywhere.
   ========================================================================== */
@media (max-width: 640px) {

    /* --- fluid typography: headlines scale with the screen instead of jumping --- */
    h1 {
        font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
        line-height: 1.12 !important;
    }

    h2 {
        font-size: clamp(1.5rem, 6.4vw, 2rem) !important;
    }

    /* section labels stay legible */
    .wd-section-label, .tg-section-label, .nl-section-label, .bl-label, .iq-label {
        font-size: 0.62rem;
        letter-spacing: 0.18em;
    }

    /* --- tap targets: every interactive element ≥ 40px tall on phone --- */
    a, button {
        min-height: 40px;
    }

    /* except inline icons/text inside paragraphs and marquees */
    p a, li a:not(.btn), .bl-chip, .wd-chip-tag, .tg-chip-tag, .nl-chip-tag,
    [data-scroll-ticker] *, .protocol-step-indicator {
        min-height: 0;
    }

    /* footer link rows: comfortable touch spacing */
    footer ul {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    footer ul a {
        display: inline-block;
        padding: 0.5rem 0;
    }

    /* --- layout comfort --- */
    main {
        padding-top: 6.5rem;
    }

    /* hero CTA buttons full-width, stacked with room to breathe */
    .flex.flex-col.sm\:flex-row.items-center.justify-center.gap-4 > a {
        width: 100%;
        justify-content: center;
    }

    /* meta/info chip grids: 2 cols stay, but gain breathing room */
    .grid.grid-cols-2.md\:grid-cols-4.gap-3,
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 {
        gap: 0.6rem;
    }

    .grid.grid-cols-2.md\:grid-cols-4.gap-3 > div,
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 > div {
        padding: 0.85rem;
    }

    /* palette chips: shorter on phone so all four fit without scrolling forever */
    .wd-chip, .tg-chip, .nl-chip {
        min-height: 5.6rem;
        padding: 0.9rem;
    }

    /* quote/hero bands: less horizontal padding, keep the drama */
    .wd-hero-band, .tg-hero-band, .nl-hero-band {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
        border-radius: 1.5rem;
    }

    /* outcome panels + CTA panels */
    .rounded-3xl.p-8.md\:p-14, .rounded-3xl.p-10.md\:p-16 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* featured blog card: stack image → text with aligned padding */
    .bl-card > div p-8, .bl-card.p-8 { padding: 1.25rem; }

    /* next-case-study rows stack cleanly */
    .wd-next, .tg-next, .nl-next {
        gap: 1rem;
    }

    .wd-next span, .tg-next span, .nl-next span {
        width: 100%;
        justify-content: center;
    }

    /* videos + big embeds get rounded phone corners */
    video, iframe[src*="youtube"] {
        border-radius: 0.9rem;
    }

    /* inquiry form: inputs stay big and thumb-friendly */
    .form-selector {
        padding: 0.9rem 1rem;
        border-radius: 0.9rem;
    }

    .form-selector .selector-letter {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8rem;
        margin-right: 0.75rem;
    }

    .form-selector .selector-text {
        font-size: 0.95rem;
    }

    .btn {
        padding: 0.9rem 1.75rem;
        font-size: 1rem;
    }

    /* trust row: single column, roomier */
    .iq-trust {
        padding: 0.9rem 0.5rem;
    }

    /* prev/next round buttons easier to hit */
    #form-prev-btn, #form-next-btn {
        width: 3.25rem;
        height: 3.25rem;
    }

    /* blog cards: text sizes that read at a glance */
    .bl-title { font-size: 1.05rem; }

    /* marquees: slower feel via smaller gap is visual only; keep height modest */
    .wd-marquee, .tg-marquee, .nl-marquee {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    /* horizontal scroll containers (if any appear) get momentum + hidden bars */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .overflow-x-auto::-webkit-scrollbar {
        display: none;
    }

    /* sticky section headers in case studies don't stick on phone (they overlap) */
    .lg\:sticky.lg\:top-28 {
        position: static;
    }

    /* big watermark words shrink so they never push layout */
    .bl-watermark, .iq-watermark {
        font-size: 26vw;
        opacity: 0.8;
    }

    /* trusted-by avatars row wraps gracefully */
    #trusted-avatar-group {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.5rem;
    }

    /* success + section blocks keep vertical rhythm after reductions */
    #form-success { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ==========================================================================
   SMALL PHONE FINE-TUNING (≤380px: iPhone SE, older Androids)
   ========================================================================== */
@media (max-width: 380px) {
    h1 { font-size: clamp(1.75rem, 9vw, 2.25rem) !important; }

    .wd-chip, .tg-chip, .nl-chip { min-height: 5rem; }

    .grid.grid-cols-2.md\:grid-cols-4.gap-3,
    .grid.grid-cols-2.md\:grid-cols-3.gap-3 {
        gap: 0.5rem;
    }

    /* chips stay 2-up but tighter */
    .wd-chip, .tg-chip, .nl-chip { padding: 0.75rem; }

    .btn { padding: 0.85rem 1.4rem; font-size: 0.95rem; }

    header .h-16 { height: 3.5rem; }
}

/* --- phone: respect the notch / home indicator --- */
@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}