/* Zoom-resistant responsive design */
:root {
  --base-font-size: clamp(14px, 1vw, 18px);
  --container-padding: clamp(1rem, 3vw, 2rem);
  --section-padding: clamp(2rem, 5vw, 4rem);
}

html {
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  font-size: 1rem;
}

/* Container system */
.container-responsive {
  width: 100%;
  max-width: min(1400px, 95vw);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Typography responsive */
.text-xs-responsive { font-size: clamp(0.625rem, 1.5vw, 0.75rem); }
.text-sm-responsive { font-size: clamp(0.75rem, 2vw, 0.875rem); }
.text-base-responsive { font-size: clamp(0.875rem, 2.5vw, 1rem); }
.text-lg-responsive { font-size: clamp(1rem, 3vw, 1.125rem); }
.text-xl-responsive { font-size: clamp(1.125rem, 3.5vw, 1.25rem); }
.text-2xl-responsive { font-size: clamp(1.25rem, 4vw, 1.5rem); }
.text-3xl-responsive { font-size: clamp(1.5rem, 5vw, 1.875rem); }
.text-4xl-responsive { font-size: clamp(1.875rem, 6vw, 2.25rem); }
.text-5xl-responsive { font-size: clamp(2.25rem, 7vw, 3rem); }
.text-6xl-responsive { font-size: clamp(3rem, 8vw, 4rem); }

/* Spacing responsive */
.p-1-responsive { padding: clamp(0.25rem, 1vw, 0.5rem); }
.p-2-responsive { padding: clamp(0.5rem, 1.5vw, 0.75rem); }
.p-3-responsive { padding: clamp(0.75rem, 2vw, 1rem); }
.p-4-responsive { padding: clamp(1rem, 2.5vw, 1.25rem); }
.p-6-responsive { padding: clamp(1.5rem, 3vw, 2rem); }
.p-8-responsive { padding: clamp(2rem, 4vw, 3rem); }

.m-1-responsive { margin: clamp(0.25rem, 1vw, 0.5rem); }
.m-2-responsive { margin: clamp(0.5rem, 1.5vw, 0.75rem); }
.m-3-responsive { margin: clamp(0.75rem, 2vw, 1rem); }
.m-4-responsive { margin: clamp(1rem, 2.5vw, 1.25rem); }
.m-6-responsive { margin: clamp(1.5rem, 3vw, 2rem); }
.m-8-responsive { margin: clamp(2rem, 4vw, 3rem); }

/* Grid responsive */
.grid-1-responsive { grid-template-columns: 1fr; }
.grid-2-responsive { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.grid-3-responsive { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.grid-4-responsive { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }

.gap-responsive { gap: clamp(1rem, 3vw, 2rem); }
.gap-sm-responsive { gap: clamp(0.5rem, 2vw, 1rem); }
.gap-lg-responsive { gap: clamp(1.5rem, 4vw, 3rem); }

/* Button responsive */
.btn-sm-responsive {
  padding: clamp(0.375rem, 1.5vw, 0.5rem) clamp(0.75rem, 2.5vw, 1rem);
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

.btn-responsive {
  padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 3vw, 1.5rem);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.btn-lg-responsive {
  padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1.5rem, 4vw, 2rem);
  font-size: clamp(1rem, 3vw, 1.125rem);
}

/* Card responsive */
.card-responsive {
  padding: clamp(1rem, 3vw, 2rem);
  margin: clamp(0.5rem, 2vw, 1rem);
  border-radius: clamp(0.5rem, 1vw, 1rem);
}

/* Navigation responsive */
.nav-responsive {
  padding: clamp(0.75rem, 2vw, 1rem) 0;
}

.nav-item-responsive {
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
  font-size: clamp(0.875rem, 2vw, 1rem);
}

/* Hero section responsive */
.hero-responsive {
  min-height: clamp(400px, 60vh, 800px);
  padding: var(--section-padding) 0;
}

.hero-title-responsive {
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.1;
}

.hero-subtitle-responsive {
  font-size: clamp(1rem, 4vw, 1.5rem);
  line-height: 1.4;
}

/* Section responsive */
.section-responsive {
  padding: var(--section-padding) 0;
}

/* Image responsive */
.img-responsive {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Zoom level adjustments */
@media (min-width: 1920px) {
  :root {
    --base-font-size: clamp(16px, 1.2vw, 20px);
  }
}

@media (min-width: 2560px) {
  :root {
    --base-font-size: clamp(18px, 1.4vw, 24px);
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  :root {
    --base-font-size: clamp(15px, 1.1vw, 19px);
  }
}

/* Prevent horizontal overflow */
* {
  box-sizing: border-box;
}

.overflow-hidden-x {
  overflow-x: hidden;
}

/* Flexible containers */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 1rem);
}

.flex-col-responsive {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 2vw, 1rem);
}

/* Aspect ratio responsive */
.aspect-video-responsive {
  aspect-ratio: 16/9;
  width: 100%;
}

.aspect-square-responsive {
  aspect-ratio: 1/1;
  width: 100%;
}

/* Footer responsive */
.footer-responsive {
  padding: var(--section-padding) 0;
}

.footer-text-responsive {
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
}

/* Dropdown responsive */
.dropdown-responsive {
  min-width: clamp(200px, 25vw, 300px);
  max-width: 90vw;
}

/* Form responsive */
.form-input-responsive {
  padding: clamp(0.5rem, 2vw, 0.75rem);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
}

/* Table responsive */
.table-responsive {
  overflow-x: auto;
  font-size: clamp(0.75rem, 2vw, 0.875rem);
}

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

/* Print styles */
@media print {
  :root {
    --base-font-size: 12pt;
  }
  
  .no-print {
    display: none !important;
  }
}