/* ---- Profile card ----
   Generic, reusable "large photo + name + bio copy" card, two-up in a grid.
   First used by the Customer Stories page's "More customer stories" section
   (Figma 18614:14559/18621:14665), but not named after that content — any
   page profiling a person (customer, partner, team member) alongside a
   large photo can reuse it.

   Structure:
     .profile-card-grid > .profile-card (one or more)
       > .profile-card__media  (photo)
       > .profile-card__body   (name + bio paragraphs) */

.profile-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-2xl); /* 24px */
  row-gap: var(--space-6xl); /* 64px */
  width: 100%;
}

.profile-card {
  display: flex;
  flex-direction: column;
  background: var(--colour-white);
  border: 1px solid var(--colour-grey-200);
  border-radius: 12px;
  overflow: hidden;
}

.profile-card__media {
  width: 100%;
  overflow: hidden;
}

/* aspect-ratio lives on the img itself, not the wrapper — a percentage
   height on a normal-flow img doesn't reliably resolve against a flex
   column's own aspect-ratio-derived box (it was rendering at the image's
   own intrinsic portrait ratio instead). aspect-ratio + object-fit on a
   replaced element like <img> is the well-supported combination. */
.profile-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 628 / 353.25;
  object-fit: cover;
}

.profile-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px */
  padding: var(--space-5xl) var(--space-4xl); /* 42px 40px */
}

/* Typography matches .text-h6 (css/typography.css). */
.profile-card__name {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  color: var(--colour-header-grey);
}

/* Typography matches .text-body-sm (css/typography.css); paragraphs carry
   their own gap rather than a single flowed block, matching the Figma
   source's separate paragraph runs. */
.profile-card__bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px */
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: 14px;
  line-height: 22.4px; /* 1.6 — bumped for readability, was 19.6px (1.4) */
  color: var(--colour-body-grey);
}

.profile-card__bio p {
  margin: 0;
}

/* ---- Responsive ----
   Two-up is fluid (1fr columns) so it reflows naturally down to tablet;
   single column only once a phone-width column would make the photo/copy
   too narrow to read comfortably, same breakpoint as the site's other
   card grids (css/card-grid.css). */

@media (max-width: 767px) {
  .profile-card-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-3xl); /* 32px */
  }

  .profile-card__body {
    padding: var(--space-2xl); /* 24px */
  }
}