/* =============================================================================
   RESPONSIVE UTILITIES - INERCIA THEME
   Mobile-first responsive design utilities and variables
   ============================================================================= */

/* CSS Custom Properties for Responsive Design */
:root {
  /* Breakpoints */
  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1440px;

  /* Container Widths */
  --container-mobile: calc(100% - 32px);
  --container-tablet: calc(100% - 64px);
  --container-desktop: 1200px;
  --container-large: 1440px;

  /* Mobile Spacing Scale */
  --spacing-xs-mobile: 8px;
  --spacing-sm-mobile: 12px;
  --spacing-md-mobile: 16px;
  --spacing-lg-mobile: 24px;
  --spacing-xl-mobile: 32px;
  --spacing-2xl-mobile: 48px;

  /* Tablet Spacing Scale */
  --spacing-xs-tablet: 10px;
  --spacing-sm-tablet: 16px;
  --spacing-md-tablet: 24px;
  --spacing-lg-tablet: 32px;
  --spacing-xl-tablet: 48px;
  --spacing-2xl-tablet: 64px;

  /* Desktop Spacing Scale */
  --spacing-xs-desktop: 12px;
  --spacing-sm-desktop: 20px;
  --spacing-md-desktop: 32px;
  --spacing-lg-desktop: 48px;
  --spacing-xl-desktop: 64px;
  --spacing-2xl-desktop: 96px;

  /* Mobile Typography Scale */
  --h1-size-mobile: 32px;
  --h1-weight-mobile: 600;
  --h1-line-height-mobile: 1.2;
  
  --h2-size-mobile: 24px;
  --h2-weight-mobile: 600;
  --h2-line-height-mobile: 1.25;
  
  --h3-size-mobile: 20px;
  --h3-weight-mobile: 600;
  --h3-line-height-mobile: 1.3;
  
  --body-size-mobile: 14px;
  --body-line-height-mobile: 1.5;
  
  --small-size-mobile: 12px;
  --small-line-height-mobile: 1.4;

  /* Tablet Typography Scale */
  --h1-size-tablet: 40px;
  --h1-weight-tablet: 600;
  --h1-line-height-tablet: 1.235;
  
  --h2-size-tablet: 28px;
  --h2-weight-tablet: 600;
  --h2-line-height-tablet: 1.2;
  
  --h3-size-tablet: 22px;
  --h3-weight-tablet: 600;
  --h3-line-height-tablet: 1.334;
  
  --body-size-tablet: 16px;
  --body-line-height-tablet: 1.5;
  
  --small-size-tablet: 13px;
  --small-line-height-tablet: 1.4;

  /* Desktop Typography Scale (existing) */
  --h1-size-desktop: 48px;
  --h1-weight-desktop: 600;
  --h1-line-height-desktop: 1.235;
  
  --h2-size-desktop: 34px;
  --h2-weight-desktop: 600;
  --h2-line-height-desktop: 1;
  
  --h3-size-desktop: 24px;
  --h3-weight-desktop: 400;
  --h3-line-height-desktop: 1.334;
  
  --body-size-desktop: 18px;
  --body-line-height-desktop: 1.5;
  
  --small-size-desktop: 14px;
  --small-line-height-desktop: 1.4;

  /* Grid Variables */
  --grid-columns-mobile: 1;
  --grid-columns-tablet: 2;
  --grid-columns-desktop: 3;
  --grid-gap-mobile: 16px;
  --grid-gap-tablet: 24px;
  --grid-gap-desktop: 32px;

  /* Touch Target Sizes */
  --touch-target-min: 44px;
  --button-height-mobile: 48px;
  --button-height-tablet: 52px;
  --button-height-desktop: 56px;
}

/* =============================================================================
   RESPONSIVE MIXINS (CSS Utility Classes)
   ============================================================================= */

/* Container Classes */
.container-responsive {
  width: var(--container-mobile);
  max-width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .container-responsive {
    width: var(--container-tablet);
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    width: var(--container-desktop);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Responsive Grid System */
.grid-responsive {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
  gap: var(--grid-gap-mobile);
}

@media (min-width: 768px) {
  .grid-responsive {
    grid-template-columns: repeat(var(--grid-columns-tablet), 1fr);
    gap: var(--grid-gap-tablet);
  }
}

@media (min-width: 1024px) {
  .grid-responsive {
    grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
    gap: var(--grid-gap-desktop);
  }
}

/* Touch-Friendly Button Styles */
.btn-touch {
  min-height: var(--touch-target-min);
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
  .btn-touch {
    width: 100%;
    height: var(--button-height-mobile);
    font-size: 16px;
  }
}

/* Responsive Visibility Classes */
.show-mobile { display: block; }
.show-tablet { display: none; }
.show-desktop { display: none; }

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

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

.hide-mobile { display: none !important; }

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

/* Mobile-First Media Query Helpers */
@media (max-width: 767px) {
  .mobile-only { display: block !important; }
  .mobile-hide { display: none !important; }
  .mobile-stack { flex-direction: column !important; }
  .mobile-center { text-align: center !important; }
  .mobile-full-width { width: 100% !important; }
}

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

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

/* Safe Area Adjustments for Mobile */
@supports (padding: max(0px)) {
  .safe-area-inset {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Smooth Scrolling for Touch Devices */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-overflow-scrolling: touch;
  }
}