/**
 * Content panel — the centered text column that sits over the animated
 * background, one per node (see templates/node.html.twig).
 *
 * Matches the old site's semi-transparent text panels: a responsive, centered
 * column with symmetric left/right margins whose translucent background comes
 * from a per-content-type appearance token (--text-bg-{landing,page,program,
 * event}), editable under Appearance → Colors.
 */
.reciklart-content {
  /* Per-type token, overridden by the modifier classes below. */
  --text-bg: var(--text-bg-page);

  /* Responsive centered column: capped width on large screens, always with a
     side gutter on small ones (the `100% - 4rem` keeps 2rem margins each side).
     `margin-inline: auto` centers it; the block margin gives vertical spacing. */
  width: min(60rem, 100% - 4rem);
  margin-inline: auto;
  margin-block: 2.5rem;

  padding: clamp(1.5rem, 4vw, 3rem);
  box-sizing: border-box;

  background: var(--text-bg);
  color: var(--content-color);
  font-family: var(--content-font);
  font-size: var(--content-size);
  font-weight: var(--content-weight);

  /* Break long words / URLs so they wrap inside the panel instead of spilling
     past the right padding. Both properties are inherited, so this covers all
     text descendants. */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Media/embeds shouldn't blow out the panel width either. */
.reciklart-content :where(img, video, iframe, table) {
  max-width: 100%;
}

/* Give the copy inside a little breathing room. */
.reciklart-content > * + * { margin-top: 1rem; }

/* Panel heading (node title on non-landing pages). */
.reciklart-content__title {
  font-family: var(--page-title-font);
  font-size: var(--page-title-size);
  font-weight: var(--page-title-weight);
  color: var(--page-title-color);
  margin: 0 0 1.5rem;
}

/*
 * Paragraph sections (page body). Vertical rhythm between successive sections;
 * images render as captioned figures capped to the panel width.
 */
.reciklart-section + .reciklart-section { margin-top: 2rem; }
.reciklart-section--image { margin-inline: 0; }
.reciklart-section--image img { display: block; width: 100%; height: auto; }
/* When the image is a link, the anchor just wraps it (no inline gap/underline). */
.reciklart-section__image-link { display: block; text-decoration: none; }
.reciklart-section__caption {
  margin-top: 0.5rem;
  font-size: 0.85em;
  opacity: 0.8;
  font-style: italic;
}

/* Per-content-type background. */
.reciklart-content--landing { --text-bg: var(--text-bg-landing); }
.reciklart-content--page    { --text-bg: var(--text-bg-page); }
.reciklart-content--event   { --text-bg: var(--text-bg-event); }

/*
 * Program (daily / "dnevni dogodki") — center-aligned like the old site's
 * every-day program page. This is the styling foundation; the interactive
 * day-selector + event list (React island) lands in the program phase and will
 * render inside this same panel.
 */
.reciklart-content--program {
  --text-bg: var(--text-bg-program);
  text-align: center;
}