/* メッセージボックス (gaia/message-box) — moved here from the child theme's
   root style.css, where this exact look used to be fixed PHP template
   markup on プロフィールページ (single-writer.php's old .writer_message
   rule) tied to two custom fields. Same visual design, now block-scoped
   CSS classes instead of page-specific ones, since the block can be
   placed on any page. */
/* Full-bleed per explicit request: the box itself breaks out to the
   real browser viewport width instead of stopping at its parent
   column, using the same left:50%/translateX(-50%)/width:100vw trick
   already proven elsewhere in this theme (quadra-child/style.css's
   .blog_related_tags) — safe as long as no ancestor sets
   overflow-x:hidden/clip, which none here do. No max-width cap (unlike
   .blog_related_tags's 1130px cap) since the request was specifically
   edge-to-edge with the browser window. border-radius dropped for the
   same reason a rounded card doesn't make sense once its corners are
   sitting on the actual viewport edge. */
.gaia-message-box {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  margin: 2.5em 0;
  padding: 2.5em 0;
  text-align: center;
  background: var(--color-surface-subtle, #f5f5f5);
}
/* The text itself stays capped at the site's normal 720px reading-
   column width (single-blog.php/single-writer.php's own #main_col
   max-width, see quadra-child/style.css) — otherwise it would stretch
   to the full 100vw box above and produce unreadably long lines. */
.gaia-message-box__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2.5em;
  box-sizing: border-box;
}
/* No more fixed eyebrow/title/body field styles — the box is a plain
   InnerBlocks container now (see editor.js), so each child block (a
   gaia/paragraph, gaia/heading-h3, etc.) carries its own styling via its
   own block controls instead of a hardcoded 3-tier hierarchy here. */
.gaia-message-box__inner > *:first-child {
  margin-top: 0;
}
.gaia-message-box__inner > *:last-child {
  margin-bottom: 0;
}