/*
Block 06 "Trusted by people who did their research". Spec: docs/blocks/06-testimonials.md.
Every value comes from tokens.css.

As everywhere on this site, what is written here is only where things sit. The heading is the
shared two-tone component, the stars are the shared rating component, the entrance is the
shared Reveal and the photograph arrives through Photo reveal.

--- The photograph and the content share one cell -----------------------------------------

The picture runs off the left of the frame — 364 before it begins — and the first quote card
starts at the frame's own left edge, so the two overlap horizontally by 162. They are not two
columns; they are two layers of one grid cell, the same arrangement block 05 uses for its
heading and its vial. The cell is as tall as the taller of them, which is the photograph, so
the section keeps its height in normal flow rather than through a min-height.

Which one paints over the other cannot be left to document order alone: the picture is drawn
by an absolutely placed <img>, and a positioned element paints above a plain one whatever the
order of the markup, so the cards would have gone under the photograph. The content is
positioned as well, and comes second — no z-index, because two positioned elements at auto
are painted in the order they are written.

--- Why the section clips sideways --------------------------------------------------------

At the design's own canvas the photograph leaves the screen: the frame is 1440 centred in
1920, so the picture's left edge lands at -124 and 402 of it is on the page. That is the
design. Without a clip it is also a horizontal scrollbar on every page of the site, so the
section clips on one axis. `overflow-x: clip` and not `hidden`: clip is the only value that
can be paired with a visible other axis, and the asset's baked shadow has to be able to
leave the section downwards.
*/
.testimonials {
  padding-block: var(--testimonials-top) var(--testimonials-bottom);
  overflow-x: clip;
}

/*
A frame with two portraits ends lower than its quotes do: the second one's foot is the bottom of
the section in the design, 97 below the last card. It is room at the foot of the section and not a
picture hanging into the block below, because the design ends the section at the photograph's foot
— and because a picture over the next block would be a picture over the next block on every page
that carries this one.
*/
.testimonials--paired {
  padding-bottom: calc(var(--testimonials-bottom) + var(--testimonials-photo-2-drop));
}

.testimonials__inner {
  display: grid;
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
  grid-template-columns: 1fr;
}

.testimonials__media,
.testimonials__content {
  grid-area: 1 / 1;
}

/*
The picture's box is the design's 526x596 and the file is larger than that in every
direction — see --testimonials-photo-asset-* in tokens.css. So the box is what the layout
sees and the <img> inside it is oversized on purpose, sticking out by exactly the asset's own
bleed. Absolutely placed, so the bleed and the baked shadow cost the row no height.

Centred with a half-width negative margin and not with `inset-inline: 0; margin-inline: auto`,
which is the obvious way to write it and does not work here: auto margins only split what is
left over, and when the box is narrower than what is in it the leftover is negative — the
rule is then to give the whole of it to one side, so the picture sat 40px right of where it
belongs and the design's left edge was inside the frame. Caught by measuring the rendered
page; at a glance the photograph merely looked slightly differently cropped.

Not a translate either: the frame around it is the Photo reveal, whose entrance animates
translate, and this would have to be on the same element as the width it is derived from.
*/
.testimonials__media {
  justify-self: start;
  margin-top: var(--testimonials-media-gap);
  margin-left: var(--testimonials-photo-bleed);
}

/*
The second portrait, which some frames carry and some do not. It is the mirror of the first: off
the other edge of the frame, lower down, and behind the cards — the content is positioned and comes
second in the markup, so it paints over this without a z-index, exactly as it does over the first.

align-self: end rather than a measured offset from the top, because what the frame fixes is where
this picture sits against the foot of the block, and the block's height is however many quotes the
page carries.
*/
.testimonials__media--end {
  justify-self: end;
  align-self: end;
  margin-top: 0;
  margin-right: var(--testimonials-photo-2-bleed);

  /*
  Negative, and it is the same token the section adds at its foot: the cell this sits in ends where
  the quotes end, the design's photograph ends 97 lower, and the section is 97 taller to hold it.
  Written as one token in two places rather than two numbers that have to agree.
  */
  margin-bottom: calc(var(--testimonials-photo-2-drop) * -1);
  margin-left: 0;
}

.testimonials__media--end .testimonials__photo {
  width: var(--testimonials-photo-2-w);
  height: var(--testimonials-photo-2-h);
}

/*
The second file has its own bleed and its own proportion, so the picture inside it is sized through
its own three numbers. The rule is the first portrait's with the tokens swapped — the centring and
the placement are inherited, only the width is restated.
*/
.testimonials__media--end .testimonials__img {
  --testimonials-img-w: calc(
    var(--testimonials-photo-2-cover-w) * var(--testimonials-photo-2-asset-w) /
      var(--testimonials-photo-2-asset-card-w)
  );
}

.testimonials__photo {
  position: relative;
  width: var(--testimonials-photo-w);
  height: var(--testimonials-photo-h);
  overflow: var(--testimonials-photo-overflow);
  border-radius: var(--testimonials-photo-radius);
}

.testimonials__img {
  --testimonials-img-w: calc(
    var(--testimonials-photo-cover-w) * var(--testimonials-photo-asset-w) /
      var(--testimonials-photo-asset-card-w)
  );

  position: absolute;
  top: 0;
  left: 50%;
  width: var(--testimonials-img-w);
  height: auto;
  margin-left: calc(var(--testimonials-img-w) / -2);
}

/*
Positioned, so that it paints over the absolutely placed picture beside it — the first card
lies on the photograph in the design. z-index is not needed: two positioned elements at auto
are painted in document order, and this one comes second.
*/
.testimonials__content {
  position: relative;
}

/* The shared two-tone heading at this section's size. */
.testimonials__title {
  max-width: var(--testimonials-title-w);
  margin-top: var(--testimonials-title-top);
  margin-left: var(--testimonials-title-x);

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

/*
The row of quotes. Equal shares of the frame rather than a fixed 704 each, so a third card
added by the client narrows all three instead of running off the edge — and at the design
frame two shares of a 1440 row with 32 between them come out at the design's 704.

They are stretched to one height rather than each taking its own. The design draws them 6
apart, which is a difference no rule produces from the same three lines of text in both, and
two cards of visibly different height beside one another read as a mistake rather than as a
measurement.
*/
/*
Two across, and then down. It used to flow into columns — grid-auto-flow: column with automatic
tracks — which reads the same for the two cards the home page carries and puts six in a single row
of six on a service page. The design draws two abreast on both, so two is what the rule says; the
number of rows is the number of quotes divided by it, which is the grid's business and not a
setting.
*/
.testimonials__cards {
  display: grid;
  margin: var(--testimonials-cards-gap) 0 0;
  padding: 0;
  gap: var(--testimonials-card-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

/*
The glass card. The fill is translucent and the blur behind it is what makes the photograph
under the first card read as glass rather than as a pale rectangle; over the page canvas the
same pair is nearly nothing, which is the design too.

backdrop-filter is an enhancement and is written as one: where it is unsupported the card is
still a translucent panel with a ring and a shadow, only sharper behind. Nothing depends on
it.
*/
.testimonials__card {
  padding: var(--testimonials-card-pad-t) var(--testimonials-card-pad)
    var(--testimonials-card-pad-b);
  border-radius: var(--testimonials-card-radius);
  background: var(--testimonials-card-bg);
  box-shadow: var(--shadow-panel),
    inset 0 0 0 var(--testimonials-card-ring-w) var(--testimonials-card-ring-color);
  backdrop-filter: blur(var(--testimonials-card-blur));
}

/*
The stars. The block sets when they sit and nothing else — the shape, the colour and the
spacing are the rating component's. The height is stated because a row of drawn shapes has no
leading of its own and something has to put them where the design's 15px text sat.
*/
.testimonials__rating {
  display: flex;
  align-items: center;
  height: var(--testimonials-rating-h);
}

.testimonials__quote {
  max-width: var(--testimonials-quote-w);
  margin: var(--testimonials-rating-gap) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-testimonials-quote);
  font-weight: var(--fw-regular);
  line-height: var(--lh-testimonials-quote);
}

.testimonials__name {
  display: block;
  margin-top: var(--testimonials-name-gap);
  color: var(--ink);
  font-size: var(--fs-testimonials-name);

  /* <cite> is italic by default and the design's name is not. */
  font-style: normal;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-testimonials-name);
  line-height: var(--lh-testimonials-name);
  text-transform: uppercase;
}

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

The photograph stops being a layer over the content and becomes the first card of the column,
between the heading and the quotes. The rows are stated on the items rather than reordered
with `order`, because it is the reading order that changes here and not only the painting.
*/
@media (max-width: 700px) {
  /*
  Three rows, and the photograph is the middle one — between the heading and the quotes. That
  puts it between two children of .testimonials__content, so the wrapper stands down with
  `display: contents` and its two children become rows of this grid in their own right. It is
  the wrapper's only job on the desktop to be a layer over the picture, and here there is no
  layering to do.
  */
  .testimonials__inner {
    grid-template-rows: auto auto auto;
  }

  .testimonials__content {
    display: contents;
  }

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

  .testimonials__media {
    grid-area: 2 / 1;
    justify-self: stretch;
  }

  .testimonials__cards {
    grid-area: 3 / 1;
    grid-template-columns: minmax(0, 1fr);
  }

  /*
  The second portrait becomes the fourth row — a card of its own after the quotes, which is where
  the mobile frame draws it. On the desktop it is a layer over the cards, and there is no layering
  to do in a single column: left as it was it landed in the photograph's row, on top of the first
  portrait, and covered it.

  The row is not in grid-template-rows above and does not need to be: the frames without a second
  portrait have three rows, the ones with it grow a fourth, and an implicit row is auto — which is
  what a stated one would have said.

  The margins are unset one by one rather than with a shorthand, so that a bleed or a drop added to
  the desktop later cannot arrive here through a rule that was written before it existed.
  */
  .testimonials__media--end {
    grid-area: 4 / 1;
    justify-self: stretch;
    align-self: auto;
    margin-top: var(--testimonials-media-gap);
    margin-right: 0;
    margin-bottom: 0;
  }
}