/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   AboutAgentsSection — Figma zwjE3DrysH5sY4WacmYDKy, node 6947:10487.
   Spec: AboutAgentsSection.figma.md.

   `.hp-section` supplies the 128px padding and the 64px header → cards
   gap; `.hp-section--stepped` (section.css) the rhythm step-down. The badge and
   the tag pills are `.hp-badge--cream`.
   ============================================================ */

.about-agents {
  background: var(--background-white);
}


/* ---- Cards row (6947:10497) ------------------------------- */

/* Three equal columns, 16px apart — 450.67 each on the 1384 track. Stretch,
   so every card is as tall as the tallest. */
.about-agents__cards {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   var(--spacing-4);      /* 16px */
  align-items:           stretch;
  margin:                0;
  padding:               0;
  list-style:            none;
}

.about-agents__card-item {
  display: flex;                                /* lets the figure fill the cell */
}


/* ---- Card (6947:10498) ------------------------------------ */

/* Quote pinned to the top, author + tags to the bottom. The 28px minimum gap
   is what fits the longest quote in Figma's 326px row — its own card 3 asks
   for 36 and overflows the box by 8 (see the spec). */
.about-agents__card {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  gap:             1.75rem;                     /* 28px minimum */
  width:           100%;
  margin:          0;
  padding:         2.25rem 2rem 2.25rem 2.25rem; /* 36 / 32 / 36 / 36 */
  background:      var(--card);
  border:          0.5px solid var(--opacity-neutral-40);
  border-radius:   var(--radius-lg);            /* 24px */
  box-sizing:      border-box;
}

/* Quote cards are the redesign's one upright-serif body text. */
.about-agents__quote {
  margin:      0;
  font-family: var(--font-family-serif);
  font-weight: var(--font-weight-light);        /* Rowan Light */
  font-size:   var(--font-size-2xl);            /* 24px */
  line-height: var(--line-height-2xl);          /* 32px */
  color:       var(--foreground);
}

/* 6950:10898 — author → tags 24px */
.about-agents__meta {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);             /* 24px */
}

.about-agents__author {
  display:        flex;
  flex-direction: column;
  font-size:      var(--font-size-base);        /* 16px */
  line-height:    var(--line-height-base);      /* 24px */
}

.about-agents__name {
  color: var(--foreground);
}

.about-agents__role {
  color: var(--muted-foreground);
}

/* Pills are the stock `.hp-badge` (26px, 12/16 medium) in its
   `.hp-badge--cream` variant. */
.about-agents__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--spacing-2);                  /* 8px */
}


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

/* No About mobile frame yet. Three columns hold down to ~992 (≈300px cards);
   below that they stack. */
@media (max-width: 991px) {
  .about-agents__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .about-agents__card {
    padding: 1.75rem 1.5rem;                    /* 28 / 24 */
  }
}