/* --- about.css --- */ 

/* --- 1. Global Header Override & Base Structure --- */ 
.main-header { 
  background-color: rgba(14, 114, 180, 1); 
  border-bottom: 2px solid rgba(255, 255, 255, .8); 
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); 
} 

.about { 
  /* Leverages background variables for toggle mechanics */ 
  background-color: var(--bg-primary); 
  color: var(--text-primary); 
  /* Layout Safety Buffer: Pushes content cleanly down below fixed headers */ 
  padding-top: clamp(6rem, 5rem + 3vw, 12rem); 
  padding-bottom: clamp(4rem, 3rem + 3vw, 10rem); 
  transition: background-color 0.3s ease, color 0.3s ease; 
} 

/* Master Asymmetric Layout Split */ 
.about-grid-split { 
  display: grid; 
  grid-template-columns: 1.4fr 1fr; /* 60% Left Side Bio, 40% Right Side Stacked Cards */ 
  gap: clamp(2rem, 1rem + 3vw, 4rem); /* Responsive spacing between columns */
  align-items: start; 
  width: 100%; 
} 

/* Typography & Content Flow */
.about-narrative h1 { 
  line-height: 1.1; 
  margin-bottom: 1.5rem; 
} 

/* Responsive Title Helper */
.text-nowrap {
  display: inline-block;
  white-space: nowrap;
}

.about-narrative p { 
  margin-bottom: 1.25rem; 
  line-height: 1.6; /* Balanced reading rhythm for copy-heavy layouts */
} 

/* Interactive Button Group */
.about-action-group { 
  display: flex; 
  gap: 15px; 
  margin-top: 2.5rem; 
  flex-wrap: wrap; 
} 

/* Stacked Right Column Pillar Rules */ 
.core-pillars-stack { 
  display: flex; 
  flex-direction: column; 
  gap: 1.75rem; 
} 

.pillar-card { 
  background-color: rgba(0, 50, 78, 0.04); 
  border-left: 4px solid #00324e; /* Clean accent indicator border on the left edge */ 
  padding: 1.75rem; 
  border-radius: 0 8px 8px 0; 
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease; 
  will-change: transform;
} 

/* Subtle micro-interaction layout depth */
.pillar-card:hover {
  transform: translateX(4px);
  background-color: rgba(0, 50, 78, 0.06);
  border-left-color: var(--badge-label-accent-text);
}

.pillar-card h2 { 
  font-size: 1.7rem;
  margin: 0.5rem 0;
  letter-spacing: 0.1rem;
} 

.pillar-card p { 
  font-size: 0.95rem; 
  margin-bottom: 0; 
  line-height: 1.5; 
} 

.pillar-icon {
  height: 40px;
  font-size: 1.6rem; 
  color: #00324e; 
} 

/* Responsive Structural Breakdowns */ 
@media (max-width: 1024px) { 
  .about-grid-split { 
    grid-template-columns: 1fr; /* Collapse into a clean stack for tablet/mobile access */ 
  } 
  
  /* Drop the text-nowrap behavior on smaller devices to prevent overflow */
  .text-nowrap {
    white-space: normal;
  }
} 

@media (max-width: 565px) { 
  .about-action-group .btn { 
    width: 100%; 
    text-align: center; /* Ensures text stays centered if buttons stretch */
  } 
} 

/* Dark Mode Color Palette System */ 
[data-theme="dark"] .pillar-card { 
  background-color: rgba(255, 255, 255, 0.04); 
  border-left-color: #0F7BC2; 
} 

[data-theme="dark"] .pillar-card:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-left-color: var(--badge-label-accent-text);
}

[data-theme="dark"] .pillar-icon { 
  color: #0d94e2; 
} 

[data-theme="dark"] .section-subtitle { 
  color: #25c47a; 
}