/* ============================================================
   ended_event.css
   「終了したイベント一覧」ページ固有スタイル
   依存: css/common.css（デザイントークン定義済み）、css/event.css（カード・パンくず等流用）
   ============================================================ */

/* ============================================================
   ページ全体レイアウト
   ============================================================ */
.ended-event-page {
  background-color: var(--color-bg-gray-03);
  padding-top: 190.845px; /* ヘッダー固定高さ（PC） */
  min-height: 100vh;
}

.ended-event-inner {
  padding: var(--margin-block-03) 0 var(--margin-block-04);
  /* pt: 80px, pb: 120px */
}

.ended-event-container {
  padding: 0 var(--container-medium);
  /* 左右: 80px (モバイル時は --container-medium が 20px に自動上書き) */
}

/* ============================================================
   ページタイトル: event.css の .event-page-ttl を流用
   margin-bottom を終了イベントページ用に指定
   ============================================================ */
.ended-event-page .event-page-ttl {
  margin-bottom: var(--margin-block-03); /* 80px */
}

/* ============================================================
   カード画像: Figmaデザインに従い aspect-ratio を 3/4 に上書き
   event.css の 1/1 (正方形) を ended_event ページ専用でオーバーライド
   Figma値: thumb w=288px, h=383.564px → 3:4比率
   ============================================================ */
.ended-event-page .event-card__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-bg-green-01);
  flex-shrink: 0;
}

/* ============================================================
   ロゴカード専用スタイル
   ============================================================ */
.ended-event-page .event-card__thumb--logo {
  background-color: var(--color-bg-green-01);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* トラップ1対策: ロゴ画像にmax-width:100%が効いてもいいが幅を明示 */
.ended-event-page .event-card__logo-img {
  width: 80%;
  height: auto;
  max-width: 200px;
  object-fit: contain;
}

/* ============================================================
   記事抜粋テキスト（お知らせカードのみ）
   ============================================================ */
.event-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--fontsize-text-small); /* 14px */
  font-weight: 400;
  color: var(--color-font-black-01);
  line-height: 1.8;
  margin: 0;
  /* 3行でクランプ */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   レスポンシブ: ミドル（max: 1200px）
   ============================================================ */
@media (max-width: 1200px) {
  .ended-event-page .event-page-ttl__ja {
    font-size: 36px;
  }
}

/* ============================================================
   レスポンシブ: モバイル（max: 767px）
   ============================================================ */
@media (max-width: 767px) {
  .ended-event-page {
    padding-top: 92px; /* モバイルヘッダー高さ */
  }

  .ended-event-inner {
    padding: var(--space-03) 0 var(--margin-block-03);
    /* pt: 30px, pb: 80px */
  }

  .ended-event-container {
    padding: 0 var(--container-medium);
    /* --container-medium はモバイル時 20px に自動上書き済み */
  }

  .ended-event-page .event-page-ttl__en {
    font-size: var(--fontsize-text-normal); /* 16px */
  }

  .ended-event-page .event-page-ttl__ja {
    font-size: var(--fontsize-text-xxxlarge); /* 28px */
    letter-spacing: 1.4px;
  }
}