/* ==========================================================================
   Greensnake — Community
   --------------------------------------------------------------------------
   The only one of the inner pages that opens on a photograph rather than on
   type, because this page is about people and a wall of text would be the
   wrong first impression. Everything below the hero is the shared kit.
   ========================================================================== */

.community { background: var(--green-900); }

/* ==========================================================================
   Hero
   ========================================================================== */
.chero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 760px);
  padding-block: calc(var(--nav-h) + var(--space-10)) var(--section-y);
  overflow: hidden;
}

.chero__bg {
  position: absolute;
  inset: -6% 0;
  z-index: 0;
}
.chero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two scrims, not one: a vertical wash that lifts the type off the busy
   lower half, and a flat tint that keeps the whole photograph in the brand's
   green rather than letting it read as a stock image. */
.chero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--green-900) 4%, rgba(2, 31, 17, 0.45) 46%, rgba(2, 31, 17, 0.72) 100%),
    linear-gradient(rgba(2, 31, 17, 0.35), rgba(2, 31, 17, 0.35));
  pointer-events: none;
}

.chero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.chero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  background: rgba(2, 31, 17, 0.5);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}
.chero__badge img { width: 16px; height: auto; }

.chero__est {
  padding-left: var(--space-3);
  border-left: 1px solid var(--on-dark-line);
  color: var(--lime);
}

.chero__title {
  max-width: 14ch;
  margin: 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--on-dark);
  text-wrap: balance;
}

.chero__lede {
  max-width: 46ch;
  margin: 0 0 var(--space-7);
  font-family: var(--font-alt);
  font-size: var(--step-lead);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--on-dark-2);
  text-wrap: pretty;
}

.chero__facts { margin-top: var(--gap-block); }
.chero__facts b { font-size: 1.25rem; }

/* ==========================================================================
   The collective
   ========================================================================== */
.collective__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-top: var(--gap-head);
}

/* ==========================================================================
   Person card
   --------------------------------------------------------------------------
   Built to survive missing data. A profile may have an avatar, a background
   image, both or neither, and the card has to hold its shape either way —
   because the next one will be added through /admin by someone who has not
   read this file.
   ========================================================================== */
.person {
  position: relative;
  display: flex;
  height: 100%;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--on-dark-line);
  overflow: hidden;
  transition: box-shadow var(--t-slow) var(--ease-soft),
              transform var(--t-slow) var(--ease-soft);
}
.person:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(228, 254, 0, 0.32);
}

/* The optional background sits behind everything at low opacity — texture,
   not a picture. It brightens slightly on hover so the card feels alive
   without the text ever losing contrast. */
.person__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.person__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  transition: opacity var(--t-slower) var(--ease-soft),
              transform 900ms var(--ease-soft);
}
.person:hover .person__bg img { opacity: 0.3; transform: scale(1.05); }
.person__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--green-900) 12%, rgba(2, 31, 17, 0.72) 100%);
}

.person__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}

.person__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.person__index {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.1em;
  color: var(--lime);
}
/* 1 -> 01, without asking anyone to type the zero */
.person__index::before { content: "0"; }

.person__team { text-transform: uppercase; letter-spacing: 0.06em; }

.person__tag {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.5;
  color: var(--on-dark-3);
}

.person__id {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.person__avatar {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 0 0 1px var(--on-dark-line);
}

.person__name {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--on-dark);
  text-wrap: balance;
}

.person__role {
  margin: 3px 0 0;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.04em;
  color: var(--lime);
}

.person__bio {
  margin: 0;
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--on-dark-2);
}

.person__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--on-dark-line);
}

.person__social {
  display: flex;
  gap: 6px;
  list-style: none;
}
/* An empty social list must not leave a gap where icons would have been. */
.person__social:empty { display: none; }

/* ==========================================================================
   Join the movement
   ========================================================================== */
.movement__plate {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  aspect-ratio: 1440 / 720;
}

/* The photograph is 4:3 and this plate is 2:1, so a centred crop would take
   the slice off the top of everyone's heads. Nudging the focal point up keeps
   the faces — the whole point of the picture — inside the frame. Both layers
   have to agree, or the colour wash would jump on hover. */
.movement__plate .plate__img { object-position: 50% 30%; }
.movement__plate .plate__colour { background-position: 50% 30%; }

.movement__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(2, 20, 11, 0.9) 6%, rgba(2, 20, 11, 0.15) 62%);
  pointer-events: none;
}

.movement__copy {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-9) var(--space-6);
  text-align: center;
}

.movement__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime);
}

.movement__title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--step-h2);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--white);
  text-wrap: balance;
}

.movement__text {
  max-width: 46ch;
  margin: 0 0 var(--space-3);
  font-size: var(--step-small);
  line-height: 1.6;
  color: var(--on-dark-2);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .chero { min-height: 0; }
  .movement__plate { aspect-ratio: 4 / 5; }
  .movement__copy { padding: var(--space-7) var(--space-5); }

  /* Portrait turns the plate into a tall frame and the caption grows to fill
     most of it, so the copy now lands on faces rather than on the quiet band
     along the bottom. The desktop scrim is too light to carry that; this one
     is deeper but still a wash, not a panel — the photograph reads through. */
  .movement__plate::after {
    background: linear-gradient(to top,
      rgba(2, 20, 11, 0.94) 14%,
      rgba(2, 20, 11, 0.72) 52%,
      rgba(2, 20, 11, 0.34) 100%);
  }
}

@media (max-width: 560px) {
  .chero__badge { flex-wrap: wrap; gap: var(--space-2); }
  .chero__facts b { font-size: 1.125rem; }
  .person__inner { padding: var(--space-5); }
  .person__foot { flex-direction: column; align-items: stretch; }
  .person__foot .btn { justify-content: space-between; }
  .person__social { justify-content: center; }
}