/**
 * jalsa-content.css — the only stylesheet Phase C adds.
 *
 * ## Why this file is almost empty
 *
 * The Phase C definition of done is that killing the API leaves every wired page's
 * `innerText` — and therefore its layout — identical to the static baseline. A stylesheet is
 * the easiest way to break that without touching a line of HTML, so this file obeys one rule:
 *
 *     No selector in this file may match an element that exists in the authored markup.
 *
 * Every rule below is scoped to `[data-content-credit]`, and that element is created by
 * `jalsa-content.js` **only at the moment a figure is successfully applied** (G4
 * attribution). On the static path, on the 503 path and on every failure path the span is
 * never created, so no rule in this file can match anything and the rendered page is
 * byte-identical to the baseline.
 *
 * Two things are deliberately NOT here:
 *
 *   - No styling for `html[data-content-state]`. The state attribute exists for
 *     observability and tooling; giving it a visual rule would make an API failure visible
 *     to a visitor, which is the opposite of the required behaviour.
 *   - No skeleton/placeholder rule (`[data-content-pending]`). Nothing sets that attribute,
 *     and a skeleton implies a layout reservation, i.e. a layout change.
 *
 * Loaded after the existing sheets, matching the include order used across the site.
 */

/*
 * Image attribution injected alongside a swapped hero/body image.
 *
 * `display: block` keeps it off the same line as any trailing inline content in the host.
 * Deliberately low-contrast and small: it must be legible without competing with the
 * photograph or the page's own typography.
 */
[data-content-credit] {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.4;
  opacity: 0.72;
}

/*
 * On the heroes the credit is injected into a full-bleed section whose children are laid out
 * by the existing sheets. Constrain it so it cannot affect the hero's box: no padding, no
 * width, no positioning — only the horizontal inset the page already uses for its container.
 */
.hero[data-content-credit],
section.hero > [data-content-credit] {
  max-width: 100%;
}

/*
 * A credit that is a link (the Pexels/photographer `creditUrl` case) inherits the surrounding
 * colour rather than the browser's default link blue, and is underlined so it still reads as
 * interactive. Scoped to the injected node, so it cannot affect an authored link.
 */
[data-content-credit] a {
  color: inherit;
  text-decoration: underline;
}