/* ============================================================
   MISSION & VISION SECTION
   Design: Stacked large-type statements on dark field.
   NOT two identical cards. Each takes its own row, asymmetric.
   Mission: white statement on deep blue.
   Vision: yellow statement — ambition reads in accent.
   ============================================================ */

.mission-vision {
  background: var(--color-secondary);
  position: relative;
  overflow: hidden;
  padding: var(--section-padding-y) 0;
}

/* Subtle grain/texture overlay — premium industrial feel */
.mission-vision::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* ---- Responsive Grid Layout ---- */
.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .mission-vision-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }
}

/* ---- Card Structure ---- */
.mission-card,
.vision-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  position: relative;
  transition: transform var(--transition-base), background var(--transition-base);
}

@media (min-width: 768px) {
  .mission-card,
  .vision-card {
    padding: var(--space-12);
    gap: var(--space-8);
  }
}

.mission-card:hover,
.vision-card:hover {
  background: rgba(255,255,255,0.05);
  transform: translateY(-4px);
}

/* Distinct card borders highlighting brand colors */
.mission-card {
  border-left: 4px solid var(--primary-blue-light);
}

.vision-card {
  border-left: 4px solid var(--safety-yellow);
}

/* ---- Left meta column: label + icon ---- */
.mv-meta {
  display: flex;
  flex-direction: row; /* Horizontal on mobile for better stacking */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Label — small, precise, mono, like a document section tag */
.mv-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.7);
}

/* Leading line before label text */
.mv-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

/* Icon: precise, aligned to the right on mobile */
.mv-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
}

.mv-icon svg {
  width: 24px;
  height: 24px;
  color: rgba(255,255,255,0.8);
}

.vision-card .mv-icon svg {
  color: var(--safety-yellow);
}

/* ---- Content Block ---- */
.mv-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4); /* Ensure separation from header */
}

/* The statement itself — HIERARCHY ANCHOR */
.mission-card .mv-statement,
.vision-card .mv-statement {
  font-family: var(--font-secondary);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Yellow accent on key phrase in vision */
.vision-card .mv-accent {
  color: var(--safety-yellow);
}

/* Supporting detail text */
.mv-detail {
  font-size: var(--text-base);
  color: rgba(248,249,250,0.75);
  line-height: 1.6;
  margin: 0;
}