/* ==========================================================================
   parts/team-profile.css — parts/team-profile.php (one /the-monarch-team/ trainer / agent row; live
   #our-trainers > .brxe-block.flex--row.align-items--center.gap--l[.flex--col-reverse-m]). Template-scoped.
   Spec: docs/R3-PLAN.md §1.4.4; live: docs/scout/r3/TEAM.md §6.

   Breakpoints are 767/768 and 768/769 here, not the usual 479: ACSS's -m is max-width: 768px (inclusive) and the
   Bricks resets are max-width: 767px (TEAM §6.2). One DOM order [media, body]; --media-end = rows 1/3/5.
     ≤767        column: image on top (full bleed ≤478), text full width below
     768         rows 2/4: two equal columns (329.16 / 329.14); rows 1/3/5 stay a column with the 550px text block
                 pushed to the end (x 181.78): live's 768 quirk (quirk 8, reproduced)
     ≥769        two equal columns; rows 1/3/5 text left + image right, rows 2/4 image left + text right
   Rows (390 / 768 / 1440): #richard-litt 726.89 / 836.25 / 433.92 … agents 786.73 / 951.8 / 550.33.
   ========================================================================== */

.team-profile {
  display: flex;
  flex-direction: column;
  align-items: center;                               /* live .align-items--center */
  gap: var(--space-l);                               /* live .gap--l */
  color: var(--white);                               /* live .text--white (the body colour is navy) */
}

/* live: two width:100% Bricks blocks, so align-items: center never shrinks them. */
.team-profile__media,
.team-profile__body { inline-size: 100%; }

/* ≤478: the image bleeds to the viewport edges (live .wlp-breakout--s-full is 100vw; the container spans the
   section's content box, so one gutter each side is exact). */
.team-profile__media {
  margin-inline: calc(-1 * var(--gutter));
  inline-size: calc(100% + 2 * var(--gutter));
}

/* live: the <img> is a flex item of a Bricks block (no line box); its natural 1024px is always wider than the
   column, so the rendered size is the column width × the natural ratio. No radius, object-fit fill. */
.team-profile__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.team-profile__text {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);                           /* h3 → read more */
}

.team-profile__name { color: var(--white); }         /* Nimbus 700 --h3, calc(4px + 2ex) (base h3) */

@media (min-width: 479px) {
  .team-profile__media {
    margin-inline: 0;
    inline-size: 100%;
  }
}

/* Two-column rows. Live centres the two columns (.align-items--center); here both columns stretch to the row height
   and centre their content inside (grid align-content), which paints the same, but gives the two reveal items one
   top, so the reveal engine sees one row and plays it left → right (with centred columns of unequal height it saw
   two rows and played the taller image first on rows 1 and 5 at 1440). */
@media (min-width: 768px) {
  .team-profile:not(.team-profile--media-end) {
    flex-direction: row;
    align-items: stretch;
  }

  /* Equal halves as live makes them: two 100%-wide blocks that shrink (329.16 / 329.14 at 768, 637.5 / 637.5 at
     1440). A zero basis that grows gives the same halves with the 1/64px remainder on the other column. */
  .team-profile:not(.team-profile--media-end) > * {
    display: grid;
    align-content: center;
    flex: 0 1 100%;
    min-inline-size: 0;
  }

  .team-profile__text { max-inline-size: 55rem; }   /* live #brxe-tkynzp … {max-width: 55rem} */

  .team-profile--media-end .team-profile__text { margin-inline-start: auto; }   /* live align-self: flex-end */
}

/* ≥769: rows 1/3/5 become rows too, text left (live .flex--col-reverse-m ends at 768). The shrinking 100% basis is
   set only on rows, never on a column (where a flex basis would fight the content height). */
@media (min-width: 769px) {
  .team-profile--media-end {
    flex-direction: row-reverse;
    align-items: stretch;
  }

  .team-profile--media-end > * {
    display: grid;
    align-content: center;
    flex: 0 1 100%;
    min-inline-size: 0;
  }
}