/* =============================================================
   PEOPLECAP — service-detail.css
   Shared styles for all four individual service pages
   ============================================================= */


/* =====================
   CONTENT TWO-COLUMN SPLIT
   (text left, feature box right)
   ===================== */

.sd-content {
  padding: 48px 0;
}

@media (min-width: 769px) {
  .sd-content { padding: 64px 0; }
}

.sd-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 769px) {
  .sd-split {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

.sd-section-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: var(--space-lg);
}

@media (min-width: 769px) {
  .sd-section-title { font-size: 24px; }
}

.sd-split-text p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.sd-split-text p:last-child { margin-bottom: 0; }

/* Feature box */
.sd-feature-box {
  background-color: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid rgba(15, 110, 86, 0.12);
}

.sd-feature-box-heading {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-md);
}

.sd-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.sd-feature-list li {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.5;
  padding-left: 20px;
  position: relative;
}

.sd-feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
}


/* =====================
   ROLES / TAG CLOUD SECTION
   ===================== */

.sd-roles {
  padding: 48px 0;
}

@media (min-width: 769px) {
  .sd-roles { padding: 64px 0; }
}

.sd-roles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 769px) {
  .sd-roles-grid { grid-template-columns: repeat(2, 1fr); }
}

.sd-roles-group-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}

.sd-tags-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* tags use .tag.tag-teal from components.css — override text-transform for readability */
.sd-tags-list .tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
  padding: 5px 12px;
  white-space: normal;
  line-height: 1.4;
}


/* =====================
   PROCESS STEPS
   ===================== */

.sd-process {
  padding: 48px 0;
}

@media (min-width: 769px) {
  .sd-process { padding: 64px 0; }
}

.sd-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
}

@media (min-width: 769px) {
  .sd-steps {
    flex-direction: row;
    gap: 0;
  }
}

/* Connecting line on desktop */
@media (min-width: 769px) {
  .sd-steps::before {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(20px + 1px);
    right: calc(20px + 1px);
    height: 1px;
    background-color: var(--color-border);
    z-index: 0;
  }
}

.sd-step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

@media (min-width: 769px) {
  .sd-step {
    flex: 1;
    flex-direction: column;
    gap: var(--space-md);
    padding: 0 var(--space-lg);
  }

  .sd-step:first-child { padding-left: 0; }
  .sd-step:last-child  { padding-right: 0; }
}

.sd-step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sd-step-content {
  flex: 1;
}

@media (min-width: 769px) {
  .sd-step-content { margin-top: var(--space-md); }
}

.sd-step-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.sd-step-body {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}


/* =====================
   RELATED SERVICES
   ===================== */

.sd-related {
  padding: 48px 0;
}

@media (min-width: 769px) {
  .sd-related { padding: 64px 0; }
}

.sd-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 769px) {
  .sd-related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Uses .related-service-card from components.css */


/* =====================
   INLINE PROCESS (alternate: vertical with left border)
   Used on fractional HR / hiring effectiveness pages
   ===================== */

.sd-process-vertical {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 2px solid var(--color-primary-light);
  padding-left: var(--space-xl);
}

.sd-process-vertical .sd-step {
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-xl);
  position: relative;
}

.sd-process-vertical .sd-step:last-child {
  padding-bottom: 0;
}

.sd-process-vertical .sd-step-number {
  position: absolute;
  left: calc(-1 * var(--space-xl) - 20px);
  top: 0;
  width: 38px;
  height: 38px;
  font-size: 13px;
}

.sd-process-vertical .sd-step-title {
  font-size: 16px;
}

.sd-process-vertical .sd-step-body {
  font-size: 14px;
}


/* =====================
   FRACTIONAL HR — WHO THIS IS FOR
   ===================== */

.fhr-who-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 769px) {
  .fhr-who-layout {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* Reuses .sd-split-text p styles */
.fhr-who-text p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.fhr-who-text p:last-child { margin-bottom: 0; }

/* Signal "fit" box */
.fhr-signal-box {
  background-color: var(--color-stone);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
}

.fhr-signal-heading {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  letter-spacing: 0;
}

.fhr-signal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.fhr-signal-list li {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}

.fhr-signal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* =====================
   FRACTIONAL HR — SCOPE COVERAGE
   ===================== */

.fhr-scope {
  padding: 48px 0;
}

@media (min-width: 769px) {
  .fhr-scope { padding: 64px 0; }
}

.fhr-scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

@media (min-width: 769px) {
  .fhr-scope-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2xl); }
}

.fhr-scope-col {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fhr-scope-col li {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  padding: var(--space-sm) 0 var(--space-sm) 20px;
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.fhr-scope-col li:first-child { border-top: 1px solid var(--color-border); }

.fhr-scope-col li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.fhr-scope-note {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border-md);
  font-style: italic;
}


/* =====================
   TALENT INTELLIGENCE — PROSE + FEATURE GRID
   ===================== */

/* Full-width prose section (no split) */
.ti-prose-section {
  max-width: 760px;
}

.ti-prose-section p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.ti-prose-section p:last-child { margin-bottom: 0; }

/* Delivers 2x2 grid — uses .grid-2 from global.css */
.ti-delivers {
  padding: 48px 0;
}

@media (min-width: 769px) {
  .ti-delivers { padding: 64px 0; }
}

/* "When this is most useful" list — extends .content-list */
.ti-when-section {
  max-width: 680px;
}

.ti-when-list {
  margin-top: var(--space-lg);
}

.ti-when-list li {
  font-size: 14px;
  line-height: 1.7;
}


/* =====================
   HIRING EFFECTIVENESS — FEE SECTION
   ===================== */

.he-fee-section {
  max-width: 680px;
}

.he-fee-section p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

.he-fee-section p:last-child { margin-bottom: 0; }


/* =====================
   SCOPE / COVERAGE LIST
   Used on fractional HR page
   ===================== */

.sd-scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 481px) {
  .sd-scope-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
  .sd-scope-grid { grid-template-columns: repeat(3, 1fr); }
}

.sd-scope-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
}

.sd-scope-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 6px;
}

.sd-scope-item span {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}