/* =============================================
   WithAChoice — mobile.css
   Load this AFTER all other CSS files.
   Covers: homepage, guides, questionnaire,
           browse, results, category pages.

   Breakpoints:
     Tablet  : max-width 1024px
     Mobile  : max-width 600px
     Small   : max-width 400px
   ============================================= */


/* ─────────────────────────────────────────────
   SHARED — applies to all pages
   ───────────────────────────────────────────── */

/* Reduce inner padding on narrower screens so
   content doesn't press right against the edge */
@media (max-width: 1024px) {
  .inner {
    padding: 0 24px;
  }
}

@media (max-width: 600px) {
  .inner {
    padding: 0 16px;
  }
}


/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */

@media (max-width: 600px) {
  /* Increase nav link tap area to meet 44px minimum */
  .nav-links a {
    padding: 12px 0;
    display: inline-block;
  }

  /* Tighten nav gap on small screens */
  .nav-links {
    gap: 16px;
  }

  .nav .inner {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE HERO
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero {
    padding: 64px 24px 60px;
  }

  .hero h1 {
    font-size: 36px;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 48px 16px 48px;
  }

  /* Scale hero title down — 44px is too large on a phone */
  .hero h1 {
    font-size: 30px;
    margin-bottom: 18px;
  }

  .hero p {
    font-size: 17px;
    margin-bottom: 28px;
  }

  /* Stack CTA buttons vertically on mobile */
  .cta-row {
    flex-direction: column;
    align-items: center;
  }

  .btn-main,
  .btn-ghost {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE — STATS BAR
   The four stats (500+ machines etc.) currently
   sit in a nowrap flex row and overflow on mobile.
   Allow wrapping to two rows of two.
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .stats-bar-inner {
    flex-wrap: wrap;
  }

  .stats-bar-item {
    flex: 1 1 40%;   /* two per row on tablet */
    text-align: center;
  }
}

@media (max-width: 600px) {
  .stats-bar-inner {
    flex-wrap: wrap;
    gap: 16px 0;
  }

  .stats-bar-item {
    flex: 1 1 50%;   /* two per row on mobile */
    text-align: center;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE — HOW IT WORKS (3-column steps)
   Collapse to single column on mobile,
   two columns on tablet.
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .steps {
    grid-template-columns: 1fr 1fr;
    max-width: 640px;
    padding: 0 24px;
  }

  /* On a 2-col grid, the third step spans full width */
  .step:last-child {
    grid-column: 1 / -1;
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .how {
    padding: 48px 0;
  }

  .steps {
    grid-template-columns: 1fr;
    padding: 0 16px;
    max-width: 100%;
  }

  .step:last-child {
    grid-column: unset;
    max-width: 100%;
    margin: 0;
  }

  .section-title {
    font-size: 22px;
    padding: 0 16px;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE — TOP PICKS GRID (3-column product cards)
   Collapse to 2 columns on tablet, 1 on mobile.
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .picks-grid,
  .cards {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px;
  }
}

@media (max-width: 600px) {
  .market {
    padding: 48px 0;
  }

  .picks-grid,
  .cards {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

  .market-intro,
  .market-statement {
    padding: 0 16px;
  }

  .tier-legend {
    padding: 0 16px;
    gap: 12px;
  }

  .cat-tabs {
    padding: 0 16px;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE — ENTRY PILLS (questionnaire CTA buttons)
   These are the three large tap targets on the
   homepage. Currently too small on mobile.
   ───────────────────────────────────────────── */

@media (max-width: 600px) {
  .entry-pills {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .entry-pill {
    width: 100%;
    max-width: 320px;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE — GUIDES STRIP
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Tablet: collapse to 1 column */
  .guides-grid {
    grid-template-columns: 1fr;
    max-width: 580px;
  }
}

@media (max-width: 600px) {
  .guides-strip .inner {
    padding: 0 16px;
  }

  /* Mobile: single column, full width cards */
  .guides-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .guide-pill-card {
    width: 100%;
  }
}


/* ─────────────────────────────────────────────
   HOMEPAGE — FINAL CTA + TRUST SECTIONS
   ───────────────────────────────────────────── */

@media (max-width: 600px) {
  .final {
    padding: 48px 16px;
  }

  .final h2 {
    font-size: 26px;
  }

  .final p {
    font-size: 16px;
  }

  .trust-inner {
    padding: 0 16px;
  }

  .trust h2 {
    font-size: 22px;
  }

  .trust p {
    font-size: 16px;
  }
}


/* ─────────────────────────────────────────────
   ARTICLE / GUIDE PAGES
   The comparison table is 5 columns wide and
   overflows on any narrow screen. Wrap it in a
   horizontally scrollable container.
   Also fix product card layout at mobile widths.
   ───────────────────────────────────────────── */

/* Table scroll wrapper — applied via JS injection
   or by wrapping .comparison-table in HTML.
   This targets the table directly as a fallback. */
@media (max-width: 1024px) {
  .comparison-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Keep cell text from becoming unreadably narrow */
  .comparison-table th,
  .comparison-table td {
    min-width: 100px;
    white-space: normal;
  }

  /* First column (machine name) needs a bit more room */
  .comparison-table th:first-child,
  .comparison-table td:first-child {
    min-width: 160px;
  }
}

@media (max-width: 600px) {
  /* Guide body padding — reduce from 52px sides to 16px */
  .guide-body {
    padding: 32px 16px 60px;
  }

  /* Product cards: score circles should wrap
     rather than overflow */
  .score-circles {
    flex-wrap: wrap;
    gap: 8px;
  }

  .score-circle-wrap {
    flex: 0 0 calc(50% - 4px);  /* two per row */
    min-width: unset;
  }

  /* Product card header stacks on very narrow screens */
  .product-card-header {
    flex-direction: column;
    gap: 8px;
  }

  /* Retailer pill buttons — full width on mobile */
  .retailer-buttons {
    flex-direction: column;
  }

  .retailer-btn {
    width: 100%;
    text-align: center;
  }

  /* WAC Score badge in article header */
  .wac-score-badge {
    align-self: flex-start;
  }
}


/* ─────────────────────────────────────────────
   RETAILER BADGE LABELS (AO / ME)
   Currently 11px — below Google's 12px minimum.
   Bump to 12px everywhere.
   ───────────────────────────────────────────── */

.card-retailer-name,
.browse-pill-name,
.retailer-pill-name {
  font-size: 12px;
}


/* ─────────────────────────────────────────────
   BROWSE PAGE
   browse.css already has a 600px breakpoint.
   These extend it for tablet.
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .browse-tier-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tier-tab {
    flex-shrink: 0;
  }
}

@media (max-width: 600px) {
  .browse-sort {
    flex-wrap: wrap;
  }

  /* Widen retailer pills on browse list for easier tapping */
  .browse-retailer-pill {
    padding: 8px 13px;
  }

  .browse-pill-price {
    font-size: 1rem;
  }
}


/* ─────────────────────────────────────────────
   RESULTS PAGE
   results.css already has a 600px breakpoint.
   Extend for tablet and add missing items.
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .r-main {
    padding: 2rem 16px 4rem;
  }
}

@media (max-width: 600px) {
  /* Stack score circles two-per-row on results page */
  .score-circle-wrap {
    flex: 0 0 calc(50% - 6px);
    min-width: unset;
  }

  /* Retailer pill buttons full width */
  .retailer-buttons {
    flex-direction: column;
  }

  .retailer-pill {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Results header */
  .results-title {
    font-size: 1.5rem;
  }

  /* Match card */
  .match-card-header {
    flex-direction: column;
    gap: 8px;
  }

  .wac-badge {
    align-self: flex-start;
  }
}


/* ─────────────────────────────────────────────
   QUESTIONNAIRE PAGE
   questionnaire.css has a 520px breakpoint.
   These extend it for tablet and add missing items.
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .q-main {
    padding: 2rem 16px 3rem;
  }
}

@media (max-width: 600px) {
  .q-title {
    font-size: 1.375rem;
  }

  .entry-title {
    font-size: 1.5rem;
  }

  /* WAC Challenge block on questionnaire */
  .q-container .challenge-block,
  .q-container [class*="challenge"] {
    padding: 16px;
    font-size: 15px;
  }

  /* Feature grid — two columns is fine on mobile */
  .feature-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Option cards — keep two-col for simple yes/no,
     stack three-col to two-col */
  .option-grid.three-col {
    grid-template-columns: 1fr 1fr;
  }

  /* Primary button full width */
  .primary-btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 400px) {
  /* On very small phones, stack option cards */
  .option-grid.two-col,
  .option-grid.three-col {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────
   CATEGORY PAGE
   ───────────────────────────────────────────── */

@media (max-width: 1024px) {
  .cat-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 24px;
  }

  .cat-header {
    padding: 40px 24px 36px;
  }
}

@media (max-width: 600px) {
  .cat-grid {
    grid-template-columns: 1fr;
    padding: 0 16px;
  }

  .cat-header {
    padding: 32px 16px 28px;
  }

  .cat-header h1 {
    font-size: 28px;
  }

  .cat-section {
    padding: 40px 0;
  }
}


/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */

@media (max-width: 600px) {
  .foot .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .foot-links {
    gap: 16px;
  }
}