/* ===========================================================
File: /assets/css/archive-ai.css
説明: /ai アーカイブ用（グリッド＋カード＋ページネーション等）
※ フィルタバーの見た目は /assets/css/archive-ai-filter-bar.css に分離
=========================================================== */

/* ベース */
.ai-archive{max-width:1200px;margin:24px auto;padding:0 16px;}
.ai-archive *{box-sizing:border-box}

/* 見出し */
.section-title{
  margin:18px 0 12px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ---------- サービス グリッド ---------- */
.service-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 220px));
  gap:10px;
  justify-content:start;
  margin-top:6px;
}

.service-card{
  position:relative;display:flex;flex-direction:column;
  border:1px solid #e6e6ea;border-radius:12px;background:#fff;overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.service-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10); border-color:#e3e3ee; }

.logo-wrap{
  display:flex;align-items:center;justify-content:center;width:100%;
  aspect-ratio:1 / 1;background:#f7f8fc;overflow:hidden;
}
.service-logo{width:100%;height:100%;object-fit:contain;display:block;padding:8px;background:#fff;}
.service-logo.ph{width:100%;height:100%;background:linear-gradient(180deg,#f7f8fc,#eff2f8);}

.service-open-btn{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:999px;
  background:#fff;border:1px solid #e6e6ef;display:grid;place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.10);text-decoration:none;transition:transform .12s ease;
}
.service-open-btn:hover{ transform:translateY(-1px); }
.service-open-btn .arrow{ width:9px;height:9px;border-right:2px solid #333;border-bottom:2px solid #333;transform:rotate(-45deg); }

.service-card .meta{ padding:8px 10px 10px; display:flex; flex-direction:column; gap:4px; }
.service-card .name{
  margin:0;font-size:15px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.service-card .name a{ color:inherit; text-decoration:none; }
.service-card .name a:hover{ text-decoration:underline; }
.service-card .summary{
  margin:0;color:#444;font-size:13px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.service-card .summary:empty{ display:none; }

/* ---------- ページネーション ---------- */
.ai-archive-pagination{ margin:18px 0; text-align:right; }
.ai-archive-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:32px;height:32px;padding:0 8px;margin-left:6px;
  border:1px solid #e1e1ea;border-radius:8px;text-decoration:none;background:#fff;font-size:14px;
  vertical-align:middle;
  transition:transform .12s ease, box-shadow .12s ease;
}
.ai-archive-pagination .page-numbers.current{
  background:#111;color:#fff;border-color:#111;
}
.ai-archive-pagination .page-numbers:hover{
  transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.10);
}

/* 0件メッセージ */
.ai-articles-empty{ border:1px dashed #e3e3ee; border-radius:12px; padding:16px; background:#fafafe; color:#555; }

/* アクセシビリティ用 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media (max-width: 720px){
  .service-list{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
    gap:6px;
  }
}