/* ===== Archives Page ===== */

.page-title {
  padding: 40px 0 18px 0;
}

.page-title h1 {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.page-title p {
  color: #cfcfe0;
}

.toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 14px 0 18px 0;
}

.input, .select {
  background: #1c1c1f;
  border: 1px solid #333333;
  color: #e9e9f1;
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

.input {
  flex: 1;
  min-width: 220px;
}

.select {
  min-width: 220px;
}

.archives-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  padding-bottom: 30px;
}

@media (min-width: 860px) {
  .archives-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card */
.archive-card {
  display: block;
}

.archive-thumb{
  position: relative;
}

.archive-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.28));
  pointer-events:none;
}

.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.archive-body{
  padding: 14px 14px 16px 14px;
  display: grid;
  gap: 6px; /* 8px→6px：1行タイトル時の間延びを軽減 */
}

.archive-title{
  font-weight: 900;
  line-height: 1.35;

  /* 2行固定（超過分は省略） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-period {
  color: #cfcfe0;
  font-size: 0.9rem;
}

/* ===== Twitch VOD block ===== */
.twitch-vods{
  padding: 18px;
  margin-bottom: 18px;
}

.twitch-vods__desc{
  color:#cfcfe0;
  margin-bottom:12px;
}

/* PC用（4枚カード） */
.twitch-vods__grid{
  display: none;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
}

.twitch-vod-card{
  display:block;
  text-decoration:none;
}

.twitch-vod-thumb{
  width:100%;
  aspect-ratio: 16/9;
  background:#0f0f15;
  border-bottom:1px solid #1a1a22;
  position: relative;
}

.twitch-vod-body{
  padding: 12px 12px 14px 12px;
  display:grid;
  gap:8px;
}

.twitch-vod-title{
  font-weight: 900;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.twitch-vod-date{
  color:#cfcfe0;
  font-size:0.9rem;
}

/* SP用（ボタンのみ） */
.twitch-vods__sp{
  display:block;
}

/* 768px以上をPC扱い */
@media (min-width: 768px){
  .twitch-vods__grid{ display:grid; }
  .twitch-vods__sp{ display:none; }
}