/* ==========================================================================
   CVR — team.css
   "Our team". Loads after base.css, which carries the tokens and the shared
   chrome. This page has no banner: the header sits straight on the section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section ground
   Ink, with a green glow anchored at the top-left corner that runs the full
   height of the section, and a weaker one rising from the bottom-right.
   -------------------------------------------------------------------------- */

.team {
  position: relative;
  background-color: var(--color-ink);
  /* Stops derived from the mockup: the left glow is near-solid green in the
     corner, still lifting the left edge at the very bottom; the right edge
     carries a weaker lift that grows downward. */
  background-image:
    radial-gradient(
      34% 46% at 104% 102%,
      rgba(24, 169, 93, 0.4) 0%,
      rgba(24, 169, 93, 0.15) 45%,
      rgba(24, 169, 93, 0) 78%
    ),
    linear-gradient(
      to left,
      rgba(24, 169, 93, 0.22) 0%,
      rgba(24, 169, 93, 0.06) 14%,
      rgba(24, 169, 93, 0) 30%
    ),
    radial-gradient(
      42% 135% at 0% 0%,
      #56c54e 0%,
      rgba(24, 169, 93, 1) 22%,
      rgba(24, 169, 93, 0.85) 42%,
      rgba(24, 169, 93, 0.45) 65%,
      rgba(24, 169, 93, 0.12) 82%,
      rgba(24, 169, 93, 0) 95%
    );
  /* clears the fixed header on its own — there is no banner to sit under */
  padding-block: calc(var(--space-12) + var(--space-9)) var(--space-13);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */

.team__head {
  text-align: center;
}

.team__title {
  color: var(--color-lime);
  margin-block: -0.22em var(--space-2);
}

.team__lead {
  color: var(--color-white);
  font-size: var(--size-body-01);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Grid
   Three columns at desktop, on the plain gutter — the discs are centred in
   their column rather than aligned to the 12-column grid.
   -------------------------------------------------------------------------- */

.team__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--grid-gutter);
  row-gap: var(--space-11);
  margin: var(--space-13) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-13);
  }
}

@media (min-width: 1024px) {
  .team {
    padding-block: calc(var(--space-12) * 2) calc(var(--space-12) * 2.9);
  }
  .team__lead {
    font-size: 26px;
  }
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
    /* photo top to photo top is 630 in the mockup */
    row-gap: calc(var(--space-12) * 1.9);
    margin-top: calc(var(--space-12) * 1.9);
  }
  .member__name {
    font-size: 36px;
  }
}

/* --------------------------------------------------------------------------
   Portrait trigger
   The whole card opens the member's modal, so it is a button rather than a
   list item with a click handler. Everything visual still comes from the
   shared .member rules in base.css.
   -------------------------------------------------------------------------- */

.member__button {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

/* .member__name and .member__role carry top margins, which need a block box */
.member__button .member__name,
.member__button .member__role {
  display: block;
}

.member__button .member__photo {
  transition: transform var(--duration-base) var(--ease),
              box-shadow var(--duration-base) var(--ease);
}

.member__button:hover .member__photo,
.member__button:focus-visible .member__photo {
  transform: scale(1.03);
  box-shadow: 0 0 0 4px var(--color-lime);
}

.member__button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Member modal
   A wide ink card on a dimmed page: circular portrait on the left, the name,
   role and biography on the right, with the contacts and the CV pill dropped
   to the foot of the column. One <dialog>, refilled per portrait.
   -------------------------------------------------------------------------- */

.member-modal {
  width: min(1320px, 92vw);
  max-width: none;
  /* the reset zeroes every margin, which takes the dialog's own centring with it */
  margin: auto;
  max-height: 92dvh;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  overflow: visible;
}

.member-modal::backdrop {
  background: rgba(0, 12, 10, 0.72);
}

/* Both the card and the scrim fade in; the class is set one frame after
   showModal(), which is when the dialog first has a box to animate. */
.member-modal,
.member-modal::backdrop {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease);
}

.member-modal {
  transform: translateY(12px);
  transition: opacity var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}

.member-modal.is-open,
.member-modal.is-open::backdrop {
  opacity: 1;
}

.member-modal.is-open {
  transform: none;
}

.member-modal__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--space-6), 5vw, 96px);
  padding: clamp(var(--space-5), 2.7vw, 40px);
  border-radius: 28px;
  background: var(--color-ink);
  max-height: 92dvh;
  overflow-y: auto;
}

.member-modal__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.member-modal__body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-right: clamp(0px, 1.5vw, var(--space-5));
}

.member-modal__name {
  color: var(--color-lime);
  margin-block: -0.22em var(--space-2);
}

.member-modal__role {
  color: var(--color-white);
  margin: 0;
}

.member-modal__bio {
  color: var(--color-white);
  margin: var(--space-6) 0 0;
  max-width: 46ch;
}

/* Pushed to the foot of the column, as in the mockup, whatever the bio runs to */
.member-modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-9);
}

.member-modal__contact {
  display: grid;
  gap: var(--space-1);
}

.member-modal__contact a {
  color: var(--color-white);
  text-decoration: none;
}

.member-modal__contact a:hover,
.member-modal__contact a:focus-visible {
  color: var(--color-lime);
}

.member-modal__cv {
  font-size: var(--size-body-02);
  padding: var(--space-3) var(--space-6);
  text-transform: lowercase;
}

.member-modal__close {
  position: absolute;
  inset: clamp(var(--space-4), 2.4vw, 34px) clamp(var(--space-4), 2.4vw, 34px) auto auto;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-lime);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease),
              background-color var(--duration-base) var(--ease);
}

.member-modal__close:hover,
.member-modal__close:focus-visible {
  border-color: var(--color-lime);
  background: rgba(190, 208, 32, 0.12);
}

/* Below the two-column card the portrait sits above the copy, centred */
@media (max-width: 899px) {
  .member-modal__card {
    /* minmax(0) or the display name's min-content width widens the dialog */
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-top: var(--space-9);
    text-align: center;
  }
  .member-modal__photo {
    width: min(100%, 240px);
  }
  .member-modal__name {
    font-size: var(--size-h04);
  }
  .member-modal__body {
    align-items: center;
  }
  .member-modal__bio {
    margin-top: var(--space-5);
  }
  .member-modal__foot {
    flex-direction: column;
    align-items: center;
    padding-top: var(--space-6);
  }
  .member-modal__contact {
    justify-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-modal,
  .member-modal::backdrop,
  .member__button .member__photo {
    transition: none;
  }
  .member-modal {
    transform: none;
  }
}