/* ==========================================
 * RESPONSIVE SYSTEM - UNIFIED BREAKPOINT UTILITIES
 * ==========================================
 * FILE: /css/discover/responsive-system.css
 * PURPOSE: Centralized responsive utilities and patterns
 * IMPORT: Add to discover.html after design-tokens.css
 *
 * This file provides:
 * - Standard media query blocks for all breakpoints
 * - Reusable utility classes for responsive behavior
 * - Common patterns extracted from component files
 * - Reduces duplication across 16+ component CSS files
 *
 * BREAKPOINT SYSTEM (matches DiscoverConstants.js):
 * - Mobile:      <=375px  (--bp-mobile)
 * - Mobile Wide: <=567px  (--bp-mobile-wide)
 * - Tablet:      568-1100px (--bp-tablet)
 * - Desktop:     >=1101px (--bp-desktop)
 *
 * COEXISTENCE: base/responsive-breakpoints.css uses 1024px as desktop; discover uses 1101px.
 * Only load this file on discover; do not assume the same desktop threshold as the rest of the app.
 * ==========================================
 */

@layer responsive {

/* ==========================================
 * RESPONSIVE UTILITY CLASSES
 * Base utilities available at all breakpoints
 * ==========================================
 */

/* Touch-friendly spacing utilities */
.rs-touch-target {
  min-height: var(--touch-target-mobile);
  min-width: var(--touch-target-mobile);
}

/* Responsive padding utilities */
.rs-padding-responsive {
  padding: var(--spacing-responsive-md);
}

.rs-padding-responsive-sm {
  padding: var(--spacing-responsive-sm);
}

.rs-padding-responsive-lg {
  padding: var(--spacing-responsive-lg);
}

/* Pointer events management */
.rs-interactive {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.rs-non-interactive {
  pointer-events: none !important;
  cursor: default !important;
}

/* ==========================================
 * BREAKPOINT: Mobile Only (<=375px)
 * Small phones - most constrained viewport
 * ==========================================
 */
@media (max-width: 375px) {
  .rs-mobile-hidden {
    display: none !important;
  }

  .rs-mobile-only {
    display: block !important;
  }

  .rs-mobile-padding {
    padding: var(--spacing-responsive-sm) !important;
  }

  .rs-mobile-compact {
    font-size: 0.875rem !important;
    padding: 0.5rem !important;
  }

  .rs-touch-target {
    min-height: var(--touch-target-mobile) !important;
    min-width: var(--touch-target-mobile) !important;
  }
}

/* ==========================================
 * BREAKPOINT: Mobile Wide (<=567px)
 * All phones in portrait mode
 * ==========================================
 */
@media (max-width: 567px) {
  .rs-mobile-wide-hidden {
    display: none !important;
  }

  .rs-mobile-wide-only {
    display: block !important;
  }

  /* Ensure adequate touch targets on all mobile devices */
  .rs-touch-target {
    min-height: var(--touch-target-mobile) !important;
    min-width: var(--touch-target-mobile) !important;
    touch-action: manipulation !important;
  }

  /* Prevent text zoom on iOS */
  .rs-input-no-zoom {
    font-size: 16px !important;
  }
}

/* ==========================================
 * BREAKPOINT: Tablet (568px - 1100px)
 * Large phones in landscape + all tablets
 * ==========================================
 */
@media (min-width: 568px) and (max-width: 1100px) {
  .rs-tablet-hidden {
    display: none !important;
  }

  .rs-tablet-only {
    display: block !important;
  }

  .rs-tablet-padding {
    padding: var(--spacing-responsive-md) !important;
  }

  /* Slightly smaller touch targets on tablet */
  .rs-touch-target {
    min-height: var(--touch-target-tablet) !important;
    min-width: var(--touch-target-tablet) !important;
  }
}

/* ==========================================
 * BREAKPOINT: Desktop Only (>=1101px)
 * Desktop and large screens
 * ==========================================
 */
@media (min-width: 1101px) {
  .rs-desktop-hidden {
    display: none !important;
  }

  .rs-desktop-only {
    display: block !important;
  }

  .rs-desktop-padding {
    padding: var(--spacing-responsive-lg) !important;
  }

  /* Smaller touch targets acceptable for mouse precision */
  .rs-touch-target {
    min-height: var(--touch-target-desktop) !important;
    min-width: var(--touch-target-desktop) !important;
  }

  /* Enable hover effects only on desktop */
  .rs-hover-lift:hover {
    transform: var(--transform-hover);
    transition: transform var(--transition-fast);
  }

  .rs-hover-shadow:hover {
    box-shadow: var(--shadow-hover);
    transition: box-shadow var(--transition-fast);
  }
}

/* ==========================================
 * DEVICE-SPECIFIC: Touch vs Mouse
 * Differentiate between touch and pointer devices
 * ==========================================
 */

/* Touch devices - enhanced hit areas */
@media (hover: none) and (pointer: coarse) {
  .rs-touch-target {
    min-height: var(--touch-target-mobile) !important;
    min-width: var(--touch-target-mobile) !important;
    padding: 0.75rem !important;
  }

  /* Disable hover effects on touch devices */
  .rs-hover-lift:hover,
  .rs-hover-shadow:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Active state feedback instead */
  .rs-hover-lift:active {
    transform: translateY(-1px) !important;
  }
}

/* Mouse/pointer devices - enable hover effects */
@media (hover: hover) and (pointer: fine) {
  .rs-touch-target {
    min-height: var(--touch-target-desktop) !important;
    min-width: var(--touch-target-desktop) !important;
  }

  .rs-cursor-pointer {
    cursor: pointer !important;
  }

  .rs-cursor-grab {
    cursor: grab !important;
  }

  .rs-cursor-grab:active {
    cursor: grabbing !important;
  }
}

/* ==========================================
 * COMMON RESPONSIVE PATTERNS
 * Extracted from component files to reduce duplication
 * ==========================================
 */

/* ==========================================
 * BOTTOM SHEET PATTERNS
 * Common patterns extracted from bottomsheet.css
 * ==========================================
 */

/* Touch-friendly buttons for bottom sheet */
.rs-bottom-sheet-button {
  min-height: var(--touch-target-mobile) !important;
  min-width: var(--touch-target-mobile) !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Interactive content areas that need pointer events */
.rs-interactive-content {
  pointer-events: auto !important;
  user-select: text !important;
}

/* Non-interactive overlay elements */
.rs-overlay-passthrough {
  pointer-events: none !important;
  user-select: none !important;
}

/* Bottom sheet specific spacing for tight layouts */
.rs-bottom-sheet-compact {
  padding: 0.5rem !important;
  gap: 0.5rem !important;
}

/* Bottom sheet card spacing */
.rs-bottom-sheet-card {
  margin-top: -0.5rem !important;
  margin-bottom: -1rem !important;
  border-radius: 12px !important;
}

@media (min-width: 568px) and (max-width: 1100px) {
  .rs-bottom-sheet-card {
    margin-top: -0.1rem !important;
    margin-bottom: -0.5rem !important;
  }
}

/* ==========================================
 * SPOT CARD PATTERNS
 * Common patterns extracted from spot-card.css
 * ==========================================
 */

/* Prevent horizontal overflow in cards */
.rs-card-no-overflow {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Image container standard sizing */
.rs-card-image-mobile {
  width: 80px !important;
  height: 80px !important;
  border-radius: 6px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.rs-card-image-desktop {
  width: 96px !important;
  height: 96px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* Prevent horizontal overflow on all devices */
.rs-no-overflow-x {
  overflow-x: clip !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@supports not (overflow-x: clip) {
  .rs-no-overflow-x {
    overflow-x: hidden !important;
  }
}

/* Full-width containers */
.rs-full-width {
  width: 100% !important;
  max-width: 100% !important;
}

/* Center content horizontally */
.rs-center-x {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Prevent text selection (for draggable elements) */
.rs-no-select {
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Allow text selection (for content) */
.rs-allow-select {
  user-select: text !important;
}

/* Smooth transitions */
.rs-transition-fast {
  transition: all var(--transition-fast) !important;
}

.rs-transition-normal {
  transition: all var(--transition-normal) !important;
}

/* ==========================================
 * ACCESSIBILITY UTILITIES
 * Ensure components meet WCAG standards
 * ==========================================
 */

/* Focus states for keyboard navigation */
.rs-focus-visible:focus-visible {
  outline: 2px solid var(--primary-blue) !important;
  outline-offset: 2px !important;
}

.rs-focus-visible:focus:not(:focus-visible) {
  outline: none !important;
}

/* Screen reader only content */
.rs-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

/* ==========================================
 * DARK MODE UTILITIES
 * Responsive dark mode adjustments
 * ==========================================
 */

.dark .rs-bg-adaptive {
  background-color: var(--neutral-800) !important;
}

.dark .rs-text-adaptive {
  color: var(--neutral-100) !important;
}

.dark .rs-border-adaptive {
  border-color: var(--neutral-600) !important;
}

/* ==========================================
 * VERTICAL VIEWPORT CONSTRAINTS
 * For devices with limited vertical space
 * ==========================================
 */

/* Ultra-small vertical screens (<=400px height) */
@media (max-height: 400px) {
  .rs-compact-vertical {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .rs-hide-on-short-screen {
    display: none !important;
  }
}

/* Small vertical screens (<=600px height) */
@media (max-height: 600px) {
  .rs-reduce-vertical-spacing {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
}

} /* End @layer responsive */