/* ============================================
   About Us page — page-specific bits.

   Two component groups:
     - .gs-about-hero          Hero bg override — gs23-lp-bg-2 illustration
                               instead of the default dark-blue-waves.
     - .gs-about-team /
       .gs-team-card           Pill-tabs panel + member-card grid.
                               4-up grid of vertical cards (photo top,
                               name + role + social row below).

   Everything else (2-col story rows, closing CTA) uses shared
   primitives (.gs-wgs-row, .gs-cta--horizontal) — no overrides.
   ============================================ */

/* ─── Hero bg ─────────────────────────────────────────────── */

.gs-about-hero {
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-lp-bg-2.svg');
}

/* ─── Row alignment override ──────────────────────────────── */

/* Base .gs-wgs-row__media img centers the image in its grid cell
   (max-width: 480px; margin: 0 auto), creating ~65px of "padding"
   between the section edge and the image. Push each image to the
   OUTER edge of its cell so it sits flush with the section's
   content max-width — matches where the text starts on the
   alternating row.

   Result: section 1 (default — image left cell) → image flushes
   LEFT; section 2 (--reverse — image right cell) → image flushes
   RIGHT. Both images now share the same outer rail as the text
   columns on the opposite row.

   Scoped via .gs-about-row so other pages using .gs-wgs-row keep
   the centered-in-cell behaviour. Mobile (≤900px) — base
   stylesheet collapses to single column and recenters; we don't
   touch that. */
@media (min-width: 901px) {
  .gs-about-row .gs-wgs-row__media img {
    margin: 0 auto 0 0;
  }
  .gs-about-row.gs-wgs-row--reverse .gs-wgs-row__media img {
    margin: 0 0 0 auto;
  }
}

/* ─── Team tabs + grid ────────────────────────────────────── */

/* Emoji prefix on each tab pill — small inline marker before the
   team name. Slight right margin so the name doesn't bump up
   against the emoji. Founders has no emoji so this rule simply
   doesn't apply on that tab. */
.gs-about-team__tab-emoji {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.95em;
  line-height: 1;
}

/* Tab panel container — just a wrapper for the card grid. The
   pill tabs above (.gs-wgs-tabs__list-wrap) carry their own
   chrome from tabs.css. */
.gs-about-team__panel {
  margin-top: 3rem;
}

.gs-about-team__panel[hidden] {
  display: none;
}

/* 4-up grid of team-member cards. Collapses progressively on
   smaller viewports (4 → 3 → 2 → 1). 12-member teams render as
   3 rows on desktop, 6 rows on phone — feels paced, not endless. */
.gs-about-team__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

/* Centered variant — applied by the template when a team has fewer
   than 4 cards (Founders: 3 members + no description; Shield: 2
   members + 1 lead). Switches to fixed-width columns + centered
   track so the row sits in the middle of the section instead of
   left-aligned with empty trailing space.

   Desktop-only: at tablet/mobile the grid already collapses to
   2-3 columns where 3 cards either fill or only leave half a
   row empty, so the default left-aligned look is fine. */
@media (min-width: 1025px) {
  .gs-about-team__grid--centered {
    grid-template-columns: repeat(auto-fit, minmax(0, 280px));
    justify-content: center;
  }
}

/* ─── Team member card (glass on dark navy) ───────────────── */

/* Glass-effect card recipe per PATTERNS.md §5.2: translucent fill,
   thin white border, 20px blur, soft lift shadow. Photo + name +
   role + social row, all centered on the card. */
.gs-team-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  isolation: isolate;
  border-radius: 16px;
  padding: 2rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gs-team-card__photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.gs-team-card__name {
  font-size: 1rem;
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0 0 0.25rem;
}

.gs-team-card__role {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 1rem;
}

/* Social row at the bottom of each card. Outlined white discs on
   the glass bg; hover fills with the coral brand accent. */
.gs-team-card__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 0.5rem;
}

.gs-team-card__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gs-team-card__social:hover {
  background: var(--color-brand-accent);
  border-color: var(--color-brand-accent);
  color: #fff;
}

/* ─── Lead card — team mascot/description ────────────────── */

/* The first card in each tab is the team's mascot — no photo, just
   the team name + a short description of what the team does. Same
   glass tile, but centered text + larger title, no photo slot. */
.gs-team-card--lead {
  justify-content: center;
  padding: 2rem 1.5rem;
}

.gs-team-card__lead-emoji {
  /* Per-team mascot emoji (🦡 🍄 🔥 etc.) — same 42px scale the
     live page uses so the symbol reads as a focal marker, not an
     inline glyph. Centered above the team name. */
  display: block;
  font-size: 42px;
  line-height: 1;
  margin: 0 0 0.75rem;
}

.gs-team-card__lead-name {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0 0 0.75rem;
}

.gs-team-card__lead-desc {
  font-size: 0.875rem;
  line-height: var(--leading-relaxed);
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  text-wrap: pretty;
}

/* ─── Closing CTA — grey bg override ──────────────────────── */

/* Base .gs-cta is dark-navy with the waves bg + white text — the
   "bookend the page" register. On the about page the team section
   above is already dark navy, so a second dark band would feel
   heavy and repetitive. Switch the CTA to a muted (grey) bg with
   dark text for a calmer wrap-up. */
.gs-about-cta {
  background-color: var(--color-bg-muted);
  background-image: none;
  color: var(--color-fg);
}

.gs-about-cta .gs-cta__title,
.gs-about-cta .gs-cta__description {
  color: var(--color-fg);
}

/* .gs-btn--secondary uses currentColor for the border, so it
   auto-adapts to the surrounding text color — no further button
   override needed. */

/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 1024px) {
  .gs-about-team__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .gs-about-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .gs-about-team__grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}