/* ATLAS Mobile-First Responsive Framework - Phase 3 Day 1 */

/* ================================
   MOBILE-FIRST RESPONSIVE SYSTEM
   ================================ */

/* CSS Custom Properties for Mobile-First Design */
:root {
  /* Responsive Breakpoints */
  --mobile-small: 320px;
  --mobile: 480px;
  --tablet: 768px;
  --desktop: 1024px;
  --desktop-large: 1200px;
  --desktop-xl: 1400px;
  
  /* Responsive Spacing Scale */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  
  /* Responsive Typography Scale */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
  --text-5xl: 3rem;     /* 48px */
  
  /* Mobile-First Container Widths */
  --container-mobile: 100%;
  --container-tablet: 90%;
  --container-desktop: 1200px;
  --container-padding: var(--space-md);
  
  /* Touch-Friendly Sizes */
  --touch-target: 44px;     /* Minimum touch target */
  --button-height: 48px;    /* Comfortable button height */
  --input-height: 48px;     /* Comfortable input height */
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
}

/* ================================
   RESPONSIVE GRID SYSTEM
   ================================ */

/* Mobile-First Container */
.atlas-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Responsive Container Widths */
@media (min-width: 480px) {
  .atlas-container {
    max-width: 480px;
  }
}

@media (min-width: 768px) {
  .atlas-container {
    max-width: 720px;
    padding: 0 var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .atlas-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .atlas-container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .atlas-container {
    max-width: 1320px;
  }
}

/* CSS Grid System - Mobile First */
.atlas-grid {
  display: grid;
  gap: var(--space-md);
  width: 100%;
}

/* Mobile: Single column by default */
.atlas-grid {
  grid-template-columns: 1fr;
}

/* Responsive Grid Columns */
@media (min-width: 480px) {
  .atlas-grid-cols-2-mobile { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .atlas-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .atlas-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .atlas-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  
  /* Property Cards Grid - Tablet */
  .property-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
  }
}

@media (min-width: 1024px) {
  .atlas-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
  .atlas-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
  
  /* Property Cards Grid - Desktop */
  .property-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
  }
}

/* Flexible Grid Areas */
.atlas-grid-span-2 { grid-column: span 2; }
.atlas-grid-span-3 { grid-column: span 3; }
.atlas-grid-span-4 { grid-column: span 4; }
.atlas-grid-span-full { grid-column: 1 / -1; }

/* ================================
   MOBILE-FIRST TYPOGRAPHY
   ================================ */

/* Base Typography - Mobile First */
html {
  font-size: 16px; /* Base font size */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
}

/* Responsive Headings - Mobile First */
h1, .atlas-h1 {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

h2, .atlas-h2 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

h3, .atlas-h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
}

/* Tablet Typography */
@media (min-width: 768px) {
  h1, .atlas-h1 {
    font-size: var(--text-3xl);
  }
  
  h2, .atlas-h2 {
    font-size: var(--text-2xl);
  }
  
  h3, .atlas-h3 {
    font-size: var(--text-xl);
  }
}

/* Desktop Typography */
@media (min-width: 1024px) {
  h1, .atlas-h1 {
    font-size: var(--text-4xl);
  }
  
  h2, .atlas-h2 {
    font-size: var(--text-3xl);
  }
  
  h3, .atlas-h3 {
    font-size: var(--text-2xl);
  }
}

/* Large Desktop Typography */
@media (min-width: 1200px) {
  h1, .atlas-h1 {
    font-size: var(--text-5xl);
  }
}

/* ================================
   RESPONSIVE SPACING UTILITIES
   ================================ */

/* Margin Utilities - Mobile First */
.atlas-m-0 { margin: 0; }
.atlas-m-auto { margin: auto; }
.atlas-mx-auto { margin-left: auto; margin-right: auto; }

.atlas-mt-xs { margin-top: var(--space-xs); }
.atlas-mt-sm { margin-top: var(--space-sm); }
.atlas-mt-md { margin-top: var(--space-md); }
.atlas-mt-lg { margin-top: var(--space-lg); }
.atlas-mt-xl { margin-top: var(--space-xl); }

.atlas-mb-xs { margin-bottom: var(--space-xs); }
.atlas-mb-sm { margin-bottom: var(--space-sm); }
.atlas-mb-md { margin-bottom: var(--space-md); }
.atlas-mb-lg { margin-bottom: var(--space-lg); }
.atlas-mb-xl { margin-bottom: var(--space-xl); }

/* Padding Utilities - Mobile First */
.atlas-p-0 { padding: 0; }
.atlas-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.atlas-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

.atlas-pt-sm { padding-top: var(--space-sm); }
.atlas-pt-md { padding-top: var(--space-md); }
.atlas-pt-lg { padding-top: var(--space-lg); }
.atlas-pt-xl { padding-top: var(--space-xl); }

.atlas-pb-sm { padding-bottom: var(--space-sm); }
.atlas-pb-md { padding-bottom: var(--space-md); }
.atlas-pb-lg { padding-bottom: var(--space-lg); }
.atlas-pb-xl { padding-bottom: var(--space-xl); }

/* Responsive Spacing - Tablet+ */
@media (min-width: 768px) {
  .atlas-tablet-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .atlas-tablet-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
  .atlas-tablet-mt-xl { margin-top: var(--space-xl); }
  .atlas-tablet-mb-xl { margin-bottom: var(--space-xl); }
}

/* Responsive Spacing - Desktop+ */
@media (min-width: 1024px) {
  .atlas-desktop-px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
  .atlas-desktop-py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
  .atlas-desktop-mt-2xl { margin-top: var(--space-2xl); }
  .atlas-desktop-mb-2xl { margin-bottom: var(--space-2xl); }
}

/* ================================
   RESPONSIVE UTILITY CLASSES
   ================================ */

/* Display Utilities */
.atlas-hidden { display: none; }
.atlas-block { display: block; }
.atlas-inline-block { display: inline-block; }
.atlas-flex { display: flex; }
.atlas-grid { display: grid; }

/* Responsive Display */
@media (max-width: 767px) {
  .atlas-hidden-mobile { display: none; }
}

@media (min-width: 768px) {
  .atlas-hidden-tablet { display: none; }
  .atlas-block-tablet { display: block; }
  .atlas-flex-tablet { display: flex; }
}

@media (min-width: 1024px) {
  .atlas-hidden-desktop { display: none; }
  .atlas-block-desktop { display: block; }
  .atlas-flex-desktop { display: flex; }
}

/* Text Alignment */
.atlas-text-left { text-align: left; }
.atlas-text-center { text-align: center; }
.atlas-text-right { text-align: right; }

@media (min-width: 768px) {
  .atlas-tablet-text-left { text-align: left; }
  .atlas-tablet-text-center { text-align: center; }
}

@media (min-width: 1024px) {
  .atlas-desktop-text-left { text-align: left; }
  .atlas-desktop-text-center { text-align: center; }
}

/* Width Utilities */
.atlas-w-full { width: 100%; }
.atlas-w-auto { width: auto; }
.atlas-w-half { width: 50%; }
.atlas-w-third { width: 33.333333%; }
.atlas-w-two-thirds { width: 66.666667%; }
.atlas-w-quarter { width: 25%; }
.atlas-w-three-quarters { width: 75%; }

/* Height Utilities */
.atlas-h-auto { height: auto; }
.atlas-h-full { height: 100%; }
.atlas-h-screen { height: 100vh; }

/* ================================
   RESPONSIVE DEBUGGING
   ================================ */

/* Development: Breakpoint Indicator */
.atlas-breakpoint-debug::before {
  content: 'Mobile';
  position: fixed;
  top: 0;
  right: 0;
  background: #ff6b6b;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  z-index: 9999;
  display: block;
}

@media (min-width: 480px) {
  .atlas-breakpoint-debug::before {
    content: 'Mobile Large';
    background: #4ecdc4;
  }
}

@media (min-width: 768px) {
  .atlas-breakpoint-debug::before {
    content: 'Tablet';
    background: #45b7d1;
  }
}

@media (min-width: 1024px) {
  .atlas-breakpoint-debug::before {
    content: 'Desktop';
    background: #96ceb4;
  }
}

@media (min-width: 1200px) {
  .atlas-breakpoint-debug::before {
    content: 'Desktop Large';
    background: #ffeaa7;
    color: #333;
  }
}

@media (min-width: 1400px) {
  .atlas-breakpoint-debug::before {
    content: 'Desktop XL';
    background: #dda0dd;
  }
}