/* Services — ported from geastack.com (src/views/Services.css + TargetPage.css
   page padding + src/components/ServiceVisual.css). A "foundations" grid: an
   intro as the first cell, soft icon-cards, and one full-width brand-accent
   card. All colours come from the shared tokens, so it themes light & dark. */

/* page padding (from TargetPage.css, scoped to this page) */
.target-page.services {
  padding: 48px 0 var(--space-section-md);
}
@media (max-width: 720px) {
  .target-page.services { padding: 40px 0 80px; }
}

/* ── the grid ─────────────────────────────────────────────── */
.services .svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 8px;
}
@media (max-width: 860px) {
  .services .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .services .svc-grid { grid-template-columns: 1fr; }
}

/* intro — text, no card background */
.services .svc-intro {
  display: flex;
  flex-direction: column;
  padding: 6px 6px 0 2px;
}
.services .svc-intro .eyebrow { margin-bottom: 14px; }
.services .svc-intro-title {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin-bottom: 14px;
}
.services .svc-intro-sub {
  font-size: 15.5px;
  line-height: var(--lh-base);
  color: var(--text-muted);
  max-width: 34ch;
  margin-bottom: 20px;
}
.services .svc-intro .svc-pill { align-self: flex-start; }

/* cards — an SVG vignette header, copy below. Every vignette is the same
   fixed height, so the titles beneath them line up across the grid. */
.services .svc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
}
.services .svc-card-viz {
  height: 176px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-hairline);
  background:
    radial-gradient(120% 130% at 50% 0%, var(--accent-primary-10), transparent 70%),
    var(--surface-1);
}
.services .svc-card-viz .svcv,
.services .svc-card-viz .svcv-svg { width: 100%; height: 100%; }
/* faint indigo "blueprint" so the pattern reads on the light card */
.services .svc-card-viz .svcv-pat-stroke { stroke: var(--accent-primary); opacity: 0.24; }
.services .svc-card-viz .svcv-pat-fill { fill: var(--accent-primary); opacity: 0.24; }
.services .svc-card-viz .svcv-corner { stroke: var(--accent-primary); opacity: 0.3; }

.services .svc-card-text { padding: 20px; }
.services .svc-card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin-bottom: 12px;
}
.services .svc-card-body {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
  max-width: 34ch;
}

/* full-width brand-accent card (closes the grid) — vignette left, copy right */
.services .svc-card.is-accent {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.services .svc-card.is-accent .svc-card-viz {
  flex: 0 0 220px;
  height: auto;
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}
.services .svc-card.is-accent .svc-card-viz .svcv-pat-stroke,
.services .svc-card.is-accent .svc-card-viz .svcv-corner { stroke: #fff; opacity: 0.3; }
.services .svc-card.is-accent .svc-card-viz .svcv-pat-fill { fill: #fff; opacity: 0.3; }
.services .svc-card.is-accent .svc-card-viz .svcv-acc-stroke,
.services .svc-card.is-accent .svc-card-viz .svcv-mint-stroke { stroke: #fff; opacity: 0.7; }
.services .svc-card.is-accent .svc-card-viz .svcv-acc-fill,
.services .svc-card.is-accent .svc-card-viz .svcv-mint-fill { fill: #fff; opacity: 0.7; }
.services .svc-card.is-accent .svc-card-text { align-self: center; padding: 26px 32px; }
.services .svc-card.is-accent .svc-card-title { color: #fff; }
.services .svc-card.is-accent .svc-card-body { color: rgba(255, 255, 255, 0.86); max-width: 70ch; }
@media (max-width: 560px) {
  .services .svc-card.is-accent { flex-direction: column; }
  .services .svc-card.is-accent .svc-card-viz {
    flex: 0 0 132px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* ── buttons — sharp, mono labels (primary = --accent-primary, like .nav-cta) ── */
.services .svc-pill {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-strong);
  background: transparent;
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
}
.services .svc-pill:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.services .svc-pill-label {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
}
.services .svc-pill-primary {
  color: #fff;
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}
.services .svc-pill-primary:hover {
  color: #fff;
  background: var(--accent-primary-2);
  border-color: var(--accent-primary-2);
}

/* ── Examples page — reuses the Services grid/cards. Each card embeds the
   example's video straight from YouTube (16:9), like the home-page demo. ── */
.examples .svc-card-viz {
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.examples .svc-card-viz iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* text fills the card so the source link can pin to the bottom edge,
   keeping every "View source" aligned regardless of body length */
.examples .svc-card-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* direct link to the example's source on GitHub, pinned to the card bottom */
.examples .svc-card-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
  text-decoration: none;
}
.examples .svc-card-link:hover { text-decoration: underline; }

/* ── Blog index — reuses the Services grid/cards. Each card is a link with an
   inline SVG vignette themed to the post, in the services "blueprint" style. ── */
.blog .blog-heading {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-strong);
  margin-bottom: var(--s-6);
}
.blog .svc-card {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base);
}
.blog .svc-card:hover { border-color: var(--border-strong); }
.blog .svc-card-text { display: flex; flex-direction: column; flex: 1; }
.blog .svc-card-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
/* "Read →" pinned to the card bottom so it lines up across the grid */
.blog .svc-card-more {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-primary);
}
.blog .svc-card:hover .svc-card-more { text-decoration: underline; }

/* ── ServiceVisual — tiling pattern fields, one motif per card ──────────────
   Hairline base pattern + one or two accent glints, framed by corner ticks. */
.svcv {
  width: 100%;
}
.svcv-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* base motifs — quiet, tone-on-tone */
.svcv-pat-stroke {
  fill: none;
  stroke: var(--border-divider);
}
.svcv-pat-fill {
  fill: var(--border-divider);
}

/* accent glints */
.svcv-acc-stroke {
  fill: none;
  stroke: var(--accent-primary);
  opacity: 0.55;
}
.svcv-acc-fill {
  fill: var(--accent-primary);
  opacity: 0.55;
}
.svcv-mint-stroke {
  fill: none;
  stroke: var(--accent-mint);
  stroke-linejoin: round;
  opacity: 0.5;
}
.svcv-mint-fill {
  fill: var(--accent-mint);
  opacity: 0.6;
}

/* drafting corner ticks */
.svcv-corner {
  fill: none;
  stroke: var(--border-divider);
  stroke-width: 1;
}