/* =============================================
   Chysio — Services page (services.html) specific styles
   Shared header/footer/base styles live in common.css
   ============================================= */

/* ---------- Full services list ---------- */
.services-list{ background:var(--bg); }
.service-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:40px;
}
.service-detail + .service-detail{ margin-top:28px; }
.service-detail.reverse .service-detail-visual{ order:2; }
.service-detail-icon{
  width:56px; height:56px;
  border-radius:16px;
  background:var(--mint-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem;
  margin-bottom:16px;
}
.service-detail-body h3{ font-size:1.5rem; }
.service-meta{
  display:flex; gap:24px; flex-wrap:wrap;
  margin:18px 0 22px;
  font-size:.88rem; font-weight:600; color:var(--pine);
}
.service-meta span{ display:flex; align-items:center; gap:6px; }

/* ---------- Process ---------- */
.process{ background:var(--white); }

/* ---------- Pricing note ---------- */
.pricing-note{ background:var(--mint); }
.pricing-note .container{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.pricing-note p{ margin:0; max-width:480px; color:var(--pine-2); }

/* =============================================
   Responsive — Tablet
   ============================================= */
@media (max-width: 1024px){
  .service-detail{ grid-template-columns:1fr; padding:28px; }
  .service-detail.reverse .service-detail-visual{ order:0; }
  .step-grid{ grid-template-columns:repeat(2,1fr); }
}

/* =============================================
   Responsive — Mobile
   ============================================= */
@media (max-width: 640px){
  .service-detail{ padding:22px; }
  .step-grid{ grid-template-columns:1fr 1fr; }
  .pricing-note .container{ text-align:center; justify-content:center; }
  .pricing-note p{ margin-left:auto; margin-right:auto; }
}