/* ============================================================
   Smart Coaching Centre — Services Page Styles
   ============================================================ */

/* ── Pricing Note ──────────────────────────────────────────── */
.pricing-note {
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(26,75,140,0.06);
  border: 1px solid rgba(26,75,140,0.2);
  border-radius: var(--radius);
  padding: 24px 28px;
  flex-wrap: wrap;
}
.pn-icon {
  font-size: 2rem;
  color: var(--primary);
  flex-shrink: 0;
}
.pricing-note h4 { margin-bottom: 4px; }
.pricing-note p  { font-size:0.92rem; color:var(--text-muted); flex:1; margin:0; }
.pn-actions { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }

/* ── Service Detail Layout ─────────────────────────────────── */
.svc-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.svc-reverse { direction: rtl; }
.svc-reverse > * { direction: ltr; }

.svc-desc {
  color: var(--text-body);
  margin-bottom: 20px;
  font-size: 0.98rem;
  line-height: 1.8;
}

/* Meta Grid */
.svc-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}
.svc-meta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.svc-meta-item > i {
  font-size: 1.2rem;
  color: var(--primary);
  flex-shrink: 0;
  width: 24px;
}
.svc-meta-item div { display:flex; flex-direction:column; gap:2px; }
.svc-meta-item strong { font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.svc-meta-item span  { font-size:0.9rem; color:var(--text-dark); font-weight:600; }

/* Benefits List */
.svc-benefits { margin-bottom: 32px; }
.svc-benefits h4 { margin-bottom: 14px; }
.svc-benefits ul { display:flex; flex-direction:column; gap:10px; }
.svc-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.93rem;
  color: var(--text-body);
}
.svc-benefits li i { color:var(--green); flex-shrink:0; }

/* Service Visual Panel */
.svc-visual {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.svc-card-icon {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  box-shadow: var(--shadow-md);
}
.svc-card-icon.icon-blue   { background:linear-gradient(135deg, rgba(26,75,140,0.12), rgba(26,75,140,0.06)); color:var(--primary); }
.svc-card-icon.icon-orange { background:linear-gradient(135deg, rgba(232,76,30,0.1), rgba(232,76,30,0.04)); color:var(--accent); }
.svc-card-icon.icon-gold   { background:linear-gradient(135deg, rgba(245,197,24,0.15), rgba(245,197,24,0.06)); color:var(--gold-dark); }
.svc-card-icon.icon-sky    { background:linear-gradient(135deg, rgba(33,150,243,0.12), rgba(33,150,243,0.04)); color:var(--sky); }
.svc-card-icon.icon-green  { background:linear-gradient(135deg, rgba(61,181,74,0.1), rgba(61,181,74,0.04)); color:var(--green); }

/* Service Image (replaces icon placeholder) */
.svc-img-wrap {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-light);
}
.svc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.svc-img-wrap:hover .svc-img {
  transform: scale(1.04);
}

.svc-quote {
  background: var(--bg-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 22px;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-body);
  line-height: 1.7;
}

/* Home tuition cities */
.home-cities-list {
  display: flex; flex-direction:column; gap:10px;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.hcl-item {
  display: flex; align-items:center; gap:10px;
  font-size: 0.92rem; font-weight:500; color:var(--text-dark);
}
.hcl-item i { color:var(--accent); }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:900px) {
  .svc-detail-grid { grid-template-columns:1fr; gap:40px; }
  .svc-reverse     { direction:ltr; }
  .svc-visual      { position:static; }
  .svc-meta-grid   { grid-template-columns:1fr 1fr; }
}
@media (max-width:540px) {
  .svc-meta-grid { grid-template-columns:1fr; }
  .pricing-note  { flex-direction:column; }
  .pn-actions    { width:100%; }
}