/* KStell · service page styles (SEO layer) — extends styles.css tokens */

/* Service hero — compact, keyword-led, photo band */
.svchero { position: relative; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; }
.svchero__media { position: absolute; inset: -6% 0; z-index: 0; }
.svchero__media img { width: 100%; height: 100%; object-fit: cover; }
.svchero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, oklch(15% 0.03 300 / 0.55) 0%, transparent 30%, oklch(15% 0.03 300 / 0.5) 62%, var(--color-paper) 100%),
    linear-gradient(78deg, oklch(15% 0.03 300 / 0.82) 0%, oklch(15% 0.03 300 / 0.3) 46%, transparent 70%);
}
.svchero__content { position: relative; z-index: 1; width: 100%; padding-block: var(--space-3xl) var(--space-2xl); }
.svchero__title {
  font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em;
  word-spacing: 0.06em; font-size: var(--text-display); max-width: 18ch; margin: 0 0 var(--space-md);
  overflow-wrap: anywhere; min-width: 0; text-wrap: balance;
}
.svchero__title .neon { color: var(--color-accent); }
.svchero__sub { color: var(--color-ink-2); max-width: 52ch; font-size: var(--text-md); margin: 0 0 var(--space-xl); }
.svchero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* Breadcrumb */
.crumbs { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-md); }
.crumbs a { color: var(--color-ink-2); }
.crumbs a:hover { color: var(--color-accent); }

/* Intro / educational content */
.svcbody { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.svcbody__prose p { color: var(--color-ink-2); margin: 0 0 var(--space-md); max-width: 62ch; }
.svcbody__prose h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-sm); word-spacing: 0.06em; }
.svcbody__aside { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-lg); position: sticky; top: 90px; }
.svcbody__aside h4 { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-accent); margin: 0 0 var(--space-md); }
.spec { display: grid; gap: var(--space-sm); }
.spec div { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule-2); }
.spec div:last-child { border-bottom: 0; }
.spec dt { color: var(--color-muted); }
.spec b { color: var(--color-ink); font-weight: 500; }

/* Feature chips (use cases) */
.uses { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.uses span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; padding: 0.4rem 0.8rem; border-radius: var(--radius-pill); background: var(--color-paper-2); border: 1px solid var(--color-rule); color: var(--color-ink-2); }

/* Service area line */
.area { text-align: center; padding-block: var(--space-2xl); border-block: 1px solid var(--color-rule); background: var(--color-paper-2); }
.area__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-muted); margin-bottom: var(--space-sm); }
.area__cities { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); word-spacing: 0.06em; }
.area__cities .neon { color: var(--color-accent); }

/* Related services */
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.related a { display: block; padding: var(--space-lg); background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-md); transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.related a:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.related b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); margin-bottom: 0.2rem; word-spacing: 0.06em; }
.related span { color: var(--color-muted); font-size: var(--text-sm); }
.related a::after { content: " →"; color: var(--color-accent); }

/* Gallery strip */
.svcgallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.svcgallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-rule); aspect-ratio: 4/3; position: relative; }
.svcgallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.svcgallery figure:hover img { transform: scale(1.05); }
.svcgallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); background: linear-gradient(0deg, oklch(15% 0.03 300 / 0.9), transparent); }

@media (max-width: 60rem) {
  .svcbody { grid-template-columns: 1fr; }
  .svcbody__aside { position: static; }
  .related, .svcgallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .svchero__title { font-size: var(--text-display-s); }
  .related, .svcgallery { grid-template-columns: 1fr; }
}