/* link-info-archive.css
   モバイルファースト＋比率（calc(.. / var(--base-width-*) * 100vw)）方式
   - 画面幅に対して約 65% の中央コンテナ
   - サムネ上／テキスト下のカード
   - SP: 1カラム / 横長(=PC相当): 3カラム
*/

/* ==============================
   基本スケール変数
================================*/
:root {
  --base-width-sp: 375;   /* SP基準幅 */
  --base-width-pc: 1440;  /* PC基準幅（横長時） */
}

/* ==============================
   コンテナ（SP基準／モバイルファースト）
================================*/
.li-archive {
  /* 65%幅を比率で（= 約 244px @375）*/
  width: calc(244 / var(--base-width-sp) * 100vw);
  margin: 0 auto;
  padding: calc(32 / var(--base-width-sp) * 100vw) 0;
  margin-top: calc(30 / var(--base-width-sp) * 100vw);
}

.li-archive__inner { position: relative; }

.li-archive__header {
  margin-bottom: calc(24 / var(--base-width-sp) * 100vw);
}

.li-archive__title {
  /* 20px 相当 */
  font-size: calc(20 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* ==============================
   グリッド（SP=1カラム）
================================*/
.li-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr; /* SPは1列 */
  gap: calc(24 / var(--base-width-sp) * 100vw);
}

/* ==============================
   カード
================================*/
.li-card {
  border-radius: calc(10 / var(--base-width-sp) * 100vw);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.li-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.li-card:hover {
  transform: translateY(calc(-2 / var(--base-width-sp) * 100vw));
  box-shadow: 0 calc(6 / var(--base-width-sp) * 100vw) calc(20 / var(--base-width-sp) * 100vw) rgba(0,0,0,.08);
}

.li-card__thumb-wrap {
  position: relative;
  overflow: hidden;
  background: #f3f5f7;
}

.li-card__thumb,
.li-card__thumb--placeholder {
  width: 100%;
  aspect-ratio: 16 / 9; /* サムネ比率固定 */
  display: block;
}

.li-card__thumb { object-fit: cover; }

.li-card__thumb--placeholder {
  background: linear-gradient(180deg, #f3f5f7, #e9eef2);
}

.li-card__body {
  padding: calc(14 / var(--base-width-sp) * 100vw)
           calc(16 / var(--base-width-sp) * 100vw)
           calc(18 / var(--base-width-sp) * 100vw);
}

.li-card__title {
  /* 16px 相当 */
  font-size: calc(16 / var(--base-width-sp) * 100vw);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 calc(8 / var(--base-width-sp) * 100vw);
}

.li-card__excerpt {
  margin: 0;
  color: #555;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 3行で省略 */
  overflow: hidden;
}

/* ==============================
   ページャ
================================*/
.li-archive__pager { margin-top: calc(28 / var(--base-width-sp) * 100vw); }

.li-pager {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: calc(10 / var(--base-width-sp) * 100vw);
  justify-content: center;
  align-items: center;
}

.li-pager__item a,
.li-pager__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(40 / var(--base-width-sp) * 100vw);
  height: calc(40 / var(--base-width-sp) * 100vw);
  padding: 0 calc(12 / var(--base-width-sp) * 100vw);
  border-radius: calc(8 / var(--base-width-sp) * 100vw);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #e4e7eb;
  background: #fff;
  color: #333;
}

.li-pager__item a:hover { background: #f6f8fa; }

.li-pager__item--current span {
  background: #1a73e8;
  color: #fff;
  border-color: #1a73e8;
}

.li-pager__item--disabled {
  opacity: .45;
  pointer-events: none;
}

/* ==============================
   アクセシビリティ
================================*/
.li-card__link:focus-visible,
.li-pager__item a:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
  border-radius: calc(10 / var(--base-width-sp) * 100vw);
}

/* ==============================
   横長（PC相当）に切り替え
   ※ 参考CSSと同じ「min-aspect-ratio: 1/1」を採用
================================*/
@media screen and (min-aspect-ratio: 1/1) {
  .li-archive {
    /* 1440の65% = 936px 相当 */
    width: calc(936 / var(--base-width-pc) * 100vw);
    padding: calc(32 / var(--base-width-pc) * 100vw) 0;
    margin-top: calc(30 / var(--base-width-pc) * 100vw);
  }

  .li-archive__header { margin-bottom: calc(24 / var(--base-width-pc) * 100vw); }

  .li-archive__title {
    /* 32px 相当 */
    font-size: calc(32 / var(--base-width-pc) * 100vw);
  }

  .li-grid {
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: calc(24 / var(--base-width-pc) * 100vw);
  }

  .li-card {
    border-radius: calc(10 / var(--base-width-pc) * 100vw);
  }

  .li-card:hover {
    transform: translateY(calc(-2 / var(--base-width-pc) * 100vw));
    box-shadow: 0 calc(6 / var(--base-width-pc) * 100vw) calc(20 / var(--base-width-pc) * 100vw) rgba(0,0,0,.08);
  }

  .li-card__body {
    padding: calc(14 / var(--base-width-pc) * 100vw)
             calc(16 / var(--base-width-pc) * 100vw)
             calc(18 / var(--base-width-pc) * 100vw);
  }

  .li-card__title {
    /* 18px 相当 */
    font-size: calc(18 / var(--base-width-pc) * 100vw);
    margin: 0 0 calc(8 / var(--base-width-pc) * 100vw);
  }

  .li-archive__pager { margin-top: calc(28 / var(--base-width-pc) * 100vw); }

  .li-pager {
    gap: calc(10 / var(--base-width-pc) * 100vw);
  }

  .li-pager__item a,
  .li-pager__item span {
    min-width: calc(40 / var(--base-width-pc) * 100vw);
    height: calc(40 / var(--base-width-pc) * 100vw);
    padding: 0 calc(12 / var(--base-width-pc) * 100vw);
    border-radius: calc(8 / var(--base-width-pc) * 100vw);
  }

  .li-card__link:focus-visible,
  .li-pager__item a:focus-visible {
    border-radius: calc(10 / var(--base-width-pc) * 100vw);
  }
}

/* ==============================
   ダークモード（任意）
================================*/
@media (prefers-color-scheme: dark) {
  .li-card { background: #111315; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
  .li-card__body { color: #e5e7eb; }
  .li-card__excerpt { color: #aab2bd; }
  .li-pager__item a,
  .li-pager__item span {
    background: #0d0f12;
    border-color: #272b33;
    color: #dfe4ea;
  }
  .li-pager__item a:hover { background: #171a1f; }
  .li-pager__item--current span {
    background: #2b67d9;
    border-color: #2b67d9;
  }
}

/* ==============================
   アニメーション控えめ
================================*/
@media (prefers-reduced-motion: reduce) {
  .li-card { transition: none; }
}