/* About Page Specific Styles */

/* Team members */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;margin-top:32px}
.team-member{background:var(--card-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:24px;text-align:center;backdrop-filter:saturate(160%) blur(8px);transition:transform .18s ease, box-shadow .18s ease}
.team-member:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.team-photo{width:120px;height:120px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(135deg, var(--yellow), var(--green));display:grid;place-items:center;font-size:32px;font-weight:700;color:#fff;box-shadow:0 12px 24px rgba(0,0,0,.15);position:relative;overflow:hidden}
.team-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.team-member h3{margin:0 0 4px;color:var(--text)}
.team-role{color:var(--green);font-weight:600;font-size:14px;margin-bottom:8px}
.team-bio{font-size:14px;color:var(--muted);line-height:1.5}

/* Polaroid-style team cards (About page) */
.team-card.slim{
  position: relative;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  width: 420px; /* fixed width so grid can hug content */
  margin-inline: auto;
  margin-top: 48px; /* extra space so popped image doesn't collide with content above */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Reduce gap between team cards */
#team .grid.grid-2{
  grid-template-columns: repeat(2, auto); /* columns hug card width */
  justify-content: center; /* center the pair */
  gap: 20px; /* pleasant spacing between the two */
  align-items: start; /* align tops nicely */
}
.team-card.slim .h3{margin:0}

/* The white box itself */
.polaroid{
  position: relative;
  background: #fff;
  border-radius: 6px; /* crisper corners */
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  overflow: visible; /* allow image to pop above the white container */
  padding-bottom: 0; /* no extra space under frame */
  flex: 0 0 auto;
}

/* Yellow panel sits inside the frame and ends at the image bottom */
.polaroid-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* shorter yellow panel */
  overflow: visible; /* allow image head to overflow upward */
}
.polaroid-bg{
  position: absolute;
  inset: 0;
  background: var(--yellow);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 0;
}

/* Inner frame area for image with thick white border look */
.polaroid-frame{
  position: relative;
  background: transparent;
  border-radius: 4px;
  border: 12px solid #fff; /* thick white border */
  box-sizing: border-box; /* ensure equal border on all sides */
  overflow: visible; /* allow the head to pop above the inner border */
  width: 100%; /* use full inner width as requested */
  margin: 0 auto;
  z-index: 1;
  --pop: 20%; /* how far the image pops upward */
  --panel: 54%; /* default yellow height; adjust as needed (used if needed elsewhere) */
  transform: none; /* keep frame seated; pop image only */
  margin-bottom: 6px; /* controlled gap before caption */
}
.polaroid-stage .polaroid-img{
  position: absolute;
  left: 50%;
  bottom: 0; /* anchor to stage bottom so yellow ends at image bottom */
  width: auto;
  max-width: 78%; /* keep sides clear */
  height: 135%; /* pop further above the frame */
  transform: translateX(-50%); /* center horizontally without moving bottom */
  object-fit: contain; /* avoid side cropping */
  object-position: center bottom;
  z-index: 3; /* ensure image appears above frame and card */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
}

/* Caption area inside the same white box */
.polaroid-caption{
  position: relative;
  z-index: 2; /* avoid being visually faded/underlays */
  padding: 4px 16px 28px; /* extra bottom padding for space below LinkedIn icon */
  margin-top: 0; /* no negative margins to avoid clipping */
  text-align: center;
}
.polaroid-caption .h3{margin: 0; font-size: var(--fs1);} /* remove extra space */
.polaroid-caption .role{color: var(--muted); font-weight: 600; font-size: var(--fs-1)}
.polaroid-caption .bio{margin: 8px auto 0; font-size: var(--fs-1); color: var(--muted); line-height: 1.6; max-width: 60ch}
.polaroid-caption .badges{margin-top: 12px;}

/* Ensure card children stretch for equal heights */
#team .grid.grid-2 > .card{height: 100%;}

/* Tweak badge spacing inside new slim cards */
.team-card.slim .badge{margin-top:8px}

/* Values grid */
.values-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;margin-top:24px}
.value-card{background:transparent;border:1px solid rgba(0,132,61,0.15);border-radius:var(--radius);padding:20px;transition:all 0.3s ease}
.value-icon{width:48px;height:48px;border-radius:50%;background:rgba(255, 205, 0, 0.15);display:grid;place-items:center;font-size:20px;margin-bottom:12px;color:var(--green)}
.value-card:hover{background:rgba(255,205,0,0.05);border-color:rgba(0,132,61,0.3);transform:translateY(-2px)}
.value-card h4{margin:0 0 8px;color:var(--text)}
.value-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-top:32px}
.stat-card{text-align:center;padding:20px;background:rgba(255,255,255,.4);border:1px solid var(--glass-border);border-radius:var(--radius);backdrop-filter:saturate(160%) blur(8px)}
.stat-number{font-size:32px;font-weight:800;color:var(--green);margin-bottom:4px}
.stat-label{font-size:14px;color:var(--muted);font-weight:600}

/* Responsive */
@media (max-width: 1024px){
  .stats-grid{grid-template-columns:repeat(2, 1fr)}
  .values-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .stats-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .team-card.slim{width: 360px}
}