/* ==========================================================================
   STEMSPACE — RESPONSIVE DESIGN & MOBILE OPTIMIZATIONS
   Breakpoints: 320px, 375px, 390px, 414px, 768px, 1024px, 1280px, 1440px, 1920px
   ========================================================================== */

/* Universal Mobile Safety: prevent any unexpected horizontal scroll without breaking sticky positioning */
html {
  max-width: 100%;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   LARGE SCREENS (>= 1200px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .container {
    max-width: 1240px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1360px;
  }
}

/* --------------------------------------------------------------------------
   TABLET & DESKTOP TRANSITION (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .stem-brand-logo {
    height: 42px;
    max-width: 150px;
  }

  /* Navbar adjustments */
  .stem-header .navbar-collapse {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: 1.5rem;
    margin-top: 1rem;
    border: 1px solid var(--stem-border);
  }

  .stem-nav .nav-link {
    padding: 0.75rem 0.5rem !important;
  }

  .stem-dropdown-menu {
    box-shadow: none;
    border: none;
    padding-left: 1rem;
    background: #F8FAFC;
    border-radius: var(--radius-md);
  }

  /* Hero Section */
  .stem-hero-section {
    padding: 3rem 0 3.5rem;
    text-align: center;
  }

  .hero-eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-visual-wrapper {
    margin-top: 2.5rem;
  }

  .hero-floating-card.card-top {
    top: -15px;
    right: 5px;
  }

  .hero-floating-card.card-bottom {
    bottom: -15px;
    left: 5px;
  }

  /* Timeline adjustment for tablets */
  .timeline-connector {
    display: none;
  }

  .timeline-step {
    margin-bottom: 2rem;
  }

  /* Comparison table scrollability on mobile/tablet */
  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 650px;
  }

  /* Interactive config box */
  .config-interactive-box {
    padding: 2.5rem 1.5rem;
  }

  .config-preview-panel {
    margin-top: 2rem;
  }
}

/* --------------------------------------------------------------------------
   MOBILE SCREENS (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .stem-brand-logo {
    height: 38px;
    max-width: 140px;
  }

  .navbar-toggler {
    padding: 0.25rem 0.5rem;
  }

  .navbar-toggler .bi-list {
    font-size: 2rem !important;
    vertical-align: middle;
  }

  /* Typography Scaling */
  h1, .h1 {
    font-size: 2.2rem;
  }

  h2, .h2 {
    font-size: 1.75rem;
  }

  .section-header {
    margin-bottom: 2.5rem;
  }

  /* Hero button stacking */
  .hero-cta-group {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
  }

  .hero-cta-group .btn-stem {
    width: 100%;
  }

  /* Trust Strip */
  .trust-strip {
    padding: 1.5rem 0;
  }

  .trust-item {
    margin-bottom: 1rem;
  }

  /* Product Card adjustments */
  .product-img-wrapper {
    min-height: 180px;
  }

  .product-img {
    max-height: 160px;
  }

  /* Hide one floating card on small screens to avoid clutter */
  .hero-floating-card.card-top {
    display: none;
  }

  .hero-floating-card.card-bottom {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 1rem;
    animation: none;
  }

  /* Footer adjustments */
  .stem-footer {
    padding-top: 3.5rem;
    padding-bottom: 2rem;
  }

  .footer-bottom-row {
    flex-direction: column-reverse;
    text-align: center;
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .social-links-wrap {
    justify-content: center;
  }

  /* Cart Drawer takes full screen on mobile */
  .cart-drawer {
    max-width: 100%;
  }

  /* Global Search */
  .search-overlay-backdrop {
    padding-top: 20px;
    align-items: stretch;
  }

  .search-modal-box {
    width: 95%;
    max-height: 90vh;
  }
}

/* --------------------------------------------------------------------------
   SMALL MOBILE (< 420px: iPhone SE, Samsung Galaxy S, etc.)
   -------------------------------------------------------------------------- */
@media (max-width: 414px) {
  .stem-brand-logo {
    height: 34px;
    max-width: 125px;
  }

  .footer-logo-wrap {
    padding: 5px 10px;
  }

  .stem-brand-logo-footer {
    height: 36px;
    max-width: 130px;
  }

  .stem-brand-text {
    font-size: 1.25rem;
  }

  .stem-logo-icon {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }

  .nav-action-btn {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .announcement-bar {
    font-size: 0.78rem;
    padding: 0.5rem 0.75rem;
  }

  .btn-stem {
    padding: 0.7rem 1.3rem;
    font-size: 0.9rem;
  }

  .stem-card {
    padding: 1.25rem;
  }
}

/* Touch Targets: minimum 44x44px for accessibility */
@media (pointer: coarse) {
  .nav-action-btn,
  .btn-stem,
  .product-wishlist-btn,
  .qty-btn,
  .announcement-close {
    min-height: 44px;
    min-width: 44px;
  }
}