/* ============================================================
   CIRRUS LAKE SOLUTIONS — Service detail page template
   Used by all 6 service detail pages (staff augmentation, cloud
   engineering, application development, systems integration,
   legacy modernization, project management). Sections: hero,
   problem, approach, deliverables, technologies, related case
   study, when-this-fits.

   Section infrastructure (.svc-detail-section, .svc-detail-block)
   and the .related-cs* dark gradient feature card now live in
   css/components/detail-page.css — they are shared between service
   detail and industry detail pages.
   ============================================================ */

/* Roles grid (staff augmentation) */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.role-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  transition: var(--transition);
}
.role-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.role-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 8px;
}
.role-card p {
  font-size: 0.86rem;
  color: var(--gray-500);
  line-height: 1.7;
}

/* Onboarding timeline */
.timeline {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  padding-left: 24px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 11px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--primary), var(--accent));
}
.timeline-item {
  position: relative;
  padding-bottom: 28px;
  padding-left: 32px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
  position: absolute;
  left: -16px; top: 0;
  background: white;
  border: 2px solid var(--accent);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.timeline-body { padding-top: 4px; }
.timeline-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 6px 0 6px 84px;
}
.timeline-body p {
  font-size: 0.9rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin-left: 84px;
}

/* What we deliver — bullet grid */
.deliver-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
  max-width: 880px;
  margin: 0 auto;
}
.deliver-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
}
.deliver-marker {
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 9px;
}
.deliver-item p {
  font-size: 0.92rem;
  color: var(--gray-600);
  line-height: 1.7;
  margin: 0;
}
.deliver-item p strong { color: var(--gray-900); font-weight: 700; }

/* Technologies grid */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
}
.tech-item {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.tech-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-500);
  margin-bottom: 8px;
}
.tech-item p {
  font-size: 0.86rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
}

/* When this fits — numbered list */
.when-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.when-item {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 22px 26px;
}
.when-num {
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--primary-500);
  letter-spacing: 0.02em;
  line-height: 1;
}
.when-item h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.when-item p {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.7;
  margin: 0;
}

/* ===== RESPONSIVE — SERVICE DETAIL ===== */
@media (max-width: 1024px) {
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .roles-grid { grid-template-columns: 1fr; }
  .deliver-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tech-grid { grid-template-columns: 1fr; }
  .timeline { padding-left: 0; }
  .timeline::before { left: 7px; }
  .timeline-item { padding-left: 32px; }
  .timeline-marker { position: static; display: inline-block; margin-bottom: 6px; }
  .timeline-body h3, .timeline-body p { margin-left: 0; }
}