/* audit3-cities-20261112 (Zach 5:07 PM: "Cities page needs to be reworked so its not so croweded").
   State page Cities list: more white space, and fewer rows at once (12 on phones, 24 on desktop). city-search.js adds .is-capped only when JS runs,
   so with JS off the full list shows. Every city link stays in the HTML. Search lifts the cap. */
body.qpage .dir-cities-sec{margin:40px 0 44px;padding:24px 20px;background:#fff;border-radius:14px;box-shadow:0 6px 20px rgba(15,27,51,.07)}
body.qpage .dir-cities-sec h2{margin-top:0}
body.qpage .dir-cities-sec .dir-cities-lead{margin:0 0 18px;color:#334155}
body.qpage .dir-cities-sec .dir-city-search{margin:0 0 20px}
body.qpage ul.dir-cities{gap:10px!important}
body.qpage .dir-cities-sec a.dir-city-row{box-shadow:none!important;border:1px solid #E2E8F0!important;background:#F8FAFC!important;min-height:48px}
body.qpage .dir-cities-sec a.dir-city-row:hover{border-color:#FFAA24!important;background:#fff!important}
body.qpage .dir-cities-all{display:block;margin:20px auto 0;min-height:48px;padding:0 22px;border-radius:999px;border:2px solid #0F1B33;background:#fff;color:#0F1B33;font-weight:800;font-size:15px;cursor:pointer}
body.qpage .dir-cities-all:hover,body.qpage .dir-cities-all:focus-visible{border-color:#FFAA24;outline:0;box-shadow:0 0 0 3px rgba(255,170,36,.35)}
body.qpage .dir-cities-all[hidden]{display:none}
@media (max-width:767px){
  body.qpage .dir-cities-sec{padding:20px 14px;margin:32px 0 36px}
  body.qpage ul.dir-cities.is-capped>li:nth-child(n+13){display:none!important}
  body.qpage .dir-cities-all{width:100%}
}
@media (min-width:768px){
  html body.qpage .dir-cities-sec ul#dir-cities-list.dir-cities{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px 14px!important}
  html body.qpage .dir-cities-sec ul#dir-cities-list.dir-cities.is-capped>li:nth-child(n+25){display:none!important}
  html body.qpage .dir-cities-sec{padding:28px 28px 30px}
  html body.qpage .dir-cities-sec>p.dir-cities-lead{margin-bottom:18px!important}
  html body.qpage .dir-cities-sec div.dir-city-search{margin-bottom:20px!important}
}
@media (min-width:1024px){
  /* Zach Nov 12 9:41 PM: "instead of the current 6 cities and companies in a line it should be 3". Beats hq-desktop-size.css
     (cities 6, company and city lists 4). Desktop only; phones keep their layout. */
  html body.qpage .dir-cities-sec ul#dir-cities-list.dir-cities{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 14px!important}
  html body.qpage:not(.report-page) ul.dir-list.dir-list{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 14px!important}
}
/* City page company list (300 per page): 50 at once on phones, the rest one tap away. dir-companies.js adds .is-capped. */
body.qpage .dir-cities-all.dir-co-all{margin-top:16px}
@media (max-width:767px){body.qpage ul.dir-list[data-co-list].is-capped>li:nth-child(n+51){display:none!important}}
@media (min-width:768px){body.qpage .dir-more-phone{display:none!important}}
@media print{body.qpage ul.dir-list.is-capped>li{display:list-item!important}body.qpage ul.dir-cities.is-capped>li{display:list-item!important}body.qpage .dir-cities-all{display:none!important}}
