/* ============================================
   SITEKRAFT MOBILE RESPONSIVE STYLES
   Production-Ready Mobile Fixes
   ============================================ */

/* ============================================
   GLOBAL RESETS & FIXES
   ============================================ */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

img, video {
    max-width: 100%;
    height: auto;
}

/* ============================================
   NAVBAR - ALL PAGES
   ============================================ */

/* Show hamburger menu button on mobile */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block !important;
    }
    
    /* Hide desktop navigation */
    header nav .hidden.md\:flex {
        display: none !important;
    }
    
    /* Hide CONTACT US button on mobile (shown in menu) */
    header nav > div.flex.items-center.space-x-4 {
        display: none !important;
    }
}

/* Mobile menu dropdown */
.mobile-menu {
    display: none;
    background: #7dd3fc;
    color: #052533;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.mobile-menu.active {
    display: block;
    max-height: 500px;
}

@media (max-width: 768px) {
    .mobile-menu {
        border-top: 1px solid rgba(5, 37, 51, 0.2);
    }
    
    /* Mobile menu link styling */
    .mobile-menu a {
        display: block;
        padding: 0.75rem;
        transition: all 0.2s ease-in-out;
    }
    
    .mobile-menu a:hover {
        background-color: rgba(5, 37, 51, 0.1);
        padding-left: 1rem;
    }
    
    /* Mobile Contact Us button styling */
    .mobile-menu .pt-4 a {
        padding: 0.75rem 1rem;
        background-color: #2ECC71 !important;
        display: block;
        text-align: center;
        font-weight: bold;
        margin-top: 0.5rem;
        transition: all 0.2s ease-in-out;
    }
    
    .mobile-menu .pt-4 a:hover {
        transform: scale(1.05);
        padding-left: 1rem;
    }
}

/* ============================================
   INDEX.HTML - HOME PAGE
   ============================================ */

/* Hero animation wrapper */
@media (max-width: 768px) {
    #animation-wrapper {
        height: 200vh !important;
    }
    
    .hero {
        height: 70vh !important;
    }
    
    canvas {
        height: 70vh !important;
    }
}

@media (max-width: 480px) {
    #animation-wrapper {
        height: 150vh !important;
    }
    
    .hero {
        height: 50vh !important;
    }
    
    canvas {
        height: 50vh !important;
    }
}

/* Products section - 3 column grid */
@media (max-width: 1024px) {
    #products .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    #products .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Community section - batch cards */
@media (max-width: 1024px) {
    #community .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #community .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    #community .sm\:col-span-2 {
        grid-column: span 1 !important;
    }
}

/* Why Choose section - 4 columns */
@media (max-width: 1024px) {
    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

/* Contact section */
@media (max-width: 1024px) {
    #contact .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* Footer */
@media (max-width: 1024px) {
    footer .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    footer .grid.lg\:grid-cols-4,
    footer .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    footer .sm\:col-span-2 {
        grid-column: span 1 !important;
    }
}

/* ============================================
   PRODUCT_PAGE.HTML
   ============================================ */

/* Product cards section */
@media (max-width: 1024px) {
    #products .grid.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #products .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    #products .sm\:col-span-2 {
        grid-column: span 1 !important;
    }
}

/* Product detail sections */
@media (max-width: 768px) {
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* Product header */
@media (max-width: 768px) {
    header.custom-border {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    header.custom-border .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 480px) {
    header.custom-border h1 {
        font-size: 2rem !important;
    }
}

/* Interactive buttons */
@media (max-width: 768px) {
    .interactive-btn {
        padding: 0.625rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

@media (max-width: 480px) {
    .flex.flex-wrap.gap-4 {
        flex-direction: column !important;
    }
    
    .interactive-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Video modal */
@media (max-width: 768px) {
    #videoModal .max-w-xl {
        max-width: 90vw !important;
    }
    
    #videoModal video {
        max-height: 350px !important;
    }
}

@media (max-width: 480px) {
    #videoModal .max-w-xl {
        max-width: 95vw !important;
    }
    
    #videoModal video {
        max-height: 250px !important;
    }
}

/* Product images */
@media (max-width: 768px) {
    .custom-border img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
}

/* ============================================
   PROJECT_PAGE.HTML
   ============================================ */

/* Project grid */
@media (max-width: 768px) {
    section.grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* Project images */
@media (max-width: 768px) {
    .aspect-\[4\/3\] {
        aspect-ratio: 16/9 !important;
    }
}

@media (max-width: 480px) {
    .aspect-\[4\/3\] {
        aspect-ratio: 4/3 !important;
    }
}

/* Project buttons */
@media (max-width: 768px) {
    .btn-interactive {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

@media (max-width: 480px) {
    .space-y-4 .btn-interactive {
        width: 100% !important;
    }
}

/* Project header */
@media (max-width: 768px) {
    header.mb-16 h1 {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    header.mb-16 h1 {
        font-size: 2rem !important;
    }
    
    header.mb-16 .flex.items-baseline {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}

/* Disable parallax effects on mobile */
@media (max-width: 768px) {
    .parallax-card:hover {
        transform: none !important;
    }
    
    .animate-float {
        animation: none !important;
    }
}

/* ============================================
   COMMUNITY_PAGE.HTML
   ============================================ */

/* Hero banner */
@media (max-width: 1024px) {
    .aspect-\[21\/9\] {
        aspect-ratio: 16/9 !important;
    }
}

@media (max-width: 768px) {
    .aspect-\[21\/9\] {
        aspect-ratio: 3/2 !important;
    }
}

@media (max-width: 480px) {
    .aspect-\[21\/9\] {
        aspect-ratio: 4/3 !important;
    }
    
    .aspect-\[21\/9\] h2 {
        font-size: 2rem !important;
    }
    
    .aspect-\[21\/9\] p {
        font-size: 0.875rem !important;
    }
}

/* Batch cards */
@media (max-width: 1024px) {
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* News section layout */
@media (max-width: 1024px) {
    .flex.lg\:flex-row {
        flex-direction: column !important;
    }
    
    .w-full.lg\:w-1\/3,
    .w-full.lg\:w-2\/3 {
        width: 100% !important;
    }
}

/* News cards */
@media (max-width: 768px) {
    .grid.sm\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* Floating button */
@media (max-width: 480px) {
    .fixed.bottom-8.right-8 {
        bottom: 1rem !important;
        right: 1rem !important;
        padding: 0.75rem !important;
    }
}

/* Disable animations on mobile */
@media (max-width: 768px) {
    .animate-hero-zoom,
    .animate-float-1,
    .animate-float-2,
    .animate-float-3,
    .tilt-card:hover {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================
   SIGN_UP_PAGE.HTML (CONTACT/JOIN)
   ============================================ */

/* Main card layout */
@media (max-width: 768px) {
    #main-card.grid.md\:grid-cols-5 {
        grid-template-columns: 1fr !important;
    }
    
    #main-card .md\:col-span-2,
    #main-card .md\:col-span-3 {
        grid-column: span 1 !important;
    }
    
    #main-card {
        min-height: auto !important;
    }
}

/* Left sidebar */
@media (max-width: 768px) {
    #main-card > div:first-child {
        padding: 2rem !important;
        border-right: none !important;
        border-bottom: 1px dashed rgba(56, 189, 248, 0.3) !important;
    }
}

@media (max-width: 480px) {
    #main-card > div:first-child {
        padding: 1.5rem !important;
    }
}

/* Logo container */
@media (max-width: 768px) {
    .w-40.h-40 {
        width: 10rem !important;
        height: 10rem !important;
    }
}

@media (max-width: 480px) {
    .w-40.h-40 {
        width: 8rem !important;
        height: 8rem !important;
    }
    
    #main-card h1 {
        font-size: 2rem !important;
    }
}

/* Form section */
@media (max-width: 768px) {
    #main-card > div:last-child {
        padding: 2rem !important;
    }
}

@media (max-width: 480px) {
    #main-card > div:last-child {
        padding: 1.5rem !important;
    }
}

/* Form buttons */
@media (max-width: 768px) {
    .flex.sm\:flex-row.gap-4 {
        flex-direction: column !important;
    }
}

/* Form inputs */
@media (max-width: 480px) {
    input, textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* ============================================
   OUR_TEAM_PAGE.HTML
   ============================================ */

/* Team grid */
@media (max-width: 1024px) {
    .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

@media (max-width: 768px) {
    .grid.lg\:grid-cols-4,
    .grid.sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .grid.lg\:grid-cols-4,
    .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Team cards */
@media (max-width: 768px) {
    .tilt-card {
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .tilt-card {
        padding: 1rem !important;
    }
}

/* Team member images */
@media (max-width: 768px) {
    .w-48.h-48 {
        width: 10rem !important;
        height: 10rem !important;
    }
}

@media (max-width: 480px) {
    .w-48.h-48 {
        width: 8rem !important;
        height: 8rem !important;
    }
}

/* Header */
@media (max-width: 768px) {
    .text-5xl.md\:text-7xl {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    .text-5xl.md\:text-7xl {
        font-size: 2rem !important;
    }
}

/* Disable tilt on mobile */
@media (max-width: 768px) {
    .tilt-card:hover {
        transform: none !important;
    }
}

/* ============================================
   TOUCH TARGETS & ACCESSIBILITY
   ============================================ */

@media (max-width: 768px) {
    button,
    a.block,
    .interactive-btn,
    .btn-interactive {
        min-height: 44px !important;
    }
    
    /* Increase tap area for links */
    a {
        padding: 0.25rem 0 !important;
    }
}

/* ============================================
   TYPOGRAPHY MOBILE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    h1 {
        font-size: 2rem !important;
        line-height: 2.25rem !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
        line-height: 1.75rem !important;
    }
    
    h4 {
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.75rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
    }
}

/* ============================================
   SPACING ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .section-padding {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .section-padding {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Reduce large gaps on mobile */
@media (max-width: 768px) {
    .gap-8 {
        gap: 1.5rem !important;
    }
    
    .gap-12 {
        gap: 2rem !important;
    }
    
    .gap-16 {
        gap: 2.5rem !important;
    }
}

@media (max-width: 480px) {
    .gap-8 {
        gap: 1rem !important;
    }
    
    .gap-12 {
        gap: 1.5rem !important;
    }
}

/* ============================================
   MAX-WIDTH CONTAINERS
   ============================================ */

@media (max-width: 768px) {
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Disable heavy animations */
    .animate-float,
    .animate-float-1,
    .animate-float-2,
    .animate-float-3,
    .animate-float-delayed,
    .animate-hero-zoom,
    .animate-pulse-glow {
        animation: none !important;
    }
    
    /* Disable 3D transforms */
    .perspective-1000 {
        perspective: none !important;
    }
    
    .tilt-card {
        transform-style: flat !important;
    }
}

/* ============================================
   UTILITY FIXES
   ============================================ */

/* Prevent text overflow */
@media (max-width: 768px) {
    p, span, div {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Ensure images don't break layout */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
}

/* Fix for Tailwind responsive classes */
@media (max-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
}

/* ============================================
   SPECIFIC ELEMENT FIXES
   ============================================ */

/* Navbar logo */
@media (max-width: 480px) {
    header nav .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    header nav .text-xl {
        font-size: 1rem !important;
    }
}

/* Material icons sizing */
@media (max-width: 480px) {
    .material-icons,
    .material-symbols-outlined {
        font-size: 1.25rem !important;
    }
}

/* Card padding adjustments */
@media (max-width: 768px) {
    .p-8 {
        padding: 1.5rem !important;
    }
    
    .p-6 {
        padding: 1rem !important;
    }
}

@media (max-width: 480px) {
    .p-8 {
        padding: 1rem !important;
    }
    
    .p-6 {
        padding: 0.75rem !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE FIXES
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    .hero,
    canvas {
        height: 100vh !important;
    }
    
    #animation-wrapper {
        height: 150vh !important;
    }
}