/*
 * prose.css
 * ----
 * 本文セクション .prose と、その中に置く浮動 aside のレイアウト。
 *
 * HTML:
 *   <section class="prose">
 *     <aside class="pull-end medium"><figure>...</figure></aside>
 *     <aside class="pull-start small"><figure>...</figure></aside>
 *     本文 ...
 *   </section>
 *
 * クラス:
 *   .prose                    本文の親 (clearfix 含む)
 *   .pull-end / .pull-start   sm 以上で図のフロート方向を指定
 *   .small / .medium / .large 図の幅 (.prose 直下でのみ有効)
 *
 * 連続する同方向 aside は clear: inline-end / inline-start により縦積みになる。
 * 逆方向 aside 同士は同じ垂直帯に共存できる。
 *
 * Bootstrap 5 の挙動 (col-5/col-sm-4/col-xl-3, ms-sm-2, float-sm-end,
 * clearfix) をベースとし、ブレークポイントとスペーシングは Bootstrap
 * 既定値を直接埋め込んである。
 */

/* clearfix */
.prose::after {
  display: block;
  clear: both;
  content: "";
}
.prose > .pull-end {
  float: inline-end;
  clear: inline-end;
}
.prose > .pull-start {
  float: inline-start;
  clear: inline-start;
}

/* ---- xs (< 576px): 幅指定 ---- */
.prose > .small  { width: 33.3333%; } /* 4/12 */
.prose > .medium { width: 41.6667%; } /* 5/12 */
.prose > .large  { width: 50%;      } /* 6/12 */
.prose > .pull-end   { width: 41.6667%; } /* 5/12 */
.prose > .pull-start { width: 41.6667%; } /* 5/12 */

/* ---- sm 以上 (>= 576px): 幅切替のみ ---- */
@media (min-width: 576px) {
  .prose > .pull-end   {
    width: 33.3333%; /* 4/12 */
    padding-inline-start: 0.75rem;  /* ms-3 相当 */
  }
  .prose > .pull-start {
    width: 33.3333%; /* 4/12 */
    padding-inline-end: 0.75rem;  /* me-3 相当 */
  }
  .prose > .small  { width: 25%;      } /* 3/12 */
  .prose > .medium { width: 33.3333%; } /* 4/12 */
  .prose > .large  { width: 41.6667%; } /* 5/12 */
}

/* ---- xl 以上 (>= 1200px): 幅切替のみ ---- */
@media (min-width: 1200px) {
  .prose > .pull-end   { width: 25%;      } /* 3/12 */
  .prose > .pull-start { width: 25%;      } /* 3/12 */
  .prose > .small  { width: 16.6667%; } /* 2/12 */
  .prose > .medium { width: 25%;      } /* 3/12 */
  .prose > .large  { width: 33.3333%; } /* 4/12 */
}