/**
 * Responsive Stylesheet
 * Mobile Optimizations and Breakpoints
 * 
 * Features:
 * - Mobile-first approach
 * - CSS fallback for shader (mobile sacrifice)
 * - Touch-friendly interactions
 * - Optimized typography scale
 * 
 * @package Ubaid_Cyber_Helix
 * @author Ubaid Ur Rehman
 * @version 1.0.0
 */

/* ============================================
   TABLET BREAKPOINT (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  /* Container adjustments */
  .container {
    padding: 0 var(--space-md);
  }
  
  /* COO Matrix - Stack columns */
  .matrix-content {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .matrix-left {
    order: 1;
  }
  
  .matrix-right {
    order: 2;
  }
  
  /* Synergy Grid - 2 columns */
  .synergy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Projects - 2 columns */
  .projects-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .project-card:nth-child(3n+1) {
    grid-row: span 1;
  }
  
  .project-card:nth-child(3n+1) .project-image {
    aspect-ratio: 16/10;
  }
  
  /* Footer - 2x2 grid */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

/* ============================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Root variable adjustments */
  :root {
    --header-height: var(--header-height-mobile);
    --space-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  }
  
  /* ============================================
     MOBILE SHADER FALLBACK
     Three.js is disabled, CSS animation takes over
     ============================================ */
  #shader-canvas {
    display: none !important;
  }
  
  .mobile-shader-fallback {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-shader);
    background: linear-gradient(
      135deg,
      var(--deep-void) 0%,
      #0a1a0a 25%,
      #001a1a 50%,
      #0a0a1a 75%,
      var(--deep-void) 100%
    );
    background-size: 400% 400%;
    animation: gradientPulse 15s ease infinite;
  }
  
  @keyframes gradientPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* ============================================
     HEADER MOBILE
     ============================================ */
  .site-header {
    height: var(--header-height-mobile);
  }
  
  .header-inner {
    padding: 0 var(--space-sm);
  }
  
  .logo-mark {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .logo-text {
    font-size: 14px;
  }
  
  /* Mobile Navigation */
  .main-nav {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height-mobile));
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-xs);
    transform: translateX(-100%);
    transition: transform 0.4s var(--ease-out-expo);
    z-index: 99;
  }
  
  .main-nav.active {
    transform: translateX(0);
  }
  
  .nav-link {
    font-size: var(--text-lg);
    padding: var(--space-md);
    width: 100%;
    text-align: center;
    border-radius: 12px;
  }
  
  .nav-link:hover {
    background: rgba(0, 255, 65, 0.1);
  }
  
  /* Menu Toggle */
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    padding: var(--space-xs);
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all 0.3s ease;
  }
  
  /* Hide desktop hire button, show mobile */
  .header-actions .btn-hire {
    display: none;
  }
  
  .btn-hire-mobile {
    display: inline-flex !important;
  }
  
  /* ============================================
     HERO SECTION MOBILE
     ============================================ */
  .hero-section {
    padding-top: var(--header-height-mobile);
    min-height: 100svh;
  }
  
  .hero-content {
    padding: 0 var(--space-md);
  }
  
  .hero-title {
    font-size: clamp(2rem, 10vw, 3.5rem);
    margin-bottom: var(--space-sm);
  }
  
  .hero-subtitle {
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    margin-bottom: var(--space-lg);
  }
  
  .hero-cta {
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    max-width: 280px;
    margin: 0 auto var(--space-xl);
  }
  
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  
  /* Reduce glow orbs on mobile */
  .glow-orb {
    filter: blur(60px);
    opacity: 0.2;
  }
  
  .orb-1 {
    width: 200px;
    height: 200px;
  }
  
  .orb-2 {
    width: 150px;
    height: 150px;
  }
  
  /* ============================================
     COO MATRIX MOBILE
     ============================================ */
  .coo-matrix-section {
    padding: var(--space-xl) 0;
  }
  
  .role-card {
    padding: var(--space-md);
  }
  
  .role-title {
    font-size: var(--text-xl);
  }
  
  .company-badge {
    padding: var(--space-sm);
  }
  
  .company-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  /* Stats - 2 columns */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  .stat-item {
    padding: var(--space-sm);
  }
  
  .stat-number {
    font-size: var(--text-lg);
  }
  
  .vision-card {
    padding: var(--space-md);
  }
  
  .vision-title {
    font-size: var(--text-lg);
  }
  
  .highlight-item {
    padding: var(--space-xs);
  }
  
  /* ============================================
     SYNERGY GRID MOBILE
     ============================================ */
  .synergy-section {
    padding: var(--space-xl) 0;
  }
  
  .section-header {
    margin-bottom: var(--space-xl);
  }
  
  .section-title {
    font-size: var(--text-xl);
  }
  
  /* Single column cards */
  .synergy-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .synergy-card {
    padding: var(--space-md);
  }
  
  .card-icon {
    width: 48px;
    height: 48px;
  }
  
  .card-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .card-title {
    font-size: var(--text-base);
  }
  
  .card-description {
    font-size: var(--text-sm);
  }
  
  .card-metrics {
    gap: var(--space-sm);
  }
  
  .card-metrics .metric-value {
    font-size: var(--text-sm);
  }
  
  /* ============================================
     PROJECTS SECTION MOBILE
     ============================================ */
  .projects-section {
    padding: var(--space-xl) 0;
  }
  
  /* Filter buttons - scrollable */
  .projects-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .projects-filter::-webkit-scrollbar {
    display: none;
  }
  
  .filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* Single column masonry */
  .projects-masonry {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  .project-card {
    border-radius: 12px;
  }
  
  .project-image {
    aspect-ratio: 16/9 !important;
  }
  
  .project-info {
    padding: var(--space-sm);
  }
  
  .project-title {
    font-size: var(--text-base);
  }
  
  .tech-tag {
    font-size: 10px;
    padding: 2px 8px;
  }
  
  /* ============================================
     CONTACT SECTION MOBILE
     ============================================ */
  .contact-section {
    padding: var(--space-xl) 0;
  }
  
  .contact-content {
    padding: var(--space-md);
  }
  
  .contact-title {
    font-size: var(--text-xl);
  }
  
  .contact-actions {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .contact-actions .btn {
    width: 100%;
    justify-content: center;
  }
  
  .trust-badges {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
  }
  
  /* ============================================
     FOOTER MOBILE
     ============================================ */
  .site-footer {
    padding: var(--space-xl) 0 0;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: center;
  }
  
  .footer-logo {
    justify-content: center;
  }
  
  .leadership-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .company-link {
    justify-content: center;
  }
  
  .footer-nav {
    align-items: center;
  }
  
  .contact-info {
    align-items: center;
  }
  
  .social-links {
    justify-content: center;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }
  
  .footer-meta {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* ============================================
     BACK TO TOP MOBILE
     ============================================ */
  .back-to-top {
    width: 40px;
    height: 40px;
    bottom: var(--space-md);
    right: var(--space-md);
  }
  
  .back-to-top svg {
    width: 16px;
    height: 16px;
  }
}

/* ============================================
   SMALL MOBILE BREAKPOINT (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  /* Further typography reduction */
  .hero-title {
    font-size: clamp(1.75rem, 12vw, 2.5rem);
  }
  
  /* Stats - single column */
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  /* Reduce padding */
  .container {
    padding: 0 var(--space-sm);
  }
  
  .glass-card {
    padding: var(--space-sm);
    border-radius: 12px;
  }
  
  /* Smaller buttons */
  .btn {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .btn-large {
    padding: 12px 20px;
  }
  
  /* Compact footer */
  .footer-grid {
    gap: var(--space-md);
  }
  
  .footer-heading {
    font-size: var(--text-sm);
  }
  
  .footer-link {
    font-size: var(--text-xs);
  }
}

/* ============================================
   LANDSCAPE MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-section {
    min-height: auto;
    padding: calc(var(--header-height-mobile) + var(--space-lg)) 0 var(--space-lg);
  }
  
  .scroll-indicator {
    display: none;
  }
  
  .main-nav {
    height: calc(100vh - var(--header-height-mobile));
    overflow-y: auto;
  }
}

/* ============================================
   HIGH-DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .glass-card,
  .synergy-card,
  .project-card {
    border-width: 0.5px;
  }
}

/* ============================================
   DARK MODE PREFERENCE (already dark, but ensure)
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  #shader-canvas,
  .mobile-shader-fallback,
  .site-header,
  .site-footer,
  .back-to-top,
  .scroll-indicator,
  .hero-decoration,
  .matrix-background {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .hero-section,
  .coo-matrix-section,
  .synergy-section,
  .projects-section,
  .contact-section {
    min-height: auto !important;
    padding: 20px 0 !important;
    page-break-inside: avoid;
  }
  
  .glass-card,
  .synergy-card,
  .project-card {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
  
  .gradient-text {
    background: none !important;
    -webkit-text-fill-color: black !important;
    color: black !important;
  }
}

/* ============================================
   REDUCED MOTION PREFERENCES
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .mobile-shader-fallback {
    animation: none !important;
  }
  
  .scroll-wheel {
    animation: none !important;
  }
  
  .meta-dot {
    animation: none !important;
  }
  
  .glow-orb {
    animation: none !important;
  }
  
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (pointer: coarse) {
  /* Larger touch targets */
  .nav-link,
  .btn,
  .filter-btn,
  .project-action,
  .social-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Remove hover effects that don't work on touch */
  .magnetic-btn:hover {
    transform: none !important;
  }
  
  /* Disable card hover lift */
  .synergy-card:hover,
  .project-card:hover {
    transform: none;
  }
  
  /* Show tap feedback */
  .btn:active,
  .nav-link:active,
  .filter-btn:active {
    transform: scale(0.96);
  }
}

/* ============================================
   SAFE AREA INSETS (notch devices)
   ============================================ */
@supports (padding-top: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }
  
  .main-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  .back-to-top {
    bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }
}