/**
 * アーカイブページ共通スタイル
 * 検索結果ページ、カテゴリーアーカイブ、タグアーカイブなどで使用
 */

/* アーカイブヘッダー */
.archive-header {
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-m);
}

.search-query-text {
  /*border: solid 1px #d6d6d6;*/
  /*padding: .1em .3em;*/
}

.archive-header--customer {
  --border-color: #fdc466;

  position: relative;
  padding: var(--space-m);
  background: -webkit-repeating-linear-gradient(-45deg, #fffdfa, #fffdfa 8px, #FFF3E1FF 6px, #FFF3E1FF 16px);
  background: repeating-linear-gradient(-45deg, #fffdfa, #fffdfa 8px, #FFF3E1FF 6px, #FFF3E1FF 16px);
  border-radius: 7px;
  border: 2px solid var(--border-color);
}

.archive-header--customer:after {
  --size: clamp(0.938rem, 0.875rem + 0.31vw, 1.25rem);
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: var(--size) solid transparent;
  border-top: var(--size) solid var(--border-color);
  width: 0;
  height: 0;
}

.archive-header--lifestyle .archive-header__title,
.archive-header--appliance .archive-header__title,
.archive-header--housing .archive-header__title,
.archive-header--carlife .archive-header__title,
.archive-header--foodsafety .archive-header__title {
  color: var(--color-white) !important;
}

.archive-header--lifestyle {
  background: var(--color-lifestyle);
}

.archive-header--appliance {
  background: var(--color-appliance);
}

.archive-header--housing {
  background: var(--color-housing);
}

.archive-header--carlife {
  background: var(--color-carlife);
}

.archive-header--foodsafety {
  background: var(--color-foodsafety);
}


.archive-header__title {
  margin: 0;
  font-size: var(--step-4);
  font-weight: bold;
  line-height: 1.2;
}

.archive-header__title span {
  font-weight: bold;
}

.archive-header__title small {
  font-weight: bold;
}

/* 検索結果カウント */
.search-result-count {
  margin: var(--space-m) 0;
  font-size: var(--step-1);
  font-weight: bold;
  text-align: right;
  color: var(--color-text);
}

/* アーカイブリスト */
.archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.archive-item {
  display: flex;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.archive-item:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.archive-item__thumbnail {
  width: 35%;
  flex-shrink: 0;
}

.archive-item__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 2.5;
}

.archive-item__overview {
  flex-grow: 1;
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
}

.archive-item__overview--full {
  width: 100%;
}

.archive-item__header {
  margin-bottom: var(--space-s);
}

.archive-item__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--step-2);
  line-height: 1.3;
}

.archive-item__title a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.archive-item__title a:hover {
  color: var(--color-accent);
  opacity: 1;
}

.archive-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--step-0);
  color: #666;
}

.archive-item__date {
  font-weight: bold;
}

.archive-item__excerpt {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--color-text);
}

.archive-item__excerpt p {
  margin: 0;
}

/* ページネーション */
.pagination {
  margin: var(--space-l) 0;
  display: flex;
  justify-content: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  margin: 0 5px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-weight: bold;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination .page-numbers.current {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.pagination .page-numbers:hover:not(.current) {
  background-color: var(--color-bg-light);
  color: var(--color-accent);
}

/* 検索結果なし */
.no-results {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: var(--space-l);
  margin-bottom: var(--space-xl);
}

.no-results__title {
  margin-top: 0;
  font-size: var(--step-2);
  color: var(--color-text);
  margin-bottom: var(--space-m);
}

.no-results__content {
  font-size: var(--step-0);
  line-height: 1.6;
}

/* レスポンシブスタイル */
@media (max-width: 960px) {
  .archive-header__title {
    font-size: var(--step-2);
  }

  .search-result-count {
    font-size: var(--step-0);
    margin: var(--space-s) 0;
  }

  .archive-item {
    flex-direction: column;
  }

  .archive-item__thumbnail {
    width: 100%;
    height: 200px;
  }

  .archive-item__title {
    font-size: var(--step-1);
  }
}

/* スマホ向けスタイル */
@media (max-width: 600px) {
  .archive-header__title {
    font-size: var(--step-1);
  }

  .archive-item__thumbnail {
    height: 180px;
  }

  .archive-item__overview {
    padding: var(--space-s);
  }

  .archive-item__title {
    font-size: var(--step-0);
  }

  .archive-item__meta {
    font-size: var(--step--1);
  }

  .archive-item__excerpt {
    font-size: var(--step--1);
  }

  .pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    font-size: 14px;
    margin: 0 3px;
  }
}