/**
 * about.css — About Us page-specific styles
 * Loaded via $extra_css in pages/about.php
 * All values reference tokens from variables.css only.
 */


/* ══════════════════════════════════════════════════════════════════════
   ABOUT HERO
   Full-viewport-width section with background image + gradient overlay.
══════════════════════════════════════════════════════════════════════ */

.about-hero {
  background: url('/assets/images/about/about-hero.jpg') center / cover no-repeat;
  padding:    var(--space-28) 0 var(--space-24);
  position:   relative;
  overflow:   hidden;
}
.about-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    105deg,
    rgba(13, 27, 42, 0.92) 0%,
    rgba(13, 27, 42, 0.74) 52%,
    rgba(13, 27, 42, 0.45) 100%
  );
}
.about-hero .container {
  position: relative;
  z-index:  1;
}

/* Breadcrumb overrides on dark background */
.about-hero .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.60);
}
.about-hero .breadcrumb-item a:hover {
  color: rgba(255, 255, 255, 0.90);
}
.about-hero .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.30);
}
.about-hero .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.80);
}
.about-hero .eyebrow {
  color: #d7a549;
}


/* ══════════════════════════════════════════════════════════════════════
   COMPANY INTRO — STATS BAR
══════════════════════════════════════════════════════════════════════ */

.intro-stats-wrap {
  display:       flex;
  border:        1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  overflow:      hidden;
  margin-top:    var(--space-8);
  background:    var(--color-bg-alt);
}
.intro-stat {
  flex:        1;
  text-align:  center;
  padding:     var(--space-6) var(--space-4);
  border-right: 1px solid var(--color-border);
}
.intro-stat:last-child {
  border-right: none;
}
.intro-stat__number {
  font-size:     var(--font-size-3xl);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-blue);
  line-height:   1;
  margin-bottom: var(--space-1);
  letter-spacing: var(--tracking-tight);
}
.intro-stat__label {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-medium);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height:    var(--line-height-snug);
  margin:         0;
}


/* ══════════════════════════════════════════════════════════════════════
   INDUSTRY CARDS
   Icon-centered cards for the "Industries We Serve" section.
══════════════════════════════════════════════════════════════════════ */

.industry-card {
  text-align:     center;
  padding:        var(--space-7) var(--space-5);
  border:         1px solid var(--color-border);
  border-radius:  var(--border-radius-xl);
  background:     var(--color-bg-white);
  height:         100%;
  transition:     box-shadow var(--transition-base),
                  transform var(--transition-base),
                  border-color var(--transition-base);
}
.industry-card:hover {
  box-shadow:   var(--shadow-blue);
  transform:    translateY(-3px);
  border-color: rgba(45, 110, 143, 0.30);
}
.industry-card__icon {
  width:         56px;
  height:        56px;
  border-radius: var(--border-radius-lg);
  background:    var(--color-blue-light);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto var(--space-4);
}
.industry-card__icon svg {
  width:  26px;
  height: 26px;
  color:  var(--color-blue);
}
.industry-card__title {
  font-size:     var(--font-size-base);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-blue);
  margin-bottom: var(--space-2);
}
.industry-card__desc {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin:      0;
}


/* ══════════════════════════════════════════════════════════════════════
   SUSTAINABILITY SECTION
   Dark blue gradient background — all text overridden to light.
══════════════════════════════════════════════════════════════════════ */

.sustainability-section {
  background: linear-gradient(135deg, var(--color-blue) 0%, #1a4c6a 100%);
  position:   relative;
  overflow:   hidden;
}
.sustainability-section .eyebrow {
  color: #d7a549;
}
/* Decorative radial glow top-right */
.sustainability-section::before {
  content:        '';
  position:       absolute;
  top:            -80px;
  right:          -80px;
  width:          400px;
  height:         400px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(212, 160, 48, 0.10) 0%, transparent 70%);
  pointer-events: none;
}

/* Feature list on dark bg */
.sustainability-feature-list {
  list-style:     none;
  padding:        0;
  margin:         0 0 var(--space-8);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}
.sustainability-feature-list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
  font-size:   var(--font-size-sm);
  color:       rgba(255, 255, 255, 0.85);
  line-height: var(--line-height-normal);
}
.sustainability-feature-list li::before {
  content:             '';
  display:             block;
  width:               18px;
  height:              18px;
  flex-shrink:         0;
  margin-top:          2px;
  background-color:    rgba(212, 160, 48, 0.18);
  border:              1px solid rgba(212, 160, 48, 0.40);
  border-radius:       50%;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23D4A030' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     10px;
}

/* Animated counter metric tiles */
.sustainability-metric {
  text-align:    center;
  padding:       var(--space-6) var(--space-4);
  background:    rgba(255, 255, 255, 0.07);
  border:        1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--border-radius-xl);
  height:        100%;
}
.sustainability-metric__number {
  font-size:      var(--font-size-4xl);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-gold);
  line-height:    1;
  margin-bottom:  var(--space-2);
  letter-spacing: var(--tracking-tight);
}
.sustainability-metric__label {
  font-size:      var(--font-size-xs);
  color:          rgba(255, 255, 255, 0.75);
  font-weight:    var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height:    var(--line-height-snug);
  margin:         0;
}


/* ══════════════════════════════════════════════════════════════════════
   CORE VALUE CARDS
   Used on gold-light section background.
══════════════════════════════════════════════════════════════════════ */

.value-card {
  padding:       var(--space-8);
  border-radius: var(--border-radius-xl);
  background:    var(--color-bg-white);
  border:        1px solid var(--color-gold-border);
  height:        100%;
  transition:    box-shadow var(--transition-base), transform var(--transition-base);
}
.value-card:hover {
  box-shadow: var(--shadow-gold);
  transform:  translateY(-3px);
}
.value-card__icon {
  width:         52px;
  height:        52px;
  border-radius: var(--border-radius-lg);
  background:    var(--color-gold-light);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.value-card__icon svg {
  width:  24px;
  height: 24px;
  color:  var(--color-gold-hover);
}
.value-card__title {
  font-size:     var(--font-size-xl);
  font-weight:   var(--font-weight-bold);
  color:         var(--color-blue);
  margin-bottom: var(--space-2);
}
.value-card__text {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin:      0;
}


/* ══════════════════════════════════════════════════════════════════════
   COMPANY TIMELINE
   Horizontal on desktop, vertical-stacked on mobile.
══════════════════════════════════════════════════════════════════════ */

.timeline-wrap {
  position: relative;
}

/* Horizontal connecting line — desktop only */
.timeline-track {
  position:   absolute;
  top:        28px;
  left:       12.5%;
  right:      12.5%;
  height:     2px;
  background: linear-gradient(
    to right,
    var(--color-blue-light),
    var(--color-blue),
    var(--color-blue),
    var(--color-blue-light)
  );
  z-index: 0;
}

.timeline-items {
  display:  flex;
  position: relative;
  z-index:  1;
}
.timeline-item {
  flex:       1;
  text-align: center;
  padding:    0 var(--space-4);
}
.timeline-item__dot {
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    var(--color-blue);
  border:        3px solid var(--color-bg-white);
  box-shadow:    0 0 0 3px var(--color-blue);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        0 auto var(--space-6);
  transition:    background-color var(--transition-base), box-shadow var(--transition-base);
}
.timeline-item:hover .timeline-item__dot {
  background:  var(--color-gold-hover);
  box-shadow:  0 0 0 3px var(--color-gold-hover);
}
.timeline-item__dot svg {
  width:  22px;
  height: 22px;
  color:  #fff;
}
.timeline-item__year {
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color:          var(--color-gold-hover);
  margin-bottom:  var(--space-2);
}
.timeline-item__title {
  font-size:     var(--font-size-base);
  font-weight:   var(--font-weight-semibold);
  color:         var(--color-blue);
  margin-bottom: var(--space-2);
}
.timeline-item__desc {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  line-height: var(--line-height-normal);
  max-width:   22ch;
  margin:      0 auto;
}


/* ══════════════════════════════════════════════════════════════════════
   ABOUT CTA SECTION
   Full-width bg image with dark-blue gradient overlay.
══════════════════════════════════════════════════════════════════════ */

.about-cta {
  background: url('/assets/images/about/cta-bg.jpg') center / cover no-repeat;
  padding:    var(--space-24) 0;
  position:   relative;
  overflow:   hidden;
  text-align: center;
}
.about-cta::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    135deg,
    rgba(13, 27, 42, 0.93) 0%,
    rgba(45, 110, 143, 0.88) 100%
  );
}
.about-cta .container {
  position: relative;
  z-index:  1;
}
.about-cta h2 {
  color:         #fff;
  margin-bottom: var(--space-4);
}
.about-cta .about-cta__lead {
  color:       rgba(255, 255, 255, 0.82);
  font-size:   var(--font-size-lg);
  max-width:   55ch;
  margin:      0 auto var(--space-8);
  line-height: var(--line-height-relaxed);
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  .about-hero {
    padding: var(--space-16) 0 var(--space-12);
  }

  /* Stats stack vertically */
  .intro-stats-wrap {
    flex-direction: column;
  }
  .intro-stat {
    border-right:  none;
    border-bottom: 1px solid var(--color-border);
  }
  .intro-stat:last-child {
    border-bottom: none;
  }

  /* Timeline: horizontal → vertical */
  .timeline-track {
    display: none;
  }
  .timeline-items {
    flex-direction: column;
    gap:            var(--space-8);
  }
  .timeline-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    text-align:  left;
    padding:     0;
  }
  .timeline-item__dot {
    flex-shrink: 0;
    margin:      0;
  }
  .timeline-item__desc {
    max-width: none;
    margin:    0;
  }

  /* CTA padding */
  .about-cta {
    padding: var(--space-16) 0;
  }
}

@media (max-width: 575.98px) {
  .sustainability-metric__number {
    font-size: var(--font-size-3xl);
  }
}