/* ═══════════════════════════════════════════════════════════
   responsive-utilities.css — Mobile-First Responsive Utilities
   
   3-tier breakpoint system:
   - Mobile: ≤480px
   - Tablet: 481-768px  
   - Desktop: 769+px
   
   Touch-friendly, adaptive layouts, performance-optimized
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   BREAKPOINT INDICATOR CLASSES (for JavaScript)
   ───────────────────────────────────────────────────────── */

html.bp-mobile {
  --current-breakpoint: 'mobile';
  --padding-xs: 8px;
  --padding-sm: 12px;
  --padding-md: 16px;
  --padding-lg: 16px;
  --padding-xl: 20px;
  --gap: 12px;
  --font-base: 13px;
}

html.bp-tablet {
  --current-breakpoint: 'tablet';
  --padding-xs: 10px;
  --padding-sm: 14px;
  --padding-md: 18px;
  --padding-lg: 20px;
  --padding-xl: 24px;
  --gap: 16px;
  --font-base: 14px;
}

html.bp-desktop {
  --current-breakpoint: 'desktop';
  --padding-xs: 12px;
  --padding-sm: 16px;
  --padding-md: 24px;
  --padding-lg: 28px;
  --padding-xl: 32px;
  --gap: 20px;
  --font-base: 16px;
}

/* ─────────────────────────────────────────────────────────
   TOUCH & DEVICE CLASSES
   ───────────────────────────────────────────────────────── */

html.is-touch {
  --touch-target: 44px;
  --tap-highlight-color: rgba(212, 165, 116, 0.1);
}

html.is-desktop {
  --touch-target: 36px;
  cursor: default;
}

/* ─────────────────────────────────────────────────────────
   ADAPTIVE PADDING UTILITIES
   ───────────────────────────────────────────────────────── */

.p-adaptive { padding: var(--padding-md); }
.px-adaptive { padding-left: var(--padding-md); padding-right: var(--padding-md); }
.py-adaptive { padding-top: var(--padding-md); padding-bottom: var(--padding-md); }
.pt-adaptive { padding-top: var(--padding-md); }
.pb-adaptive { padding-bottom: var(--padding-md); }
.pl-adaptive { padding-left: var(--padding-md); }
.pr-adaptive { padding-right: var(--padding-md); }

.p-sm-adaptive { padding: var(--padding-sm); }
.p-lg-adaptive { padding: var(--padding-lg); }
.p-xl-adaptive { padding: var(--padding-xl); }

/* ─────────────────────────────────────────────────────────
   ADAPTIVE GAP (for flex/grid containers)
   ───────────────────────────────────────────────────────── */

.gap-adaptive { gap: var(--gap); }
.gap-row-adaptive { row-gap: var(--gap); }
.gap-col-adaptive { column-gap: var(--gap); }

/* ─────────────────────────────────────────────────────────
   RESPONSIVE DISPLAY UTILITIES
   ───────────────────────────────────────────────────────── */

/* Hide on mobile */
.hide-mobile { display: none !important; }
@media (min-width: 481px) {
  .hide-mobile { display: block !important; }
}

/* Hide on tablet */
.hide-tablet { display: block !important; }
@media (min-width: 481px) and (max-width: 768px) {
  .hide-tablet { display: none !important; }
}

/* Hide on desktop */
.hide-desktop { display: block !important; }
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* Show only on mobile */
.show-mobile { display: none !important; }
@media (max-width: 480px) {
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
  .show-mobile-grid { display: grid !important; }
  .show-mobile-inline { display: inline !important; }
}

/* Show only on tablet */
.show-tablet { display: none !important; }
@media (min-width: 481px) and (max-width: 768px) {
  .show-tablet { display: block !important; }
  .show-tablet-flex { display: flex !important; }
  .show-tablet-grid { display: grid !important; }
}

/* Show only on desktop */
.show-desktop { display: none !important; }
@media (min-width: 769px) {
  .show-desktop { display: block !important; }
  .show-desktop-flex { display: flex !important; }
  .show-desktop-grid { display: grid !important; }
}

/* ─────────────────────────────────────────────────────────
   TOUCH TARGET OPTIMIZATION
   ───────────────────────────────────────────────────────── */

.touch-optimized {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-sm) var(--padding-md);
}

html.is-touch .touch-target {
  min-height: 44px;
  min-width: 44px;
  padding: var(--padding-sm) var(--padding-md);
}

html.is-desktop .touch-target {
  min-height: 36px;
  min-width: 36px;
  padding: 6px 12px;
}

/* Tap highlight for touch devices */
html.is-touch button,
html.is-touch a[role="button"],
html.is-touch input[type="button"] {
  -webkit-tap-highlight-color: var(--tap-highlight-color);
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE TYPOGRAPHY SCALING
   ───────────────────────────────────────────────────────── */

html.bp-mobile { font-size: 13px; }
html.bp-tablet { font-size: 14px; }
html.bp-desktop { font-size: 16px; }

/* Responsive heading sizes */
.h-responsive-sm {
  font-size: 20px;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .h-responsive-sm { font-size: 18px; }
}
@media (min-width: 769px) {
  .h-responsive-sm { font-size: 24px; }
}

.h-responsive-md {
  font-size: 24px;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .h-responsive-md { font-size: 20px; }
}
@media (min-width: 769px) {
  .h-responsive-md { font-size: 28px; }
}

.h-responsive-lg {
  font-size: 32px;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .h-responsive-lg { font-size: 24px; }
}
@media (min-width: 769px) {
  .h-responsive-lg { font-size: 40px; }
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE LAYOUT UTILITIES
   ───────────────────────────────────────────────────────── */

/* Single column on mobile, multi-column on larger screens */
.grid-responsive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 481px) {
  .grid-responsive-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-responsive-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-responsive-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 769px) {
  .grid-responsive-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-responsive-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-responsive-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-responsive-5 { grid-template-columns: repeat(5, 1fr); }
  .grid-responsive-6 { grid-template-columns: repeat(6, 1fr); }
}

/* Flexible row that wraps on mobile */
.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
@media (min-width: 481px) {
  .flex-responsive { flex-direction: row; flex-wrap: wrap; }
}

/* Stack on mobile, side-by-side on desktop */
.stack-responsive {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
@media (min-width: 769px) {
  .stack-responsive { flex-direction: row; }
  .stack-responsive > * { flex: 1; }
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE NAVIGATION
   ───────────────────────────────────────────────────────── */

/* Mobile bottom nav, desktop top nav */
.nav-responsive {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-panel);
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 100;
}

@media (min-width: 769px) {
  .nav-responsive {
    position: static;
    flex-direction: row;
    border-top: none;
    border-bottom: 1px solid var(--glass-border);
    padding: 0 var(--padding-md);
  }
}

.nav-responsive-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

@media (min-width: 769px) {
  .nav-responsive-item {
    flex-direction: row;
    gap: 8px;
    padding: 12px 16px;
  }
}

.nav-responsive-item:hover {
  background-color: var(--bg-card-hov);
}

.nav-responsive-item.active {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE FORM UTILITIES
   ───────────────────────────────────────────────────────── */

/* Full-width forms on mobile */
.form-responsive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 481px) {
  .form-responsive-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
  .form-responsive-2 { grid-template-columns: repeat(2, 1fr); }
  .form-responsive-3 { grid-template-columns: repeat(3, 1fr); }
  .form-responsive-4 { grid-template-columns: repeat(4, 1fr); }
}

.form-input-responsive {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px; /* Prevents iOS zoom */
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--bg-input);
  color: #c8d6ef;
  transition: all 0.2s ease;
  min-height: 44px;
}

.form-input-responsive:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
}

/* ─────────────────────────────────────────────────────────
   PERFORMANCE OPTIMIZATIONS
   ───────────────────────────────────────────────────────── */

/* Remove backdrop-filter on mobile for GPU savings */
@media (max-width: 768px) {
  .glass-card,
  .modal-backdrop,
  .search-overlay,
  .comparison-block {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Reduce animations on mobile */
@media (max-width: 480px) {
  * {
    animation-duration: 0.15s !important;
    transition-duration: 0.15s !important;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Lazy load images on mobile */
img[loading="lazy"] {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─────────────────────────────────────────────────────────
   CONTAINER QUERIES (Modern Responsive)
   ───────────────────────────────────────────────────────── */

.container-responsive {
  container-type: inline-size;
  width: 100%;
}

@container (max-width: 480px) {
  .container-responsive .card-adaptive {
    padding: 12px;
  }
}

@container (min-width: 481px) and (max-width: 768px) {
  .container-responsive .card-adaptive {
    padding: 16px;
  }
}

@container (min-width: 769px) {
  .container-responsive .card-adaptive {
    padding: 24px;
  }
}

/* ─────────────────────────────────────────────────────────
   UTILITY-SPECIFIC BREAKPOINTS
   ───────────────────────────────────────────────────────── */

/* Very small phones (320px - 359px) */
@media (max-width: 359px) {
  .text-tiny { font-size: 10px; }
  .px-tiny { padding-left: 8px; padding-right: 8px; }
}

/* Small phones (360px - 480px) */
@media (min-width: 360px) and (max-width: 480px) {
  .text-small { font-size: 11px; }
}

/* Tablets in portrait (481px - 600px) */
@media (min-width: 481px) and (max-width: 600px) {
  .tablet-portrait { padding: 16px; }
}

/* Tablets in landscape (601px - 768px) */
@media (min-width: 601px) and (max-width: 768px) {
  .tablet-landscape { padding: 18px; }
}

/* Small desktops (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .desktop-small { max-width: 900px; }
}

/* Large desktops (1025px - 1280px) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .desktop-medium { max-width: 1100px; }
}

/* XL desktops (1281px+) */
@media (min-width: 1281px) {
  .desktop-large { max-width: 1400px; }
}