/* ============================
   Team Page — Mascot Brewery
   Page-specific styles only.
   Team-card classes (.team-card, .team-photo-art,
   .team-info, .team-role, .team-name, .team-bio) and
   shared hero pieces (.about-back-bar, .about-eyebrow,
   .about-title, .about-tagline, .about-meta, .loc-meta-stat,
   .loc-eyebrow-tag, .loc-eyebrow-sep, .stat-num, .stat-label)
   live in about.css, which team.ejs links alongside this file.
   ============================ */

/* ── Hero ─────────────────────────────────── */
.team-hero {
  padding: 110px 60px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Intro ── */
.team-body {
  max-width: 1200px;
  margin: 0 auto;
}

.team-intro {
  padding: 60px 60px 0;
  border-top: 1px solid var(--border);
  max-width: 760px;
}

.team-intro p {
  font-size: 1rem;
  color: var(--fg-muted);
  line-height: 1.8;
}

.team-intro-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, border-color 0.2s;
}

.team-intro-link:hover {
  color: var(--fg);
  border-color: var(--accent);
}

/* ── Group sections ── */
.team-group {
  padding: 80px 60px;
  border-top: 1px solid var(--border);
}

.team-group-header {
  margin-bottom: 48px;
  max-width: 720px;
}

.team-group-sub {
  font-size: 0.9rem;
  color: var(--fg-muted);
  line-height: 1.7;
  max-width: 520px;
}

.team-group-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

/* ── Responsive ─── */
@media (max-width: 900px) {
  .team-hero { padding: 100px 32px 60px; }
  .team-intro { padding: 40px 32px 0; }
  .team-group { padding: 60px 32px; }
  .team-group-grid { grid-template-columns: 1fr; }
}