/**
 * Section: In short (bluf)
 *
 * The callout itself is `.callout` in components.css and is NOT redeclared
 * here: `bluf` is one consumer, and archive-helper, single-helper, home, single
 * and single-vacancy are the others, all Phase 4 templates that render no
 * section stack and would never enqueue this file. Inventory §0. What is in
 * here is only what this section adds: the two-column form, the heading and
 * lead-in inside the callout, and the pull-up over the hero ridge.
 *
 * CONTRAST, MEASURED ON THE PASIA PALETTE RATHER THAN ASSUMED. Two grounds,
 * because this section has two states.
 *
 *   Plain, mid-page. `.callout` = --forest-tint-05 over --mist = #ebebe5
 *     --ink        #14231f   13.61:1
 *     --ink-soft   #45524d    6.84:1
 *     --pine       #16564b    7.12:1   (links in the summary)
 *     --gold-deep  #7e622e    4.78:1   (the icon, which is aria-hidden anyway)
 *
 *   Raised, when this section follows the page's opening header. Ground --paper
 *     --ink        16.28:1
 *     --ink-soft    8.18:1
 *     --pine        8.51:1
 *     --gold-deep   5.72:1
 *
 * All clear WCAG AA for normal text. --gold on the 4px left rule is 2.56:1 on
 * paper and is a decorative edge, not text and not a control's only affordance.
 *
 * THE BADGE INSIDE THE PLAIN CALLOUT IS FIXED UPSTREAM AND NEEDS NOTHING HERE.
 * Recorded because an earlier revision of this header prescribed a patch, and a
 * stale advisory is how a component acquires a second owner. `.ph-badge` was
 * translucent, so its contrast tracked whatever band it landed on, and inside
 * `.callout` it sat on --forest-tint-05 over --mist and measured 4.39:1, under
 * AA. components.css has since pinned the badge's own base to --paper for every
 * light ground rather than enumerating them, which makes this case 5.17:1 along
 * with the other eight. Do not add a `.callout` selector for it and do not
 * re-colour the badge from this file.
 *
 * Tokens only. The split's column gap is `--gap-split`: it was a literal
 * clamp() here, byte-identical to the one index.html `.c-svc-head` and
 * services.html `.sv-intro` use, and on services.html this section sits
 * directly above the services grid, so the two gaps have to agree. tokens.css
 * owns it now.
 *
 * The one clamp() left below is the pull-up distance. That one stays a
 * literal: it is this component's overlap with one other component rather than
 * a step on the spacing scale, which is the same practice
 * sections/path-cards.css follows for the identical requirement.
 */

/* ---------------------------------------------------------------------------
 * The column.
 *
 * One narrow column, or two columns when a photograph is added. Derived from
 * whether the image field is filled, in the renderer. It is not a field and
 * must never become one: docs/pasia-section-inventory.md §0 puts layout that
 * follows the amount of content in the renderer, and AGENTS.md §1.2 rejects the
 * picker that would otherwise express it.
 * ------------------------------------------------------------------------ */
.bluf-inner {
  position: relative;
}

.bluf-split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--gap-split);
  align-items: center;
}

/* Grid and flex items default to min-width:auto, so a long unbroken string in
   the summary would push the column past the viewport. This is what keeps 320px
   free of horizontal overflow. */
.bluf-callout,
.bluf-body {
  min-width: 0;
}

.bluf-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-m);
}

/* ---------------------------------------------------------------------------
 * Inside the callout.
 * ------------------------------------------------------------------------ */
.bluf-body > h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--s-2);
}

/* With a heading above it the summary is secondary to that heading, which is
   what pricing.html's `.pr-why p` says. Without one the summary IS the content
   and keeps the body colour. A sibling selector, so it follows the content and
   needs no class from the renderer. */
.bluf-body > h2 ~ .bluf-text p {
  color: var(--ink-soft);
}

/* The opening words run into the first sentence, the way the mock-ups set them.
   The lead-in is its own element and the client's text is untouched: the first
   paragraph is simply set inline so the two share a line. Anything after it
   stays a block paragraph. */
.bluf-text.has-lead-in > p:first-of-type {
  display: inline;
}

.bluf-text > p + p {
  margin-top: var(--s-3);
}

.bluf-text ul,
.bluf-text ol {
  margin-top: var(--s-3);
  padding-inline-start: 1.4em;
}

.bluf-text li + li {
  margin-top: .35em;
}

/* ---------------------------------------------------------------------------
 * The pull-up over the hero ridge.
 *
 * An ORDER-derived exception, not a band and not a field. It applies only when
 * this section is the one immediately after the page's opening header, which is
 * what the adjacent-sibling selector says. Sections are emitted as siblings
 * inside <main>, so this is exact, and pasia_render_section() hands a render
 * closure nothing about its position, so it cannot be done in PHP.
 *
 * Two openers, not three. `.hero` is what sections/hero.php emits and
 * `.pg-hero` is what sections/page-head.php emits, through the shared
 * parts/page-hero.php partial. A `.page-head` selector was carried here for a
 * while as a hedge and it never matched anything; sections/path-cards.css still
 * carries the same dead selector.
 *
 * padding-block goes to 0 rather than just padding-block-start. In about.html
 * the pulled-up bluf is a bare <div> with no padding at all and the section
 * below it supplies the next gap; keeping a padding-block-end here would put
 * two full --section-y bands between the summary and the region it introduces.
 *
 * THIS RULE FIRES ON FOUR PAGES THE MOCK-UPS LEAVE FLAT, AND THAT IS A LEDGER
 * ENTRY RATHER THAN A BUG TO FIX HERE. Nine section-stack pages open with a
 * `bluf` directly under the page head. Five raise it: `about`,
 * `accreditations`, `directors-message`, `our-team` and `testimonials`
 * (`.ts-gbp`, which is a raised consumer even though it is an alert in the
 * mock-up, and which this rule reproduces). Four leave it flat: `pricing`,
 * `aftersales`, `industries` and `helper-pooling`. Those four now gain the
 * --paper ground, --shadow-lift, the hero overlap and padding-block: 0 where
 * the mock-up has padding-bottom: var(--s-6).
 *
 * It is not fixable in CSS, because raised-or-flat is a page-design decision
 * with no content signal a selector can read: in the mock-ups it is authored,
 * five bare divs against four callouts inside sections. The three ways out are
 * raise always (four deltas), raise never (five deltas, including about.html,
 * which §0 uses as the exemplar for this very mechanism), or a second section
 * type, which would put two near-identical entries in the client's picker to
 * carry a margin and a shadow, exactly the reasoning that rejected splitting
 * this section into bluf-info and bluf-warning. Raise always is the cheapest of
 * the three and it is what is built. The deltas are reported for §B and §D.
 * ------------------------------------------------------------------------ */
.hero + .bluf,
.pg-hero + .bluf {
  padding-block: 0;
}

.hero + .bluf .bluf-inner,
.pg-hero + .bluf .bluf-inner {
  margin-top: calc(-1 * clamp(1.5rem, 3.5vw, 2.75rem));
  z-index: var(--z-raised);
}

/* Raised off the ground rather than tinted into it, because at this position
   the callout overlaps the forest hero and the tint would read as a smudge on
   it. about.html, accreditations.html, directors-message.html, our-team.html
   and testimonials.html all carry this and the first four carry the same
   comment. `.ts-gbp` also sets align-items: center, flex-wrap: wrap and
   flex: 1 1 26ch on its paragraph; those three are its own and are not
   reproduced, because four of the five raised pages do not have them. */
.hero + .bluf .bluf-callout,
.pg-hero + .bluf .bluf-callout {
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  padding: var(--s-4) var(--s-5);
}

/* ---------------------------------------------------------------------------
 * Breakpoints. Canonical set: 1024 / 860 / 620 / 560.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .bluf-split {
    grid-template-columns: 1fr;
  }

  .bluf-image {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 620px) {
  /* accreditations.html's own mobile step: the raised callout gives back the
     wider inline padding before the text measure suffers for it. */
  .hero + .bluf .bluf-callout,
  .pg-hero + .bluf .bluf-callout {
    padding: var(--s-4);
  }
}