/*
File: style-news-grid.css
Purpose: Workshopお知らせ・体験教室のグリッド一覧に関するスタイル定義
Created: 2025-09-11
Last Updated: 2025-09-11
Author: K.Y
Notes:
- カテゴリーボタンの色分け
- カスタムフィールドの表示調整
*/

/* 全カスタムフィールドに白背景＋行間調整 */
ul.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-grid .news-item {
  width: calc(25% - 1.125em);
}
@media (max-width: 991px) {
  .news-grid .news-item {
      width: calc(50% - 0.75em);
  }
}
.thumb-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* 安定した比率を確保 */
  overflow: hidden;
}
.thumb-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  transform: scale(1);
}
.thumb-wrap:hover img {
  transform: scale(1.05);
}
.cat-label {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.4em 0.8em;
  border-radius: 4px;
  display: inline-block;
  white-space: nowrap;
  line-height: 1.3;
  z-index: 2;
}
/* カテゴリー別色分け */
.cat-label.cat-news-fujiyama        { background-color: #1e73be; }
.cat-label.cat-news-event           { background-color: #81d742; }
.cat-label.cat-news-scene           { background-color: #8224e3; }
.cat-label.cat-news-from-site       { background-color: #dd04a3; }
.cat-label.cat-news-from-staff      { background-color: #ffd1d1; }
.cat-label.cat-news-environment     { background-color: #39baba; }
.cat-label.cat-news-uncategorized   { background-color: #999999; }
.cat-label.cat-current-class        { background-color: #2ecc71; }
.cat-label.cat-past-class           { background-color: #e74c3c; }
.cat-label.cat-priority-notice-1    { background-color: #8B4513; }
.cat-label.cat-priority-notice-2    { background-color: #8B4513; }
.cat-label.cat-priority-notice-3    { background-color: #8B4513; }
.cat-label.cat-priority-notice-4    { background-color: #8B4513; }

.news-title {
  font-size: 1em;
  margin-top: 0.5em;
}
.post-date {
  font-size: 0.85em;
  color: #777;
  margin-top: 0.3em;
}