/* ── Shared tile component overrides ──
   Applies to .container.out.other tiles across all project pages
   (both .research and .problem variants) */

/* Stack heading above body text, uniform padding */
.container.out.other {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 24px !important;
}

/* Title row: horizontal, full width, centered text */
.container.out.other .cs-std-text_content-left.below.with-padding.in-container {
  width: 100% !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Titles: natural wrap only, never stacked per word */
.container.out.other .cs-std-text_content-left.below.with-padding.in-container h2,
.container.out.other .cs-std-text_content-left.below.with-padding.in-container h3 {
  white-space: normal !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: center !important;
  overflow: visible !important;
  word-break: normal !important;
}

/* Body text: full width, no extra margin */
.container.out.other p.cs-text.container.other {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Images inside title row */
.container.out.other .cs-std-text_content-left.below.with-padding.in-container img {
  margin-right: 8px;
}