/* backend/src/main/resources/static/modules_styles/pikiner_sites/components/site-hero.css */

/* ==============================================
   HERO AND EDITORIAL OPENING — pikiner_sites

   The opening of a page: an eyebrow, the proposition, a lead, a note, the
   actions, and a row of evidence under them. Then the editorial column
   the page continues in.

   Scoped by its own classes, not by a page id. The first iteration of
   this file put `.page-home` in front of every rule, which meant the
   composition existed only on the home page and any other page opening
   the same way had to have it written again. A shape is confined by the
   class the markup asks for; that is what a component is.

   Type comes from the role scale in the starter — nothing here sets a
   font size except where a role is deliberately stepped down.

   ONE AXIS

   The eyebrow, heading, lead, note, actions and evidence share a single
   measure, so the opening reads as one column. Before this they did not:
   the heading spanned the 1200px shell while the lead sat in an 800px
   column inside it, giving the hero two competing centres.
   ============================================== */

.site-hero {
  max-width: var(--gb-measure);
}

/* An eyebrow above a large heading is read as a label: the overline role
   carries the tracking that makes it one. */
.site-hero .site-eyebrow {
  letter-spacing: var(--gb-type-overline-tracking);
  margin-bottom: var(--gb-spacing-md);
}

/* The page proposition, and the one Bold element on the page.

   It needs stating here because the markup carries .section-title as
   well, and that class (0,1,0) outranks the h1 element rule (0,0,1) that
   would otherwise give it the proposition role — so the opening line was
   coming out at title size and weight, one step below what it is. */
.site-hero__title {
  font-size: var(--gb-type-heading-1-size);
  font-weight: var(--gb-font-weight-bold);
  line-height: var(--gb-type-heading-1-leading);
  letter-spacing: var(--gb-type-heading-1-tracking);
  text-wrap: balance;
  margin-bottom: var(--gb-spacing-lg);
}

.site-hero__lead {
  max-width: var(--gb-measure);
  text-wrap: pretty;
}

.site-hero__lead--secondary {
  font-size: var(--gb-type-lead-size);
  margin-top: var(--gb-spacing-md);
}

.site-hero__note {
  max-width: var(--gb-measure);
  margin-top: var(--gb-spacing-lg);
  color: var(--gb-text-tertiary);
}

/* ==============================================
   EDITORIAL COLUMN

   Where the page stops presenting and starts explaining, marked by a
   hairline rather than by 160px of vacancy. It used to be described as
   opening on the axis the hero closes on; the hero became a poster and
   its parts are centred at the measure now, so there is no shared axis
   to open on and the sentence was removed rather than left to be read.

   The centred ends, the justified body and the sheet-wide column are not
   here: they are the spread, which this section was the first to take
   and is no longer the only one to. The shape and its reasoning are in
   site-content.css; the markup asks for it with .site-spread. What is
   left below is the only thing true of this section and of no other —
   the hairline it opens on, and a title one step down from the h1 above
   it.

   The rule that used to set `p + p` here is gone with the rest: it
   duplicated the running-text rhythm of site-content.css for the
   paragraphs, and for the link row it quietly overrode .site-links,
   closing the gap above the way out from lg to md. Both spreads now
   space that gap the same way, which is the point of their being one
   shape.
   ============================================== */

.site-editorial {
  padding-top: var(--gb-spacing-2xl);
  border-top: 1px solid var(--gb-border-subtle);
  text-align: left;
}

.site-editorial__title {
  font-size: var(--gb-type-heading-2-size);
  font-weight: var(--gb-font-weight-bold);
  line-height: var(--gb-type-heading-2-leading);
  letter-spacing: var(--gb-type-heading-2-tracking);
  margin-bottom: var(--gb-spacing-lg);
}