/* ==========================================================================
   css/pages/about.css — About Page Specific Styles
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   ABOUT INTRO SPLIT
   ────────────────────────────────────────────────────────────────────────── */
.about-intro {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         clamp(3rem, 6vw, 5rem);
  align-items: center;
}

.about-intro-content h2 { margin-bottom: var(--space-6); }

.about-intro-content p {
  font-size:     var(--text-lg);
  margin-bottom: var(--space-5);
}

.about-intro-image {
  position: relative;
}

.about-intro-image img {
  width:         100%;
  height:        480px;
  object-fit:    cover;
  border-radius: var(--radius-xl);
  border:        1px solid var(--card-border);
  box-shadow:    var(--shadow-float);
}

/* Floating badge decoration on the image */
.about-intro-image .float-badge {
  position:      absolute;
  bottom:        -var(--space-6);
  left:          -var(--space-6);
  background:    var(--glass-bg);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border:        1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-5) var(--space-6);
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  box-shadow:    var(--shadow-lg);
}

.about-intro-image .float-badge .badge-icon {
  font-size: 2rem;
}

.about-intro-image .float-badge .badge-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--text-muted);
}

.about-intro-image .float-badge .badge-value {
  font-family: var(--font-heading);
  font-size:   var(--text-lg);
  font-weight: 700;
  color:       var(--primary);
}

/* ──────────────────────────────────────────────────────────────────────────
   LEADERSHIP SECTION
   ────────────────────────────────────────────────────────────────────────── */
.leadership-notice {
  max-width:    760px;
  margin:       0 auto;
  text-align:   center;
  background:   var(--primary-glow-sm);
  border:       1px solid rgba(0, 243, 255, 0.14);
  border-radius: var(--radius-xl);
  padding:      var(--space-10) var(--space-12);
}

.leadership-notice .notice-icon {
  font-size:     2.5rem;
  margin-bottom: var(--space-5);
}

.leadership-notice h3 {
  margin-bottom: var(--space-4);
  font-size:     var(--text-2xl);
}

.leadership-notice p {
  font-size: var(--text-lg);
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .about-intro { grid-template-columns: 1fr; }
  .about-intro-image img { height: 340px; }
}