.gaia-image-text {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
  padding-left: var(--gaia-image-text-padding-x, 0);
  padding-right: var(--gaia-image-text-padding-x, 0);
}

/* 画像を右に */
.gaia-image-text--right {
  flex-direction: row-reverse;
}

/* ── Width (relative to the parent column) ───────────
   Same values as gaia/point-box, minus "hug" — see editor.js's own
   WIDTH_OPTIONS comment for why that option is skipped here. Only the
   non-default (100%) values need a rule — a post saved before this
   attribute existed has no modifier class and keeps rendering at its
   current implicit full width. */
.gaia-image-text--w-25 {
  width: 25%;
}
.gaia-image-text--w-50 {
  width: 50%;
}
.gaia-image-text--w-75 {
  width: 75%;
}

/* ── Block position (only visible when width < 100%) ──
   left matches this block's own current margin-left/right:0 default (the
   plain "margin: 3rem 0" rule above), so a post saved before this
   attribute existed renders identically without needing any class. */
.gaia-image-text--block-align-left {
  margin-left: 0;
  margin-right: auto;
}
.gaia-image-text--block-align-center {
  margin-left: auto;
  margin-right: auto;
}
.gaia-image-text--block-align-right {
  margin-left: auto;
  margin-right: 0;
}

.gaia-image-text__image,
.gaia-image-text__text {
  /* min-width:0 — without it, a flex item's default min-width:auto
       refuses to shrink below its own content's intrinsic width, which
       would break the ratio-based ones below (a wide image or long
       unbreakable text could force its column past its intended flex
       share, or overflow the row entirely). */
  min-width: 0;
}

.gaia-image-text__image {
  flex: 1;
}

/* ── Image:text width ratio ──────────────────────────
   Only the non-default ratios need a rule — 50-50 is already what
   .gaia-image-text__image/__text default to above, so a post saved
   before this attribute existed renders identically without needing any
   class at all. Approximate flex-grow ratios (1:2 for 33/66, 1:4 for
   20/80), same rounding gaia/columns already uses for its own grid-
   template-columns fr values, kept consistent between the two blocks.
   Scoped to __image/__text by their own class, not :first-child/
   :last-child — imagePosition's row-reverse only changes which SIDE
   each element visually appears on, not which one this ratio means by
   "image" vs "text". */
.gaia-image-text--layout-33-66 .gaia-image-text__image {
  flex: 1 1 0%;
}
.gaia-image-text--layout-33-66 .gaia-image-text__text {
  flex: 2 1 0%;
}

.gaia-image-text--layout-66-33 .gaia-image-text__image {
  flex: 2 1 0%;
}
.gaia-image-text--layout-66-33 .gaia-image-text__text {
  flex: 1 1 0%;
}

.gaia-image-text--layout-20-80 .gaia-image-text__image {
  flex: 1 1 0%;
}
.gaia-image-text--layout-20-80 .gaia-image-text__text {
  flex: 4 1 0%;
}

.gaia-image-text--layout-80-20 .gaia-image-text__image {
  flex: 4 1 0%;
}
.gaia-image-text--layout-80-20 .gaia-image-text__text {
  flex: 1 1 0%;
}

/* ── Vertical position ────────────────────────────────
   Only non-default values need a rule — .gaia-image-text's own
   align-items:center below is already the "center" case. */
.gaia-image-text--valign-top {
  align-items: flex-start;
}
.gaia-image-text--valign-bottom {
  align-items: flex-end;
}

/* ── Text alignment ───────────────────────────────────
   Only non-default values need a rule — text-align already defaults to
   left (browser default, nothing overrides it otherwise). */
.gaia-image-text--talign-center .gaia-image-text__text {
  text-align: center;
}
.gaia-image-text--talign-right .gaia-image-text__text {
  text-align: right;
}

.gaia-image-text__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* エディター内のプレビュー */
.gaia-image-text__preview {
  position: relative;
}
.gaia-image-text__change {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.6);
  color: var(--color-text-inverse, #fff);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

.gaia-image-text__text {
  flex: 1;
}

.gaia-image-text__text h2 {
  margin-top: 0;
}

/* スマホ：縦積み */
@media (max-width: 768px) {
  .gaia-image-text,
  .gaia-image-text--right {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* 幅 (width) is a PC/tablet-only variation, same as gaia/point-box — a
     25/50/75% row next to nothing else in a single-column mobile layout
     just looks cramped, so force full width regardless of what's
     selected in the editor. */
  .gaia-image-text--w-25,
  .gaia-image-text--w-50,
  .gaia-image-text--w-75 {
    width: 100%;
  }
}

/* ── Editor: image wrap with action buttons ──────── */
.gaia-image-text__image-wrap {
  position: relative;
}

.gaia-image-text__actions {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  display: flex;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.25rem;
}