/* Fly GACA — Learn from Accidents page. */

.safety-main { padding-block: var(--space-8) var(--space-12); }

.safety-head { max-width: 60ch; margin-block-end: var(--space-6); }
.safety-head .eyebrow {
  display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .1em; color: var(--teal-bright);
  margin-block-end: var(--space-2);
}
.safety-head h1 { margin: 0 0 var(--space-3); }
.safety-head .lead { color: var(--text-muted); font-size: var(--fs-lg); margin: 0; }

.safety-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border: 1px solid var(--border-bright); border-radius: var(--radius-md);
  padding: var(--space-4); margin-block-end: var(--space-5);
  font-size: var(--fs-sm); color: var(--text-muted);
}
.safety-note .vn-icon { flex: none; color: #E6BE6A; margin-block-start: 2px; }
.safety-note strong { color: var(--text); }

.results-meta { color: var(--text-muted); font-size: var(--fs-sm); margin-block-end: var(--space-4); }

.safety-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.sa-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-bright); border-radius: var(--radius-md);
  border-inline-start: 3px solid #E3554E;
  padding: var(--space-4);
}
.sa-card-top { display: flex; gap: var(--space-2); align-items: center; margin-block-end: var(--space-2); }
.sa-code {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--text); background: rgba(255, 255, 255, 0.06);
  padding: 2px 7px; border-radius: var(--radius-sm, 4px);
}
.sa-tag {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .06em;
  color: #F0A8A4;
}
.sa-title { font-size: var(--fs-base); margin: 0 0 var(--space-2); }
.sa-snippet {
  font-size: var(--fs-sm); color: var(--text-muted);
  margin: 0 0 var(--space-4); flex: 1;
}
.sa-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sa-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 7px 12px; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  border: 1px solid var(--border-bright); border-radius: var(--radius-md);
  color: var(--text); text-decoration: none;
}
.sa-btn:hover { border-color: var(--text-muted); }
.sa-btn-adel { color: var(--teal-bright); border-color: rgba(74, 156, 184, 0.4); }
.sa-btn-adel:hover { border-color: var(--teal-bright); background: rgba(74, 156, 184, 0.10); }

@media (max-width: 600px) {
  .safety-grid { grid-template-columns: 1fr; }
}