/* ==========================================================================
   service.css — pages built in the admin (service.php + partials/service-section.php).
   Everything else comes from site.css; this only covers what a data-driven
   page needs: a heading-beside-text layout, and grids that adapt to however
   many cards or steps the client adds.
   ========================================================================== */

/* Draft / preview notice for signed-in editors */
.svc-preview-note { position: relative; z-index: 3; padding: 12px 16px; text-align: center; font-size: 14.5px; font-weight: 600; color: #78350F; background: #FEF3C7; border-bottom: 1px solid #FCD34D; }
.svc-preview-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Centered intros */
.section-head--center .lead { margin-left: auto; margin-right: auto; }

/* Heading beside long text: the heading column stays in view while reading */
.svc-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.svc-text > *, .svc-faq > *, .split > * { min-width: 0; }
.svc-text-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.svc-text-head h2 { margin-bottom: 0; }
.svc-text-head .lead { margin-top: 16px; }
.svc-text-head .link-arrow { margin-top: 24px; }
.svc-text .prose > :first-child, .split .prose > :first-child { margin-top: 0; }
.svc-text .check-list { margin: 0; }
.svc-after { margin-top: 28px; }
.svc-narrow { max-width: 860px; }
.split .prose { margin-top: 8px; }

/* Rich-text tables keep their own width and scroll on small screens */
.prose.rich { max-width: 72ch; }
.prose.rich .table-wrap { margin: 1.4em 0; border-radius: 18px; }
.prose.rich .table-wrap table { margin: 0; min-width: 520px; }

/* Cards */
.svc-cards--1 { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.svc-card-link { margin-top: 18px; }

/* Process: the column count follows the number of steps */
@media (min-width: 768px) {
  .svc-process--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
  .svc-process--3 { grid-template-columns: repeat(3, 1fr); }
  .svc-process--5 { grid-template-columns: repeat(5, 1fr); gap: 22px; }
  .svc-process--5 .step h3 { font-size: 1.15rem; }
  .svc-process--wrap { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .svc-process--wrap::before, .svc-process--wrap .process-fill { display: none; }
}
@media (min-width: 768px) and (max-width: 1180px) {
  .svc-process--5 { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .svc-process--5::before, .svc-process--5 .process-fill { display: none; }
}

/* FAQ beside its heading */
.svc-faq { align-items: start; }
.svc-faq .faq { max-width: none; margin: 0; }

/* Gallery photos here are plain figures (no lightbox on these pages) */
.svc-photos .m-item { cursor: default; }

@media (max-width: 1024px) {
  .svc-text { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .svc-text-head { position: static; }
}

/* site.css resets ul but not ol: keep the breadcrumb unnumbered (remove once fixed globally) */
.crumbs { list-style: none; padding: 0; }