/* Page base styles */
body {
  font-family: "Inter", sans-serif;
  background: beige;
  color: #111;
}

:root {
  --team-card-width: 320px;
  --team-img-height: 240px;
  --team-gap: 0.4rem;
  --section-top-gap: 2.5rem;
  --section-bottom-gap: 4rem;
  --heading-bottom-gap: 1.5rem;
}

/* NOTE: navbar styles are centralized in navbar.css and injected by navbar.js.
   The rules for .navbar-container, .logo-img, .navbar-links, etc. live there
   to avoid duplication across page-specific CSS files. */

.team-section {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: #1a1a1a; /* dark fallback to prevent white flash */
  overflow-x: hidden;
}
/* animated background element (smooth fade + sharpen) */
.team-bg {
  position: absolute;
  inset: 0;
  background: url("images/the-team.JPG") center center / cover no-repeat;
  transform: scale(1.05);
  filter: blur(10px);
  opacity: 0.3;
  z-index: 0;
  will-change: opacity, transform, filter;
  animation: teamBgIn 3s cubic-bezier(.25,.8,.25,1) forwards;
  min-width: 100vw;
  min-height: 100vh;
}

@keyframes teamBgIn {
  from {
    opacity: 0.3;
    transform: scale(1.05);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.team-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
  opacity: 0;
  animation: overlayFade 1.1s cubic-bezier(.2,.8,.2,1) forwards;
  will-change: opacity;
}

@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 0.4; }
}

.team-overlay {
  display: none;
}

.team-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 8vw;
  max-width: 50%;
}

.team-heading {
  color: #fff;
  font-size: 5rem;
  font-weight: 900;
  margin: 0;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  line-height: 1.1;
  position: relative;
  left: 10vw;
  top: -2vw;
  /* Heading reveal is handled by the scroll-reveal script via the .reveal class.
     Remove the standalone animation to prevent double animations. */
}
@keyframes slideUpTeam {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .team-section,
  .team-section::before,
  .team-heading {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}
/* Navbar rules are in `navbar.css` to avoid duplication. See that file for navbar styling. */

/* Previously-founders-specific utilities removed in favor of universal .team-* rules */
@media (max-width: 900px) {
  .team-section {
    min-height: 60vh;
  }
  .team-heading {
    font-size: 3.5rem;
    left: 5vw;
  }
  .team-content {
    padding-left: 5vw;
    max-width: 80%;
  }
  .team-grid { 
    flex-direction: column; 
    gap: 1rem;
    align-items: center;
    justify-content: center;
  }
  .team-card { 
    flex: 0 0 auto; 
    max-width: 520px;
    margin: 0 auto;
    background: transparent;
  }
}
@media (max-width: 700px) {
  .team-section {
    min-height: 50vh;
  }
  .team-heading {
    font-size: 2.5rem;
    left: 0;
    top: 0;
  }
  .team-content {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }
}
@media (max-width: 500px) {
  .team-heading {
    font-size: 2rem;
  }
}

/* Founders grid and cards */
.founders-wrapper {
  max-width: 1200px;
  margin: var(--section-top-gap) auto var(--section-bottom-gap) auto;
  padding: 0 1.25rem;
}
.founders-heading {
  color: #111;
  text-align: center;
  font-size: 2.25rem;
  font-weight: 800;
  margin: 0 0 var(--heading-bottom-gap) 0;
}
/* Founder-specific grid/card rules removed; use .team-grid/.team-card/.team-img/.team-caption instead */

/* Keep supervisor-specific image rule separate when needed */
.supervisor-img { display:block; width:100%; height:var(--team-img-height); object-fit:cover; }

/* Hardware captions: same placement as founders but without a solid bar */
/* Hardware-founder link icon and caption styles replaced by .team-linkedin-icon and .team-caption */

@media (max-width: 900px) {
  .team-grid { 
    flex-direction: column; 
    gap: 1rem;
    align-items: center;
    justify-content: center;
  }
  .team-img { 
    height: auto; 
  }
  .team-card { 
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    background: transparent;
  }
}

/* Supervisor styles */
.supervisor-wrapper {
  max-width: 900px;
  margin: var(--section-top-gap) auto var(--section-bottom-gap) auto;
  padding: 0 1.25rem;
  text-align: center;
}
.supervisor-heading {
  color: #111;
  text-align: center;
  font-size: 2.25rem; /* match founders heading */
  font-weight: 800;
  margin: 0 0 var(--heading-bottom-gap) 0;
}

.supervisor-card {
  width: var(--team-card-width);
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.supervisor-img { display:block; width:100%; height:var(--team-img-height); object-fit:cover; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,0.25);} 

/* Make supervisor card behave like team cards on hover (Mr Shing) */
.supervisor-card {
  overflow: visible;
  border-radius: 10px;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1);
  will-change: transform, box-shadow;
}
.supervisor-card:hover,
.supervisor-card:focus-within {
  transform: translateY(-8px) scale(1.02);
  z-index: 12;
  box-shadow: 0 24px 48px rgba(0,0,0,0.42);
}
.supervisor-caption { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,0.55); color: #fff; padding: 8px 10px; border-radius:6px; font-weight:700; font-size:1.05rem; }

/* Hardware Leads styles */
.hardware-wrapper {
  max-width: 1200px;
  margin: var(--section-top-gap) auto var(--section-bottom-gap) auto;
  padding: 0 1.25rem;
}
.hardware-heading {
  color: #111;
  text-align: center;
  font-size: 2.25rem; /* match founders heading */
  font-weight: 800;
  margin: 0 0 var(--heading-bottom-gap) 0;
}
.hardware-grid {
  display: flex;
  gap: 0.2rem; /* tighten gap so second row aligns with minimal spacing */
  justify-content: center;
  align-items: start;
  flex-wrap: wrap;
}
/* hardware-card replaced by .team-card above */

/* Universal team card/grid styles to reduce duplication across founders/hardware/software */
.team-grid {
  display: grid;
  /* Force two columns on desktop and let rows grow as needed */
  grid-template-columns: repeat(2, var(--team-card-width));
  gap: 1rem;
  justify-content: center;
  align-items: start;
}
.team-card {
  width: var(--team-card-width);
  max-width: 100%;
  position: relative;
  border-radius: 10px;
  overflow: visible;
  background: #111;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms cubic-bezier(.2,.9,.2,1);
  will-change: transform, box-shadow;
  -webkit-tap-highlight-color: transparent;
}
.team-img {
  display: block;
  width: 100%;
  height: var(--team-img-height);
  object-fit: cover;
  image-rendering: auto;
  border-radius: 10px;
}
.team-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  text-shadow: none;
}
.team-name { font-weight: 700; font-size: 1.12rem; color: #fff; }
.team-linkedin-icon {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
}
.team-linkedin-icon svg { width: 18px; height: 18px; fill: #fff; }

/* Pop-out hover effect: lift card with stronger shadow without affecting layout */
.team-card:hover,
.team-card:focus-within {
  transform: translateY(-8px) scale(1.02);
  z-index: 12;
  box-shadow: 0 24px 48px rgba(0,0,0,0.42);
}

/* Respect reduced-motion preference: avoid transforms and transitions */
@media (prefers-reduced-motion: reduce) {
  .team-card {
    transition: none !important;
    transform: none !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25) !important;
  }
}

/* software-* rules are removed; use .team-* classes instead */

@media (max-width: 900px) {
  .team-grid { flex-direction: column; gap: 1rem; }
  .team-img { height: auto; }
  .team-card { max-width: 520px; }
}

/* Admin-specific layout: show as a 2x2 grid on desktop, stack on small screens */
.admin-wrapper {
  max-width: 900px;
  margin: 2.5rem auto var(--section-bottom-gap) auto; /* add spacing above admin section */
  padding: 0 1.25rem;
  text-align: center;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, var(--team-card-width));
  gap: var(--team-gap);
  justify-content: center;
  align-items: start;
}

/* Center the single Outreach Executive card by making the outreach grid single-column
   and centering its items (desktop). Mobile still collapses to one column via media queries. */
.team-grid[aria-labelledby="outreach-heading"] {
  /* Make the outreach grid a single column sized to the card width,
     and center the card horizontally. This overrides .admin-grid layout. */
  grid-template-columns: var(--team-card-width);
  justify-content: center;
  justify-items: center;
}

@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
}

/* Software section wrapper: match spacing and max-width used by other sections */
.software-wrapper {
  max-width: 1200px;
  margin: var(--section-top-gap) auto var(--section-bottom-gap) auto;
  padding: 0 1.25rem;
  text-align: center;
}

/* Add extra space between the media section and footer (if a media-wrapper exists) */
.media-wrapper { margin-bottom: 3.5rem; }
#footer-placeholder { margin-top: 3.5rem; }

/* Ensure the centered extra hardware lead has the same top spacing as grid row gaps */
.team-grid[aria-label="additional-hardware-lead"] {
  margin-top: var(--team-gap);
}

/* Scroll-reveal helpers: elements start slightly down and faded, then pop into place */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.998);
  transition: transform 520ms cubic-bezier(.18,.9,.32,1), opacity 520ms ease;
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Slightly different easing/offset for headings for a distinct look */
.team-heading.reveal { transform: translateY(32px) scale(0.996); transition-duration: 640ms; }

/* Stagger utilities: JS will set inline --delay-ms or style.transitionDelay */
.reveal[data-delay] { transition-delay: var(--delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Ensure mobile-specific overrides come last so they win over earlier declarations */
@media (max-width: 900px) {
  /* Make the team background cover the full viewport on mobile */
  .team-section { min-height: 100vh; }
  .team-bg { min-width: 100vw; min-height: 100vh; background-size: cover; }

  /* Remove dark card background on mobile so images appear like supervisor card
     and remove the fixed-card flex so cards can size responsively */
  .team-card {
    background: transparent;
    flex: 0 1 auto; /* allow cards to shrink/grow instead of fixed width */
    width: 100%;
    max-width: 520px;
  }

  /* Make supervisor card match team-card sizing on mobile (avoid using the
     fixed flex var so behaviour is consistent across the layout) */
  .supervisor-card {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }
  /* Enforce a consistent image height for all cards on mobile so rows align */
  .team-img,
  .supervisor-img {
    height: var(--team-img-height);
    max-height: 320px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    width: 100%;
  }
}