/**
 * Standardized Responsive Breakpoint System
 * ==========================================
 *
 * This file provides a centralized breakpoint system for consistent
 * responsive design across all SwiftSpot pages.
 *
 * COEXISTENCE WITH DISCOVER:
 * Discover uses app/static/css/discover/responsive-system.css (desktop from 1101px).
 * This file uses desktop from 1024px for non-discover pages. Discover bottom tabs
 * now share the hub tablet band (visible <1024 via mobile-bottom-nav--host-tablet);
 * do not merge Discover layout breakpoints without updating JS (DiscoverConstants /
 * ResponsiveManager) and discover templates.
 *
 * BREAKPOINTS:
 * - Mobile: ≤520px (Ultra-compact phones)
 * - Tablet: 521px-1023px (Tablets and small laptops)
 * - Desktop: ≥1024px (Desktop and large screens)
 *
 * USAGE:
 * Import this file in your page-specific CSS or use the CSS variables
 * and utility classes provided.
 *
 * PRACTICE CONVENTIONS (mobile audit — do not invent new phone cuts casually):
 * - Phone sheets / modals / bottom-nav hide-show: max-width 767px / min-width 768px
 *   Aligns Tailwind `md` and JS `innerWidth < 768` (nav offset, smart_navigation).
 *   Prefer this exclusive pair; do not use max-width: 768px for the same concern.
 * - Host tablet (bottom nav retained): min-width 768px and max-width 1023px
 * - Phone overflow / tighten (phone-safe.css): max-width 640px
 * - Ultra-compact / fine-tune: max-width 520px (--bp-mobile-max)
 * - App desktop (non-discover): min-width 1024px
 * - Discover desktop: min-width 1101px — keep separate; JS in DiscoverConstants.js
 */

:root {
  /* Standardized Breakpoints */
  --bp-mobile-max: 520px;
  --bp-tablet-min: 521px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;

  /* Additional Breakpoints for Fine-Tuning */
  --bp-xs: 320px;      /* Small phones */
  --bp-sm: 375px;      /* Standard phones */
  --bp-md: 520px;      /* Large phones */
  --bp-lg: 768px;      /* Tablets */
  --bp-xl: 1024px;     /* Small laptops */
  --bp-2xl: 1280px;    /* Large laptops */
  --bp-3xl: 1536px;    /* Desktops */

  /* Responsive Spacing Scale */
  --spacing-mobile: 1rem;      /* 16px - Mobile padding */
  --spacing-tablet: 1.5rem;    /* 24px - Tablet padding */
  --spacing-desktop: 2rem;      /* 32px - Desktop padding */

  /* Responsive Typography Scale */
  --text-mobile-base: 0.9375rem;   /* 15px - Mobile base */
  --text-tablet-base: 1rem;        /* 16px - Tablet base */
  --text-desktop-base: 1rem;       /* 16px - Desktop base */

  /* Touch Target Sizes */
  --touch-target-min: 44px;        /* Minimum touch target (iOS/Android) */
  --touch-target-comfortable: 48px; /* Comfortable touch target */

  /* Container Max Widths (for .ls-responsive-container and similar) */
  --container-xs: 100%;
  --container-sm: 100%;
  --container-md: 100%;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Typography scale aliases (match base variables.css font-size-*) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
}

/* ========================================
 * MOBILE-FIRST MEDIA QUERIES
 * ======================================== */

/* Mobile: ≤520px */
@media (max-width: 520px) {
  :root {
    --container-padding: var(--spacing-mobile);
    --text-base-size: var(--text-mobile-base);
  }
}

/* Tablet: 521px-1023px */
@media (min-width: 521px) and (max-width: 1023px) {
  :root {
    --container-padding: var(--spacing-tablet);
    --text-base-size: var(--text-tablet-base);
  }
}

/* Desktop: ≥1024px */
@media (min-width: 1024px) {
  :root {
    --container-padding: var(--spacing-desktop);
    --text-base-size: var(--text-desktop-base);
  }
}

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

/* Mobile-only visibility */
.mobile-only {
  display: block;
}

.tablet-only,
.desktop-only {
  display: none;
}

/* Tablet-only visibility */
@media (min-width: 521px) and (max-width: 1023px) {
  .mobile-only {
    display: none;
  }

  .tablet-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }
}

/* Desktop-only visibility */
@media (min-width: 1024px) {
  .mobile-only,
  .tablet-only {
    display: none;
  }

  .desktop-only {
    display: block;
  }
}

/* Responsive container padding */
.responsive-container {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Responsive text sizing */
.responsive-text {
  font-size: var(--text-base-size);
}

/* Touch-friendly buttons */
.touch-target {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  padding: 0.75rem 1rem;
}

/* Mobile-specific adjustments */
@media (max-width: 520px) {
  /* iOS zoom guard: device-compatibility.css + ios-safari-text-entry-late.css */

  /* Full-width buttons on mobile */
  .mobile-full-width {
    width: 100% !important;
  }

  /* Reduced spacing on mobile */
  .mobile-spacing {
    margin-bottom: 1rem !important;
  }
}

/* Tablet-specific adjustments */
@media (min-width: 521px) and (max-width: 1023px) {
  /* Comfortable spacing on tablets */
  .tablet-spacing {
    padding: 1.5rem !important;
  }
}

/* Desktop-specific adjustments */
@media (min-width: 1024px) {
  /* Maximum content width */
  .desktop-max-width {
    max-width: 1280px;
    margin: 0 auto;
  }
}