/*
Block 08 "Where to find us.". Spec: docs/blocks/08-locations.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 pin is the shared pin, the button is the shared button and the
entrance is the shared Reveal.

--- The row is what makes the cards equal ------------------------------------------------

The design draws both cards at 298.505 while their contents differ by a button and half a
paragraph, so the height is a property of the row and not of a card. That is a grid row with
its items stretched, which is the default — nothing here states a height, and the row is as
tall as the tallest card in it. On the mobile frame the cards stack, there is no row left to
equalise them, and the design's own two heights there differ by 70; that falls out of the
same rules with nothing said.

--- Nothing here knows how many cards there are -------------------------------------------

The cards are equal shares of the frame rather than a fixed 708 each, so a third location
added by the client narrows all three instead of running off the edge — and at the design
frame two shares of 1440 with 24 between them come out at the design's 708. It joins the
entrance the same way: reveal.js stamps the ordinal on every item it finds, so the stagger is
a rule rather than a list of delays.
*/
.locations {
  padding-block: var(--locations-top) var(--locations-bottom);
}

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

/*
The shared two-tone heading at this section's size. --heading-ink is the component's own knob
and this is a value on the instance rather than a change to the component: the design sets
this heading in --ink-deep where the hero and the services use --ink, which was sampled off
the render rather than taken from the node — see the note at --fs-locations-title.
*/
.locations__title {
  max-width: var(--locations-title-w);

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

.locations__cards {
  display: grid;
  margin: var(--locations-cards-gap) 0 0;
  padding: 0;
  gap: var(--locations-card-gap);
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  list-style: none;
}

/*
The card. A column, so that what is inside it stacks in reading order and the button sits
where the paragraph leaves it.

The design shades the inside of the card's top and left edges and leaves the right and the
bottom flat. That is two gradients laid over the fill and not an inset shadow — an inset
shadow softens all four edges whatever its offset, and the first version of this card, built
that way, darkened the two edges the design keeps clean. The ramps are at
--locations-card-inner; the layer order here is fill, then shading, then the ring on top of
both, which is what a background-color under a background-image and a box-shadow over them
already gives.

The ring is an inset shadow rather than a border for the reason the outline button states — a
hairline border on an element that is being animated is composited apart from its fill and
breaks into gaps while the entrance plays — and because a border would move the box by a pixel
where an inset shadow does not.
*/
.locations__card {
  display: flex;
  flex-direction: column;
  padding: var(--locations-card-pad-t) var(--locations-card-pad-x) var(--locations-card-pad-b);
  border-radius: var(--locations-card-radius);
  background-color: var(--locations-card-bg);
  background-image: var(--locations-card-inner);
  box-shadow: inset 0 0 0 var(--locations-card-ring-w) var(--locations-card-ring-color),
    var(--shadow-panel);
}

/*
The capitals are the stylesheet's, not the content's. The design's node reads "Flagship" and
its render reads "FLAGSHIP", so a client typing a label in lower case has to come out looking
the way the design draws it.
*/
.locations__label {
  margin: 0;
  color: var(--accent);
  font-size: var(--fs-locations-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-locations-label);
  line-height: var(--lh-locations-label);
  text-transform: uppercase;
}

/*
The name and the pin on one line. Centred on each other, which is what the render shows to
within a pixel, and the pin is one icon for every card rather than a field: it says "a
place", which is the same thing on all of them.

min-width: 0 on the text so that a name too long for a narrow card wraps inside its own box
instead of pushing the card wider — a flex item refuses to shrink below its content by
default, and between --bp-sm and the design frame the cards are appreciably narrower than the
708 the name was measured in.
*/
.locations__name {
  display: flex;
  align-items: center;
  margin: var(--locations-label-gap) 0 0;
  gap: var(--locations-name-gap);
  color: var(--ink-deep);
  font-size: var(--fs-locations-name);
  font-weight: var(--fw-medium);
  line-height: var(--lh-locations-name);
}

.locations__name-text {
  min-width: 0;
}

.locations__body {
  max-width: var(--locations-body-w);
  margin: var(--locations-body-gap) 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-locations-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-locations-body);
}

/*
The button, at the design's own width. align-self keeps the pill to its 248 inside a column
whose items are otherwise stretched to the card.

The gap over it is stated rather than left to an auto margin. At the design's own content the
two are identical — the card comes out at 298.5 either way — and they part company as soon as
a third location makes the row taller: an auto margin would strand the paragraph and the
button at opposite ends of a tall card.
*/
.locations__cta {
  align-self: start;
  margin-top: var(--locations-cta-gap);

  --arrow-size: var(--locations-cta-arrow);
}

/*
The width, handed over through the component's own knob rather than by overriding its rules —
and the size modifier is named alongside the instance because the knob is not free at this
size. `.btn--sm.btn--outline` is the one rung that authors --btn-w itself (the hero's pair is
given fixed widths by the design), and a single class cannot outweigh two: written as
`.locations__cta` alone this declaration lost and the pill came out at the hero's 207.
Measured, not assumed — it is the one number in this block the first pass got wrong.

Two classes on this element and no ancestor in the selector, so it is still the instance
speaking for itself: the hero and the mobile menu reach the same place through a layout
selector, which couples a button's width to where it happens to be sitting.
*/
.btn--sm.locations__cta {
  --btn-w: var(--locations-cta-w);
}

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

The cards stack and take their own heights, which is the design's mobile frame — 297.505 and
227.705 there, against one height for both on the desktop. Nothing is stated for it: the row
is what equalises them, and in a column there is no row.
*/
@media (max-width: 700px) {
  .locations__cards {
    grid-auto-columns: auto;
    grid-auto-flow: row;
  }
}