/* AugurIQ website UI kit — shared styles */
@import url('./colors_and_type.css');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  scroll-behavior: smooth;
}

.auq-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Utilities ---------- */
.auq-clip-card   { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.auq-clip-btn    { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.auq-clip-tab    { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }

/* ---------- Eyebrows & section tags ---------- */
.auq-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange);
}
.auq-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--orange); }

.auq-section-tag {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--orange);
}

/* ---------- Section base ---------- */
.auq-section {
  padding: 96px 0;
  position: relative;
}
.auq-section--surface { background: var(--surface); }

/* ---------- Scroll-in animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Buttons ---------- */
.auq-btn {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  letter-spacing: 0.04em;
  padding: 16px 30px;
  border: none; cursor: pointer;
  transition: all 260ms var(--ease-out);
}
.auq-btn--primary {
  background: var(--orange); color: #0B0F19;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.auq-btn--primary:hover { background: var(--orange-hot); transform: translateY(-2px); }
.auq-btn--primary:active { background: var(--orange-deep); transform: scale(0.98); }

.auq-btn--large {
  font-size: 17px; padding: 20px 42px;
}

/* ---------- Responsive layout helpers ---------- */
.auq-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.auq-hero-h1 {
  font-size: 72px;
  line-height: 1.02;
}

.auq-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 64px;
}

.auq-cta-h2 {
  font-size: 64px;
  line-height: 1.05;
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
  .auq-wrap { padding: 0 20px; }
  .auq-section { padding: 60px 0; }

  /* --- Class-based (React-rendered output) --- */
  .auq-header-nav a { display: none; }
  .auq-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .auq-hero-h1 { font-size: 42px; line-height: 1.1; }
  .auq-process-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .auq-cta-h2 { font-size: 40px; line-height: 1.1; }
  .auq-roadmap-item { flex-wrap: wrap; }
  .auq-roadmap-meta { padding-left: 35px; }

  /* --- Inline-style overrides (pre-rendered HTML fallback) --- */
  /* Header nav */
  header nav a { display: none !important; }

  /* Hero 2-column grid */
  .auq-wrap[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Process / any 3-column grid */
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero h1 */
  h1[style*="72px"] {
    font-size: 42px !important;
    line-height: 1.1 !important;
  }

  /* Section h2 headings */
  h2[style*="48px"] {
    font-size: 30px !important;
    line-height: 1.15 !important;
  }

  /* CTA h2 */
  h2[style*="64px"] {
    font-size: 40px !important;
    line-height: 1.1 !important;
  }

  /* Challenge large paragraph */
  p[style*="22px"] {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  /* Drone panel — restore and shrink */
  .auq-drone-panel,
  [style*="radial-gradient(circle at 50% 45%"] {
    display: block !important;
    height: 360px !important;
  }

  /* Diagnostic badges — keep visible, shrink for mobile */
  [style*="rgba(255, 59, 59, 0.12)"],
  [style*="rgba(255,59,59,0.12)"] {
    display: inline-flex !important;
    font-size: 9px !important;
    padding: 4px 7px !important;
    gap: 5px !important;
  }

  /* Shrink crash report card — compact at bottom */
  [style*="min-width: 260px"],
  [style*="min-width:260px"] {
    min-width: 0 !important;
    max-width: 140px !important;
    padding: 7px 9px !important;
    left: 8px !important;
    bottom: 8px !important;
  }

  /* Shrink crash report card text */
  [style*="min-width: 260px"] div,
  [style*="min-width:260px"] div,
  [style*="min-width: 260px"] span,
  [style*="min-width:260px"] span {
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
  }

  /* Roadmap rows */
  [style*="display: flex"][style*="gap: 20px"] {
    flex-wrap: wrap !important;
  }
}

/* ---------- Drone panel diagnostic chrome ---------- */
@keyframes blink {
  0%, 55% { opacity: 1; }
  60%, 100% { opacity: 0.25; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}
@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); background: #EF4444; }
  50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); background: #B91C1C; }
}