/* ============================================================================
   Greeting — `p/greeting/bg` + text overlay
   Figma: FE Client | BigHeart, node 16794:323344 (fileKey HrxSPGo2hxOHYdCkLPPnMu)

   That node is the BACKGROUND ONLY — a component set of three flat SVG
   artworks (Morning / Afternoon / Evening), 256×72, square corners. The
   greeting text is composed on top of it; the card clips the artwork.

   The artwork is a fixed illustration, not a token surface: it carries its own
   gradients and does not follow Brand or Theme. That is a property of the
   asset, the same way a logo does not inherit colour (ASSETS.md §5 rule 2).
   So it is referenced as an <img>, never recoloured, and the only decision
   left to code is WHICH of the three to show.

   TODO(tokens): every bare px length in this file is a SIZE.
   DESIGN.md §12.4 records size as not built.
   ========================================================================== */

.greeting {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  /* The artwork's own aspect ratio (256×72), so the card scales with the
     sidebar instead of letterboxing. */
  aspect-ratio: 256 / 72;
  border-radius: var(--shape-radius-card);
}

/* ASSETS.md §5 rule 1 applies to any fixed artwork: choose the variant, never
   restyle it. `object-fit: cover` keeps the sun/moon anchored at the end. */
.greeting__art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Right-anchored. At the native 256 width this is a no-op (the artwork fits
     exactly); in the 64px collapsed rail it is what keeps the sun / moon in
     frame instead of cropping to the empty middle of the gradient — which is
     how the Figma collapsed frame renders it. */
  object-position: 100% 50%;
}

.greeting__text {
  position: relative;
  /* <p> carries a 1em block margin by default, which would break the
     aspect-ratio the artwork depends on. */
  margin: 0;
  padding: var(--space-md);
  /* See tokens.semantic.css — this is the app-local stopgap for ink on an
     artwork surface, which the DS has no token for. It must NOT flip with the
     theme: the artwork stays dark behind it in Light and Dark alike. */
  color: var(--color-content-on-artwork);
  font-family: var(--font-family-display);
  font-size: var(--font-heading-sm-size);
  line-height: var(--font-heading-sm-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-letter-spacing-default);
  /* The Morning artwork runs pale yellow behind the sun. A shadow, not a
     scrim: a scrim would dim the illustration the component exists to show. */
  text-shadow: 0 1px 3px var(--color-shadow-key);
}