/* /assets/css/cards.css
   =========================================================
   BENMI index (PAST EVENTS)
   - 参照サイト寄せ: 横長サムネを全面展開し、その上に文字を重ねる
   - 基準は .wrap（--wrap-pc = 60vw）。
     その中で左右 ~5% の余白 → report-grid を 90% 幅で中央寄せ。
   ========================================================= */

:root{
  --past-gap: clamp(14px, 2.2vw, 28px);
  --past-line: rgba(255,255,255,.18);
  --past-line-hover: rgba(240,138,42,.92);
}

.report-grid{
  width: 90%;
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--past-gap);
}

@media (max-width: 767px){
  .report-grid{ width: 100%; }
}

@media (max-width: 900px){
  .report-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Tile
   --------------------------------------------------------- */

.report-card{
  position: relative;
  display: block;
  overflow: hidden;

  border: 0 solid var(--past-line);
  border-radius: 0;
  background: #000;

  /* thumb overlay sizes (smaller than upcoming) */
  --thumb-date-fs: clamp(12px, 1.15vw, 14px);
  --thumb-title-fs: clamp(14px, 2.4vw, 18px);
  --thumb-title-fs-sp: clamp(12px, 6.0vw, 14px);


  aspect-ratio: 16 / 9;

  transform: translateY(0);
  transition: border-color 140ms ease, transform 140ms ease;
}

.report-card:hover{
  border-color: var(--past-line-hover);
  transform: translateY(-1px);
}

/* 画像は枠いっぱいに */
.report-media{
  position: absolute;
  inset: 0;
  background-image: var(--report-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* 画像が無い場合の簡易フォールバック */
.report-card[data-thumb="none"] .report-media{
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 18px 18px, 28px 28px;
  background-position: 0 0, 9px 9px;
}

.report-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  user-select: none;
  pointer-events: none;

  font-size: clamp(16px, 2.6vw, 34px);
  color: rgba(255,255,255,.16);
}

/* ---------------------------------------------------------
   Overlay text
   - フル面のヴェールは使わない
   - 読めるように text-shadow だけ強め
   --------------------------------------------------------- */

.report-overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(14px, 2.2vw, 22px);

  display: grid;
  gap: 10px;
}

.report-ribbon{
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: .38em .85em;

  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: clamp(12px, 1.25vw, 14px);
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 999px;
  line-height: 1;
}

.report-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.05;
  font-size: clamp(28px, 3.2vw, 44px);

  color: #fff;
  text-shadow:
    0 4px 18px rgba(0,0,0,.85),
    0 0 1px rgba(0,0,0,.95);
}

.report-meta{
  margin: 0;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: clamp(14px, 1.45vw, 18px);

  color: rgba(255,255,255,.92);
  text-shadow:
    0 4px 18px rgba(0,0,0,.85),
    0 0 1px rgba(0,0,0,.95);
}

/* PAST: バッジだけ右端に寄せる（タイトル/日付サイズは触らない） */
.report-card .thumb-badge{
  right: 4px; /* ここを 4px / 2px でさらに詰められる */
}

@media (max-width: 767px){
  /* SP: past events のカード群に余白（左右12px + 上下少し） */
  body[data-page="benmi-home"] .report-grid{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
}