/* ============================================================
   TradeWorks AI — Homepage MOBILE override layer
   ------------------------------------------------------------
   PURPOSE: make the homepage (index.html) render cleanly on phones
   (320–480px) WITHOUT touching the desktop layout.

   HOW IT'S SAFE:
   - This file is loaded LAST (after css/home-update.css).
   - EVERY rule lives inside an @media (max-width) query, so desktop
     (>=1024px / >768px) is completely untouched.
   - Fully removable: delete this file + its one <link> in index.html.
   - No other CSS file is edited; no markup changes (the comparison
     table is converted to cards with CSS only).

   Design tokens (mirrors the live brand palette):
     navy #1E3A5F · deep navy #0F2B46 · orange #FF6B2B · teal #00B4D8
     ✓green #10B981 · ✗red #C23B3B/#EF4444 · page bg #F5F7FB
     border #E5E7EB · ink #1A1A2E · muted #6B7280
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --hm-orange: #FF6B2B;
    --hm-navy: #1E3A5F;
    --hm-teal: #00B4D8;
    --hm-green: #10B981;
    --hm-red: #C23B3B;
    --hm-border: #E5E7EB;
    --hm-ink: #1A1A2E;
    --hm-muted: #6B7280;
  }

  /* ---------- GLOBAL SAFETY NET + RHYTHM ---------- */
  html, body { overflow-x: hidden; }

  /* Section vertical rhythm — override large desktop padding on the
     homepage's top-level sections (scoped to the homepage sections so
     header/footer/main internals are unaffected). */
  #hero,
  #why-homeowners,
  #home-categories,
  #why-different,
  #audience-selector,
  #grow-business,
  #blog {
    padding-left: 16px;
    padding-right: 16px;
  }
  #why-homeowners,
  #home-categories,
  #why-different,
  #audience-selector,
  #grow-business {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  /* #blog uses .section-padding; tighten it on the homepage only. */
  #blog.section-padding { padding-top: 48px; padding-bottom: 48px; }

  /* Inner container padding already handled by the section above; keep
     containers fluid so nothing forces width. */
  #hero .container,
  #why-homeowners .container,
  #home-categories .container,
  #why-different .container,
  #audience-selector .container,
  #grow-business .container,
  #blog .container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Images inside homepage sections never exceed the viewport. */
  #why-homeowners img,
  #home-categories img,
  #why-different img,
  #audience-selector img,
  #grow-business img,
  #blog img { max-width: 100%; height: auto; }

  /* Headline / body type scale */
  #why-homeowners h2,
  #home-categories .home-dark-h2,
  #why-different .home-light-h2,
  #audience-selector .home-dark-h2,
  #grow-business .home-dark-h2,
  #blog .section-header h2 {
    font-size: 24px;
    line-height: 1.2;
  }
  #home-categories .home-dark-sub,
  #why-different .home-light-sub,
  #audience-selector .home-dark-sub,
  #grow-business .home-dark-sub,
  #blog .section-subtitle {
    font-size: 16px;
  }

  /* ---------- 1) HERO ---------- */
  /* Headline: clamp so it never overflows at 320px; stays white. */
  #hero .hero-image-title {
    font-size: clamp(1.6rem, 8vw, 2rem);
    line-height: 1.12;
  }
  /* The existing scoped hero style already adds a dark overlay; reinforce
     legibility (overlay + text-shadow) without changing markup. */
  #hero.hero-image-bg .hero-bg-overlay {
    background: linear-gradient(
      100deg,
      rgba(0,0,0,0.70) 0%,
      rgba(0,0,0,0.55) 55%,
      rgba(0,0,0,0.35) 100%
    );
  }

  /* 4 stat chips -> 2x2 grid of pills. */
  #hero .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-radius: 0;
    overflow: visible;
    max-width: 100%;
  }
  #hero .hero-stats .hero-stat {
    border: 1px solid rgba(255,255,255,0.30) !important;
    background: rgba(15,43,70,0.55);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 14px 10px;
    min-height: 44px;
  }
  #hero .hero-stat-val {
    color: var(--hm-orange);
    font-weight: 800;
    font-size: 22px;
  }
  #hero .hero-stat-label {
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    margin-top: 4px;
  }

  /* Primary search button keeps its round shape; nothing to change. */

  /* ---------- 2) WHY HOMEOWNERS — 1 column, stacked ---------- */
  #why-homeowners .wh-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #why-homeowners .wh-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "heading"
      "body";
    flex-direction: column;       /* kill any row / alternating layout */
    text-align: left;
    align-items: stretch;
    padding: 22px;
    row-gap: 16px;
  }
  /* Icon imgs are intentionally 90px — keep them (do not stretch). */
  #why-homeowners .wh-card-image {
    grid-area: image;
    width: 90px;
    height: 90px;
    align-self: flex-start;
  }
  #why-homeowners .wh-card-title {
    grid-area: heading;
    align-self: start;
    font-size: 20px;
  }
  #why-homeowners .wh-card-body {
    grid-area: body;
    font-size: 16px;
    line-height: 1.6;
  }

  /* ---------- 3) "WHAT WE COVER" carousel ---------- */
  /* Tab strip: horizontally scrollable, no wrap, tap-target height. */
  #home-categories .cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #home-categories .cat-tab {
    flex: 0 0 auto;
    min-height: 44px;
  }
  /* Card rail: swipeable, snap, momentum scroll. */
  #home-categories .cat-rail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  #home-categories .cat-rail .cat-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  /* Hide the floating prev/next arrows on mobile — swipe is the gesture. */
  #home-categories .cat-rail-arrow { display: none; }

  /* ---------- 5) "WHICH ONE ARE YOU?" — 1 column ---------- */
  #audience-selector .audience-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #audience-selector .audience-card { width: 100%; }

  /* ---------- 6) GROW YOUR CONTRACTING BUSINESS ---------- */
  #grow-business .grow-business { grid-template-columns: 1fr; }
  /* Service tiles already stack (flex column) — keep. */
  /* The two CTAs stack full-width: orange filled + outline. */
  #grow-business .grow-cta {
    flex-direction: column;
    align-items: stretch;
  }
  #grow-business .grow-cta .btn-biz {
    width: 100%;
    text-align: center;
    align-self: stretch;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Audit card: keep as a scannable teaser — hide weight % + progress
     bars so it reads as a list of category names + score badges. */
  #grow-business .hero-audit-tile { width: 100%; }
  #grow-business .hero-audit-tile .audit-card { max-width: 100%; }
  #grow-business .hero-audit-tile .ac-wt,
  #grow-business .hero-audit-tile .ac-bar { display: none; }

  /* ---------- 7) BLOG ("Expert Insights") — 1 column ---------- */
  #blog .blog-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  #blog .blog-card-body h3 { font-size: 18px; }
  #blog .blog-card-body p { font-size: 16px; }
  #blog .section-link {
    display: block;
    text-align: center;
    min-height: 44px;
  }
}

/* ============================================================
   4) COMPARISON TABLE -> stacked feature cards (TOP PRIORITY).
   CSS-ONLY. Live table = 3 cols (How it works | TradeWorks AI |
   Others) x 6 rows. Use <=768px so it never affects desktop.
   ============================================================ */
@media (max-width: 768px) {
  /* Stack the two-column intro+table grid into one column. */
  #why-different .why-different-grid { grid-template-columns: 1fr; }
  #why-different .compare-wrap { overflow-x: visible; }

  /* Keep the "100% earnings / 0 shared leads" stat strip as a highlighted
     strip ABOVE the cards. (.difference-tile already styled navy + orange
     border by home-update.css; just give it breathing room here.) */
  #why-different .difference-tile { margin-bottom: 20px; }

  /* Drop the table chrome and let everything be block-level cards. */
  #why-different .comp-table-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
  }
  #why-different .comp-table,
  #why-different .comp-table tbody,
  #why-different .comp-table tr,
  #why-different .comp-table th,
  #why-different .comp-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  #why-different .comp-table thead { display: none; }

  /* Each <tr> becomes a white card. */
  #why-different .comp-table tbody tr {
    background: #FFFFFF;
    border: 1px solid var(--hm-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
  }

  /* Row header (th[scope=row]) = card title. */
  #why-different .comp-table tbody th[scope="row"] {
    background: transparent;
    color: var(--hm-ink);
    font-weight: 600;
    font-size: 16px;
    padding: 0 0 10px;
    border: 0;
    width: 100%;
  }

  /* Each value cell = a labeled line. Reset padding/borders from desktop. */
  #why-different .comp-table tbody td {
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    color: #374151;
    margin-top: 8px;
  }

  /* Inject "Others" / "TradeWorks AI" labels via CSS (no markup change). */
  #why-different .comp-table tbody td::before {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hm-muted);
    margin-bottom: 4px;
  }
  #why-different .comp-table tbody td:not(.comp-tw)::before { content: "Others"; }
  #why-different .comp-table td.comp-tw::before { content: "TradeWorks AI"; }

  /* TradeWorks row = DOMINANT: orange left border + navy tint bg. */
  #why-different .comp-table td.comp-tw {
    background: rgba(30,58,95,0.06);
    border-left: 4px solid var(--hm-orange);
  }
  #why-different .comp-table td.comp-tw::before { color: var(--hm-navy); }
  /* ✓ badge in green, bold. */
  #why-different .comp-table td.comp-tw .comp-yes {
    background: var(--hm-green);
    color: #FFFFFF;
  }

  /* Others row = muted; ✗ badge in red. */
  #why-different .comp-table tbody td:not(.comp-tw) {
    background: #F9FAFB;
    color: var(--hm-muted);
  }
  #why-different .comp-table tbody td:not(.comp-tw) .comp-no {
    background: var(--hm-red);
    color: #FFFFFF;
  }

  /* Fine-print footer = 12px muted below the cards. */
  #why-different .comp-footer {
    font-size: 12px;
    color: var(--hm-muted);
    margin-top: 8px;
  }
}

/* ============================================================
   sm (<=640px): primary CTAs full-width.
   ============================================================ */
@media (max-width: 640px) {
  /* Hero search button stays compact; the marketing CTAs go full-width. */
  #grow-business .grow-cta .btn-biz { width: 100%; }
}