/* About O1 — V3.0 design (Figma 18:524). */

/* --------------------------------------------------------------- Who we are */

/* No bottom padding: the team section directly below is the same cream and
   brings its own --space-8, so the two lead-ins stacked to 320px of blank
   between the button and "The O1 Team". With no colour change at the boundary
   there is nothing to justify the doubling. */
.ab-who { padding-block-end: 0; }

.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
  align-items: center;
  gap: var(--space-6);
}

.ab-lead {
  margin-block-start: var(--space-4);
  max-inline-size: 62ch;
  color: rgb(5 50 37 / 0.78);
}

.ab-who-cta {
  display: flex;
  margin-block-start: var(--space-5);
}

.ab-art { color: var(--green-700); }

.ab-art svg {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 20rem;
  display: block;
  margin-inline-start: auto;
}

/* -------------------------------------------------------------- The team --- */

.ab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

/* Square frame, as drawn: the people are photographed to it and the agents are
   drawn into it, so both rows sit on the same grid however the art differs. */
.ab-portrait {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--cream-dim);
}

.ab-photo {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* The agent sketches carry their own generous whitespace, so they sit on the
   page rather than in a tinted box — otherwise the two rows read as different
   kinds of thing. */
.ab-portrait.is-art {
  background: none;
  border-radius: 0;
}

.ab-sketch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
}

.ab-sketch svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.ab-name {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.ab-role {
  margin: 0.35rem 0 0;
  font-size: var(--text-sm);
  color: rgb(5 50 37 / 0.7);
}

/* ----------------------------------------------------------- Responsive --- */

@media (max-width: 60rem) {
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .ab-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  /* Sketch first on a phone. The copy stays first in the DOM — it is the
     substance of the section and what a screen reader should reach first — so
     the change is presentational only. */
  .ab-art { order: -1; }
  .ab-art svg { margin-inline: auto; max-block-size: 14rem; }

  /* One column rather than two: at 390px a two-up grid leaves each portrait
     about 160px wide, which is too small to read a face in. */
  .ab-grid {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 22rem;
    margin-inline: auto;
  }
}