/* ==========================================================================
   橘華祭 企画カード

   【重要】このテーマは html{font-size:62.5%} で 1rem = 10px。
   16px基準のつもりで rem を書くと指定値の 62.5% にしかならないため、
   このファイルでは rem を使わず px で書く。
   （テーマの開発ルール「2.【最重要】1rem = 10px」に従う）

   背景色・余白・見出しは持たない。それらはブロックエディターの
   グループブロックと見出しブロックで指定する。
   ここが持つのは「カードの並びとカードの中身」だけ。
   ========================================================================== */

.kikkasai-cards {
  /* ショートコードの columns / ratio / fit 属性から上書きされる */
  --kikkasai-card-min: 380px;
  --kikkasai-ratio: 7 / 5;

  /* contain＝画像全体を枠に収める（切れない）。cover＝枠を埋める（端が切れる）。
     昨年の画像73枚を実測したところ、66枚が比率1.25〜1.6の横長で中央値1.42。
     枠の 7/5（1.40）とほぼ一致するため、contain でも余白はごくわずかで済む。 */
  --kikkasai-fit: contain;

  /* contain のときに画像の周りに出る余白の色。
     手描きポスターは白地が多いので、白にすると余白が目立たない。 */
  --kikkasai-image-bg: #ffffff;

  --kikkasai-tag-bg: rgba(102, 89, 144, 0.92);
  --kikkasai-tag-fg: #ffffff;

  display: grid;
  gap: 16px;

  /* minmax の下限は必ず min(..., 100%) で包むこと。
     minmax(380px, 1fr) と素で書くと、下限がコンテナ幅より優先されるため、
     380px より狭い親の中でも列が380pxのまま作られて右へあふれる。
     実測（390pxのスマホ）: 親の内寸342px に対しカードが380pxになり、
     カード53枚すべてが画面から14pxはみ出していた。
     テーマ側の html,body{overflow-x:clip} で新しいブラウザでは切り取られるが、
     clip 非対応の端末では横スクロールが出る。
     min(380px, 100%) にすると、親が380pxより狭いときだけ100%へ落ちる。 */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--kikkasai-card-min), 100%), 1fr));
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
}

.kikkasai-cards *,
.kikkasai-cards *::before,
.kikkasai-cards *::after {
  box-sizing: inherit;
}

/* 1枚しか無いセクションで、カードが横いっぱいに伸びないようにする。
   下限を min(..., 100%) で包む理由は上と同じ。 */
.kikkasai-cards--single {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--kikkasai-card-min), 100%), 420px));
}

/* ---------- セクションごとのタグ配色（昨年の色を踏襲） ---------- */

.kikkasai-cards--eat {
  --kikkasai-tag-bg: rgba(0, 110, 0, 0.88);
  --kikkasai-tag-fg: #ffffff;
}

.kikkasai-cards--play {
  --kikkasai-tag-bg: rgba(240, 170, 20, 0.95);
  --kikkasai-tag-fg: #2b2b2b;
}

.kikkasai-cards--feel {
  --kikkasai-tag-bg: rgba(0, 140, 210, 0.95);
  --kikkasai-tag-fg: #ffffff;
}

.kikkasai-cards--show,
.kikkasai-cards--live {
  --kikkasai-tag-bg: rgba(193, 85, 130, 0.95);
  --kikkasai-tag-fg: #ffffff;
}

/* ---------- カード ---------- */

.kikkasai-card {
  margin: 0;
  background-color: #383838;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* 画像枠。ここ全体がクリック対象。 */
.kikkasai-card__top {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--kikkasai-ratio);
  overflow: hidden;
  cursor: pointer;
}

.kikkasai-card__top:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -3px;
}

.kikkasai-card__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: var(--kikkasai-fit);
  object-position: var(--kikkasai-position, center);
  background-color: var(--kikkasai-image-bg);
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- 比率が合わない画像の余白を埋める背景（fit="blur" のとき） ----------

   同じ画像を拡大・ぼかして敷き、その上に画像全体を重ねる。
   切り抜きも引き伸ばしもせずに、枠が隙間なく埋まって見える。
   比率が枠と一致している画像では、上の画像が覆い隠すので何も見えない。 */

.kikkasai-card__backdrop {
  display: none;
}

.kikkasai-cards--backdrop .kikkasai-card__backdrop {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  /* ぼかすと端が薄くなるので、少し拡大して枠の外に逃がす */
  transform: scale(1.25);
  filter: blur(20px) saturate(1.15);
}

/* 背景を敷くときは、画像側の下地は透明にする */
.kikkasai-cards--backdrop .kikkasai-card__img {
  background-color: transparent;
}

/* クラス／団体名。画像の下に帯として敷く。

   1.9.2 まではここが position:absolute で画像の左上に重なっていた。
   団体名は「探すための情報」なので常時見えている必要があるが、
   手描きポスターの左上を隠してしまうという指摘があり、外へ出した。
   画像枠（__top）の兄弟にしてあるので、絵は1pxも隠れない。
   1.9.4 で説明も外へ出したので、カードは
   「画像 → 団体名 → 説明」の3段を縦に積む形になっている。

   帯は幅いっぱいに敷く。カードを縦に並べたときに帯の位置と高さがそろい、
   目当てのクラスを上から探しやすくなる。 */
.kikkasai-card__tag {
  padding: 9px 13px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  background-color: var(--kikkasai-tag-bg);
  color: var(--kikkasai-tag-fg);

  /* 帯もカードを開く操作の対象。JS 側で __top と一緒に拾っている。 */
  cursor: pointer;

  /* 長い団体名でも帯が2行に増えないようにする（「吹奏楽部」程度は1行に収まる） */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- タップで開く説明 ---------- */

/* 1.9.3 までは画像の上に position:absolute で重ね、黒い幕を敷いて白文字を
   載せていた。スマホ2列にしたところ画像枠が 182×130 しかなく、余白を引くと
   162×110、12pxの文字で13字×3行＝39字しか入らない。本文は64字あるため
   4割しか見えず、残りは110pxの枠を指でスクロールする必要があった。

   1.9.4 で画像枠の外へ出し、カードの地色の上に置く形にした。
   文字と絵が場所を取り合わなくなり、影も幕も要らなくなったので
   text-shadow・background・opacity・overflow-y の指定をすべて外している。
   高さは中身なりに伸びるので、スクロール枠も不要。 */

.kikkasai-card__detail {
  display: none;
  padding: 12px 14px 14px;
  color: #ffffff;

  opacity: 0;
}

/* 現れるときだけ軽くフェードさせる。切り替えだけだと唐突に見えるため。
   閉じるときはアニメーションしない。

   【重要】transition は必ず .is-open 側にだけ置くこと。
   1.9.6 では共通側に `display 0.22s allow-discrete` を含めて書いていた。
   allow-discrete は display:none への切り替えを transition の終わりまで
   待たせるので、**カードを閉じても 0.22 秒はカードが開いたままの高さで残る。**

   その 0.22 秒の間に、JS は別のカードを開いて scrollIntoView を呼ぶ。
   目標位置が「閉じる前の高いレイアウト」で計算され、直後にレイアウトが
   縮むため、開いたカードが上へずれて追従バーの裏に潜っていた。
   実測（390px）: 着地位置が 133px / -49px / -92px とカードごとにばらついた。
   ずれ幅は「直前に開いていたカードの高さ」と一致する。

   .is-open 側に置くと、クラスが外れた瞬間に transition ごと消えるので
   レイアウトは即座に縮む。@starting-style は allow-discrete が無くても効く。 */
.kikkasai-card.is-open .kikkasai-card__detail {
  display: block;
  opacity: 1;
  transform: none;

  /* 0.22秒 → 0.32秒 と伸ばしても「視認できない」という指摘が続いたため、
     0.4秒に伸ばしたうえで 0.12秒の遅延を入れた。

     実測では 0.22秒の時点でも opacity は 0→1 に変化していた。つまり
     動いていなかったのではなく、カードの展開とスムーズスクロールが
     同時に走るせいで、フェードが終わる頃にはまだ画面が動いていた。
     遅延を入れてスクロールが落ち着いてから始めることで、
     独立した「現れる」動きとして認識できるようにする。 */
  transition: opacity 0.4s ease 0.12s, transform 0.4s ease 0.12s;
}

/* 開き始めの値。これが無いと display:none から現れる要素は
   transition の開始値を持てず、いきなり最終状態で描画される。 */
@starting-style {
  .kikkasai-card.is-open .kikkasai-card__detail {
    opacity: 0;
    transform: translateY(-14px);
  }
}

/* 動きを減らす設定を尊重する。
   セレクタは上のフェードと同じ詳細度 (0,2,0) にそろえること。
   .kikkasai-card__detail だけ (0,1,0) にすると、詳細度で負けて効かない。 */
@media (prefers-reduced-motion: reduce) {
  .kikkasai-card.is-open .kikkasai-card__detail {
    transition: none;
  }
}

.kikkasai-card__detail-title {
  font-weight: 800;
  line-height: 1.35;
  font-size: clamp(16px, 1.1vw + 11px, 21px);
}

.kikkasai-card__detail-body {
  margin-top: 6px;
  line-height: 1.7;
  font-size: clamp(13px, 0.5vw + 11px, 16px);
}

.kikkasai-card__detail-body a {
  color: #ffd7e3;
}

/* 開いたカードの上端を、毎回同じ位置へ持っていくための余白。
   JS の scrollIntoView がこの値を見る。
   固定ヘッダーや追従バーのあるテーマは、この変数を上書きしてその高さを渡す。 */
.kikkasai-card {
  scroll-margin-top: var(--kikkasai-open-offset, 16px);
}

/* ---------- PC は画像に重ねて表示する ---------- */

/* 601px以上では、説明を下に積まずに画像枠へ重ね直す。

   下に積む方式（スマホ用）をPCでもやると、グリッドの align-items が既定の
   stretch のため、1枚開くと同じ行のカードが全部そのぶん縦に伸びる。
   実測（1440px・3列）: 1枚開いただけで3枚とも 369px → 511px になった。
   align-items:start にすれば伸びは止まるが、今度は開いていないカードの下に
   大きな空白ができる。PCはカードが464pxと広く、重ねても本文が十分読めるので
   1.9.3 までの見え方に戻すのが素直だと判断した。

   高さの合わせ方: left/right を0にして幅を親いっぱいにし、
   aspect-ratio に画像枠と同じ --kikkasai-ratio を与えると、
   高さが自動で __top と一致する。数値の決め打ちが要らない。

   タイトルは固定して本文だけスクロールさせる（1.9.3 までと同じ）。 */
@media screen and (min-width: 601px) {
  .kikkasai-card {
    position: relative;
  }

  .kikkasai-card.is-open .kikkasai-card__detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    aspect-ratio: var(--kikkasai-ratio);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    padding: 18px;
    background: rgba(0, 0, 0, 0.72);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  /* overscroll-behavior は contain にしないこと。
     contain はスクロールの連鎖を親へ渡さないので、本文があふれていなくても
     カードの上にカーソルがある間はホイールが吸われ、ページが動かなくなる。
     実測（1440px）では10枚中0枚しかあふれておらず、
     ほぼ全てのカードで「カーソルを外さないとスクロールできない」状態だった。
     auto なら、あふれている時だけ本文が動き、端まで来たらページへ渡る。 */
  .kikkasai-card.is-open .kikkasai-card__detail-body {
    margin-top: 0;
    min-height: 0; /* グリッド項目を縮められるようにする */
    overflow-y: auto;
    overscroll-behavior: auto;
  }
}

/* ---------- スマホは2列にする ---------- */

/* カード53枚を1列で並べると、390×844 の端末でページ全高が 21,500px
   （25.5画面分）になり、目的の企画に着くまでのスクロールが現実的でない。
   下限を150pxにすると2列になり、実測で 9,500px（11.3画面）まで下がる。

   引き換えに画像の表示幅は 374px → 182px になる。ポスターに書き込まれた
   細かい文字は読めなくなるが、374pxでも元から読めておらず、説明はタップで
   開く設計になっている。画像は目を引くサムネイルとして働けばよい、という判断。

   !important が要るのは、ショートコードの columns 属性が
   --kikkasai-card-min をインラインで書き出すため（180〜600の範囲で有効）。
   インラインはクラスより強いので、これが無いと columns 指定のある
   セクションだけ1列のまま取り残される。

   カードが小さいぶん、帯の文字も詰める。 */
@media screen and (max-width: 600px) {
  .kikkasai-cards {
    --kikkasai-card-min: 150px !important;
    gap: 10px;
  }

  .kikkasai-card__tag {
    font-size: 12px;
    padding: 6px 9px;
  }

  /* 開いたカードだけ2列ぶんに広げる。
     182px幅のままだと本文が13字/行になり、64字で5行を細長く読むことになる。
     広げれば374px＝28字/行で3行に収まり、視線の折り返しが減る。
     画像も 182→374px に大きくなるので、ポスターの中身も読めるようになる。 */
  .kikkasai-card.is-open {
    grid-column: 1 / -1;
  }

  .kikkasai-card__detail {
    padding: 10px 12px 12px;
  }
}


/* ==========================================================================
   全幅にするための補助クラス kikkasai-fullbleed

   グループブロックの「高度な設定 → 追加CSSクラス」に入れて使う。
   2つの問題をまとめて解決する。
   ========================================================================== */

/* ① PC：背景だけ全幅で、カードが狭いままになる問題

   グループを「全幅」にすると背景は画面いっぱいになるが、
   「コンテンツ幅を使用するインナーブロック」が有効なままだと、
   中のカードは theme.json の contentSize（このテーマは 1200px）に制限される。

   コアの規則は
     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
   で、:where() は詳細度0なので実質 0,2,0。
   こちらは .wp-block-group を重ねて 0,3,0 にし、読み込み順に左右されず上書きする。 */
.wp-block-group.kikkasai-fullbleed > .kikkasai-cards,
.wp-block-group.kikkasai-fullbleed > .wp-block-group__inner-container > .kikkasai-cards {
  max-width: none;
}

/* ② スマホ：全幅の指定自体が効かない問題

   テーマの .alignfull は min-width:769px 限定なので、768px以下では
   全幅を選んでも本文の枠内（#main-inner の margin 0 10px）に収まる。
   テーマ内の .archive-guide .alignfull と同じ手法で広げる。 */

@media screen and (max-width: 768px) {
  .kikkasai-fullbleed {
    /* border-box が無いと、100vw に左右の余白が加算されて
       画面より広くなり、横スクロールが出る。 */
    box-sizing: border-box;

    /* !important が要る理由：
       ブロックの「寸法 → マージン」を 0 に設定すると、エディターが
       style="margin-left:var(--wp--preset--spacing--0)" をインラインで書き出す。
       インラインはクラスより強いので、!important が無いと下の calc() が
       打ち消され、全幅にならない（動画ブロックで実際に発生した）。
       テーマの .alignfull（769px以上）も同じ理由で !important を使っている。 */
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* 画面端に貼り付かないための保険。カードを含む入れ物にだけ効かせる。
     動画や画像を全幅にしたいときに左右が空いてしまうのを避けるため、
     対象を :has() で絞っている。
     エディターで余白を指定した場合は inline style が優先されるので、
     こちらの指定は邪魔をしない。 */
  .kikkasai-fullbleed:has(.kikkasai-cards) {
    padding-left: 16px;
    padding-right: 16px;
  }
}