/* ========================================================= */
/* ABOUT US PAGE STYLES - FINAL VERSION */
/* ========================================================= */

/* --------------------
   GLOBAL ABOUT STRUCTURE
   -------------------- */
.section-soft {
    background: var(--paper); 
    padding: 80px 0;
}

/* Centered section headlines + subparagraph */
.text-center h2 { margin-bottom: .25rem; }
.text-center p { margin-top: 0; margin-bottom: 1rem; }

/* Ensure feature cards in the Benefits section have the standard radius */
.feature-card {
    border-radius: var(--radius);
}

/* Base list style copied from home.css to ensure all icon lists are consistent */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .4rem 0;
    color: var(--slate);
}

.icon-list i {
    flex: 0 0 auto;
    margin-top: .2rem;
}

/* MISSION / VISION images */
.section-soft img { max-width: 100%; border-radius: 12px; }

/* --------------------
   HERO SECTION
   -------------------- */

/* FIX: Removes the pt-4 padding from the main element in about.php */
main#about {
    padding-top: 0 !important;
}

.hero-about-static {
  background: var(--paper);
  padding: 80px 0;
  min-height: 48vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.hero-about-media {
  position: absolute;
  inset: 0;
  background-image: url('/assets/photos/about_us/about_hero_banner.webp');
  background-size: cover;
  background-position: center;
  filter: brightness(.6);
  z-index: 0;
}
.hero-about .hero-card { 
    position: relative; 
    z-index: 2; 
    background: rgba(255,255,255,0.30);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-lg);
    padding: 32px 40px; 
    box-shadow: var(--sh2);
}

/* --------------------
   HOW WE WORK (Timeline)
   -------------------- */
.timeline-list { padding-left: 0; margin: 0; }
.timeline-item {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #eef2f7;
  background: #fff;
  margin-bottom: 12px;
  cursor: pointer;
  text-align: left;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.timeline-item .timeline-gif {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 999px; 
  flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(2,6,23,0.08);
  background: #fff;
}
.timeline-item .timeline-body { flex: 1; }
.timeline-item:hover,
.timeline-item:focus {
  transform: translateY(-6px);
  box-shadow: var(--sh2);
  border-color: var(--p500);
}
.timeline-item.active {
  border-color: var(--p700);
  background: linear-gradient(180deg, rgba(34,197,94,0.03), rgba(34,197,94,0.01));
}

/* Detail panel */
.detail-panel { 
    position: relative; 
    min-height: auto; /* FIX: Removed min-height to allow natural flow */
    overflow: hidden; 
}
.detail-content-wrapper { 
    transition: opacity .4s ease-out; 
}
.detail-panel img { max-width: 100%; border-radius: var(--radius); }

/* Detail Panel Media/GIF Slot */
.detail-media-container {
    height: 100%; 
    min-height: 160px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Mobile controls container (Centered on Card) */
.detail-controls { 
    position: absolute;
    top: 50%;
    left: 0; /* FIX: Start from left edge */
    right: 0; /* FIX: Extend to right edge */
    transform: translateY(-50%); /* FIX: Only apply vertical translate */
    width: 100%; /* Full width */
    padding: 0 16px; /* Padding for visual separation from card edges */
    justify-content: space-between;
    pointer-events: none; 
    z-index: 5;
}
.detail-controls .btn-icon-only {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    
    /* Social-Icon-Like Styling */
    background: rgba(44,166,111,0.12); 
    color: var(--p700); 
    box-shadow: inset 0 0 0 1px rgba(44,166,111,0.15);
    
    border: none;
    pointer-events: all; 
    display: grid;
    place-items: center;
    transition: all .35s ease;
}
.detail-controls .btn-icon-only:hover,
.detail-controls .btn-icon-only:focus-visible {
    /* Social-Icon-Like Hover */
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 0 18px rgba(44,166,111,0.6), inset 0 0 0 1px rgba(255,255,255,0.25);
    transform: scale(1.06); /* FIX: Only apply scale here */
}


/* --------------------
   BOARD OF MANAGEMENT
   -------------------- */
/* Team social/button style (reusing footer social links style) */
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(44,166,111,0.06); /* Lighter base color/opacity */
  color: var(--p700); /* Icon color */
  font-size: 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(44,166,111,0.08); /* Lighter shadow/border */
  border: none;
  transition: all 0.35s ease;
  text-decoration: none !important; 
}
.footer-social-btn i { pointer-events: none; }
.footer-social-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 18px rgba(44,166,111,0.6), inset 0 0 0 1px rgba(255,255,255,0.25);
  transform: translateY(-4px) scale(1.06);
}
.footer-social-btn:active { transform: scale(0.96); }
.footer-social-btn:focus-visible {
  outline: 2px solid rgba(34,197,94,0.8);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Copy-email visual feedback */
.copy-email.copied { transform: translateY(-2px) scale(0.98); }

/* Cards (Board/Detail) */
.card-brand { transition: transform .2s ease, box-shadow .25s ease, opacity .35s ease; }
.card-brand:hover { transform: translateY(-6px); box-shadow: var(--sh2); }

/* Toast */
.toast { box-shadow: 0 6px 18px rgba(2,6,23,0.18); }


/* Accordion: use light brand green (--p500) for hover/active */
.accordion-button {
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.accordion-button:hover,
.accordion-button:focus {
  color: var(--ink); 
  background: var(--p100); 
  box-shadow: 0 8px 20px rgba(17,94,68,0.02);
}
.accordion-button:not(.collapsed) {
  color: var(--ink); 
  background: var(--p100); 
}

/* --------------------
   CTA SECTION
   -------------------- */
.lead-section {
  background: var(--paper); 
  padding-bottom: 0 !important;
}

.lead-section .lead-card {
    background: var(--p100); 
    box-shadow: var(--sh2);
    border: none;
    padding: 60px 40px;
    border-radius: var(--radius-lg); 
}
.lead-section .lead-card h3 {
    color: var(--p700);
}
.lead-section .lead-card p {
    color: var(--p700);
    opacity: 0.8;
}


/* ========================================================= */
/* MEDIA QUERIES (END OF FILE) */
/* ========================================================= */
@media (max-width: 991.98px) {
  .hero-about-static { padding: 46px 0; min-height: 36vh; }
  /* FIX: Detail panel uses auto height for mobile flow */
  .detail-panel { 
    min-height: auto; 
    margin-top: 16px; 
  }
  .timeline-item { padding: 12px; }

  /* Ensure media container scales correctly on mobile */
  .detail-media-container {
      min-height: 200px;
  }
  /* FIX: Mobile controls transform reset (no jitter) */
  .detail-controls .btn-icon-only {
    transform: none; /* No initial vertical translate needed */
  }
  .detail-controls .btn-icon-only:hover,
  .detail-controls .btn-icon-only:focus-visible {
    /* Only scale is applied for hover effect */
    transform: scale(1.06); 
  }
}

@media (max-width: 768px) {
    .section-soft {
        padding: 40px 0;
    }
    .hero-about .hero-card { 
      padding: 24px;
    }
    .detail-panel {
        min-height: auto; /* Ensure no conflict with mobile min-height */
    }
}