/* Responsive design for i18n Layout Template */

/* Base responsive utilities */
.container-fluid {
  width: 100%;
  padding: 0 var(--space-4);
}

/* Mobile First Approach - Base styles are for mobile */

/* Mobile Small - iPhone 6-8 (375px and below) */
@media (max-width: 375px) {
  :root {
    --space-4: 0.75rem; /* Reduce base spacing on very small screens */
  }

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

  /* Typography adjustments */
  .content-section h1 {
    font-size: var(--text-3xl);
  }

  .content-section h2 {
    font-size: var(--text-2xl);
  }

  .content-section h3 {
    font-size: var(--text-xl);
  }

  /* Demo cards stack vertically with smaller padding */
  .demo-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .demo-card {
    padding: var(--space-4);
  }

  /* Button adjustments */
  .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }

  /* Form elements */
  .form-input,
  .form-textarea,
  .form-select {
    padding: var(--space-2);
    font-size: var(--text-sm);
  }
}

/* Mobile Large - iPhone X-16 (376px to 414px) */
@media (min-width: 376px) and (max-width: 414px) {
  .demo-cards {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .demo-card {
    padding: var(--space-5);
  }

  .content-section h1 {
    font-size: var(--text-4xl);
  }
}

/* General Mobile (up to 640px) */
@media (max-width: 640px) {
  /* Hide desktop-specific elements */
  .desktop-only {
    display: none !important;
  }

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

  /* Stack elements vertically */
  .mobile-stack {
    flex-direction: column !important;
    gap: var(--space-3) !important;
  }

  /* Full width on mobile */
  .mobile-full {
    width: 100% !important;
  }

  /* Center content on mobile */
  .mobile-center {
    text-align: center !important;
  }

  /* Adjust spacing for mobile */
  .main-container {
    padding: var(--space-6) var(--space-3);
  }

  .content-section {
    margin-bottom: var(--space-8);
  }
}

/* Tablet - iPad mini and similar (768px) */
@media (min-width: 641px) and (max-width: 768px) {
  .demo-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .main-container {
    padding: var(--space-8) var(--space-4);
  }

  /* Show tablet-specific elements */
  .tablet-only {
    display: block !important;
  }

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

/* Desktop (1024px and above) */
@media (min-width: 1024px) {
  /* Show desktop-specific elements */
  .desktop-only {
    display: block !important;
  }

  /* Hide mobile and tablet specific elements */
  .mobile-only,
  .tablet-only {
    display: none !important;
  }

  .demo-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }

  .main-container {
    padding: var(--space-12) var(--space-4);
  }

  .content-section {
    margin-bottom: var(--space-16);
  }
}

/* Large Desktop (1280px and above) */
@media (min-width: 1280px) {
  .main-container {
    padding: var(--space-16) var(--space-4);
  }

  .demo-cards {
    gap: var(--space-10);
  }
}

/* Extra Large Desktop (1536px and above) */
@media (min-width: 1536px) {
  .main-container {
    padding: var(--space-20) var(--space-4);
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  /* Reduce vertical spacing in landscape mode on small screens */
  .main-container {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .content-section {
    margin-bottom: var(--space-6);
  }

  .demo-cards {
    gap: var(--space-4);
  }

  .demo-card {
    padding: var(--space-4);
  }
}

/* Portrait orientation adjustments */
@media (orientation: portrait) {
  .demo-cards {
    grid-template-columns: 1fr;
  }
}

@media (orientation: portrait) and (min-width: 768px) {
  .demo-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Adjust for high DPI displays */
  .logo-icon {
    background-size: contain;
  }

  /* Ensure crisp borders */
  .glass,
  .demo-card,
  .btn {
    border-width: 0.5px;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
  }

  .language-select {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .footer-link {
    padding: var(--space-2) var(--space-1);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Remove hover effects on touch devices */
  .demo-card:hover {
    transform: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* Hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  /* Enable hover effects only on devices that support them */
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
  }

  .hover-scale:hover {
    transform: scale(1.05);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  /* Disable all animations and transitions */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Remove transform effects */
  .demo-card:hover,
  .btn:hover,
  .language-select:hover,
  .theme-toggle:hover {
    transform: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  /* Increase contrast for better visibility */
  :root {
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.3);
  }

  [data-theme='dark'] {
    --glass-bg: rgba(0, 0, 0, 0.9);
    --glass-border: rgba(255, 255, 255, 0.3);
  }

  .demo-card,
  .btn,
  .language-select,
  .theme-toggle {
    border-width: 2px;
  }
}

/* Print styles */
@media print {
  /* Hide interactive elements */
  .theme-toggle,
  .language-select,
  .nav-controls {
    display: none !important;
  }

  /* Adjust layout for print */
  body {
    background: white !important;
    color: black !important;
  }

  .template-header,
  .template-footer {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .demo-card {
    background: white !important;
    border: 1px solid black !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    break-inside: avoid;
  }

  .demo-cards {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  /* Ensure good page breaks */
  .content-section {
    break-inside: avoid;
  }

  /* Add page breaks before major sections */
  .template-footer {
    break-before: page;
  }
}

/* Utility classes for responsive behavior */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}

.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.responsive-flex > * {
  flex: 1 1 280px;
}

/* Breakpoint-specific visibility utilities */
.show-mobile {
  display: none;
}
.show-tablet {
  display: none;
}
.show-desktop {
  display: none;
}

@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
  .show-mobile {
    display: block !important;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
  .show-tablet {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
  .show-desktop {
    display: block !important;
  }
}