/* =========================================================
   Advent Cosplay — Works Archive (Gallery 一覧) 完全版
   目的：
   - ヒーロー：比率固定 + 最小/最大高さで安定
   - グリッド：3 → 2 → 1列の素直なレスポンシブ
   - カード：飾り枠(gallery-nail.png)のみ／白面・枠線ナシ
             本文がサムネに被らない／テキストは右寄せ
   - 注意書き：額縁画像を実寸ワイドで表示、はみ出さない
   - セクション間の余白を統一
   スコープ：.warchive-page に限定（他ページへ干渉しない）
========================================================= */

/* ------------------------------
   0) ページ専用トークン
------------------------------ */
.warchive-page{
  /* Hero（迷わないサイズ指針） */
  --wa-hero-minh: 220px;
  --wa-hero-maxh: 420px;

  /* セクション間隔 & 額縁ガター */
  --wa-section-gap: clamp(28px, 5vw, 60px);
  --wa-frame-gutter: clamp(14px, 2.6vw, 28px);
}

/* ------------------------------
   1) ヒーロー
------------------------------ */
.warchive-page .wa-hero { margin-block: var(--wa-section-gap); }
.warchive-page .wa-hero__in{
  aspect-ratio: 16 / 6;
  min-height: var(--wa-hero-minh);
  max-height: var(--wa-hero-maxh);
  border-radius: 12px;
  overflow: clip;
  border: 2px solid rgba(128,0,32,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  background: #fff;
}
.warchive-page .wa-hero__in img{
  width:100%; height:100%;
  object-fit: cover; object-position: center;
  display:block;
}
@media (max-width: 640px){
  .warchive-page .wa-hero__in{ aspect-ratio: 16 / 9; }
}

/* ------------------------------
   2) グリッド
------------------------------ */
.warchive-page .wa-grid   { margin-block: var(--wa-section-gap); }
.warchive-page .wa-grid__in{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1080px){
  .warchive-page .wa-grid__in{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 640px){
  .warchive-page .wa-grid__in{ grid-template-columns: 1fr; }
}

/* ------------------------------
   3) カード（tcard）
   - 飾り枠は背景 contain
   - サムネは角丸/比率固定
   - 本文は右寄せ・透明（枠/白面ナシ）
------------------------------ */
.warchive-page .tcard{
  background:
    url("https://adventcosplay.com/wp-content/uploads/2025/10/gallery-nail.png")
    center / contain no-repeat;
  border: none;                 /* 枠色は不要 */
  border-radius: 14px;
  padding: 8px;                 /* 背景と中身の“縁” */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .2s ease;
  position: relative;
}
.warchive-page .tcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

/* サムネイル */
.warchive-page .tcard__thumb{
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
}
.warchive-page .tcard__img{
  width:100%; height:100%;
  object-fit: cover; display:block;
}

/* 本文（右寄せ・透明） */
.warchive-page .tcard__body{
  margin-top: 12px;             /* サムネと距離を空ける → かぶり防止 */
  padding: 0;
  background: transparent;
  border: none; box-shadow: none;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  text-align: right;            /* ★右寄せ */
}
.warchive-page .tcard__title{ margin: 0; }
.warchive-page .tcard__desc { margin: 0; }
.warchive-page .tcard__datepill{ margin-top: 2px; }
.warchive-page .tcard__btn{ justify-self: end; }

/* ------------------------------
   4) 注意書き（額縁）
   - 額縁画像を“幅100% × 自動高さ”で貼る
   - %padding で内側ガターを確保
------------------------------ */
.warchive-page .wa-notice { margin-block: var(--wa-section-gap); }

.warchive-page .wa-notice .notice-frame{
  /* 額縁画像の比率（例：1300×600） */
  aspect-ratio: 1300 / 600;

  /* 器の幅（中央寄せ） */
  width: min(1100px, 92vw);
  margin-inline: auto;

  /* 額縁画像を幅いっぱいに（小さくならない／歪まない） */
  background:
    var(--img-flame-wide) center / 100% auto no-repeat,
    rgba(255,252,247,.92);

  /* 画像内側に合わせた安全帯（%指定で柔軟） */
  padding: 12% 7% 14% 7%;

  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden; /* はみ出し防止 */
}

/* 中の紙パネルは不要（透明） */
.warchive-page .wa-notice .notice-in{
  background: transparent;
  border: none; box-shadow: none;
  padding: 0;
}
.warchive-page .wa-notice .notice-title{ margin: 0 0 .6em; }
.warchive-page .wa-notice .notice-in > * + *{ margin-top: .6em; }

/* モバイル微調整（はみ出し防止） */
@media (max-width: 640px){
  .warchive-page .wa-notice .notice-frame{
    width: min(96vw, 560px);
    padding: 11% 7% 13% 7%;
  }
}

/* ------------------------------
   5) 最下部の余白（フッターが詰まらないように）
------------------------------ */
.warchive-page main.site-main,
.warchive-page main.home-main{
  padding-bottom: max(var(--wa-section-gap), 56px);
}

/* Simple Lightbox の背景を少し明るくする */
html.slb_overlay #slb_viewer_overlay {
  /* 好きな濃さに調整してOK（0.0 ～ 1.0） */
  background: rgba(0, 0, 0, 0.45);
}

/* 閉じるボタンを少しだけ目立たせる */
html.slb_overlay .slb_close {
  padding: 0.4em 0.7em;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  /* 必要なら色も調整してね（世界観優先で） */
}

/*（任意）Lightbox全体を少しだけ縮めて「ページの中」の感じを出す */
html.slb_overlay .slb_container {
  max-width: 92vw;
  margin-inline: auto;
}