/* ============================================================
   SERVICE PAGES — Shared Styles
   Reuses index.css vars and components
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&display=swap');

/* Hero Banner */
.svc-hero {
  background: var(--gradient-hero); color: #fff;
  padding: 140px 0 80px; position: relative; overflow: hidden;
}
.svc-hero::before {
  content: ''; position: absolute; inset: 0;
  background: url('../hero-bg.png') center/cover no-repeat;
  opacity: 0.15; z-index: 0;
}
.svc-hero .container { position: relative; z-index: 1; }
.svc-hero .breadcrumb {
  font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 16px;
}
.svc-hero .breadcrumb a { color: var(--gold-light); text-decoration: none; }
.svc-hero .breadcrumb a:hover { color: #fff; }
.svc-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 5vw, 52px); font-weight: 900;
  line-height: 1.12; margin-bottom: 16px;
}
.svc-hero h1 .accent { color: var(--gold-light); }
.svc-hero .subtitle {
  font-size: 18px; color: rgba(255,255,255,0.75); max-width: 600px;
  line-height: 1.7; margin-bottom: 28px;
}
.svc-hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Service Content Layout */
.svc-content { padding: 80px 0; background: var(--white); }
.svc-grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 60px; align-items: start;
}
.svc-main { min-width: 0; }

/* Service Detail Sections */
.svc-section { margin-bottom: 48px; }
.svc-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 800; color: var(--navy);
  margin-bottom: 16px;
}
.svc-section p { font-size: 16px; color: var(--text-light); line-height: 1.8; margin-bottom: 16px; }
.svc-section ul { padding-left: 20px; margin-bottom: 16px; }
.svc-section li {
  font-size: 15px; color: var(--text-light); line-height: 1.8;
  margin-bottom: 8px;
}
.svc-section li strong { color: var(--navy); }

/* Service Image */
.svc-image {
  border-radius: var(--r-lg); overflow: hidden;
  margin-bottom: 32px; box-shadow: 0 12px 40px var(--shadow);
}
.svc-image img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; }

/* Sidebar */
.svc-sidebar { position: sticky; top: 100px; }
.svc-sidebar-card {
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 32px; margin-bottom: 24px;
}
.svc-sidebar-card h3 {
  font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 16px;
}
.svc-sidebar-card p {
  font-size: 14px; color: var(--text-light); line-height: 1.7; margin-bottom: 16px;
}
.svc-sidebar-card .btn { width: 100%; text-align: center; }

/* Service List in Sidebar */
.svc-nav-list { list-style: none; padding: 0; }
.svc-nav-list li { border-bottom: 1px solid var(--border); }
.svc-nav-list li:last-child { border-bottom: none; }
.svc-nav-list a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; font-size: 14px; font-weight: 500;
  color: var(--text); text-decoration: none; transition: color 0.2s ease;
}
.svc-nav-list a:hover { color: var(--red); }
.svc-nav-list a.active { color: var(--red); font-weight: 700; }

/* FAQ Section */
.svc-faq { background: var(--cream); padding: 80px 0; }
.svc-faq-item {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 24px 28px; margin-bottom: 16px;
}
.svc-faq-item h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.svc-faq-item p { font-size: 14px; color: var(--text-light); line-height: 1.7; }

/* CTA Banner */
.svc-cta-banner {
  background: var(--gradient-hero); padding: 80px 0; text-align: center; color: #fff;
}
.svc-cta-banner h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin-bottom: 16px;
}
.svc-cta-banner p {
  font-size: 17px; color: rgba(255,255,255,0.7); max-width: 560px;
  margin: 0 auto 32px; line-height: 1.7;
}
.svc-cta-banner .btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Related Articles */
.svc-related { margin-top: 48px; }
.svc-related h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 20px; }
.svc-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-related-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit;
  transition: all 0.3s ease;
}
.svc-related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px var(--shadow); }
.svc-related-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.svc-related-card .card-body { padding: 16px; }
.svc-related-card h4 { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.svc-related-card p { font-size: 12px; color: var(--text-light); line-height: 1.5; }

/* Services Hub Grid */
.svc-hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px; margin-top: 48px;
}
.svc-hub-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  transition: all 0.3s ease; text-decoration: none; color: inherit;
}
.svc-hub-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px var(--shadow); }
.svc-hub-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.svc-hub-card .card-body { padding: 28px; }
.svc-hub-card h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.svc-hub-card p { font-size: 14px; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }
.svc-hub-card .learn-more {
  font-size: 13px; font-weight: 600; color: var(--red);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-sidebar { position: static; }
  .svc-related-grid { grid-template-columns: 1fr; }
  .svc-hub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .svc-hero { padding: 110px 0 60px; }
  .svc-hero h1 { font-size: clamp(26px, 6vw, 36px); }
  .svc-hero .subtitle { font-size: 15px; }
  .svc-content { padding: 56px 0; }
  .svc-section h2 { font-size: 24px; }
  .svc-section p { font-size: 15px; }
  .svc-faq { padding: 56px 0; }
  .svc-cta-banner { padding: 56px 0; }
  .svc-sidebar-card { padding: 24px; }
}
@media (max-width: 480px) {
  .svc-hero { padding: 90px 0 48px; }
  .svc-hero h1 { font-size: 24px; }
  .svc-hero .hero-cta { flex-direction: column; }
  .svc-hero .hero-cta .btn { width: 100%; text-align: center; }
  .svc-content { padding: 40px 0; }
  .svc-section h2 { font-size: 22px; }
  .svc-sidebar-card { padding: 20px; }
  .svc-faq-item { padding: 20px; }
}