/* Services module — only what core.css doesn't cover. Uses the site's theme variables. */

/* ------------------------------------------------------------------ service page */
.svc-hero { padding: clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 48px); background: linear-gradient(180deg, var(--primary-soft), transparent 85%); }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: start; }
.svc-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .35em; }
.svc-hero .lead { max-width: 52ch; }
.svc-facts { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.svc-facts li { display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; font-size: .92rem; }
.svc-facts .icon { color: var(--primary); }
.svc-facts strong { display: block; font-size: .98rem; line-height: 1.2; }
.svc-facts span span { display: block; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.svc-glance h2 { font-size: 1.1rem; }
.svc-glance .feature-list { margin-bottom: 0; }
.svc-onsite { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.svc-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.svc-cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.svc-cat + .svc-cat { margin-top: 48px; }
.svc-card { display: flex !important; flex-direction: column; }
.svc-card p { flex: 1; }
.svc-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.svc-card-foot .icon { color: var(--primary); }
.svc-pkg-note { font-size: .78rem; color: var(--muted); text-align: center; margin: 10px 0 0; }
.svc-qty { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; font-size: .9rem; }
.svc-qty input, .svc-qty select { width: auto; min-width: 0; flex: 1; padding: .5em .7em; }
.svc-qty label { font-weight: 600; white-space: nowrap; }
.price-card form { margin: 0; }

/* Comparison table */
.svc-compare { margin-top: 28px; }
.svc-compare table { min-width: 560px; }
.svc-compare th:not(:first-child), .svc-compare td:not(:first-child) { text-align: center; }
.svc-compare thead th { font-size: .82rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.svc-compare tbody th { font-weight: 550; background: transparent; text-transform: none; letter-spacing: 0; font-size: .93rem; color: var(--text); }
.svc-compare .yes { color: var(--ok); }
.svc-compare .no { color: var(--muted); }
.svc-compare .is-featured { background: var(--primary-soft); }

/* ------------------------------------------------------------------ project workspace */
.svc-steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: s; overflow-x: auto; }
.svc-steps li { flex: 1; min-width: 92px; position: relative; padding-top: 30px; text-align: center; font-size: .8rem; color: var(--muted); font-weight: 600; }
.svc-steps li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: var(--border); }
.svc-steps li::after { content: ""; position: absolute; top: 3px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--surface); border: 3px solid var(--border); }
.svc-steps li.done, .svc-steps li.now { color: var(--text); }
.svc-steps li.done::before, .svc-steps li.now::before { background: var(--primary); }
.svc-steps li.done::after { background: var(--primary); border-color: var(--primary); }
.svc-steps li.now::after { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.svc-files { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.svc-files a { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text); font-size: .86rem; max-width: 100%; }
.svc-files a:hover { border-color: var(--primary); color: var(--primary); }
.svc-files a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.svc-files small { color: var(--muted); }
.svc-delivery { border-left: 4px solid var(--border); }
.svc-delivery.is-submitted { border-left-color: var(--primary); }
.svc-delivery.is-accepted { border-left-color: var(--ok); }
.svc-delivery.is-revision_requested { border-left-color: var(--warn); }
.svc-delivery.is-superseded { opacity: .7; }
.svc-delivery-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.svc-milestones { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.svc-milestones li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.svc-milestones li:last-child { border-bottom: 0; }
.svc-milestones .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: .8rem; }
.svc-milestones li.is-accepted .n { background: var(--ok-soft); color: var(--ok); }
.svc-milestones li.is-paid .n, .svc-milestones li.is-delivered .n { background: var(--primary); color: var(--primary-ink); }
.msg.is-internal { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.svc-sign { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.3rem !important; }
.svc-quote-doc header { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 20px; }
.svc-quote-doc h2 { font-size: 1.15rem; margin-top: 1.6rem; }
.svc-quote-doc .table td, .svc-quote-doc .table th { vertical-align: top; }

/* ------------------------------------------------------------------ admin */
.svc-split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }

/* ------------------------------------------------------------------ admin board */
.svc-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.svc-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; min-height: 120px; }
.svc-col-head { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 4px 4px 10px; }
.svc-col .stack-sm > * + * { margin-top: 8px; }
.svc-board-card { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; text-decoration: none; color: var(--text); font-size: .88rem; }
.svc-board-card:hover { border-color: var(--primary); }
.svc-board-card strong { display: block; line-height: 1.3; margin: 2px 0 4px; }
.svc-board-card .meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .78rem; }
.svc-board-card.is-overdue { border-color: var(--bad); box-shadow: inset 3px 0 0 var(--bad); }
.svc-rows { display: grid; gap: 8px; }
.svc-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 3fr) 90px minmax(0, 1fr); }
.svc-row.ms { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
.svc-row input { padding: .55em .7em; font-size: .93rem; }
.svc-pkg-edit summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.svc-pkg-edit summary::-webkit-details-marker { display: none; }
.svc-pkg-edit[open] summary { margin-bottom: 14px; }

@media (max-width: 980px) {
  .svc-hero-grid, .svc-layout, .svc-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .svc-delivery-actions { grid-template-columns: 1fr; }
  .svc-row, .svc-row.ms { grid-template-columns: 1fr 1fr; }
  .svc-row > :first-child { grid-column: 1 / -1; }
}