/* ==========================================================================
   Topira — shared responsive layer (PUBLIC PAGES ONLY)

   PURELY ADDITIVE. Every rule lives inside a max-width media query, so the
   desktop/wide layout of every page is byte-for-byte unaffected. Nothing here
   applies above 1200px.

   Load this LAST, after each page's own styles, so it wins on equal
   specificity without needing !important for most rules.

   Not loaded by app-v2.html — the workspace has its own responsive handling
   and is deliberately untouched.

   Breakpoints
     <= 1200px   tablet / small laptop  — 3-up becomes 2-up, side rails narrow
     <=  768px   phone landscape        — everything stacks, rails collapse
     <=  380px   small phone            — tighten type and padding
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Universal overflow guards.
   These are the single biggest source of "the page is 40px wider than the
   screen" — a long unbroken string, a wide table, or a fixed-width image.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {

  html,
  body {
    overflow-x: hidden;
  }

  img,
  svg,
  video,
  canvas,
  iframe,
  table {
    max-width: 100%;
  }

  img,
  video,
  canvas {
    height: auto;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* Long URLs, emails and unbroken tokens in prose. */
  p,
  li,
  blockquote,
  dd,
  figcaption,
  .prose {
    overflow-wrap: break-word;
  }

  /* Tables get a horizontal scroll rather than pushing the page wide. */
  table {
    display: block;
    overflow-x: auto;
  }
}


/* --------------------------------------------------------------------------
   1. Tablet / small laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {

  /* Cap containers at the viewport WITHOUT clobbering a page's own narrower
     max-width. min() keeps whichever is smaller, so an intentional 640px
     reading column survives. */
  .wrap,
  .container,
  .page-wrap,
  .content-wrap {
    max-width: min(100%, var(--page-max, 1400px));
  }

  /* community.html: .wrap IS the 3-column shell (220px / feed / 260px).
     Narrow the rails before the page's own 1000px rule stacks them. */
  .wrap.shell,
  .community-shell,
  .forum-shell {
    grid-template-columns: 200px minmax(0, 1fr) 220px;
  }
}


/* --------------------------------------------------------------------------
   2. Phone — the main stacking breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* --- containers ------------------------------------------------------- */
  .wrap,
  .container,
  .page-wrap,
  .content-wrap,
  .section {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Don't double up padding on elements that already sit inside a padded
     container and carry their own gutter. */
  .wrap .wrap,
  .container .container {
    padding-left: 0;
    padding-right: 0;
  }

  /* --- every multi-column grid stacks ----------------------------------- */
  .community-shell,
  .forum-shell,
  .feed-shell,
  .two-col,
  .three-col,
  .split,
  .grid-2,
  .grid-3,
  .grid-4,
  .card-grid,
  .cards,
  .pricing-grid,
  .feature-grid,
  .stats-grid,
  .idea-grid,
  .problem-grid,
  .market-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
  }

  /* Auto-fill grids: drop the minmax floor so cards don't overflow. */
  .card-grid,
  .cards,
  .idea-grid,
  .problem-grid,
  .market-grid {
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr)) !important;
  }

  /* Side rails are supplementary — hide rather than stack a wall of them. */
  .left-rail,
  .right-rail,
  .sidebar-rail,
  .aside-rail {
    display: none;
  }

  /* --- flex rows wrap --------------------------------------------------- */
  .row,
  .flex-row,
  .toolbar,
  .filters,
  .filter-bar,
  .tab-bar,
  .chip-row,
  .actions {
    flex-wrap: wrap;
  }

  /* --- navigation ------------------------------------------------------- */
  .navbar,
  .nav,
  .topnav,
  .site-nav {
    padding-left: 20px;
    padding-right: 20px;
  }

  .nav-tab,
  .nav-links,
  .nav-center {
    display: none;
  }

  .nav-right,
  .nav-left {
    gap: 8px;
  }

  /* --- footer ----------------------------------------------------------- */
  .footer,
  footer {
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
  }

  .footer-grid,
  .footer-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* --- anything pinned to a desktop width ------------------------------- */
  [style*="min-width: 320px"],
  [style*="min-width:320px"],
  [style*="min-width: 340px"],
  [style*="min-width:340px"] {
    min-width: 0 !important;
  }

  /* --- type ------------------------------------------------------------- */
  h1 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
  }

  h2 {
    font-size: clamp(23px, 6.4vw, 32px);
    line-height: 1.2;
  }

  h3 {
    font-size: clamp(18px, 5vw, 23px);
  }

  /* Hero headlines are often set in px inline; clamp them generically. */
  .hero-title,
  .page-title,
  .section-title {
    font-size: clamp(26px, 7.5vw, 40px);
    line-height: 1.15;
  }

  .hero-sub,
  .page-subtitle,
  .section-subtitle {
    font-size: 15px;
    line-height: 1.55;
  }

  /* --- modals / sheets -------------------------------------------------- */
  .modal,
  .dialog,
  .sheet {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    max-height: 88vh;
    overflow-y: auto;
  }
}


/* --------------------------------------------------------------------------
   3. Small phone
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {

  .wrap,
  .container,
  .page-wrap,
  .content-wrap,
  .section,
  .navbar,
  .nav,
  .footer,
  footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .footer-grid,
  .footer-cols {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Stacked, full-width CTAs beat two cramped side-by-side buttons. */
  .btn,
  .cta,
  .nav-btn,
  .pricing-btn {
    width: 100%;
    justify-content: center;
  }

  .actions,
  .cta-row,
  .btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  h1 {
    font-size: clamp(24px, 8.5vw, 30px);
  }

  h2 {
    font-size: clamp(20px, 7vw, 25px);
  }

  .card,
  .panel,
  .tile {
    padding: 16px;
  }
}


/* --------------------------------------------------------------------------
   4. Page-specific corrections
   Only where a page's own CSS pins a width that the generic rules above
   cannot reach (fixed px on an ID, or a grid declared with !important).
   -------------------------------------------------------------------------- */

/* --- community.html ----------------------------------------------------
   The page already stacks .wrap at 1000px and re-caps it to 640px; that is
   deliberate and left alone. Only the pieces it does not cover are handled. */
@media (max-width: 768px) {

  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 16px;
    gap: 12px;
  }

  .side-left,
  .side-right {
    display: none;
  }
}

/* --- find-your-idea.html / problem-boards.html ------------------------ */
@media (max-width: 768px) {

  .idea-card,
  .problem-card,
  .market-card {
    width: auto;
    min-width: 0;
  }

  /* Result cards were height-pinned; let them grow with their content. */
  .card {
    height: auto;
  }
}

/* --- FOS.html: pricing + phase rails ---------------------------------- */
@media (max-width: 768px) {

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }

  .pricing-card.featured {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   5. Respect reduced motion at every width.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- index.html: mega-menu columns ------------------------------------ */
@media (max-width: 768px) {

  .mega-content {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }

  .mega-col {
    min-width: 0;
  }
}

/* --- find-your-idea.html / problem-boards.html: topbar + filters ------- */
@media (max-width: 768px) {

  .topbar {
    padding: 0 16px;
    gap: 10px;
  }

  .filters,
  .filter-row,
  .chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filters::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .chips::-webkit-scrollbar {
    display: none;
  }

  .panel-inner {
    padding: 20px 16px;
  }
}