/**
 * 1-4交互型レイアウト (alternating layout) - 2列版
 * 左1件(大)+右4件(2×2小)、左4件(2×2小)+右1件(大)を交互に繰り返すレイアウト
 */

/* PC版レイアウト (960px以上) */
@media (min-width: 960px) {
  .p-postList.-type-alternating {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4列グリッド(実質2列×2) */
    grid-auto-flow: dense; /* 空きスペースを自動で埋める */
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* ===== 1セット目: 左1件(大) + 右4件(小 2×2) ===== */
  
  /* 1件目, 11件目, 21件目... 左側2列占有(大) */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+1) {
    grid-column: 1 / 3; /* 左半分(列1-2) */
    grid-row: span 2;
  }

  /* 2件目, 12件目, 22件目... 右上左 */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+2) {
    grid-column: 3 / 4; /* 右半分の左(列3) */
    grid-row: span 1;
  }

  /* 3件目, 13件目, 23件目... 右上右 */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+3) {
    grid-column: 4 / 5; /* 右半分の右(列4) */
    grid-row: span 1;
  }

  /* 4件目, 14件目, 24件目... 右下左 */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+4) {
    grid-column: 3 / 4; /* 右半分の左(列3) */
    grid-row: span 1;
  }

  /* 5件目, 15件目, 25件目... 右下右 */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+5) {
    grid-column: 4 / 5; /* 右半分の右(列4) */
    grid-row: span 1;
  }

  /* ===== 2セット目: 左4件(小 2×2) + 右1件(大) ===== */
  
  /* 6件目, 16件目, 26件目... 左上左 - 新しい行をスタート */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+6) {
    grid-column: 1 / 2; /* 左半分の左(列1) */
    grid-row: auto; /* 新しい行を開始 */
  }

  /* 7件目, 17件目, 27件目... 左上右 */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+7) {
    grid-column: 2 / 3; /* 左半分の右(列2) */
  }

  /* 8件目, 18件目, 28件目... 左下左 */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+8) {
    grid-column: 1 / 2; /* 左半分の左(列1) */
  }

  /* 9件目, 19件目, 29件目... 左下右 */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+9) {
    grid-column: 2 / 3; /* 左半分の右(列2) */
  }

  /* 10件目, 20件目, 30件目... 右側2列占有(大) - 6件目と同じ行から */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n) {
    grid-column: 3 / 5; /* 右半分(列3-4) */
    grid-row-end: span 2; /* 2行分のスパン */
  }

  /* 大きいアイテム（1件目、10件目）のスタイル */
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+1) .p-alternatingItem__thumb,
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n) .p-alternatingItem__thumb {
    height: 100%;
    min-height: 400px;
  }

  .p-postList.-type-alternating > .p-postList__item:nth-child(10n+1) .c-postThumb__figure,
  .p-postList.-type-alternating > .p-postList__item:nth-child(10n) .c-postThumb__figure {
    height: 100%;
  }

  /* 小さいアイテム（2-5件目、6-9件目）のスタイル */
  .p-postList.-type-alternating > .p-postList__item:not(:nth-child(10n+1)):not(:nth-child(10n)) .p-alternatingItem__thumb {
    height: 100%;
    min-height: 190px;
  }

  .p-postList.-type-alternating > .p-postList__item:not(:nth-child(10n+1)):not(:nth-child(10n)) .c-postThumb__figure {
    height: 100%;
  }
}

/* タブレット・スマホ版レイアウト (959px以下) */
@media (max-width: 959px) {
  .p-postList.-type-alternating {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* 全てのアイテムを2列グリッドで表示 */
  .p-postList.-type-alternating > .p-postList__item {
    grid-column: span 1;
  }

  .p-postList.-type-alternating .p-alternatingItem__thumb {
    height: 100%;
    min-height: 150px;
  }

  .p-postList.-type-alternating .c-postThumb__figure {
    height: 100%;
  }
}

/* 共通スタイル */
.p-postList.-type-alternating .p-postList__item {
  margin: 0;
  padding: 0;
}

.p-postList.-type-alternating .p-postList__link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.p-postList.-type-alternating .p-alternatingItem {
  height: 100%;
  position: relative;
}

.p-postList.-type-alternating .p-alternatingItem__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.p-postList.-type-alternating .c-postThumb__figure {
  margin: 0;
  padding: 0;
}

.p-postList.-type-alternating .c-postThumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.p-postList.-type-alternating .p-postList__link:hover .c-postThumb__img {
  transform: scale(1.05);
}

/* タグのスタイル */
.p-alternatingItem__tags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.p-alternatingItem__tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #ffffff;
  color: #333333;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* タグIDごとの色分け */
.p-alternatingItem__tag[data-tag-id="24"] {
  background-color: #e3f2fd;
  color: #1976d2;
}

.p-alternatingItem__tag[data-tag-id="25"] {
  background-color: #f3e5f5;
  color: #7b1fa2;
}

.p-alternatingItem__tag[data-tag-id="26"] {
  background-color: #e8f5e9;
  color: #388e3c;
}

.p-alternatingItem__tag[data-tag-id="27"] {
  background-color: #fff3e0;
  color: #f57c00;
}

.p-alternatingItem__tag[data-tag-id="28"] {
  background-color: #fce4ec;
  color: #c2185b;
}

.p-alternatingItem__tag[data-tag-id="30"] {
  background-color: #e0f2f1;
  color: #00897b;
}

.p-alternatingItem__tag[data-tag-id="31"] {
  background-color: #fff9c4;
  color: #f9a825;
}

.p-alternatingItem__tag[data-tag-id="32"] {
  background-color: #ede7f6;
  color: #5e35b1;
}

.p-alternatingItem__tag[data-tag-id="33"] {
  background-color: #fbe9e7;
  color: #d84315;
}