/* About Us page. Layout primitives come from css/agc-content.css; the shell (header,
   footer, skip link, eyebrow) from css/agc-static-pages.css. Only the hero collage and
   the team grid below are unique to this page. */

/* Two-column hero: copy on the left, a collage of founder photography on the right.
   The photos are crops of the original About Us banner, so this is the same team imagery
   the page has always carried, without the banner's own headings and graphics.
   Below 900px the columns stack and the collage sits under the text. */

.agc-about-hero {
  align-items: center;
  display: grid;
  gap: clamp(36px, 5vw, 76px);
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
}

.agc-about-hero__copy {
  min-width: 0;
}

/* The shared hero type scale is set for a full-width column; step it down so the
   headline still reads as the largest thing on the page inside a half-width one. */
.agc-about-hero h1 {
  font-size: clamp(42px, 4.9vw, 74px);
}

.agc-about-hero__gallery {
  display: grid;
  gap: clamp(10px, 1.1vw, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  position: relative;
}

/* An orange frame offset behind the collage, and a patch of the brand dot grid. */
.agc-about-hero__gallery::before {
  border: 1px solid rgba(223, 71, 0, .45);
  border-radius: var(--agc-radius-lg);
  content: "";
  inset: 22px -18px -18px 22px;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.agc-about-hero__gallery::after {
  background-image: var(--agc-dots);
  background-size: var(--agc-dots-size);
  bottom: -46px;
  content: "";
  height: 180px;
  left: -46px;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent);
  mask-image: radial-gradient(closest-side, #000 25%, transparent);
  pointer-events: none;
  position: absolute;
  width: 220px;
  z-index: -1;
}

.agc-about-hero__photo {
  aspect-ratio: 16 / 9;
  background: var(--agc-bg-raised);
  border: 1px solid var(--agc-line-strong);
  border-radius: var(--agc-radius);
  box-shadow: var(--agc-shadow-2);
  display: block;
  height: auto;
  object-fit: cover;
  transition:
    border-color var(--agc-dur) ease,
    transform 500ms var(--agc-ease);
  width: 100%;
}

.agc-about-hero__photo--wide {
  border-radius: var(--agc-radius-lg);
  grid-column: 1 / -1;
}

.agc-about-hero__photo:hover {
  border-color: var(--agc-accent-line);
  transform: translateY(-4px);
}

/* Entrance: copy rises in line by line, then the photos. CSS only, so the hero never
   waits on JavaScript; backwards fill leaves the hover lift free once it has played. */
.agc-about-hero__copy > *,
.agc-about-hero__photo {
  animation: agc-rise 820ms var(--agc-ease) backwards;
}

.agc-about-hero__copy > :nth-child(2) { animation-delay: 70ms; }
.agc-about-hero__copy > :nth-child(3) { animation-delay: 140ms; }
.agc-about-hero__copy > :nth-child(4) { animation-delay: 210ms; }
.agc-about-hero__copy > :nth-child(5) { animation-delay: 280ms; }
.agc-about-hero__photo { animation-delay: 220ms; }
.agc-about-hero__photo:nth-child(2) { animation-delay: 320ms; }
.agc-about-hero__photo:nth-child(3) { animation-delay: 420ms; }

/* Team */

.agc-about-team {
  display: grid;
  gap: var(--agc-gap);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.agc-about-person {
  background: var(--agc-bg-raised);
  border: 1px solid var(--agc-line);
  border-radius: var(--agc-radius-lg);
  box-shadow: var(--agc-shadow-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition:
    border-color var(--agc-dur) ease,
    box-shadow var(--agc-dur) var(--agc-ease),
    transform var(--agc-dur) var(--agc-ease);
}

.agc-about-person:hover,
.agc-about-person:focus-within {
  border-color: var(--agc-accent-line);
  box-shadow: var(--agc-shadow-2);
  transform: translateY(-5px);
}

.agc-about-person__photo {
  aspect-ratio: 4 / 5;
  background: var(--agc-bg);
  display: block;
  object-fit: cover;
  transition:
    filter 500ms ease,
    transform 700ms var(--agc-ease);
  width: 100%;
}

.agc-about-person:hover .agc-about-person__photo:not(.agc-about-person__photo--contain),
.agc-about-person:focus-within .agc-about-person__photo:not(.agc-about-person__photo--contain) {
  transform: scale(1.05);
}

.agc-about-person__photo--contain {
  background: var(--agc-bg-raised);
  object-fit: contain;
}

.agc-about-person__body {
  border-top: 1px solid var(--agc-line);
  flex: 1;
  padding: 18px clamp(16px, 1.5vw, 22px) 20px;
  position: relative;
}

/* An orange rule that grows along the top of the name plate on hover. */
.agc-about-person__body::before {
  background: var(--agc-accent);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: -1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--agc-ease);
  width: 100%;
}

.agc-about-person:hover .agc-about-person__body::before,
.agc-about-person:focus-within .agc-about-person__body::before {
  transform: scaleX(1);
}

.agc-about-person__body h3 {
  color: #fff;
  font: 700 clamp(18px, 1.5vw, 22px)/1.2 var(--agc-font-display);
  margin: 0;
}

.agc-about-person__email {
  color: var(--agc-accent-text);
  display: inline-block;
  font: 400 14px/1.45 var(--agc-font-body);
  min-height: 44px;
  overflow-wrap: anywhere;
  padding: 12px 0;
  text-decoration: none;
}

.agc-about-person__email:hover,
.agc-about-person__email:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1180px) {
  .agc-about-team {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .agc-about-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .agc-about-hero__gallery {
    margin: 8px 18px 18px 0;
    max-width: 640px;
  }
}

/* Phones: one column of horizontal cards, so each email address fits on one line. */
@media (max-width: 640px) {
  .agc-about-team {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
  }

  .agc-about-person {
    align-items: stretch;
    flex-direction: row;
  }

  .agc-about-person__photo {
    aspect-ratio: 1;
    flex: 0 0 112px;
    height: auto;
    width: 112px;
  }

  .agc-about-person__body {
    align-self: center;
    border-left: 1px solid var(--agc-line);
    border-top: 0;
    min-width: 0;
    padding: 16px 18px;
  }

  .agc-about-person__body::before {
    display: none;
  }

  .agc-about-hero__photo,
  .agc-about-hero__photo--wide {
    border-radius: 14px;
  }

  .agc-about-hero__gallery::before {
    inset: 14px -12px -12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .agc-about-hero__copy > *,
  .agc-about-hero__photo {
    animation: none;
  }

  .agc-about-person,
  .agc-about-person:hover,
  .agc-about-person:focus-within,
  .agc-about-person__photo,
  .agc-about-hero__photo:hover {
    transform: none !important;
  }
}