/* css/city.css - /home-tutors/<city> (SEO plan part 9). Cards come from css/tutor-card.css + css/listing.css;
   this file only lays out the sections around them. Values from tokens.css. */
.tt-city-page .tt-sec{ padding-top:var(--sp-8); padding-bottom:var(--sp-8); }
.tt-city-page .tt-h2{ margin-bottom:var(--sp-5); }
.tt-city-stats{ display:flex; flex-wrap:wrap; gap:var(--sp-4); list-style:none; margin:0 0 var(--sp-5); padding:0; }
.tt-city-stats li{ flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1);
  padding:var(--sp-4) var(--sp-5); background:var(--blue-50); border:1px solid var(--line); border-radius:var(--r-lg); }
.tt-city-stats strong{ font-family:var(--font-display); font-size:30px; line-height:1.1; color:var(--navy-900); }
.tt-city-stats span{ font-size:14px; color:var(--ink-700); }
.tt-city-line{ margin:0 0 var(--sp-3); max-width:70ch; color:var(--ink-700); }
.tt-city-line strong{ color:var(--ink-900); font-weight:600; }
.tt-city-cta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin:var(--sp-5) 0 0; }
.tt-city-steps{ margin:0; padding-left:var(--sp-5); max-width:70ch; color:var(--ink-700); }
.tt-city-steps li{ margin-bottom:var(--sp-3); }
.tt-city-steps strong{ color:var(--ink-900); }
.tt-city-links{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); list-style:none; margin:0; padding:0; }
.tt-city-links a{ display:inline-block; padding:var(--sp-2) 0; font-weight:600; }
.tt-city-page .tt-ls-list{ margin-bottom:var(--sp-5); }
@media (max-width:767px){
  .tt-city-page .tt-sec{ padding-top:var(--sp-7); padding-bottom:var(--sp-7); }
  .tt-city-stats li{ flex-basis:100%; }
  .tt-city-stats strong{ font-size:26px; }
  .tt-city-cta .tt-btn{ flex:1 1 100%; }
}