/* =====================================================================
   R3C 小魚の群れ（改良ラウンド3 追補2）
   - トップページだけが読み込む（r3b-frame.css の直後）
   - 「いりこの袋」の写真の並び（.r75-story-grid）の先頭に置く、横長の1枚。
     写真と同じ枠（1px の罫線・白い地）と、同じ形の注記（題＋出どころ）にそろえて、写真と並べて見せる
   - 水の色は案2のトークン（--night）。魚の色は r3c-school.js が同じトークンを読んで混ぜる。色の新規定義はしない
   - 文字の大きさは r3-foundation.css の変数を使う。影・グラデーション・角丸は使わない
   - HTML では hidden を付けて置いてあり、r3c-school.js が動くときだけ表示する。
     このファイルが読み込まれていないときも、JS は表示しない（下の --r3c-ready が合図）
   ===================================================================== */
.r3c-school {
  --r3c-ready: 1;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--card);
}
/* hidden を確実に効かせる（まわりの display の指定に負けないように） */
.r3c-school[hidden],
.r3c-school [hidden] { display: none; }
/* 写真2枚の上に、2列ぶんの幅で置く */
.r75-story-grid > .r3c-school { grid-column: 1 / -1; }

/* 描く面：高さは先に決めておく（JS が動く前後で、まわりの位置が動かないように） */
.r3c-school-view {
  position: relative;
  height: clamp(184px, 21vw, 248px);
  overflow: hidden;
  background: var(--night);
}
.r3c-school-view canvas { display: block; width: 100%; height: 100%; }

/* 注記：写真の注記と同じ並び（題＋出どころ）。右端に「動きを止める」 */
.r3c-school figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 4px 16px;
  font-size: var(--r3-sub);
}
.r3c-school figcaption small { margin-top: 0; color: var(--ink-2); }
.r3c-school .r3c-school-btn { margin-left: auto; }
.r3c-school-note {
  flex: 0 0 100%;
  padding-bottom: 8px;
  font-size: var(--r3-note);
  line-height: 1.7;
  color: var(--muted);
}
@media (max-width: 620px) {
  /* 狭い画面では、題とボタンを1行目に、出どころを2行目に送る */
  .r3c-school figcaption small { order: 3; flex: 0 0 100%; padding-bottom: 8px; }
  .r3c-school-note { order: 4; }
}
@media print {
  .r3c-school { display: none; }
}