/* ============================================================
   一覧ページ共通（/ebook 資料ダウンロード一覧・/event イベント一覧）
   Figma デザインなし。/knowledge（css/knowledge.css）の見た目に合わせて作成
   ・page-hero の調整は knowledge と同じ値（タイトル darktext／リード Noto 14px）
   ・内側幅は knowledge の .kl-inner と同じ（左 64px / 右 60px）
   ============================================================ */

/* 共通の内側幅（knowledge .kl-inner と同値） */
.ls-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 60px 0 64px;
}

/* ---------- page hero（共通 .page-hero の文字色・リード調整。knowledge と同じ） ---------- */
.page-hero--listing .page-hero__inner { padding: 237px var(--gutter) 80px 64px; }
.page-hero--listing .page-hero__title { color: var(--darktext); }
.page-hero--listing .page-hero__lead {
  padding-top: 5px;
  font-family: var(--ff-noto);
  font-weight: 400;
  font-size: var(--fs-body);
  color: var(--darktext);
}

/* ---------- 一覧セクション ---------- */
.ls-list { padding: 26px 0 120px; }
.ls-section + .ls-section { margin-top: 80px; }
.ls-section__title {
  font-size: 32px;          /* knowledge .kl-faq__title と同じ（Figma MySouce-LP-H3） */
  font-weight: 500;
  line-height: var(--lh);
  color: var(--darktext);
}

.ls-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ls-section__title + .ls-grid { margin-top: 25px; }
/* 中身が空の一覧（/event は現行サイトで掲載0件）は余白を取らない */
.ls-grid:empty { display: none; }

/* ---------- 資料カード（表紙＋タイトル＋ボタン） ---------- */
.ls-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow .2s;
}
.ls-card:hover { box-shadow: var(--shadow); }
.ls-card__thumb {
  aspect-ratio: 1704 / 984;
  background: var(--placeholder);
}
.ls-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ls-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 21px 24px 24px;
}
.ls-card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh);
}
.ls-card__btn { font-size: var(--fs-body); padding: 10px 28px; }
.ls-card:hover .ls-card__btn { opacity: .85; }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .ls-inner { padding: 0 40px; }
  .page-hero--listing .page-hero__inner { padding-left: 40px; }
  .ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-list { padding-bottom: 100px; }
}

/* ---------- SP（TOP #SP のルール：本文12px／ガター16px／カード縦積み） ---------- */
@media (max-width: 767px) {
  .ls-inner { padding: 0 var(--gutter); }
  .page-hero--listing .page-hero__inner { padding: 97px var(--gutter) 40px 20px; }
  .page-hero--listing .page-hero__lead { padding-top: 0; max-width: 246px; }

  .ls-list { padding: 8px 0 60px; }
  .ls-section + .ls-section { margin-top: 40px; }
  .ls-section__title { font-size: var(--fs-h2); font-weight: 700; }
  .ls-section__title + .ls-grid { margin-top: 16px; }
  .ls-grid { grid-template-columns: 1fr; gap: 12px; }

  .ls-card { border-radius: 16px; }
  .ls-card__body { gap: 16px; padding: 12px 12px 16px; }
  .ls-card__title { font-size: 16px; }
  .ls-card__btn { font-size: 14px; padding: 8px 24px; }
}