/* =========================================================
   PrimeFactor.app — Refined Global Media Queries CSS
   Fully responsive layout with strict zero-overflow rules.
   ========================================================= */

/* ---------------------------------------------------------
   Navigation Topology & Single-Line Index UI Rules
   --------------------------------------------------------- */
.overlay-nav-card {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 1rem !important;
}

/* Fixes Bug 1: Enforces overlay-card-num and index labels stay cleanly on the same line */
.overlay-card-num {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.overlay-card-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Index labels stay locked on one line */
.overlay-card-num,
.range-tier-label,
.rank-badge-tag {
  white-space: nowrap !important;
}

/* Formula outputs wrap naturally without generating horizontal scrollbars */
.factor-formula,
.prime-verdict-tag {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ---------------------------------------------------------
   1. Standard Desktop & High-Resolution Displays (<= 1200px)
   --------------------------------------------------------- */
@media (max-width: 1200px) {
  .home-section {
    margin-bottom: 2.5rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .content-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .section-head {
    margin-bottom: 2rem !important;
  }
}

/* ---------------------------------------------------------
   2. Small Desktop & Tablet Landscape (<= 992px)
   --------------------------------------------------------- */
@media (max-width: 992px) {
  .home-section {
    margin-bottom: 2rem !important;
    padding: 2.5rem 1.75rem !important;
  }

  .section-head {
    margin-bottom: 1.75rem !important;
    padding: 1.25rem 1.5rem !important;
  }

  .section-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
  }

  .section-desc {
    font-size: 0.95rem !important;
  }

  .ranks-grid,
  .contract-grid,
  .auto-fit-grid-300,
  .auto-fit-grid-240 {
    gap: 1.25rem !important;
  }

  .rank-card,
  .contract-card,
  .range-tilt-card,
  .strategy-card,
  .ledger-box {
    margin-bottom: 1rem !important;
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 3.25rem) !important;
  }
}

/* ---------------------------------------------------------
   3. Tablet Portrait & Mobile Screens (<= 768px)
   --------------------------------------------------------- */
@media (max-width: 768px) {
  /* Strict zero-overflow viewport boundary */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Structural Section Containment & Background Clipping */
  .home-section {
    margin-bottom: 2rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    border-radius: 1.25rem !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Clip background image layers within viewport bounds */
  .section-bg-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    right: 0 !important;
  }

  .section-bg-image {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Responsively scale main containers to 95% width to stop edge clipping */
  .content-container,
  .playground-container {
    width: 95% !important;
    max-width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    box-sizing: border-box !important;
  }

  /* Section Headings and Top Paragraph Rescaling (Fixes screen overlay issue) */
  .section-head {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.25rem !important;
    padding: 0.5rem 0.25rem !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .section-title {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    margin-bottom: 0.5rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .section-desc {
    font-size: clamp(0.85rem, 3.5vw, 0.95rem) !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Refactor #playground-section and internal items to stack vertically */
  #playground-section .content-container,
  .playground-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }

  .playground-input-group,
  .factorization-output-deck {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .playground-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .factorization-output-deck {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem !important;
    box-sizing: border-box !important;
  }

  /* Card Component Fit & Text Bounds */
  .rank-card,
  .contract-card,
  .range-tilt-card,
  .strategy-card,
  .ledger-box,
  .randomizer-card,
  .settings-node-card,
  .overlay-nav-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Flatten all card grids into vertical mobile stacks */
  .ranks-grid,
  .contract-grid,
  .auto-fit-grid-300,
  .auto-fit-grid-240,
  .overlay-nav-grid,
  .ledger-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.85rem !important;
  }

  /* Dropdown and Navigation Triggers */
  .global-nav-dropdown,
  .nav-dropdown-glass-container {
    width: calc(100vw - 1.5rem) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-10px) !important;
  }

  .global-nav-dropdown.active,
  .nav-dropdown-glass-container.active {
    transform: translateX(-50%) translateY(0) !important;
  }

  .floating-menu-trigger {
    top: 4.5rem !important;
    left: 0.5rem !important;
  }

  .header-container {
    padding-left: 0.5rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ---------------------------------------------------------
   4. Small Mobile & Android Devices (<= 480px)
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .home-section {
    margin-bottom: 1.5rem !important;
    padding: 1rem 0.5rem !important;
  }

  .content-container,
  .playground-container {
    width: 95% !important;
    max-width: 95% !important;
    padding: 0.5rem !important;
  }

  /* Small Mobile Heading & Lead Subtitle Adjustments */
  .section-head {
    margin-bottom: 1rem !important;
    padding: 0.25rem 0 !important;
  }

  .hero-title {
    font-size: 1.65rem !important;
    line-height: 1.15 !important;
  }

  .section-title {
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
  }

  .section-desc {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }

  .section-kicker {
    font-size: 0.7rem !important;
  }

  .hero-badge-meta {
    font-size: 0.7rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .hero-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .btn-primary,
  .btn-secondary {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .rank-card,
  .contract-card,
  .range-tilt-card,
  .strategy-card,
  .ledger-box,
  .randomizer-card,
  .settings-node-card {
    margin-bottom: 0.75rem !important;
    padding: 0.75rem !important;
  }

  .playground-input {
    font-size: 0.85rem !important;
    padding: 0.5rem !important;
  }
}

/* ---------------------------------------------------------
   5. Extra-Small Screens / Micro Android Devices (<= 360px)
   --------------------------------------------------------- */
@media (max-width: 360px) {
  .home-section {
    margin-bottom: 1rem !important;
    padding: 0.75rem 0.25rem !important;
  }

  .content-container,
  .playground-container {
    width: 96% !important;
    max-width: 96% !important;
  }

  .section-title {
    font-size: 1.15rem !important;
  }

  .section-desc {
    font-size: 0.75rem !important;
  }

  .rank-card,
  .contract-card,
  .range-tilt-card,
  .strategy-card,
  .ledger-box {
    padding: 0.5rem !important;
  }

  .brand-text {
    font-size: 0.95rem !important;
  }
}