/* ============================================================
   CIRRUS LAKE SOLUTIONS — Detail page component
   Shared section infrastructure for detail-page templates.
   Loaded by both service detail pages (services/*.html) and
   industry detail pages (industries/*.html).
   Sections, content blocks, and the dark "Related/Featured
   Case Study" gradient card live here. Service-specific
   content patterns (roles-grid, timeline, deliver-grid,
   tech-grid, when-list) remain in pages/service-detail.css.
   ============================================================ */

.svc-detail-section { padding: 80px 0; background: white; }
.svc-detail-section.bg-gray { background: var(--gray-50); }

.svc-detail-block {
  max-width: 760px;
  margin: 0 auto 36px;
}
.svc-detail-block:last-child { margin-bottom: 0; }
.svc-detail-block .section-heading {
  margin-top: 8px;
  margin-bottom: 18px;
}
.svc-detail-block > p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.85;
  margin-bottom: 16px;
}

/* Related / Featured case study card (dark gradient feature block) */
.related-cs {
  max-width: 760px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--primary-900), var(--primary-600));
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  position: relative;
  overflow: hidden;
}
.related-cs::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.related-cs > * { position: relative; z-index: 1; }
.related-cs-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  background: rgba(80,200,120,0.18);
  border: 1px solid rgba(80,200,120,0.3);
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.related-cs h3 {
  font-size: 1.18rem;
  font-weight: 800;
  color: white;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.related-cs p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.78;
  margin-bottom: 16px;
}
.related-cs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-light);
  transition: var(--transition-fast);
}
.related-cs-link:hover { color: white; gap: 9px; }