/* Responsive Utilities */

/* Container Queries */
.responsive-container {
  container-type: inline-size;
}

/* Responsive Spacing */
.p-responsive { padding: clamp(0.5rem, 2vw, 1.5rem); }
.m-responsive { margin: clamp(0.5rem, 2vw, 1.5rem); }
.gap-responsive { gap: clamp(0.5rem, 2vw, 1rem); }

/* Responsive Typography */
.text-xs { font-size: clamp(0.75rem, 2vw, 0.875rem); }
.text-sm { font-size: clamp(0.875rem, 2.5vw, 1rem); }
.text-md { font-size: clamp(1rem, 3vw, 1.125rem); }
.text-lg { font-size: clamp(1.125rem, 3.5vw, 1.25rem); }
.text-xl { font-size: clamp(1.25rem, 4vw, 1.5rem); }

/* Responsive Grids */
.grid-responsive-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.grid-responsive-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(0.5rem, 2vw, 1rem);
}

/* Responsive Flexbox */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 1rem);
}

/* Responsive Visibility */
.hidden-mobile { display: block; }
.hidden-desktop { display: none; }

@media (max-width: 768px) {
  .hidden-mobile { display: none; }
  .hidden-desktop { display: block; }
  
  .stack-mobile {
    flex-direction: column;
  }
  
  .full-width-mobile {
    width: 100%;
  }
}

/* Aspect Ratios */
.aspect-square { aspect-ratio: 1/1; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-poster { aspect-ratio: 2/3; }
.aspect-card { aspect-ratio: 3/2; }

/* Responsive Images */
.img-responsive {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Safe Areas for notched devices */
@supports (padding-top: env(safe-area-inset-top)) {
  .safe-top { padding-top: env(safe-area-inset-top); }
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .safe-left { padding-left: env(safe-area-inset-left); }
  .safe-right { padding-right: env(safe-area-inset-right); }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .high-dpi-optimize {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --bg-primary: #0b1321;
    --bg-secondary: #111d33;
  }
}

/* Print Styles */
@media print {
  .no-print { display: none !important; }
  * { background: white !important; color: black !important; }
}