@layer components;

:root {
  --about-blue: #0ea5e9;
  --about-gold: #fbbf24;
  --about-gold-dark: #f59e0b;
}

/* Ultra-Compact About */
.about-section {
  background: linear-gradient(135deg, #f0f9ff 0%, #f8fafc 100%);
  padding: clamp(2rem, 6vw, 3rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
}

.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.5rem);
  max-width: min(90vw, 700px);
  margin: 0 auto;
}

/* Smaller Badge */
.about-badge {
  background: linear-gradient(135deg, var(--about-gold), var(--about-gold-dark));
  color: #111827;
  padding: clamp(0.5rem, 1.8vw, 0.625rem) clamp(1rem, 2.8vw, 1.25rem);
  border-radius: 2.5rem;
  font-weight: 800;
  font-size: clamp(0.75rem, 2vw, 0.875rem);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.35);
}

/* Compact Heading */
.about-hero h2 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  margin: clamp(0.5rem, 1.5vw, 0.875rem) 0 clamp(0.75rem, 2vw, 1.25rem);
}

/* Shorter Text */
.about-hero p {
  font-size: clamp(1rem, 3vw, 1.125rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  max-width: 28rem;
  line-height: 1.55;
}

/* Tighter Stats */
.about-stats {
  gap: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.stat {
  padding: clamp(0.875rem, 2.5vw, 1.125rem);
}

.stat-number {
  font-size: clamp(2rem, 7vw, 2.75rem);
  margin-bottom: clamp(0.125rem, 0.75vw, 0.375rem);
}

.stat-label {
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  letter-spacing: 0.1em;
}

/* Compact Buttons */
.about-buttons {
  gap: clamp(0.75rem, 2vw, 1rem);
}

.about-buttons .btn-primary,
.about-buttons .btn-outline {
  padding: clamp(0.875rem, 2.5vw, 1rem) clamp(1.5rem, 4.5vw, 2rem);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  min-height: 3rem;
  max-width: 12rem;
}

/* Book Ride Button - YELLOW (matches Fleet/Tariff) */
.about-buttons .btn-primary {
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #111827 !important;
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.45) !important;
  border: none !important;
}

.about-buttons .btn-primary:hover,
.about-buttons .btn-primary:focus-visible {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 16px 35px rgba(251, 191, 36, 0.65) !important;
  transform: translateY(-0.25rem) !important;
}

/* View Fleet stays Blue Outline */
.about-buttons .btn-outline {
  background: hsla(0,0%,100%,0.9);
  color: var(--about-blue);
  border: 2px solid hsla(14,100%,57%,0.6);
}

/* Responsive */
@media (min-width: 768px) {
  .about-hero {
    gap: clamp(2rem, 4vw, 3rem);
  }
  
  .about-stats {
    gap: clamp(2rem, 4vw, 2.5rem);
  }
}

/* Animations (reduced) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

.about-hero > * {
  animation: fadeInUp 0.6s ease-out both;
}

.about-hero h2 { animation-delay: 0.05s; }
.about-hero p { animation-delay: 0.1s; }
.about-stats { animation-delay: 0.15s; }