/* ============================================================
   ANZAS v2 — page-global-experience.css
   /course/global-experience/(English × Global Experience Program)だけで使う装飾。
   共通シャーシ(pages.css)・共通部品(main.css)・図の部品(figures.css)の後に読み込む。
   研究カードと図(.av2-gx-ev / .av2-gx-vbar / .av2-gx-cmp / .av2-gx-cycle / .av2-gx-meta / .av2-gx-sum)の
   装飾は figures.css にあり、/three-months/ と共用する。
   BP: 900 / 640 / 560(共通シャーシと共通部品に合わせる)
   ============================================================ */

/* パンくずの中間階層「実践プログラム」。束ねるハブページが無いため URL を渡せず、
   共通部品は現在地と同じブルーのピルで出す。他の実践プログラムのページと同じく、
   中間階層だけグレーに戻す(現在地は必ず最後の li)。 */
.av2-crumbs__item:not(:last-child) .av2-crumbs__here { background: var(--av2-surface); color: var(--av2-cap); }

/* ページヘッダーの一言は、他の実践プログラムと同じイエローのバッジ。 */
.av2-phead__note { background: var(--av2-yellow); color: var(--av2-ink); border-radius: 999px; padding: 4px 12px; }

/* ---------- 01 1日の流れ ─ 3 つの時間帯を、矢印でつないだカードで見せる ---------- */

.av2-gx-day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin: 56px 0 0; padding: 0; list-style: none; }
.av2-gx-day__item { position: relative; }
/* カードの間の矢印。ピルボタンの円形矢印と同じ見た目にして、gap の中央に置く。 */
.av2-gx-day__item:not(:last-child)::after {
  content: '→';
  position: absolute; top: 50%; right: -38px; translate: 0 -50%;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--av2-brand); color: #fff;
  font-family: var(--av2-en); font-size: 13px; line-height: 1;
}
.av2-gx-day__no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--av2-brand); color: #fff;
  font-family: var(--av2-en); font-weight: 700; font-size: 15px;
}
.av2-gx-day__when { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.av2-gx-day__jp { font-size: 12px; font-weight: 700; color: var(--av2-cap); }
.av2-gx-day__time { font-family: var(--av2-en); font-weight: 600; font-size: 13px; color: var(--av2-brand); }
.av2-gx-day__item h3.av2-box__title { margin-top: 6px; font-size: 17px; }

/* 週末・最終日の補足。項目名が短いので、左列を共通(240px)より狭くする。 */
.av2-gx-day + .av2-dl .av2-dl__row { grid-template-columns: 140px 1fr; }

/* 1 日の時間の帯。幅は時間の比(学ぶ 3 時間 : 使う 4 時間)。
   振り返りは長さが決まっていないので、比に含めず内容の幅で置く。 */
.av2-gx-time { margin: 56px 0 0; }
.av2-gx-time + .av2-gx-day { margin-top: 36px; }
.av2-gx-time__bar { display: flex; gap: 6px; }
.av2-gx-time__seg { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 128px; padding: 16px 22px; border-radius: 14px; }
.av2-gx-time__seg--learn { flex: 3 1 0; background: var(--av2-brand); color: #fff; }
.av2-gx-time__seg--use { flex: 4 1 0; background: var(--av2-yellow); color: var(--av2-ink); }
.av2-gx-time__seg--reflect { flex: 0 0 auto; min-width: 104px; background: var(--av2-tint); color: var(--av2-ink); box-shadow: inset 0 0 0 1px var(--av2-tint-border); }
.av2-gx-time__jp { font-size: 15px; font-weight: 700; line-height: 1.4; }
.av2-gx-time__h { font-family: var(--av2-en); font-weight: 600; font-size: 46px; line-height: 1.05; }
.av2-gx-time__h small { margin-left: 4px; font-size: 15px; font-weight: 700; }
.av2-gx-time__when { font-family: var(--av2-en); font-size: 12px; font-weight: 600; line-height: 1.4; opacity: .85; }

/* ---------- 03 午後の現場 ─ 写真つきのカード 2 枚(素材は 3:2) ---------- */

.av2-gx-field__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--av2-line); border-radius: 16px; overflow: hidden; }
.av2-gx-field__photo { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.av2-gx-field__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av2-gx-field__body { padding: 28px 26px; }
.av2-gx-field__body h3.av2-box__title { margin-top: 10px; }

/* ---------- 04 成果 ─ 最終日の発表(横長の箱)と、修了証 2 種 ---------- */

.av2-gx-final { margin-top: 56px; border-width: 1.5px; padding: 32px 32px 30px; }
.av2-gx-final__row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-top: 12px; }
.av2-gx-final__body { flex: 1 1 320px; min-width: 0; }
.av2-gx-final .av2-list { flex: 1 1 320px; margin-top: 0; }

.av2-gx-certs { margin-top: 24px; }
.av2-gx-cert__badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--av2-brand); background: var(--av2-tint); border: 1px solid var(--av2-tint-border); border-radius: 999px; padding: 4px 12px; }
.av2-gx-cert__title { margin: 14px 0 0; }
.av2-gx-cert__en { display: block; font-family: var(--av2-en); font-weight: 600; font-size: 19px; line-height: 1.4; letter-spacing: 0; color: var(--av2-ink); }
.av2-gx-cert__jp { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--av2-brand); }

/* ---------- 06 安全と滞在 ─ 校舎•施設の「安全への考え方」と同じ型 ---------- */

.av2-gx-safety h3.av2-box__title { font-size: 15px; }
.av2-gx-safety .av2-box__text { font-size: 13.5px; color: var(--av2-cap); margin-top: 8px; }
.av2-gx-more { margin: 32px 0 0; }

/* ---------- 学校・団体ブロック(短期集中キャンプと同じ型) ---------- */

.av2-gx-group { margin-top: 112px; border-width: 1.5px; padding: 32px 32px 28px; }
.av2-gx-group__row { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; margin-top: 14px; }
.av2-gx-group__body { flex: 1; min-width: 280px; }
.av2-gx-group .av2-pill { flex-shrink: 0; }

/* ---------- 折り返し ---------- */

/* ページヘッダーの H1・コピーと各節のリードは、<span> の単位で折り返す(語の途中で割らない)。
   トップの見出しと同じやり方で、ブラウザを問わず効く。 */
.av2-phead__title > span, .av2-phead__copy > span, .av2-psec__copy > span { display: inline-block; }

/* 見出し・カードの見出し・FAQ の質問・コピーは、文節で折り返す(Chromium 系だけに効く)。 */
.av2-main :where(h2, h3, summary, .av2-phead__copy, .av2-psec__copy) { word-break: auto-phrase; }

/* 行の長さを均し、最後の 1〜2 文字だけが次の行に落ちるのを避ける(Safari 17.5 以降にも効く)。
   ページヘッダーのコピーは <span> の区切りで足りており、均すと 2 行目だけ短くなるので外している。 */
.av2-main :where(h2, h3, summary, .av2-psec__copy) { text-wrap: balance; }

/* 答えの箱は最初に読まれる要約なので、本文も文節で折り返す(Chromium 系だけに効く)。
   太字は塊のまま次の行へ送る(ブラウザを問わず効く)。午後の現場のカードの太字も同じ。 */
.av2-answer__body { word-break: auto-phrase; }
.av2-answer__body b, .av2-gx-field__body b { display: inline-block; }

/* 箇条書きの項目と表の値は短いので、文節で折り、行の長さを均す(最後の 1〜2 文字だけが落ちるのを避ける)。 */
.av2-main :where(.av2-list li, .av2-dl__val) { word-break: auto-phrase; text-wrap: balance; }
.av2-main :is(.av2-list li, .av2-dl__val) > span { display: inline-block; }

/* 本文は、最後の行に 1〜2 文字だけ残るのを避ける(対応しているブラウザだけに効く)。 */
.av2-main :where(p) { text-wrap: pretty; }

/* ---------- レスポンシブ ---------- */

@media (max-width: 900px) {
  /* 縦に積み、矢印は下向きにしてカードの間に置く。 */
  .av2-gx-day { grid-template-columns: 1fr; }
  .av2-gx-day__item:not(:last-child)::after { content: '↓'; top: auto; right: auto; bottom: -38px; left: 50%; translate: -50% 0; }
  /* 共通の表(.av2-dl)が 1 列になる幅に合わせて、狭めた左列も 1 列に戻す。 */
  .av2-gx-day + .av2-dl .av2-dl__row { grid-template-columns: 1fr; }
}
/* 3 項目なので、2 列に折ると 1 つだけ下に余る。1 列になる幅(640px)までは 3 列のままにする。 */
@media (min-width: 641px) and (max-width: 900px) {
  .av2-gx-safety { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .av2-gx-day { margin-top: 40px; }
  .av2-gx-time { margin-top: 40px; }
  .av2-gx-time + .av2-gx-day { margin-top: 28px; }
  .av2-gx-time__bar { gap: 4px; }
  .av2-gx-time__seg { min-height: 104px; padding: 12px; border-radius: 12px; }
  .av2-gx-time__seg--reflect { min-width: 76px; }
  .av2-gx-time__jp { font-size: 14px; }
  .av2-gx-time__h { font-size: 32px; }
  .av2-gx-time__h small { font-size: 12px; margin-left: 2px; }
  .av2-gx-time__when { font-size: 11px; }
  .av2-gx-field__body { padding: 22px 18px; }
  .av2-gx-final { margin-top: 40px; padding: 24px 20px; }
  .av2-gx-final__row { gap: 16px; }
  .av2-gx-group { margin-top: 80px; padding: 24px 20px; }
  .av2-gx-group .av2-pill { width: 100%; justify-content: space-between; box-sizing: border-box; }
}

/* ---------- 図表の動き ----------
   .av2-chart は main.js がスクロール連動の表示の対象にし、画面に入ると .is-inview が付く。
   帯は左から、縦棒は下から伸び、印や手順は順に出る。中の文字を歪ませないよう、帯は clip-path で切り出す。
   .av2-reveal が付かない環境(JS 無効・動きを減らす設定)では、すべて最初から出ている。 */
@media (prefers-reduced-motion: no-preference) {
  .av2-gx-time__seg--learn { --av2-gx-d: .3s; }
  .av2-gx-time__seg--use { --av2-gx-d: .5s; }
  .av2-gx-time__seg--reflect { --av2-gx-d: .7s; }
  .av2-chart.av2-reveal .av2-gx-time__seg { clip-path: inset(0 0 0 0 round 14px); transition: clip-path .8s cubic-bezier(.22,.61,.36,1) var(--av2-gx-d); }
  .av2-chart.av2-reveal:not(.is-inview) .av2-gx-time__seg { clip-path: inset(0 100% 0 0 round 14px); }
}