/* ========================================
   GLOBAL RESPONSIVE FRAMEWORK
   DealStocks - Mobile-First Responsive Design
   ======================================== */

/* ========================================
   BREAKPOINT DEFINITIONS
   ======================================== */
/* Mobile: ≤768px (phones) */
/* Tablet: 769px-1024px (tablets, small laptops) */
/* Desktop: ≥1025px (desktops, large screens) */

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */
:root {
  /* Breakpoints */
  --mobile-max: 768px;
  --tablet-min: 769px;
  --tablet-max: 1024px;
  --desktop-min: 1025px;
  
  /* Spacing System */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  
  /* Container Widths */
  --container-mobile: 100%;
  --container-tablet: 100%;
  --container-desktop: 1440px;
  
  /* Padding System */
  --padding-mobile: var(--spacing-sm);
  --padding-tablet: var(--spacing-md);
  --padding-desktop: var(--spacing-xl);
}

/* ========================================
   GLOBAL RESET & BASE STYLES
   ======================================== */

/* Reset margins and padding for consistent spacing */
* {
  box-sizing: border-box;
}

/* Global container reset */
.container,
.main-content,
body {
  margin: 0;
  padding: 0;
}

/* ========================================
   MOBILE-FIRST BASE STYLES (≤768px)
   ======================================== */

/* Base container styles - mobile first */
.container {
  width: var(--container-mobile);
  max-width: 100%;
  margin: 0;
  padding: var(--padding-mobile);
  display: flex;
  min-height: 100vh;
}

.main-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--padding-mobile);
  flex: 1;
}

/* Page-specific containers */
.discover-container,
.search-container,
.dashboard-container,
.settings-page-container,
.subscription-plans-container,
.analytics-container,
.contact-container,
.faq-container,
.profile-page-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--padding-mobile);
}

/* Form containers */
.form-container,
.settings-form-container,
.profile-form-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: var(--padding-mobile);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* Large form containers (like create dealstock) */
.form-container.large-form {
  max-width: 900px;
}

/* Override any inline styles that cause margins */
div[style*="max-width"],
div[style*="margin:0 auto"],
div[style*="padding:32px"],
div[style*="padding:24px"] {
  max-width: 100% !important;
  margin: 0 !important;
  padding: var(--padding-mobile) !important;
}

/* ========================================
   TABLET STYLES (769px-1024px)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    width: var(--container-tablet);
    padding: var(--padding-tablet);
    display: flex;
    min-height: 100vh;
  }
  
  .main-content {
    padding: var(--padding-tablet);
    flex: 1;
  }
  
  /* Page-specific containers */
  .discover-container,
  .search-container,
  .dashboard-container,
  .settings-page-container,
  .subscription-plans-container,
  .analytics-container,
  .contact-container,
  .faq-container,
  .profile-page-container {
    padding: var(--padding-tablet);
  }
  
  /* Form containers */
  .form-container,
  .settings-form-container,
  .profile-form-container {
    padding: var(--padding-tablet);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }
  
  /* Large form containers */
  .form-container.large-form {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Override inline styles for tablet */
  div[style*="max-width"],
  div[style*="margin:0 auto"],
  div[style*="padding:32px"],
  div[style*="padding:24px"] {
    padding: var(--padding-tablet) !important;
  }
}

/* ========================================
   DESKTOP STYLES (≥1025px)
   ======================================== */
@media (min-width: 1025px) {
  .container {
    width: var(--container-desktop);
    max-width: var(--container-desktop);
    margin: 0 auto;
    padding: var(--padding-desktop);
    display: flex;
    min-height: 100vh;
  }
  
  .main-content {
    max-width: var(--container-desktop);
    margin: 0 auto;
    padding: var(--padding-desktop);
    flex: 1;
  }
  
  /* Page-specific containers */
  .discover-container,
  .search-container,
  .dashboard-container,
  .settings-page-container,
  .subscription-plans-container,
  .analytics-container,
  .contact-container,
  .faq-container,
  .profile-page-container {
    max-width: var(--container-desktop);
    margin: 0 auto;
    padding: var(--padding-desktop);
  }
  
  /* Form containers */
  .form-container,
  .settings-form-container,
  .profile-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-2xl);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  }
  
  /* Large form containers */
  .form-container.large-form {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Override inline styles for desktop */
  div[style*="max-width:600px"] {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: var(--spacing-2xl) !important;
  }
  
  div[style*="padding:32px"] {
    padding: var(--spacing-2xl) !important;
  }
  
  div[style*="padding:24px"] {
    padding: var(--spacing-xl) !important;
  }
}

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

/* Spacing utilities */
.p-mobile { padding: var(--padding-mobile); }
.p-tablet { padding: var(--padding-tablet); }
.p-desktop { padding: var(--padding-desktop); }

.m-mobile { margin: var(--padding-mobile); }
.m-tablet { margin: var(--padding-tablet); }
.m-desktop { margin: var(--padding-desktop); }

/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-full { max-width: 100%; }

/* Display utilities */
.hidden-mobile { display: none; }
.hidden-tablet { display: none; }
.hidden-desktop { display: none; }

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

@media (min-width: 769px) and (max-width: 1024px) {
  .hidden-tablet { display: none !important; }
  .show-tablet { display: block !important; }
}

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

/* ========================================
   COMPONENT-SPECIFIC OVERRIDES
   ======================================== */

/* Hero sections */
.hero {
  padding: var(--spacing-md) var(--padding-mobile) var(--spacing-lg) var(--padding-mobile);
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hero {
    padding: var(--spacing-lg) var(--padding-tablet) var(--spacing-xl) var(--padding-tablet);
  }
}

@media (min-width: 1025px) {
  .hero {
    padding: var(--spacing-xl) var(--padding-desktop) var(--spacing-2xl) var(--padding-desktop);
  }
}

/* Grid layouts */
.posts-grid {
  display: grid;
  gap: var(--spacing-md);
}

@media (max-width: 768px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
  }
}

@media (min-width: 1025px) {
  .posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
  }
}

/* ========================================
   DEBUGGING UTILITIES (Remove in production)
   ======================================== */

/* Uncomment for debugging responsive layouts */
/*
.debug-responsive {
  outline: 2px solid red;
}

.debug-responsive::before {
  content: "Mobile";
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  z-index: 9999;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .debug-responsive::before {
    content: "Tablet";
    background: blue;
  }
}

@media (min-width: 1025px) {
  .debug-responsive::before {
    content: "Desktop";
    background: green;
  }
}
*/