/* ==========================================================================
   AOW overview + lightbox (gm) template
   ========================================================================== */


/* ==========================================================================
   1) Base / Reset
   - すべての要素の box-sizing を統一
   - html/body の余白をゼロにする
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   2) CSS Variables (Design tokens)
   - --bar-h   : トップバーの想定高さ
   - --gutter  : 端の余白（デバイス幅に応じて可変）
   ========================================================================== */
:root {
  --bar-h: 72px;
  --gutter: clamp(3px, 2vw, 5px);
}

/* ==========================================================================
   3) Body global
   - フォント / 色 / 背景 / 横スクロール抑止
   ========================================================================== */
body {
  font-family: "acumin-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #111;
  background: #f7F7F5; 
  overflow-x: hidden;
}









/* ==========================================================================
   4) TOP BAR (Sticky + Responsive)
   - desktop/tablet: left brand / right nav
   - mobile portrait: nav goes under artist (left)
   ========================================================================== */

/* Top bar: sticky header */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;

  /* optional: keep text readable over images */
  /* background: #f7F7F5; */

  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter);
  min-height: var(--bar-h);
}

/* Brand (artist/role) */
.brand{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand .artist{
  font-size: .7rem;
  letter-spacing: 0.06em;
  
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.brand-link{
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.brand .role{
  font-size: .7rem;
  letter-spacing: .05em;
}

/* Nav links */
.toplinks{
  display: flex;
  gap: 8px;
}
 
.toplinks a{
  font-size: .7rem;
  color: inherit;
  text-decoration: none;
}

/* Current page underline */
.toplinks a[aria-current="page"]{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toplinks a:hover{
  opacity: .8;
}

/* Mobile portrait: stack nav under artist */
@media (max-width: 370px) and (orientation: portrait){
  .topbar{
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    padding: 14px 5px 10px;
    min-height: auto;
  }



  .toplinks{
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }

  .toplinks a{
    font-size: .7rem;
    letter-spacing: 0.04em;
  }
}








/* ==========================================================================
   5) Page wrapper
   - overview グリッド全体の外側余白
   ========================================================================== */
.page {
  padding: 0 var(--gutter) var(--gutter);
}

/* ==========================================================================
   6) Overview grid (justified-layout 用)
   - #grid: JS によって絶対配置のアイテムが入るコンテナ
   - 初期は非表示（opacity/pointer-events）→ .jl-ready で表示
   ========================================================================== */
#grid {
  position: relative;
  width: 100%;
  margin: 8px 0 25px;

  /* JS でレイアウトが確定するまで見せない（チラつき防止） */
  opacity: 0;
  pointer-events: none;
}

/* ★ JS で body に .jl-ready が付いたら表示 */
body.jl-ready #grid {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

/* ==========================================================================
   7) Items (images & videos)
   - .jl-item は JS が left/top/width/height を付ける前提で absolute
   - 中身（img/video）は枠にフィットさせる
   ========================================================================== */
.jl-item {
  position: absolute; /* justified-layout の結果を JS が反映 */
  margin: 0;
  overflow: hidden;   /* 枠外を切る（object-fit とセット） */
}

.jl-item img,
.jl-item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* data-w/data-h と合っていればほぼトリミングなし */
}


/* ==========================================================================
   8) Overview caption & group highlight (hover/tap)
   - .ov-cap: 各グループの先頭サムネにだけ出すキャプション
   - PC は hover、モバイルは tap 用クラスで制御
   ========================================================================== */

/* キャプション共通（初期は非表示） */
.ov-cap {
  position: absolute;
  left: 4px;
  top: 2px;
  color: #000;
  font-size: .5rem;

  opacity: 0;          /* 初期は非表示 */
  pointer-events: none;/* クリックを邪魔しない */
  max-width: 80%;
  line-height: 1.3;
}

/* 見出し系（強調） */
.ov-cap em,
.ov-cap i {
  display: block;
  opacity: 0.9;
  font-style: normal;  /* 斜体オフ */
}

.ov-cap b,
.ov-cap strong {
  font-style: normal;
}

/* PC: hover が使える環境のみ */
@media (hover: hover) and (pointer: fine) {

  /* グループに属するサムネだけ白オーバーレイ */
  #grid.is-group-hover .jl-item.is-in-group::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.763);
    pointer-events: none;
    z-index: 1;
  }

  /* グループ先頭（data-head="1"）のサムネだけキャプション表示 */
  #grid.is-group-hover .jl-item[data-head="1"].is-in-group .ov-cap {
    opacity: 1;
    z-index: 2; /* オーバーレイより前 */
  }
}

/* モバイル: 1回タップ中（is-group-tap） */
#grid.is-group-tap .jl-item[data-head="1"].is-in-group .ov-cap {
  opacity: 1;
  z-index: 2; /* オーバーレイより前 */
}

#grid.is-group-tap .jl-item.is-in-group::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.763);
  pointer-events: none;
  z-index: 1;
}

/* キャプションを常にオーバーレイより前に */
#grid .ov-cap {
  position: absolute;
  z-index: 2;
}


/* ==========================================================================
   9) Video fullscreen behavior (overview 側)
   - フルスクリーン時は contain でトリミングしない
   ========================================================================== */
.jl-item.is-video video:fullscreen,
.jl-item.is-video video:-webkit-full-screen {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}


/* ==========================================================================
   10) Fullscreen button (overview 側の動画用ボタン)
   - .fs-btn はホバーで出す（PC）
   - hover が無い環境では常時表示
   ========================================================================== */
.fs-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 22px;
  height: 22px;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  cursor: pointer;
  outline: none;

  opacity: 0;                 /* 初期は非表示 */
  transform: translateY(4px); /* 少し下げておく */
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.fs-btn::before {
  content: "⤢"; /* fullscreen アイコン */
  color: #fff;
  font-size: .6rem;
  line-height: 22px;
  display: block;
  text-align: center;
  pointer-events: none;
}

/* PC: 動画アイテム hover 時だけ表示 */
.jl-item.is-video:hover .fs-btn {
  opacity: 1;
  transform: translateY(0);
}

/* hover が無い環境（タッチ）では常時表示 */
@media (hover: none) {
  .fs-btn {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   11) Small screen tweaks (ヘッダー文字)
   ========================================================================== */
@media (max-width: 480px) {
  .brand .artist {
    font-size: .7rem;
  }
}
















/* ==========================================================================
   15) Custom video controls (sv)
   ========================================================================== */

/* 動画のラッパー（sv-controls の基準） */
.gm-video-wrap {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 20;

  opacity: 0;
  transition: opacity .35s ease;

  pointer-events: auto;
}

/* JS が付与：準備完了で表示 */
.gm-video-wrap.is-ready {
  opacity: 1;
}

/* コントロール本体（動画の下端に沿わせる） */
.sv-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;

  display: flex;
  flex-direction: column;
  gap: 6px;

  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;

  z-index: 10;

  background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
  border-radius: 0 0 6px 6px;
}

/* PC：ホバーで表示 */
.gm-video-wrap:hover .sv-controls {
  opacity: 1;
  pointer-events: auto;
}

/* JS で付与：表示 */
.sv-controls.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* プログレスバー（クリックでシーク） */
.sv-progress {
  position: relative;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  cursor: pointer;
}

/* 進捗バー（JS で width を更新） */
.sv-progress__bar {
  width: 0;
  height: 100%;
  background: #fff;
}

/* ボタン行（左右配置） */
.sv-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ボタン共通（白文字） */
.sv-btn {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 0;
  cursor: pointer;
}

/* モバイル用：コントロールの余白を少し減らす */
@media (max-width: 480px) {
  .sv-controls {
    padding: 8px 12px;
  }
}

/* hover なし（タッチ）：初期非表示、.is-visible で表示 */
@media (hover: none) and (pointer: coarse) {
  .gm-video-wrap .sv-controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }

  .gm-video-wrap .sv-controls.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}


/* ==========================================================================
   Video sizing (default)
   ========================================================================== */

/* 動画本体（gm 内）: gm-frame の中に必ず収める */
.gm-video-wrap{
  max-width: 100%;
  max-height: 100%;
}

.gm-video-wrap video{
  display: block;
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}