/**
 * staff card 要素分離 overlay (No.14, 2026-08-10)
 *
 * archive-hklmember.php の staff 分岐で使用。
 * 元 SCSS: assets/sass/project/_members.scss (staff-overlay セクション)
 *
 * このファイルは style.css とは別で enqueue する:
 *   - style.css には SCSS 全体をコンパイルすると 12k 行程度失われる (旧 style.css
 *     は追加のビルドソースを含む) ため、staff 分だけをここに切出して安全に配布
 *   - staff 画像の素材差替が完全に終わり、style.css の SCSS 化が整備できた
 *     タイミングでこのファイルを削除して SCSS へ merge する
 */

/* ============================================
   下辺の名前 overlay の表示 ON/OFF (No.14 リリース時暫定)
   inc/staff-name-toggle.php が body に .apr-staff-name-hidden を付与 → 非表示
   ============================================ */
body.apr-staff-name-hidden .p-members__members-item-staff-name {
  display: none;
}

/* ============================================
   staff card 全体
   ============================================ */
.p-members__members-item-link--staff {
  container-type: inline-size;
}
.p-members__members-item-link--staff .p-members__members-item-img-wrap {
  background-color: #fff;
}
.p-members__members-item-link--staff .p-members__members-item-img {
  object-fit: cover;
  object-position: center top;
}

/* ============================================
   赤バナー (元画像実測: 台形 / trapezoid)
   - 左辺 17.88%、右辺 7.79% (画像高さ比、bounding box 内で右 43.6%)
   - aspect-ratio 680:373 でカード幅と等比スケール
   ============================================ */
.p-members__members-item-role {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 680 / 373;
  z-index: 2;
  pointer-events: none;
}
.p-members__members-item-role::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-background_e, #c8102e);
  clip-path: polygon(0 0, 100% 0, 100% 43.6%, 0 100%);
  z-index: -1;
}

/* ============================================
   役職テキスト: font-size auto-fit + 上限キャップ
   PHP から --role-chars と --role-lines を CSS 変数として注入
   font-size = min(80cqi/N, 20cqi/L, 10cqi) で決定
   - 絶対にはみ出さない (幅と高さ制約)
   - 省略しない (overflow: hidden / ellipsis 不使用)
   - バランス統一 (cap 10cqi、短文も大きすぎない)
   ============================================ */
.p-members__members-item-role .p-members__members-item-role__text {
  --role-chars: 4;
  --role-lines: 1;
  --_fs-by-width:  calc(80cqi / var(--role-chars));
  --_fs-by-height: calc(20cqi / var(--role-lines));
  --_fs-max:       10cqi;

  display: block;
  position: absolute;
  top: 35%;
  left: 5%;
  transform: translateY(-50%);
  width: max-content;
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: pre;
  font-size: min(var(--_fs-by-width), var(--_fs-by-height), var(--_fs-max));
}

/* ============================================
   下辺の名前 (staff 専用、選手の縦書きとは別)
   PHP が "・" を含む長い名前で <br> 自動挿入 → 確実に 2 行以内
   ============================================ */
.p-members__members-item-staff-name {
  --name-chars: 4;
  --name-lines: 1;
  --_fs-name-w:   calc(80cqi / var(--name-chars));
  --_fs-name-h:   calc(24cqi / var(--name-lines));
  --_fs-name-max: 12cqi;

  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem) clamp(0.375rem, 0.3rem + 0.3vw, 0.625rem) clamp(0.5rem, 0.42rem + 0.35vw, 0.875rem);
  color: #fff;
  font-size: min(var(--_fs-name-w), var(--_fs-name-h), var(--_fs-name-max));
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  word-break: keep-all;
  overflow-wrap: normal;
}