/*
Block About-01 "About Us". Every value comes from tokens.css, spec: docs/blocks/about-01-hero.md.

Nothing is drawn here that the site does not already have. The heading is the shared two-tone
component, the button is the shared button at its md rung, the photograph's entrance is the
shared photo reveal and the text's is the shared scroll reveal — this file says where those
instances sit and what size they are, and nothing about how any of them behaves.
*/

.about-hero {
  padding-block: var(--about-hero-top) var(--about-hero-bottom);
}

/*
The card is the page column: 1440 at the design frame, and below it the same fallback to
--page-inset the header and the hero use, so the three shift together.

The fill is a ramp rather than a plate — see --about-hero-card-fill for what was measured and
why. It follows that the top corners are never seen: at the top edge the card is fully
transparent, so the radius there rounds nothing. It is set on all four corners anyway, because
the radius belongs to the box and not to the half of it that happens to be visible.
*/
.about-hero__card {
  width: min(var(--page-max), 100% - var(--page-inset) * 2);
  margin-inline: auto;
  padding: var(--about-hero-card-pad-y) var(--about-hero-card-pad-x);
  border-radius: var(--about-hero-card-radius);
  background: var(--about-hero-card-fill);
}

/*
align-items: flex-start, not stretch: at the design frame the text column and the photograph
come to the same height by themselves, and if a longer paragraph makes the text column the
taller of the two, the photograph must keep its own proportion rather than be pulled down
with it.
*/
.about-hero__row {
  display: flex;
  align-items: flex-start;
  gap: var(--about-hero-col-gap);
}

/*
min-width: 0 so that the column may shrink below the natural width of its paragraph. Without
it a flex item refuses to go under its content's minimum and the row pushes the card — and
with it the page — sideways.
*/
.about-hero__text {
  flex: var(--about-hero-text-grow) 1 0;
  min-width: 0;
}

/*
The heading is the shared component (assets/css/two-tone-heading.css) and this block only
tells it what size to be.

It is also the one heading on the site whose two segments share a line. The component gives a
segment `display: block` on purpose — every other heading in the design breaks between its
segments — so rather than reach past the component and undo that, the instance becomes a flex
row: its segments are then flex items, laid out side by side, and the component's own rules
are untouched. flex-wrap keeps that honest if the client types more than the design's two
words. The word between them is a gap, because a flex row drops the whitespace in the markup.
*/
.about-hero__title {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--about-hero-title-space);

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

.about-hero__eyebrow {
  margin: var(--about-hero-title-gap) 0 0;
  color: var(--about-hero-eyebrow-color);
  font-size: var(--fs-about-hero-eyebrow);
  font-weight: var(--fw-about-hero-eyebrow);
  letter-spacing: var(--ls-about-hero-eyebrow);
  line-height: var(--lh-about-hero-eyebrow);

  /*
  Capitals are a property of this line and not of the words in the field: the client writes
  "Redefining Your Limits" and the design draws it shouted.
  */
  text-transform: uppercase;
}

.about-hero__lead {
  max-width: var(--about-hero-lead-w);
  margin: var(--about-hero-lead-gap) 0 0;
  color: var(--about-hero-lead-color);
  font-size: var(--fs-about-hero-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-about-hero-lead);
}

/*
The button is the shared component at its md rung — 15px and 2 of tracking is that rung, and
it is not restated here. What is the instance's own is its width, which the design fixes at
288 where the rung is otherwise sized by its label, and it arrives through the component's own
knob rather than through a rule reaching into it.

The component's own inline-flex is kept. `display: flex` was written here first, to keep the
line box the button sits on from adding a descender under the design's 72 — but measured on the
page the two are indistinguishable: the button lands on the same pixel (280, 566, 288x43) and
the card comes to the same height either way, because this column has no other inline content
and the card's height is set by the photograph. With nothing to buy, the component's own value
is what stays.

The button also went missing from every full-page screenshot while this block was being
checked, and `display` had nothing to do with it — it is the capture rewinding the entrance,
see the note in tools/settle.mjs. Recorded here because block display was briefly blamed for it.
*/
.about-hero__cta {
  margin-top: var(--about-hero-cta-gap);

  --btn-w: var(--about-hero-cta-w);
}

.about-hero__media {
  flex: var(--about-hero-media-grow) 1 0;
  min-width: 0;
}

.about-hero__frame {
  overflow: hidden;
  border-radius: var(--about-hero-photo-radius);
}

/*
height: auto is not decoration. The <img> carries its intrinsic width and height in the markup,
so that the frame holds its place before the picture arrives; without height: auto that
attribute wins over aspect-ratio and the frame is drawn at the file's own height instead of the
design's. Caught before, on the home page.
*/
.about-hero__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--about-hero-photo-ratio);
  object-fit: cover;
}

/* Mobile: one column, order heading → eyebrow → paragraph → photo. --bp-sm */
@media (max-width: 700px) {
  .about-hero__row {
    flex-direction: column;
    align-items: stretch;
  }

  /*
  The grow factors are dropped along with the row. In a column they would apply to height —
  the photograph, given the larger of the two, would be stretched down the card — and the
  proportion they exist to hold is a horizontal one that no longer has anything to hold.
  */
  .about-hero__text,
  .about-hero__media {
    flex: 0 0 auto;
  }

  /*
  The button is absent from the mobile design — from the node as well as from the render — so
  it is hidden rather than shrunk. The field stays: it is the same button on both frames, and
  a client who empties it on a phone would lose it on the desktop too.
  */
  .about-hero__cta {
    display: none;
  }
}