/* =====================================================================
   DV Soft - space tuning for /services and the 9 service pages
   (service-detail.php). Loaded only on those pages via $extraHead and
   scoped to the .sp-svc wrapper, so shared site.css / pages.css stay
   untouched. 8px rhythm:
     section padding  80 desktop / 56 tablet / 48 mobile
     head -> content  36 desktop / 28 tablet / 24 mobile
     grid gap         24 desktop / 16 mobile
   ===================================================================== */

/* ---- Section rhythm -------------------------------------------------- */
.sp-svc .band { padding: 80px 0; }
.sp-svc .section-sm { padding: 24px 0 64px; }
.sp-svc .section-head { margin-bottom: 36px; }
.sp-svc .section-head h2 { margin-bottom: 12px; }
.sp-svc .section-head.left { max-width: 760px; }
.sp-svc .mgrid { gap: 24px; }

/* ---- Heroes ---------------------------------------------------------- */
.sp-svc .page-hero { padding: 48px 0 64px; }
.sp-svc .breadcrumbs { margin-bottom: 20px; }
.sp-svc .page-hero h1 { margin-bottom: 16px; }
.sp-svc .page-hero .hero-actions { margin-top: 28px; }
.sp-svc .hero-note { margin-top: 20px; }

/* Services hub: subnav stays one tidy row (scrolls inside itself on phones). */
.sp-svc .subnav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sp-svc .subnav ul::-webkit-scrollbar { display: none; }
.sp-svc .subnav li { flex: none; }
.sp-svc .subnav a { min-height: 48px; white-space: nowrap; }

/* Data visuals carry their own content: no icon badge sitting on the data. */
.sp-svc .hero-panel.is-visual { background: #f1eaf6; }
.sp-svc .hero-panel.is-visual .icon-badge { display: none; }

/* ---- Service cards (hub + related) ---------------------------------- */
.sp-svc .mcard-body { padding: 20px 18px 14px; }
.sp-svc .mcard-title { margin-bottom: 8px; }
.sp-svc .mcard-ico { margin-right: 10px; font-size: .78em; color: var(--brand); vertical-align: .08em; }
.sp-svc .mcard-text { margin-bottom: 14px; }
/* Block (not inline-flex) so a wrapped "Explore ..." keeps its chevron on the last word. */
.sp-svc .mcard-link { display: block; }
.sp-svc .mcard-link i { margin-left: 4px; }
.sp-svc .mcard-tagline { display: block; margin-bottom: 4px; color: var(--ink); }

/* Section heads on the hub groups, "What we cover" and "Related": heading
   left, lead right (one row instead of three stacked lines). */
.sp-svc .group-head { margin-bottom: 32px; }
@media (min-width: 961px) {
  .sp-svc-list .group-head .section-head,
  .sp-svc .sp-cover .section-head,
  .sp-svc .sp-related .section-head {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 56px; align-items: end; max-width: none;
  }
  .sp-svc-list .group-head .eyebrow, .sp-svc .sp-cover .eyebrow, .sp-svc .sp-related .eyebrow { grid-column: 1; }
  .sp-svc-list .group-head h2, .sp-svc .sp-cover h2, .sp-svc .sp-related h2 { grid-column: 1; margin-bottom: 0; }
  .sp-svc-list .group-head .section-lead, .sp-svc .sp-cover .section-lead, .sp-svc .sp-related .section-lead { grid-column: 2; grid-row: 2; padding-bottom: 4px; }
}

/* ---- What we cover (detail): compact deliverable tiles -------------- */
.sp-svc .sp-tiles { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-svc .sp-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-svc .sp-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 5 items: 3 + 2 on a 6-column track, so no orphan card. */
.sp-svc .sp-tiles-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sp-svc .sp-tiles-5 > * { grid-column: span 2; }
.sp-svc .sp-tiles-5 > :nth-child(n+4) { grid-column: span 3; }
.sp-svc .sp-tiles .tile { padding: 24px; border-radius: 16px; }
.sp-svc .sp-tiles .tile-num { margin-bottom: 10px; }
.sp-svc .sp-tiles .tile h3 { font-size: clamp(1.06rem, 1rem + .25vw, 1.18rem); line-height: 1.35; margin: 0; }

/* ---- Delivered end to end: head + note left, 2x2 steps right -------- */
.sp-svc .sp-deliver { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.sp-svc .sp-deliver .section-head { margin-bottom: 24px; }
.sp-svc .sp-deliver .support-note { margin-top: 0; padding: 18px 20px; align-items: flex-start; }
.sp-svc .sp-deliver .support-note p { font-size: .98rem; }
.sp-svc .sp-deliver .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sp-svc .sp-deliver .step { padding: 22px 24px; }
.sp-svc .sp-deliver .step-num { margin-bottom: 14px; }
.sp-svc .sp-deliver .step h3 { margin-top: 0; }

/* ---- Overview (detail) ---------------------------------------------- */
.sp-svc .feature-split { gap: 56px; }
.sp-svc .feature-copy h2 { margin-bottom: 16px; }
.sp-svc .overview-note { margin-top: 20px; }
.sp-svc .outcome-head { margin-bottom: 16px; }
.sp-svc .outcome-cta { margin-top: 20px; }

/* ---- Products band (hub) -------------------------------------------- */
.sp-svc .support-band { gap: 48px; }
.sp-svc .support-band .hero-actions { margin-top: 24px; }
.sp-svc .svc-product-list { gap: 10px; }

/* =====================================================================
   Tablet (<= 1024)
   ===================================================================== */
@media (max-width: 1024px) {
  .sp-svc .band { padding: 56px 0; }
  .sp-svc .section-sm { padding: 16px 0 56px; }
  .sp-svc .section-head { margin-bottom: 28px; }
  .sp-svc .group-head { margin-bottom: 28px; }
  .sp-svc .page-hero { padding: 40px 0 48px; }
  .sp-svc .feature-split { gap: 40px; }
}

/* <= 960: split hero stacks (pages.css) - keep its media panel from towering;
   delivery and tiles drop to single / two columns. */
@media (max-width: 960px) {
  /* Delivery stacks: heading, steps, then the in-house note as a summary. */
  .sp-svc .sp-deliver { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .sp-svc .sp-deliver-head { display: contents; }
  .sp-svc .sp-deliver .section-head { order: 1; margin-bottom: 28px; }
  .sp-svc .sp-deliver .steps { order: 2; }
  .sp-svc .sp-deliver .support-note { order: 3; margin-top: 16px; }

  .sp-svc .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-svc .sp-tiles-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .sp-svc .ms-hero-split .hero-panel { margin-top: 32px; }
  .sp-svc .ms-hero-split .hero-panel img { aspect-ratio: 2 / 1; }
  .sp-svc .support-band { gap: 32px; }
}

/* 641-960: 3-up grids would leave an orphan in a 2-col grid. Use one
   column of horizontal cards (media left, copy right) instead. */
@media (min-width: 641px) and (max-width: 960px) {
  .sp-svc .mgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sp-svc .mgrid .mcard { flex-direction: row; align-items: stretch; }
  .sp-svc .mgrid .mcard-media { flex: 0 0 40%; aspect-ratio: auto; min-height: 196px; }
  .sp-svc .mgrid .mcard-media img { position: absolute; inset: 0; }
  .sp-svc .mgrid .mcard-body { padding: 18px 20px 14px 24px; justify-content: center; }
}

/* =====================================================================
   Mobile (<= 640)
   ===================================================================== */
@media (max-width: 640px) {
  .sp-svc .band { padding: 48px 0; }
  .sp-svc .section-sm { padding: 8px 0 48px; }
  .sp-svc .section-head { margin-bottom: 24px; }
  .sp-svc .section-head h2 { margin-bottom: 10px; }
  .sp-svc .group-head { margin-bottom: 24px; }
  .sp-svc .mgrid { gap: 16px; }
  .sp-svc .page-hero { padding: 28px 0 40px; }
  .sp-svc .breadcrumbs { margin-bottom: 16px; }
  .sp-svc .page-hero h1 { margin-bottom: 12px; }
  .sp-svc .page-hero .hero-actions { margin-top: 24px; }
  .sp-svc .ms-hero-split .hero-panel { margin-top: 28px; }
  .sp-svc .ms-hero-split .hero-panel img { aspect-ratio: 16 / 10; }
  .sp-svc .hero-panel .icon-badge.solid { left: 12px; bottom: 12px; width: 42px; height: 42px; font-size: 1.05rem; }

  .sp-svc .mcard-body { padding: 16px 14px 10px; }
  .sp-svc .feature-split { gap: 32px; }
  .sp-svc .outcome-grid { gap: 8px; }
  .sp-svc .outcome { padding: 12px 14px; gap: 12px; align-items: center; }
  .sp-svc .outcome i { width: 28px; height: 28px; font-size: .75rem; }
  .sp-svc .outcome span { padding-top: 0; }

  /* Deliverable tiles: number beside the title, one column. */
  .sp-svc .sp-tiles, .sp-svc .sp-tiles-5 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-svc .sp-tiles-5 > *, .sp-svc .sp-tiles-5 > :nth-child(n+4) { grid-column: auto; }
  .sp-svc .sp-tiles .tile { flex-direction: row; align-items: baseline; gap: 14px; padding: 16px 18px; }
  .sp-svc .sp-tiles .tile-num { margin: 0; flex: none; }

  /* Steps: number beside the copy. */
  .sp-svc .sp-deliver .steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-svc .sp-deliver .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; }
  .sp-svc .sp-deliver .step-num { grid-row: 1 / span 2; margin: 0; align-self: start; }
  .sp-svc .sp-deliver .step h3 { margin-bottom: 4px; }
  .sp-svc .sp-deliver .support-note { flex-direction: row; gap: 14px; padding: 16px; }
  .sp-svc .sp-deliver .support-note .icon-badge { display: none; }

  /* Related services: compact horizontal cards (secondary content). */
  .sp-related .mcard { flex-direction: row; align-items: stretch; }
  .sp-related .mcard-media { flex: 0 0 36%; aspect-ratio: auto; min-height: 128px; }
  .sp-related .mcard-media img { position: absolute; inset: 0; }
  .sp-related .mcard-media.is-visual { background: #f1eaf6; }
  .sp-related .mcard-media.is-visual img { object-fit: contain; } /* show the whole dashboard, not a crop */
  .sp-related .mcard-body { padding: 10px 6px 6px 14px; justify-content: center; }
  .sp-related .mcard-title { font-size: 1.1rem; margin-bottom: 4px; }
  .sp-related .mcard-text { font-size: .92rem; margin-bottom: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  .sp-related .mcard-text { margin-bottom: 0; }
  .sp-related .mcard-link { display: none; } /* the whole card is the link */

  .sp-svc .support-band .hero-actions .btn,
  .sp-svc .cta-band .cta-actions .btn { flex: 1 1 140px; width: auto; justify-content: center; padding: 12px 14px; }
  .sp-svc .cta-band .cta-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
  .sp-svc .svc-product-list a { padding: 12px 14px; gap: 12px; }
  .sp-svc .svc-product-list .icon-badge { width: 38px; height: 38px; font-size: .95rem; }
}