/* Scoped layout for Services (centered) and About (justified)
   Add this file and include it after your main stylesheet, or copy the rules into your main CSS.
   This CSS expects the body to have either .page-services (Services) or .page-about (About).
*/

/* ---------- SERVICES: everything centered ---------- */
body.page-services .services {
  text-align: center !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings remain centered */
body.page-services .services h1,
body.page-services .services h2,
body.page-services .services h3 {
  text-align: center !important;
}

/* Services grid centered and cards centered */
body.page-services .services .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  justify-items: center;
  justify-content: center;
  align-items: start;
  margin: 0 auto;
  width: min(1200px, 96%);
  box-sizing: border-box;
}
body.page-services .services .service-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
body.page-services .services .service-card h3,
body.page-services .services .service-card p {
  text-align: center;
  margin: 0.35rem 0;
}

/* Make sure lists inside Services are centered too */
body.page-services .services ul,
body.page-services .services ul li {
  text-align: center;
}

/* ---------- ABOUT: block centered; body text & bios justified ---------- */
body.page-about .services {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #123;
}

/* Keep About headings centered */
body.page-about .services h1,
body.page-about .services h2,
body.page-about .services h3 {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Justify main content blocks and paragraphs inside About */
body.page-about .services > div,
body.page-about .services p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  line-height: 1.65;
  margin-bottom: 1rem;
  word-break: break-word;
}

/* Team member blocks: keep each block centered on the page but justify the inner bio text
   (bio can be plain text or wrapped in a .bio element; selector handles both) */
body.page-about .services .team-member,
body.page-about .services > div /* fallback for unwrapped team divs */ {
  max-width: 60rem;
  margin: 0.75rem auto;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
  text-align: center; /* keeps name / images centered */
}

/* Left/right-even justification for bio text */
body.page-about .services .team-member .bio,
body.page-about .services .team-member,
body.page-about .services .team-member p,
body.page-about .services > div p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  max-width: 48rem;
  margin: 0.5rem auto 0;
  line-height: 1.65;
}

/* Keep team member name/role centered */
body.page-about .services .team-member .name,
body.page-about .services .team-member .role,
body.page-about .services b {
  display: block;
  text-align: center;
}

/* Lists inside About: keep markers and left-indent for readability (short list items look odd when justified) */
body.page-about .services ul {
  margin-left: 1.25rem;
  margin-bottom: 1rem;
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  body.page-services .services .services-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  body.page-about .services .team-member { max-width: 44rem; }
  body.page-about .services .team-member .bio { max-width: 36rem; }
}
@media (max-width: 480px) {
  body.page-services .services .services-grid { grid-template-columns: 1fr; width: calc(100% - 32px); }
  body.page-about { padding-left: 12px; padding-right: 12px; }
  body.page-about .services .team-member { max-width: 92%; }
  body.page-about .services .team-member .bio { max-width: 100%; }
}