/* Vectis Lab — site layer for vectislab.hu.
   Built only on the design system's tokens (assets/css/tokens.css); no new colour
   values. Loaded after assets/css/vectis.css. Do not edit the files in
   assets/css, assets/fonts or assets/logo: they are synced from ../design by
   scripts/sync-design.sh. */

/* ---------- Page frame ---------- */
html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Short pages (404) keep the footer at the bottom of the window. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { display: block; flex: 1 0 auto; }
.nowrap { white-space: nowrap; }

/* Placeholders to fill before launch. */
.ph {
  font-family: var(--vx-font-mono);
  font-size: 0.875em;
  background: var(--vx-sunken);
  border-radius: var(--vx-radius-xs);
  padding: 0 4px;
  overflow-wrap: anywhere;
}

/* ---------- Header ---------- */
.site-logo img { display: block; height: 40px; width: auto; } /* 102 px wide: above the 96 px minimum */
.site-nav { margin-left: auto; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }

.site-lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--vx-border-strong);
  border-radius: var(--vx-radius-sm);
  font: 500 var(--vx-text-label)/1 var(--vx-font-mono);
  letter-spacing: var(--vx-tracking-label);
}
.site-lang a,
.site-lang [aria-current] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 42px;
  padding-inline: 8px;
  border-radius: calc(var(--vx-radius-sm) - 1px);
}
.site-lang a { color: var(--vx-fg-secondary); text-decoration: none; }
.site-lang a:hover { color: var(--vx-fg); text-decoration: underline; }
.site-lang [aria-current] { background: var(--vx-action); color: var(--vx-on-action); }

@media (max-width: 720px) {
  html { scroll-padding-top: 0; }
  .vx-header { position: static; }
  .site-lang { order: 2; margin-left: auto; }
  .site-nav { order: 3; margin-left: 0; }
}

/* ---------- Buttons ---------- */
.vx-arrow { flex: none; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(var(--vx-space-7), 6vw, var(--vx-space-9)) clamp(var(--vx-space-8), 8vw, var(--vx-space-10)); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--vx-space-8);
  align-items: center;
}
.hero__text { --vx-stack-gap: var(--vx-space-5); }
.hero__text .vx-display { max-width: 15ch; }
.hero__actions { --vx-cluster-gap: var(--vx-space-3) var(--vx-space-5); padding-top: var(--vx-space-2); }
.hero__figure { width: 100%; max-width: 400px; justify-self: end; }
.hero__figure figcaption { margin-top: var(--vx-space-4); }
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--vx-space-7); }
  .hero__figure { justify-self: start; max-width: 460px; }
}
.page-hero { padding-block: clamp(var(--vx-space-7), 6vw, var(--vx-space-9)); }
.page-hero .vx-h1 { max-width: 22ch; }

/* ---------- Product diagram (inline SVG, paper ground only) ---------- */
.dg { display: block; width: 100%; height: auto; font-family: var(--vx-font-sans); }
.dg-node { fill: var(--vx-surface-strong); stroke: var(--vx-border-strong); stroke-width: 1; }
.dg-node--strong { stroke: var(--vx-fg); stroke-width: 1.5; }
.dg-sheet { fill: var(--vx-surface-strong); stroke: var(--vx-slate-500); stroke-width: 1; }
.dg-sheet-line { stroke: var(--vx-slate-500); stroke-width: 2; }
.dg-flow { fill: none; stroke: var(--vx-slate-500); stroke-width: 1.5; }
.dg-head { fill: var(--vx-slate-500); }
.dg-label { font-family: var(--vx-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; fill: var(--vx-fg-muted); }
.dg-title { font-size: 15px; font-weight: 600; fill: var(--vx-fg); }
.dg-sub { font-size: 12.5px; fill: var(--vx-fg-secondary); }
.dg-branch { font-family: var(--vx-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; fill: var(--vx-fg-muted); }
/* The agent block is the one extruded element: the mark's front, side and base faces. */
.dg-agent-front { fill: var(--vx-logo-front); }
.dg-agent-side { fill: var(--vx-logo-side); }
.dg-agent-base { fill: var(--vx-logo-base); }
.dg-agent-mark { fill: var(--vx-paper-100); }
.dg-agent-label { font-family: var(--vx-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; fill: var(--vx-mist-300); }
.dg-agent-key { font-size: 13.5px; fill: var(--vx-mist-200); }
.dg-agent-value { font-size: 13.5px; font-weight: 600; fill: var(--vx-paper-100); }
.dg-agent-note { font-size: 12.5px; fill: var(--vx-mist-300); }
.dg-agent-arrow { fill: none; stroke: var(--vx-mist-300); stroke-width: 1.25; }

/* ---------- Section heads ---------- */
.section-intro { max-width: var(--vx-measure); }

/* ---------- How it works (ink band) ---------- */
.stage-note { margin-top: var(--vx-space-7); max-width: var(--vx-measure); }
.vx-steps .vx-h3 { margin-top: var(--vx-space-1); }
.vx-steps .vx-tag { align-self: flex-start; margin-top: var(--vx-space-2); white-space: normal; }

/* ---------- Principles ---------- */
.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vx-space-7) var(--vx-space-8);
}
.principle {
  display: flex;
  flex-direction: column;
  gap: var(--vx-space-3);
  padding-top: var(--vx-space-5);
  border-top: 1px solid var(--vx-fg);
  min-width: 0;
}
@media (max-width: 760px) {
  .principles { grid-template-columns: minmax(0, 1fr); gap: var(--vx-space-6); }
}

/* ---------- First focus ---------- */
.focus-text { --vx-stack-gap: var(--vx-space-5); }
.focus-card { --vx-stack-gap: var(--vx-space-4); }
.focus-card .vx-kv { margin-block: var(--vx-space-2); }

/* ---------- Roadmap ---------- */
.roadmap {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--vx-space-6);
}
.roadmap > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vx-space-3);
  padding-top: var(--vx-space-4);
  border-top: 2px solid var(--vx-border-strong);
  min-width: 0;
}
.roadmap > li:first-child { border-top-color: var(--vx-fg); }
@media (max-width: 860px) {
  .roadmap { grid-template-columns: minmax(0, 1fr); }
}

/* Label/value pairs stack on narrow screens. */
@media (max-width: 560px) {
  .kv-stack { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .kv-stack dd { margin-bottom: var(--vx-space-3); }
}

/* ---------- Contact (ink band) ---------- */
.contact { --vx-stack-gap: var(--vx-space-5); max-width: 46rem; }
.contact .vx-cluster { --vx-cluster-gap: var(--vx-space-3) var(--vx-space-6); }
.contact .vx-cluster a:not(.vx-btn) { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Engineering services ---------- */
.keywords {
  list-style: none;
  padding: 0;
  margin-top: var(--vx-space-6);
  max-width: var(--vx-measure);
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2);
}
.area-index { margin-top: var(--vx-space-6); }
.area-index a { display: inline-flex; align-items: center; min-height: 44px; }

.services { display: flex; flex-direction: column; }
.service {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--vx-space-4) var(--vx-space-8);
  padding-block: var(--vx-space-6);
  border-top: 1px solid var(--vx-border);
}
.service:last-child { border-bottom: 1px solid var(--vx-border); }
.service__head { display: flex; flex-direction: column; gap: var(--vx-space-2); }
.service__defs { margin-top: var(--vx-space-3); }
@media (max-width: 860px) {
  .service { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Legal pages ---------- */
.legal { max-width: var(--vx-measure); }
.legal .vx-prose { max-width: none; }
.legal .vx-prose a { overflow-wrap: anywhere; }
.legal-note { margin-top: var(--vx-space-5); }
.legal .vx-kv { margin-top: var(--vx-space-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--vx-sunken); }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--vx-space-6) var(--vx-space-7);
}
.site-footer__brand { display: flex; flex-direction: column; gap: var(--vx-space-4); align-items: flex-start; }
.site-footer__brand img { display: block; height: 36px; width: auto; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__legal {
  margin-top: var(--vx-space-7);
  padding-top: var(--vx-space-5);
  border-top: 1px solid var(--vx-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--vx-space-2) var(--vx-space-5);
}
@media (max-width: 720px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- 404 ---------- */
.notfound { display: flex; align-items: center; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__legal:first-child { margin-top: 0; padding-top: 0; border-top: 0; }