/* AIVeNautics — Reusable component classes.
 * All page-level templates rely on these primitives.
 * Tailwind classes from the Astro source have been collapsed to semantic ones here.
 */

/* ───────── Container ───────── */
.container-page {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--max-content);
  padding-left: var(--side-pad-sm);
  padding-right: var(--side-pad-sm);
}

@media (min-width: 768px) {
  .container-page {
    padding-left: var(--side-pad-md);
    padding-right: var(--side-pad-md);
  }
}

@media (min-width: 1024px) {
  .container-page {
    padding-left: var(--side-pad-lg);
    padding-right: var(--side-pad-lg);
  }
}

.max-narrow { max-width: var(--max-narrow); }
.max-content { max-width: var(--max-content); }
.max-prose { max-width: 720px; }

/* ───────── Section spacing ───────── */
.section-py-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }
.section-py    { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-py-lg { padding-top: var(--section-py-lg); padding-bottom: var(--section-py-lg); }

@media (min-width: 768px) {
  .section-py-sm { padding-top: 80px; padding-bottom: 80px; }
  .section-py    { padding-top: var(--section-py-md); padding-bottom: var(--section-py-md); }
  .section-py-lg { padding-top: var(--section-py-lg-md); padding-bottom: var(--section-py-lg-md); }
}

/* ───────── Surfaces ───────── */
.surface-navy-900 { background-color: var(--c-navy-900); }
.surface-navy-950 { background-color: var(--c-navy-950); }
.surface-navy-800 { background-color: var(--c-navy-800); }
.surface-marine-500 { background-color: var(--c-marine-500); }
.surface-sky-500 { background-color: var(--c-sky-500); }

/* ───────── Typography helpers ───────── */
.category-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-semibold);
  color: var(--c-sky-500);
  text-transform: uppercase;
}

.display-xl {
  font-size: var(--fs-display-xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.display-lg {
  font-size: var(--fs-display-lg);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.display-md {
  font-size: var(--fs-display-md);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.text-body {
  color: var(--c-slatey-400);
  line-height: 1.7;
}

.text-muted { color: var(--c-slatey-500); }
.text-light { color: var(--c-white-85); }
.text-on-light { color: var(--c-navy-900); }
.text-accent { color: var(--c-sky-500); }

.eyebrow {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--c-slatey-400);
  font-weight: var(--fw-semibold);
}

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  transition: background-color var(--tx-base), color var(--tx-base), border-color var(--tx-base);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--c-sky-500);
  color: var(--c-navy-900);
}
.btn-primary:hover { background-color: var(--c-white); }

.btn-secondary {
  background-color: transparent;
  color: var(--c-white);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); }

.btn-white {
  background-color: var(--c-white);
  color: var(--c-navy-900);
}
.btn-white:hover { background-color: var(--c-sky-500); }

.btn-sm {
  padding: 8px 20px;
  font-size: var(--fs-body-sm);
  height: 40px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--c-sky-500);
  transition: color var(--tx-base);
}
.btn-ghost:hover { color: var(--c-white); }
.btn-ghost::after {
  content: '→';
  display: inline-block;
  transition: transform var(--tx-base);
}
.btn-ghost:hover::after { transform: translateX(4px); }

/* ───────── Cards ───────── */
.card {
  background-color: var(--c-navy-800);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-lg {
  background-color: var(--c-navy-800);
  border-radius: var(--radius-card-lg);
  padding: 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-interactive {
  transition: transform var(--tx-base), border-color var(--tx-base), box-shadow var(--tx-base);
}
.card-interactive:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 195, 247, 0.4);
  box-shadow: var(--shadow-pop);
}

/* Pill / Badge */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background-color: rgba(79, 195, 247, 0.15);
  color: var(--c-sky-500);
}

.badge-solid {
  background-color: var(--c-sky-500);
  color: var(--c-navy-900);
}

/* ───────── Forms ───────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-label {
  font-size: var(--fs-meta-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-sky-500);
}

.field-input,
.field-textarea {
  width: 100%;
  background: transparent;
  color: var(--c-white);
  font-size: var(--fs-body);
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--c-slatey-500);
  outline: none;
  transition: border-color var(--tx-base);
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--c-slatey-500);
}

.field-input:focus,
.field-textarea:focus {
  border-bottom-color: var(--c-sky-500);
}

.field-textarea {
  resize: vertical;
  min-height: 120px;
}

/* ───────── Lists ───────── */
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist li {
  position: relative;
  padding-left: 32px;
  color: var(--c-slatey-400);
  line-height: 1.6;
}
.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(79, 195, 247, 0.15);
  color: var(--c-sky-500);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-bold);
}

.dotlist { display: flex; flex-direction: column; gap: 8px; }
.dotlist li {
  position: relative;
  padding-left: 20px;
  color: var(--c-slatey-400);
}
.dotlist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--c-sky-500);
}

/* ───────── Divider ───────── */
.hr-soft {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ───────── Numbered step ───────── */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background-color: rgba(79, 195, 247, 0.15);
  color: var(--c-sky-500);
  font-size: 18px;
  font-weight: var(--fw-bold);
  font-family: var(--font-sans);
}

/* ───────── Fade-up animation ───────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fade-up var(--tx-slow) var(--ease-out) both; }

/* ───────── Link styles ───────── */
.link-accent { color: var(--c-sky-500); transition: color var(--tx-base); }
.link-accent:hover { color: var(--c-white); }
.link-underline { text-decoration: underline; text-underline-offset: 3px; }

/* ───────── Article prose ───────── */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 16px; }
.prose h2 {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  margin-top: 40px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 20px;
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  margin-top: 32px;
}
.prose p { color: var(--c-slatey-400); line-height: 1.7; }
.prose a {
  color: var(--c-sky-500);
  transition: color var(--tx-base);
}
.prose a:hover { color: var(--c-white); }
.prose strong { color: var(--c-white); font-weight: var(--fw-semibold); }
.prose section + section { margin-top: 40px; }