/* ====================================
   Responsive Design Framework
   Mobile-First, Progressive Enhancement
   ==================================== */

/* ====================
   Mobile First Strategy
   ==================== */

/* All base styles are mobile-optimized (typically < 640px)
   We then add breakpoints for larger screens:
   
   Breakpoints:
   - sm: 640px - Tablets in portrait
   - md: 768px - Small tablets / iPad
   - lg: 1024px - Desktop / iPad Pro
   - xl: 1280px - Large desktop
   - 2xl: 1536px - Extra large desktop
*/

/* ====================
   Container Queries
   ==================== */

.responsive-container {
  width: 100%;
  padding: 0 16px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .responsive-container {
    padding: 0 20px;
  }
}

@media (min-width: 768px) {
  .responsive-container {
    padding: 0 24px;
  }
}

@media (min-width: 1024px) {
  .responsive-container {
    max-width: 1200px;
    padding: 0 32px;
  }
}

/* ====================
   Flexible Grid System
   ==================== */

/* Two-column layout that stacks on mobile */
.layout-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout-grid-2 {
    grid-template-columns: 2fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout-grid-2 {
    gap: 32px;
  }
}

/* Three-column layout */
.layout-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .layout-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .layout-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Four-column layout */
.layout-grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .layout-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .layout-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

/* Auto-fill grid (smart columns) */
.layout-grid-auto {
  display: grid;
  grid-auto-flow: dense;
  gap: 16px;
}

@media (min-width: 640px) {
  .layout-grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .layout-grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
  }
}

/* ====================
   Sidebar Layouts
   ==================== */

.layout-with-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr 300px;
  }
}

@media (min-width: 1280px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr 320px;
  }
}

/* Side sidebar (for admin, settings) */
.layout-with-left-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 1024px) {
  .layout-with-left-sidebar {
    grid-template-columns: 260px 1fr;
    gap: 24px;
  }
}

/* ====================
   Flexible Box Layouts
   ==================== */

/* Stack to flex row */
.flex-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .flex-stack {
    flex-direction: row;
    gap: 24px;
  }
}

/* Space between with wrapping */
.flex-between {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .flex-between {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* ====================
   Typography Responsive
   ==================== */

/* Responsive headings */
.heading-responsive-1 {
  font-size: 24px;
  line-height: 1.2;
}

@media (min-width: 640px) {
  .heading-responsive-1 {
    font-size: 28px;
  }
}

@media (min-width: 1024px) {
  .heading-responsive-1 {
    font-size: 32px;
  }
}

.heading-responsive-2 {
  font-size: 20px;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .heading-responsive-2 {
    font-size: 24px;
  }
}

@media (min-width: 1024px) {
  .heading-responsive-2 {
    font-size: 28px;
  }
}

/* ====================
   Visibility Utilities
   ==================== */

/* Hide on mobile, show on tablet+ */
.hide-mobile {
  display: none;
}

@media (min-width: 640px) {
  .hide-mobile {
    display: block;
  }
}

/* Show on mobile, hide on tablet+ */
.show-mobile {
  display: block;
}

@media (min-width: 640px) {
  .show-mobile {
    display: none;
  }
}

/* Hide on tablet and below, show on desktop+ */
.hide-tablet {
  display: none;
}

@media (min-width: 1024px) {
  .hide-tablet {
    display: block;
  }
}

/* ====================
   Padding & Margin Utilities
   ==================== */

/* Responsive padding */
.p-mobile { padding: 16px; }
.p-tablet { padding: 16px; }
.p-desktop { padding: 16px; }

@media (min-width: 640px) {
  .p-tablet { padding: 20px; }
  .p-desktop { padding: 20px; }
}

@media (min-width: 1024px) {
  .p-desktop { padding: 24px; }
}

/* Responsive gaps */
.gap-mobile { gap: 12px; }
.gap-tablet { gap: 12px; }
.gap-desktop { gap: 12px; }

@media (min-width: 640px) {
  .gap-tablet { gap: 16px; }
  .gap-desktop { gap: 16px; }
}

@media (min-width: 1024px) {
  .gap-desktop { gap: 24px; }
}

/* ====================
   Text Overflow Handling
   ==================== */

/* Single line truncate */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line truncate (2 lines on mobile, 3 on desktop) */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .text-clamp-2 {
    -webkit-line-clamp: 3;
  }
}

/* ====================
   Image Responsive
   ==================== */

/* Responsive images */
.image-responsive {
  width: 100%;
  height: auto;
  display: block;
}

/* Aspect ratio containers */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-landscape { aspect-ratio: 4 / 3; }

/* ====================
   Touch Optimization
   ==================== */

/* Larger touch targets on mobile */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 16px;
}

@media (min-width: 768px) {
  .touch-target {
    min-width: 40px;
    min-height: 40px;
    padding: 10px 14px;
  }
}

/* ====================
   Scrollable Containers
   ==================== */

/* Horizontal scroll on mobile, normal on desktop */
.scroll-mobile {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

@media (min-width: 1024px) {
  .scroll-mobile {
    overflow-x: visible;
  }
}

/* ====================
   Safe Area Support
   (For notched devices)
   ==================== */

@supports (padding: max(0px)) {
  .safe-area-padding {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ====================
   Print Styles
   ==================== */

@media print {
  .no-print {
    display: none !important;
  }
  
  .print-only {
    display: block !important;
  }
  
  body {
    background: white;
    color: black;
  }
}

/* ====================
   High Contrast Mode
   ==================== */

@media (prefers-contrast: more) {
  :root {
    --color-border: #ffffff;
    --color-text-secondary: #e0e0e0;
  }
}

/* ====================
   Reduced Motion
   ==================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ====================
   Dark/Light Mode
   ==================== */

@media (prefers-color-scheme: light) {
  :root {
    --color-background: #ffffff;
    --color-surface: #f5f5f5;
    --color-text-primary: #000000;
    --color-text-secondary: #666666;
  }
}

/* ====================
   Landscape Orientation
   ==================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical padding on short landscape screens */
  .page {
    padding: 12px 16px;
  }
}

/* ====================
   Large Display Support
   ==================== */

@media (min-width: 1536px) {
  .responsive-container {
    max-width: 1400px;
  }
  
  .layout-grid-4 {
    grid-template-columns: repeat(6, 1fr);
  }
}