/* ============================================================
   Traders Reach — desktop responsiveness
   Loaded AFTER each page's inline <style> so it can override.
   MIN-WIDTH ONLY: below 860px nothing here applies, so the
   locked phone-first design is 100% untouched. Tune widths here.
   ============================================================ */

@media (min-width: 860px){

  /* widen the skinny 480px column into a real desktop column */
  .app{
    max-width: 1080px;
    box-shadow: 0 12px 50px rgba(20,40,46,.10);
  }

  /* ---------- HOMEPAGE: roomier hero ---------- */
  .mhero{ padding: 30px 40px 0; }
  .mhero .eb{ font-size: .72rem; }
  .mhero h1{ font-size: 1.95rem; max-width: 22ch; }
  .mstrip{ height: 340px; margin: 20px 40px 0; border-radius: 20px; }
  .mband{ padding: 18px 40px 4px; }
  .mband span{ font-size: 1.16rem; }
  .slim{ padding: 18px 40px 4px; max-width: 560px; }

  /* section headers */
  .shead{ padding: 28px 40px 10px; }
  .shead h3{ font-size: 1.42rem; }

  /* ---------- horizontal scroll rows -> wrapping multi-column ---------- */
  .hwrap .hfade{ display: none; }            /* no scroll fade when wrapped */
  .hscroll{
    flex-wrap: wrap;
    overflow: visible;
    gap: 12px;
    padding: 0 40px 8px;
  }
  .lcard,
  .sk{ flex: 0 0 calc((100% - 4*12px) / 5); width:auto; }  /* 5 across */
  .lcard .img{ width:100%; height:auto; aspect-ratio:1; }
  .lcard h4, .lcard .meta{ width:auto; }
  .lcard h4{ font-size: .92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lcard .meta{ font-size: .8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ---------- BROWSE: 3-col grid -> 5-col ---------- */
  .grid3{
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 10px 40px 40px;
  }

  /* ---------- FIND-A-PRO: pro list two-up ---------- */
  .plist{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* ---------- THE PULSE ---------- */
  .pulse{ margin: 24px 40px 12px; }
  .pmore{ max-height: 320px; }

  /* ---------- PROSE / CONTENT: comfortable reading measure ---------- */
  .csec, .chero, .figsec{ max-width: 760px; margin-left: auto; margin-right: auto; }

  /* ---------- FORMS / narrow blocks centered (login, community, etc.) ---------- */
  .app .wrap{ max-width: 560px; margin-left: auto; margin-right: auto; }
  .app .dialwrap{ max-width: 560px; margin-left: auto; margin-right: auto; }

  /* ---------- BOTTOM TAB BAR: cluster centered, don't spray across width ---------- */
  .tabbar{ justify-content: center; gap: 56px; }
}

/* very wide monitors: one more column + a touch more width */
@media (min-width: 1240px){
  .app{ max-width: 1180px; }
  .lcard,
  .sk{ flex: 0 0 calc((100% - 5*20px) / 6); width:auto; }   /* 6 across */
  .grid3{ grid-template-columns: repeat(6, 1fr); }
}