/* ============================================================
   BASEBALL GAME LIST — Clean Style (v1)
   ・full-width ラップ対応（横スクロール抑止）
   ・グリッド/カード整形
   ・VK/Ligthning等のコンテナ上限の影響を回避
   ・微アニメ & A11y
============================================================ */

/* ========== 基本ラッパー ========== */
.bgl-wrapper {
  position: relative;
  width: 100%;
  display: block;
  margin: 0 auto;
}
.bgl-wrapper.alignfull,
.alignfull .bgl-wrapper {
  max-width: none !important;
  width: 100% !important;
}
.bgl-wrapper.alignwide,
.alignwide .bgl-wrapper {
  /* テーマの wide-size 変数があれば使う */
  max-width: var(--wp--style--global--wide-size, var(--wp--style--global--content-size, 1200px));
}

/* ========== full-width ラップ（PHPで自動付与） ========== */
.full-width {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* ビューポート丸ごとに広げた時の横スクロール抑止 */
  overflow-x: hidden;
}
.full-width .wp-block-shortcode,
.full-width .wp-block-shortcode > *,
.full-width .wp-block-shortcode > div > * {
  width: 100% !important;
  max-width: 100% !important;
}

/* ========== グリッド ========== */
.bgl-grid {
  display: grid;
  gap: var(--bgl-gap, 24px);
  grid-template-columns: repeat(var(--bgl-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1199px) {
  .bgl-grid { grid-template-columns: repeat(var(--bgl-cols-tab, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .bgl-grid { grid-template-columns: repeat(var(--bgl-cols-sp, 1), minmax(0, 1fr)); }
}

/* ========== カード ========== */
.bgl-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(2,6,23,.05);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
  will-change: transform;
}
.bgl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
}

/* 環境配慮：動き苦手な利用者向けに最小化 */
@media (prefers-reduced-motion: reduce) {
  .bgl-card { transition: none; }
  .bgl-card:hover { transform: none; }
}

/* ========== サムネ ========== */
.bgl-thumb { position: relative; background: #e5e7eb; }
.bgl-thumb::before {
  content: "";
  display: block;
  aspect-ratio: var(--bgl-aspect, 16/9);
}
/* 古いブラウザ向けフォールバック（aspect-ratio未対応時の比率箱） */
@supports not (aspect-ratio: 1 / 1) {
  .bgl-thumb::before {
    padding-top: calc(100% / (var(--bgl-aspect, 16/9)));
  }
}
.bgl-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ========== 本文 ========== */
.bgl-body { padding: 12px 14px; }
.bgl-date { font-size: .9rem; color: #6b7280; }
.bgl-title { font-weight: 800; margin-top: 2px; }
.bgl-title a { color: inherit; text-decoration: none; }
.bgl-title a:hover { text-decoration: underline; }
.bgl-teams { font-size: 1rem; margin-top: 4px; color: #111827; }
.bgl-foot { margin-top: 10px; text-align: right; }
.bgl-foot a {
  background:#0f172a; color:#fff;
  padding:8px 12px; border-radius:8px;
  display:inline-block; text-decoration:none;
  line-height: 1;
}
.bgl-foot a:hover { filter: brightness(1.05); }

/* ========== エラー/ユーティリティ ========== */
.bgl-error {
  padding:12px; background:#fee2e2; border:1px solid #fecaca; border-radius:8px;
  color:#991b1b;
}
.bgl-visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ========== VK Blocks / Lightning 等のコンテナ上限回避（必要最小限） ========== */
/* VKの外枠内で全幅ショートコードがある場合に max-width を解除（:hasあり） */
.vk_outer_container.is-layout-flow.wp-block-outer-is-layout-flow:has(.wp-block-shortcode.alignfull) {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* :has() 非対応でも full-width ラップで画面端まで広がるよう、ショートコード側を補強 */
.vk_outer .wp-block-shortcode.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* BGL ラッパーは常に親幅にフィット */
.vk_outer .wp-block-shortcode.alignfull .bgl-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   BGL wide をテーマ幅に追従させる
   =============================== */

/* wide の基準はテーマ変数に完全委譲して上書き */
:root {
  /* 最優先: テーマの wide-size → 次: content-size → 最後: 1280px */
  --bgl-wide-max: var(--wp--style--global--wide-size,
                      var(--wp--style--global--content-size,
                          1280px));
}

/* 親が alignwide のとき、BGL はテーマの wide 幅で中央寄せ */
.wp-block-columns.alignwide .bgl-wrapper,
.wp-block-group.alignwide .bgl-wrapper,
.wp-block-cover.alignwide .bgl-wrapper,
.wp-block-shortcode.alignwide .bgl-wrapper,
.bgl-wrapper.alignwide,
.alignwide .bgl-wrapper {
  max-width: var(--bgl-wide-max) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* テーマが中間要素に max-width を持つ場合も吸収 */
.wp-block-columns.alignwide,
.wp-block-group.alignwide,
.wp-block-cover.alignwide {
  /* ここは触らず、子(.bgl-wrapper)側だけ制御するのが安全 */
}

/* モバイルは全て 100% */
@media (max-width: 767px) {
  .wp-block-columns.alignwide .bgl-wrapper,
  .wp-block-group.alignwide .bgl-wrapper,
  .wp-block-cover.alignwide .bgl-wrapper,
  .wp-block-shortcode.alignwide .bgl-wrapper,
  .bgl-wrapper.alignwide,
  .alignwide .bgl-wrapper {
    max-width: 100% !important;
  }
}

/* ===============================
   BGL full は“少し狭い全幅”に
   =============================== */

/* full は 96vw（好みで調整可）。Columns との干渉を避けるため .full-width でのみ */
.full-width {
  width: 96vw !important;
  max-width: 96vw !important;
  margin-left: calc(50% - 48vw) !important;
  margin-right: calc(50% - 48vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden;
}

/* 中身は親幅に追従 */
.full-width .bgl-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
}

/* 続きを見るボタン */
.bgl-loadmore-wrap {
  text-align: center;
  margin: 20px 0 10px;
}

.bgl-loadmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #fff;
  font-size: 0.95rem;
  cursor: pointer;
  gap: 6px;
  line-height: 1;
}

.bgl-loadmore:hover {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .bgl-loadmore {
    transition: none;
  }
}