/* ==========================================================================
   TI List Shortcode v1.1.7
   - モーダルは wp_footer へ出力（body直下）し、親要素の transform 等の影響を回避
   - テンプレート上書き可: child-theme/ti-list-shortcode/grid.php & modals.php
   ========================================================================== */

:root{
  --ti-gap: 12px;
  --ti-radius: 12px;
  --ti-shadow: 0 10px 40px rgba(0,0,0,.25);
  --ti-overlay: rgba(0,0,0,.55);
  --ti-modal-z: 2147483647;
}

.ti{display:block;}

/* =========================================================
   Grid area
   - 1件/2件/3件でも横中央に寄せたいので "flex" に変更
   ========================================================= */
.ti__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center; /* ← 常に中央寄せ */
  gap: var(--ti-gap);
  padding:0 2em;

}

/* card width (3 columns) */
.ti-card{
  position:relative;
  box-sizing:border-box;
  flex: 0 1 calc((100% - (var(--ti-gap) * 2)) / 3);
  /* カードが伸びすぎる場合の上限。不要なら削除OK */
  max-width: 380px;
  padding:0 1em 1em 1em;
  text-align: center;

  /* ボタンを下揃えにするためのFlexbox設定 */
  display:flex;
  flex-direction:column;
}

/* 2 columns */
@media (max-width: 900px){
  .ti-card{
    flex-basis: calc((100% - var(--ti-gap)) / 2);
  }
}

/* 1 column */
@media (max-width: 520px){
  .ti-card{
    flex-basis: 100%;
    max-width: 520px; /* 任意。不要なら削除OK */
  }
}

/* =========================================================
   Card
   ========================================================= */
.ti-card__link{
  display:block;
  text-decoration:none;
  cursor:pointer;
}

.ti-card__link:hover{ text-decoration:none; }

.ti-card__link .ti-card__media{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ti-card__link:hover .ti-card__media{
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

.ti-card__content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  flex: 1; /* カード内で伸縮 */
  justify-content: space-between; /* 画像とボタンを上下に配置 */
}

.ti-card__media-wrapper{
  display: block;
  width: 100%;
  cursor: pointer;
}

.ti-card__media{
  width: 90%;
  margin: 0 auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  
  /* 画像の高さを統一して縦位置を中央配置 */
  display: flex;
  align-items: center; /* 縦方向の中央配置 */
  justify-content: center; /* 横方向の中央配置 */
  min-height: 200px; /* 最小高さを設定 */
  background: #fff; /* 画像がない場合の背景 */
}

.ti-card__media-wrapper:hover .ti-card__media,
.ti-card__media:hover{
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

.ti-card__media img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* 画像のアスペクト比を維持 */
  max-height: 200px; /* 画像の最大高さを制限 */
}

.ti-card__button{
  display: inline-block;
  padding: 0.8em 2em;
  background: #0b357a; /* デフォルト色 */
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-radius: 25px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 2px 8px rgba(11, 53, 122, 0.3);
  user-select: none;
  flex-shrink: 0; /* ボタンが縮まないように */
}

.ti-card__button:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(11, 53, 122, 0.4);
  filter: brightness(1.1);
}

.ti-card__button:active{
  transform: translateY(-2px);
}

/* ==========================================
   カテゴリー別のボタン色設定
   ========================================== 
   使用方法：
   カテゴリースラッグに応じて色を設定してください
   例：
   .ti-card__button.ti-cat-health { background: #e74c3c; }
   .ti-card__button.ti-cat-education { background: #3498db; }
*/

/* カテゴリー別の色設定例 - 実際のカテゴリーに合わせて編集してください */
.ti-card__button.ti-cat-sample1 { 
  background: #e74c3c; 
}
.ti-card__button.ti-cat-sample1:hover { 
  box-shadow: 0 8px 16px rgba(231, 76, 60, 0.4); 
}

.ti-card__button.ti-cat-sample2 { 
  background: #3498db; 
}
.ti-card__button.ti-cat-sample2:hover { 
  box-shadow: 0 8px 16px rgba(52, 152, 219, 0.4); 
}

.ti-card__button.ti-cat-sample3 { 
  background: #2ecc71; 
}
.ti-card__button.ti-cat-sample3:hover { 
  box-shadow: 0 8px 16px rgba(46, 204, 113, 0.4); 
}

.ti-card__button.ti-cat-sample4 { 
  background: #f39c12; 
}
.ti-card__button.ti-cat-sample4:hover { 
  box-shadow: 0 8px 16px rgba(243, 156, 18, 0.4); 
}

.ti-card__button.ti-cat-sample5 { 
  background: #9b59b6; 
}
.ti-card__button.ti-cat-sample5:hover { 
  box-shadow: 0 8px 16px rgba(155, 89, 182, 0.4); 
}

/* 以下に実際のカテゴリースラッグと色を追加してください */

.ti-card__title{
  margin:10px 0 0;
  font-size:16px;
  font-weight:700;
  line-height:1.4;
  display: none;/*必要であれば表示*/
}

/* =========================================================
   Modal layer (printed in footer)
   ========================================================= */
.ti-modals{
  position:relative;
  z-index: var(--ti-modal-z);
  isolation: isolate;
}

.ti-modal__toggle{
  position:fixed;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.ti-modal{
  position:fixed;
  inset:0;
  z-index: var(--ti-modal-z);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

.ti-modal__toggle:checked + .ti-modal{
  display:flex;
}

.ti-modal__overlay{
  position:absolute;
  inset:0;
  background: var(--ti-overlay);
  background: rgba(255, 255, 255, .6);/*モーダルバックグラウンド色*/
  background: rgba(0, 0, 0, .6);/*モーダルバックグラウンド色*/
}

.ti-modal__dialog{
  position:relative;
  width:min(880px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  overflow:auto;
  background:#fff;
  background: rgba(190, 187, 207, 1);
  border-radius: var(--ti-radius);
  box-shadow: var(--ti-shadow);
  z-index: 1;
}

.ti-modal__close{
  position:sticky;
  top:0;
  float:right;
  margin: .6rem .8rem 0 0;
  font-size: 1.8rem;
  line-height:1;
  cursor:pointer;
  user-select:none;
  color:#111;
}

.ti-modal__body{
  padding: 1.2rem 1.4rem 1.4rem;
  clear: both;
}
.ti-modals__frame {
  background: #fff;
}
.ti-modal__title{
  margin:0 0 1rem;
  font-size:1.25rem;
  font-weight:800;

  color: #fff;
  padding: 0.5em 1.5em;
  background: #0b357a;
  border-radius: 10px;
}

.ti-modal__media{
  margin:0 auto 1rem auto;
  text-align: center;
  background: #fff;
  overflow: hidden;
  width: 40%;
  padding: 1em;
/*
  aspect-ratio: 1 / 1;
*/
  }
.ti-modal__media img{
  width: 100%;
  height: auto;
/*
  height: 100%;
  object-fit: cover;
*/
  display: block;
}
/* 1 column */
@media (max-width: 700px){
  .ti-modal__media{
    width: 70%;
  }
}

.ti-modal__content{
  margin:0 0 1.2rem;
  background: #fff;
  padding: 1.5em;
  border-radius: 10px;
}
.ti-modal__actions{display:flex; justify-content:center;}

.ti-modal__btn{
  display:inline-block;
  padding:.5em 1.5em;
  background:#0b357a;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  border-radius:0;
  border-radius: 10px;
}

.ti-modal__btn:hover{
  filter:brightness(.92);
  color:#fff;
  text-decoration:none;
}