/*
Block 05 "Formulated for measurable change". Spec: docs/blocks/05-formulated.md. Every
value comes from tokens.css.

The block is two parts in one section — a heading with a photograph, and a tinted card of
metrics — and, as everywhere on this site, what is written here is only where things sit.
The heading is the shared two-tone component, the button is the shared button, the entrance
is the shared Reveal, the photograph arrives through Photo reveal and the numbers count
through the Counter that the badge already uses.

--- The top part is one grid cell with three things in it ---------------------------------

The photograph is 1128 wide and centred, the heading is 550 wide at the left edge of the
frame, and the two overlap horizontally by some 300px. They do not collide, because the
picture is fitted (contain) into that box and the bottle sits in the middle of it — the
overlap is the empty margin of the photograph, and that is how the design draws it.

So all three share one grid area rather than being three rows or an absolutely positioned
layer over two. The row is as tall as the tallest of them, which keeps the card below in
normal flow: a client who writes four lines of intro where the design has three gets a
taller section instead of text running under the card.

--- What the card overlaps ----------------------------------------------------------------

The card is pulled up over the bottom of the photograph by --formulated-card-overlap. That
is the design: the hand runs on behind the card. It is a margin rather than a position, so
the card is still in flow and still sets the bottom of the section.
*/
.formulated {
  padding-block: var(--formulated-top) var(--formulated-bottom);
}

.formulated__inner {
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
}

/*
minmax(0, 1fr) and not 1fr. A 1fr track is minmax(auto, 1fr), and that auto minimum is the
content's own min-content — which here is a photograph with a stated width of 1128. So the track
grew to 1128 whatever the frame was, the max-width: 100% on the media below resolved against
that same 1128 and constrained nothing, and the page scrolled sideways from about 800 down to
1168. A zero minimum lets the track give way.
*/
.formulated__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/*
Three things in one cell. Each one places itself inside it — the intro at the start, the
photograph in the middle, the caption at the end — and none of them is taken out of flow,
so the cell is as tall as the tallest.
*/
.formulated__intro,
.formulated__media,
.formulated__caption {
  grid-area: 1 / 1;
}

/*
The column is as wide as the heading, which is the wider of the two things in it — the
paragraph sets its own, narrower measure. Stated on the column as well as on the heading so
that the cell it shares with the photograph has a width to place things against.
*/
.formulated__intro {
  justify-self: start;
  max-width: var(--formulated-title-w);
}

/* The shared two-tone heading at this section's size. */
.formulated__title {
  max-width: var(--formulated-title-w);

  --heading-fs: var(--fs-formulated-title);
  --heading-ls: var(--ls-formulated-title);
  --heading-lh: var(--lh-formulated-title);
}

.formulated__lead {
  max-width: var(--formulated-lead-w);
  margin: var(--formulated-lead-gap) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-formulated-lead);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-formulated-lead);
  line-height: var(--lh-formulated-lead);
}

/*
The photograph's box. The height is fixed and the picture is fitted into it from the top:
the bottom of the frame is what the card covers, so anything the box has to give away has
to be given away there and not off the top, where the design has the bottle overshooting
the section.

The picture's own edges are transparent and it sits directly on the page canvas. Nothing
here gives it a background, a radius, a border or a shadow, and nothing should: any of them
would draw a rectangle around a hand that has no rectangle in it.

The card must be raised explicitly. Document order alone used to be enough, but the photo
now carries a filter during its entrance, and a filtered element makes its own stacking
context and paints above later siblings that have none. Without the raise the fingers cut
across the top of the card — which is the opposite of the design, where the hand runs on
behind it.
*/
.formulated__media {
  justify-self: center;
  position: relative;
  z-index: var(--z-under);
  width: var(--formulated-photo-w);
  max-width: 100%;
  margin-top: calc(var(--formulated-media-gap) - var(--formulated-photo-rise));
}

.formulated__photo {
  display: block;
  height: var(--formulated-photo-h);
}

/*
Fitted, not filled — the design fits it (FIT), and the picture is a small object in a wide
frame: cropping it to the box would be a different photograph. That holds while the box has
the export's own proportion, which is the desktop. The mobile box is taller than it is wide
and the export is not, so there the picture fills instead and gives away its left and right
margins, which are empty; fitted there it would be a 200px strip in a 441px box with a
third of the section empty under it. Which of the two applies is --formulated-photo-fit.
*/
.formulated__img {
  width: 100%;
  height: 100%;
  object-fit: var(--formulated-photo-fit);
  object-position: center top;
}

/*
The caption belongs to the photograph rather than to the card under it, and the design
places it accordingly: its right edge is 83 in from the right edge of the frame, where the
card's own edge is 82 further in again.
*/
.formulated__caption {
  justify-self: end;
  width: var(--formulated-caption-w);
  margin: var(--formulated-caption-top) var(--formulated-caption-right) 0 0;
  color: var(--ink);
  font-size: var(--fs-formulated-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-formulated-caption);
}

/*
The card. min-height rather than height: the spec's 508.4 is what the design's contents
come to, and the client owns every word in it — a fifth metric or a longer description has
to make the card taller instead of running out of the bottom of it.
*/
.formulated__card {
  width: var(--formulated-card-w);
  max-width: 100%;
  min-height: var(--formulated-card-h);
  margin-inline: auto;
  margin-top: calc(var(--formulated-card-overlap) * -1);
  padding: var(--formulated-card-pad-t) var(--formulated-card-pad-x)
    var(--formulated-card-pad-b);
  border-radius: var(--formulated-card-radius);
  background: var(--surface-tint);

  /*
  The edge is an inset ring rather than a border, for the reason the outline button states:
  a hairline border on a moving element is composited apart from the fill and tears while
  the entrance plays. It is also why the width can go to zero on the desktop without the
  padding moving by a pixel.
  */
  box-shadow:
    inset 0 0 0 var(--formulated-card-border-w) var(--formulated-card-border-color),
    var(--shadow-card);
}

/*
The heading row of the card. A grid with named areas rather than a flex row, because on the
mobile frame the button leaves the heading's row and goes underneath it — the same
arrangement block 03 uses, and for the same reason: the markup does not change and the
button is not printed twice.
*/
.formulated__card-head {
  display: grid;
  align-items: center;
  gap: var(--space-xl) var(--space-3xl);
  grid-template-areas: "title cta";
  grid-template-columns: 1fr auto;
}

/*
min() rather than the width alone: below the design's narrowest frame the card is narrower than
this heading's stated measure, and a flat max-width would let it out of the card.
*/
.formulated__card-title {
  max-width: min(var(--formulated-card-title-w), 100%);
  grid-area: title;

  --heading-fs: var(--fs-formulated-card-title);
  --heading-ls: var(--ls-formulated-card-title);
  --heading-lh: var(--lh-formulated-card-title);
}

.formulated__cta {
  max-width: 100%;
  grid-area: cta;
  justify-self: end;

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

/*
The metrics. Four equal shares of the card's inside, and the divider is the column's own
left edge with the content inset past it — which is what makes the design's two numbers
agree: 1056 over four is 264, and 264 less the 17 inset is the 247 the spec gives for a
column. The first column has neither, so the list, the heading above it and the first
number all start on one line.

The rule above the list is the list's own border; the ones between the columns belong to
the items. Written that way rather than as a separator pseudo-element because a grid item
is the thing that knows where a column starts.
*/
.formulated__metrics {
  display: grid;
  margin: var(--formulated-card-head-gap) 0 0;
  padding: 0;
  border-top: var(--rule-w) solid var(--rule-color);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
}

/*
A column is the shared Metric component at this block's size, and this is the whole of what
the block says about it: the sizes, and when its figure runs.

--count-index is the ordinal the reveal has already stamped on this metric, so the numbers
start one after another exactly as their columns arrive, and nothing has to be edited when
the list grows.
*/
.formulated__metric {
  padding-top: var(--space-xl);

  --metric-fs-value: var(--fs-formulated-value);
  --metric-ls-value: var(--ls-formulated-value);
  --metric-lh-value: var(--lh-formulated-value);
  --metric-fs-label: var(--fs-formulated-label);
  --metric-ls-label: var(--ls-formulated-label);
  --metric-lh-label: var(--lh-formulated-label);
  --metric-fs-desc: var(--fs-formulated-desc);
  --metric-ls-desc: var(--ls-formulated-desc);
  --metric-lh-desc: var(--lh-formulated-desc);
  --metric-gap-value: var(--formulated-value-gap);
  --metric-gap-label: var(--formulated-label-gap);

  --count-delay: var(--formulated-count-delay);
  --count-step: var(--reveal-step);
  --count-index: var(--reveal-index, 0);
}

/*
Every metric but the first carries the divider, so the count is a rule and not a number in
the markup: a fifth metric added by the client gets its own divider and narrows all five,
and deleting the first hands the flush edge to whatever is now first.
*/
.formulated__metric {
  /*
  Air on the right as well as the left. The inset used to be left-only, so a line of the
  description ran right up against the next column's divider — the text touched the rule
  instead of stopping short of it, which is not how the design spaces the columns.
  */
  padding-right: var(--formulated-metric-inset);
}

.formulated__metric + .formulated__metric {
  padding-left: var(--formulated-metric-inset);
  border-left: var(--rule-w) solid var(--rule-color);
}

/*
Mobile: one column throughout. --bp-sm

The card's heading row loses its second column and the button goes under the heading at its
own width, and the metrics stack — at which point the divider that was a column's left edge
is a row's top edge, and the inset that went with it goes with it. Stated as a swap of the
two properties rather than as a second list, so there is still one rule deciding which
metric carries a divider.

ASSUMPTION: the design's mobile frame gives the stacked sizes but not the rule between the
metrics. It is kept, because four numbers of 100px with nothing between them read as one
column of unrelated figures. Marked in docs/blocks/05-formulated.md.
*/
@media (max-width: 700px) {
  /*
  The one cell becomes three rows. The photograph is put last of the three, against the top
  of the card, because that is the pair the composition is built on — the vial standing on
  the evidence — and the two blocks of text stay together above it.

  The rows are stated on the items rather than reordered with `order`: the reading order is
  what changes here, not just the painting, and grid-row moves both.
  */
  .formulated__top {
    grid-template-rows: auto auto auto;
  }

  .formulated__intro {
    grid-area: 1 / 1;
  }

  .formulated__caption {
    grid-area: 2 / 1;
  }

  .formulated__media {
    grid-area: 3 / 1;
  }

  .formulated__card-head {
    grid-template-areas:
      "title"
      "cta";
    grid-template-columns: 1fr;
  }

  .formulated__cta {
    justify-self: start;
  }

  .formulated__metrics {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .formulated__metric + .formulated__metric {
    padding-top: var(--formulated-metric-inset);
    padding-left: 0;
    border-top: var(--rule-w) solid var(--rule-color);
    border-left: 0;
  }
}