/**
 * grid-block ブロックのフロントエンド表示用スタイル
 */

.wp-block-theme-grid-block {
  margin: 2rem auto;
  width: 100%;
  max-width: 1200px;
  
  /* グリッド設定 */
  &.g-grid {
    display: grid;
    gap: var(--grid-gap, 20px);
    padding: 1rem;
    
    /* カラム数の直接指定（明示的にインライン設定） */
    &[style*="grid-template-columns"] {
      /* 明示的なgrid-template-columnsスタイルが適用される */
    }
    
    /* 固定列数のバックアップフォールバック */
    &.columns-1 { grid-template-columns: 1fr !important; }
    &.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
    &.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
    &.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
    &.columns-5 { grid-template-columns: repeat(5, 1fr) !important; }
    &.columns-6 { grid-template-columns: repeat(6, 1fr) !important; }
  }

  /* ギャップ設定 */
  &.gap-0 { --grid-gap: 0px; }
  &.gap-10 { --grid-gap: 10px; }
  &.gap-20 { --grid-gap: 20px; }
  &.gap-30 { --grid-gap: 30px; }
  &.gap-40 { --grid-gap: 40px; }
  &.gap-50 { --grid-gap: 50px; }
  &.gap-60 { --grid-gap: 60px; }

  /* 垂直方向の配置 */
  &.valign-top {
    align-items: start;
  }
  
  &.valign-center {
    align-items: center;
  }
  
  &.valign-bottom {
    align-items: end;
  }
  
  &.valign-space-between {
    align-items: space-between;
  }

  /* 水平方向の配置 */
  &.halign-left {
    justify-items: start;
  }
  
  &.halign-center {
    justify-items: center;
  }
  
  &.halign-right {
    justify-items: end;
  }
  
  &.halign-space-between {
    justify-content: space-between;
  }

  /* レスポンシブ対応 */
  @media (max-width: 1024px) {
    &.g-grid:not([class*="columns-"]) {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
  
  @media (max-width: 767px) {
    grid-template-columns: 1fr !important; /* モバイルでは1列に */
    padding: 0.5rem;
    &.g-grid:not([class*="columns-"]) {
      grid-template-columns: 1fr !important;
    }
  }

  /* グリッド内の各アイテム */
  > * {
    width: 100%;
    min-width: 0; /* グリッドアイテムがはみ出さないように */
  }

  /* カードや記事ブロックがグリッド内にある場合の高さ調整 */
  .wp-block-theme-teacher-card,
  .wp-block-theme-student-voice-card,
  .wp-block-theme-staff-card,
  .wp-block-theme-pdf-card,
  .wp-block-theme-link-card,
  .wp-block-theme-yumezemi-card,
  .yumezemi-card-wrapper {
    height: 100%;
    width: 100%;
    margin: 0;
  }
}

/* 特定のカードグリッド(yumezemi-cards-grid)の上書き */
.yumezemi-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動調整レイアウト */
  gap: 2rem;
  margin: 2rem auto;
  max-width: 1200px;
  padding: 0 1rem;
  
  /* レスポンシブ対応 */
  @media (max-width: 767px) {
    grid-template-columns: 1fr; /* モバイルでは1列に */
  }
}

.wp-block-group.is-layout-grid {
  display: grid;
  gap: 2rem;
  padding: 1rem;
  
  &.columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  &.columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  &.columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  @media (max-width: 767px) {
    grid-template-columns: 1fr !important;
    padding: 0.5rem;
    &.g-grid:not([class*="columns-"]) {
      grid-template-columns: 1fr !important;
    }
  }
}