/*
 * Callout component -- production styles.
 *
 * Structural properties (spacing, radius) reference the resolved Stage 2
 * tokens exclusively -- no raw pixel value appears anywhere below.
 *
 * Colour is NOT resolved yet (Stage 2: color.tip / color.danger /
 * color.requirement / color.province / color.success / color.muted all
 * remain `pending-design-signoff`). The `var(--color-*, ...)` calls
 * below reference the semantic token names the Golden UI Reference
 * already assigned to each type -- they simply have no effect until
 * Stage 2's colour values are resolved and regenerated into
 * tokens.generated.css. This is deliberate semantic-token consumption,
 * not an invented value: an undefined CSS custom property used in a
 * property like `border-left-color` resolves to the property's normal
 * inherited/initial behaviour, never a guessed colour.
 */

@import url("../../config/tokens/tokens.generated.css");

.sr-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m);
  border-radius: var(--radius-medium);
  border-left-width: 4px;
  border-left-style: solid;
  /* Left-edge colour is type-specific -- see the per-type rules below.
     No colour value is set at the base level. */
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
  box-sizing: border-box;
  max-width: 100%;
}

.sr-callout__icon-slot {
  display: inline-block;
  width: var(--space-l); /* reserves the approved icon.l 24px footprint's layout space */
  height: var(--space-l);
  flex-shrink: 0;
  /* No icon glyph is set here -- icon family remains pending-product-decision. */
}

.sr-callout__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0; /* allows long unbroken content to wrap rather than overflow */
}

.sr-callout__label {
  font-weight: 600; /* structural weight only -- not a colour value */
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sr-callout__body {
  /* No font-size/line-height hardcoded here -- inherits from the
     surrounding reading-column typography per the Golden UI Reference;
     this component does not redefine type scale. */
  /* ROOT CAUSE FIX (Final Production QA & Corrections Sprint -- same
     shared issue as .sr-roadmap-hero__intro in components/roadmap-hero/
     roadmap-hero.css: annotation/"SpainReady Tip" body text is set via
     `textContent` and already contains "\n\n" at its real paragraph
     breaks (e.g. Renting's SpainReady Tip annotations), but default
     `white-space: normal` collapsed them -- letting them render is a
     rendering fix, not a content change. */
  white-space: pre-line;
}

.sr-callout__link {
  /* Colour intentionally unset -- see file header. Structural-only
     text-decoration so the link remains identifiable without colour
     alone, satisfying "status not communicated by colour alone" even
     before a link colour token is resolved. */
  text-decoration: underline;
}

/* --- Per-type semantic colour hooks (all currently unresolved) --------- */
.sr-callout--tip           { border-left-color: var(--color-tip); }
.sr-callout--mistake       { border-left-color: var(--color-danger); }
.sr-callout--requirement   { border-left-color: var(--color-requirement); }
.sr-callout--good-to-know  { border-left-color: var(--color-muted); }
.sr-callout--province-note { border-left-color: var(--color-province); }
.sr-callout--download      { border-left-color: var(--color-requirement); }