/*
Block 04 "Real people. Real numbers." Spec: docs/blocks/04-real-people.md. Every value
comes from tokens.css.

The block is a placement and nothing else. The heading is the shared two-tone component,
the call to action the shared button, each metric the shared glass badge at its lg rung,
each photograph's arrival the shared photo reveal, and the section's own arrival the shared
scroll reveal. There is not one keyframe in this file, and that is the point: the CEO's
requirement for this block was that the badge be the master component with the counter, the
entrance and the float defined at component level, and that the photographs appear exactly
the way the hero's does. Both are true by construction here — there is nothing for a second
implementation to drift from.

Three things the block does decide, because they are about this block and no other: how
wide the section is, where the cards sit, and where a badge hangs off its card.
*/
.people {
  padding-block: var(--people-top) var(--people-bottom);
}

/*
Narrower than the sections above it, and deliberately: see --people-max. It still yields to
--page-inset, so on a narrow screen the block lines up with everything else rather than
insisting on a width that does not fit.
*/
.people__inner {
  width: min(var(--people-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
}

/*
The head is a grid rather than a pair of rows for the reason block 03's is: the button
stands beside the heading here and moves under it on a narrow screen, and named areas
restate that in the media query without the markup changing or the button being printed
twice.

On the desktop the button is centred against the heading block rather than pinned to one of
its edges — measured on the render, where the two centres are within a pixel of each other
across two lines of 82px.
*/
.people__head {
  display: grid;
  align-items: center;
  gap: var(--space-xl) var(--space-3xl);
  grid-template-areas: "title cta";
  grid-template-columns: 1fr auto;
}

/*
The shared two-tone heading at this section's size — and, unusually, in this section's dark
ink. --heading-ink is the component's own knob, so this is a value on the instance rather
than an edit of the component; see --ink-deep for why the value is not --ink.
*/
.people__title {
  max-width: var(--people-title-w);
  grid-area: title;

  --heading-fs: var(--fs-people-title);
  --heading-ls: var(--ls-people-title);
  --heading-lh: var(--lh-people-title);
  --heading-ink: var(--ink-deep);
}

.people__cta {
  grid-area: cta;
  justify-self: end;

  --btn-w: var(--people-cta-w);
  --btn-h: var(--people-cta-h);
}

/*
The row of cards. The width of a card is not stated: the four share the row and it is the
gap that is fixed, so at the section's own 1264 they come out at the design's 297.51 and a
fifth card added by the client narrows all five rather than running off the edge.

align-items: flex-start is what lets the even cards hang lower without stretching the odd
ones to match.
*/
.people__cards {
  display: flex;
  align-items: flex-start;
  gap: var(--people-card-gap);
  margin: var(--people-cards-gap) 0 0;
  padding: 0;
  list-style: none;
}

.people__card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* Which cards hang lower is a position, not a number in the markup: it survives the client. */
.people__card:nth-child(even) {
  margin-top: var(--people-card-drop);
}

/*
The frame clips the photograph and the wash over it; the badge stays outside it, so it can
hang past the edge and so its backdrop-filter keeps seeing a backdrop — inside a clipping,
blending ancestor it would degenerate into a flat fill.

isolation: isolate is not decoration. The wash on the third card is multiplied, and a blend
mode reaches through every ancestor that is not a stacking context of its own: without this
it would darken the page background around the card as well as the photograph under it.
*/
.people__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--people-card-ratio);
  border-radius: var(--people-card-radius);
  isolation: isolate;

  /*
  The photographs arrive one after another rather than together. The step is the Photo
  reveal component's own knob and the ordinal is stamped by its script, so this is one line
  for any number of cards.
  */
  --photo-reveal-step: var(--people-photo-step);
}

.people__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
The wash. Its strength and its blend mode come from the card, which takes them from a field
with a closed list of choices — see --people-tint.
*/
.people__tint {
  position: absolute;
  inset: 0;
  background: var(--people-tint);
  opacity: var(--people-tint-a, var(--people-tint-soft));
  mix-blend-mode: var(--people-tint-blend, normal);
  pointer-events: none;
}

/*
No wash at all — for a photograph that arrives dark enough on its own, which is what the
four supplied ones are. The layer stays in the markup rather than being left out, so every
card has the same shape whatever it is set to, and the choice is one value rather than a
branch in the template. See --people-tint-none.
*/
.people__card--tint-none {
  --people-tint-a: var(--people-tint-none);
}

.people__card--tint-strong {
  --people-tint-a: var(--people-tint-strong);
}

.people__card--tint-deep {
  --people-tint-blend: multiply;
}

/*
The badge. Everything it is belongs to the component; what is here is where it hangs and
when it arrives.

The side alternates with the card, from :nth-child(even) rather than from anything in the
markup, so adding or deleting a card renumbers the alternation by itself — the same rule
that decides which cards hang lower.

Each badge grows inward during its entrance, away from the edge it overhangs, for the
reason the hero's do: scaling from the centre pushes the outermost one past the edge of the
document for the two seconds of the entrance, and an overflow is better prevented than
clipped.

When it arrives is set here and not in the component. --badge-in-delay and --badge-in-step
are the component's knobs and always were, which is what makes this row tunable on its own
without a second badge existing: the hero sets its two delays by hand on its instances and
is not touched by anything written here. The step is --people-stagger, the same token the
photographs read, so the row cannot be staggered half way.
*/
.people__badge {
  position: absolute;
  bottom: var(--people-badge-bottom);
  left: calc(var(--people-badge-overhang) * -1);
  transform-origin: 0% 50%;

  --badge-in-delay: var(--people-badge-delay);
  --badge-in-step: var(--people-badge-step);
}

.people__card:nth-child(even) .people__badge {
  right: calc(var(--people-badge-overhang) * -1);
  left: auto;
  transform-origin: 100% 50%;
}

/*
Mobile: the button leaves the heading's row, and the cards stack and alternate which edge
they stand against. --bp-sm
*/
@media (max-width: 700px) {
  .people__head {
    grid-template-areas:
      "title"
      "cta";
    grid-template-columns: 1fr;
  }

  .people__cta {
    justify-self: start;
  }

  .people__cards {
    flex-direction: column;
  }

  /*
  The card no longer shares a row, so it states its own width, and the alternation becomes
  which edge it stands against: the odd ones 13 in from the left, the even ones against the
  right edge. auto on the other side is what makes that a single rule rather than two
  numbers that have to add up.
  */
  .people__card {
    width: var(--people-card-w);
    flex: 0 0 auto;
    margin-inline: var(--people-card-inset) auto;
  }

  .people__card:nth-child(even) {
    margin-inline: auto 0;
  }
}