/**
 * ピックアップコンテンツ用スタイル
 */

.pickup-list-container {
  margin-top: var(--size-32);
  width: 100%;
}

/* ピックアップアイテム一覧 */
.pickup-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--size-24);
}

/* ピックアップアイテム */
.pickup-item {
  background-color: var(--color-white);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.pickup-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.pickup-item__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* 画像部分 */
.pickup-item__image {
  position: relative;
  width: 100%;
  height: var(--size-200);
  overflow: hidden;
}

.pickup-item__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pickup-item:hover .pickup-item__thumbnail {
  transform: scale(1.05);
}

.pickup-item__no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-light-gray2);
  color: var(--color-text-gray);
  font-size: var(--size-14);
  font-weight: var(--font-weight-medium);
}

/* コンテンツ部分 */
.pickup-item__content {
  display: flex;
  flex-direction: column;
  padding: var(--size-16);
  flex-grow: 1;
}

.pickup-item__meta {
  font-size: var(--size-14);
  color: var(--color-text-gray);
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-8);
  align-items: center;
  margin-bottom: var(--size-8);
}

.pickup-item__title {
  font-size: var(--size-18);
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: 1.4;
  /* 2行までで省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pickup-item__date {
  flex: 0 0 auto;
}

.pickup-item__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-4);
}

.pickup-item__category {
  display: inline-block;
  padding: var(--size-2) var(--size-8);
  background-color: var(--color-bg-light-gray1);
  border-radius: var(--size-2);
  font-size: var(--size-12);
  font-weight: var(--font-weight-medium);
}

/* 記事がない場合 */
.pickup-list-empty {
  text-align: center;
  padding: var(--size-40) 0;
  color: var(--color-text-gray);
  font-size: var(--size-16);
}

/* レスポンシブ対応 */
@media screen and (max-width: 1024px) {
  .pickup-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--size-16);
  }
}

@media screen and (max-width: 768px) {
  .pickup-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-16);
  }

  .pickup-item__image {
    height: var(--size-170);
  }

  .pickup-item__title {
    font-size: var(--size-16);
  }
}

@media screen and (max-width: 576px) {
  .pickup-list {
    grid-template-columns: 1fr;
    gap: var(--size-16);
  }

  .pickup-item__image {
    height: var(--size-200);
  }
}