/* ========== 共通変数 ========== */
:root{
  --grid-gap:0.5rem;         /* すき間は ここだけ変えれば全列に反映 */
}

/* ========== ベース ========== */
.highlight-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--grid-gap);
  margin:0;                  /* WP が吐く <p> の余白を抑止 */
}

.highlight-slide{
  position:relative;
  aspect-ratio:3 / 2;        /* 高さをそろえる */
  background:#000 center/100% auto;
  overflow:hidden;
  text-decoration:none;
  flex:0 1 calc((100% - (3 * var(--grid-gap))) / 4); /* 4 列用の公式 */
  max-width:calc((100% - (3 * var(--grid-gap))) / 4);
    /* 背景サイズだけをトランジション */
    transition: background-size 0.5s ease;
}
.highlight-slide:hover {
    background-size: 105% auto;
  }

@media (min-width:1025px){

  /* ① 黒のオーバーレイで 25 % だけ全体を暗くしておく */
  .highlight-overlay{
    background: rgba(0, 0, 0, 0.5);      /* ← 好みの濃さに調整 */
    opacity: 1;
    transition: opacity .5s ease;
  }
  /* ② ホバー／アクティブでオーバーレイを消す */
  .highlight-slide:hover .highlight-overlay,
  .highlight-slide:active .highlight-overlay{
    opacity: 0;
  }
}



/* ========== 3 列 (≦1440px) ========== */
@media (max-width:1440px){
  .highlight-slide{
    flex-basis:calc((100% - (2 * var(--grid-gap))) / 3);
    max-width:calc((100% - (2 * var(--grid-gap))) / 3);
  }
}

/* ========== 2 列 (≦1024px) ========== */
@media (max-width:1024px){
  .highlight-slide{
    flex-basis:calc((100% - var(--grid-gap)) / 2);
    max-width:calc((100% - var(--grid-gap)) / 2);
  }
}

/* ========== 1 列 (≦640px) ========== */
@media (max-width:640px){
  .highlight-slide{
    flex-basis:100%;
    max-width:100%;
  }
}

/* 6) 内部パーツ（オーバーレイ・タイトル・ボタン）は今までのまま */
/* オーバーレイ -------------------------------------------------------------- */
.highlight-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%);
  transition:opacity .4s;
}

/* NEW バッジ ---------------------------------------------------------------- */
.highlight-badge{
  position:absolute;top:1rem;left:1rem;
  background:rgba(255,0,0,.6);
  color:#fff;font-size:.75rem;
  padding:.25rem .75rem;border-radius:1rem;
}

/* タイトル ------------------------------------------------------------------ */
.highlight-title{
  position:absolute;left:1rem;right:1rem;bottom:1.6rem;
  padding-right:108px;          /* ボタン分の逃げ */
  color:#fff;font-size:.88rem;line-height:1.3;
  z-index:2;
}

/* ボタン -------------------------------------------------------------------- */
.highlight-button{
  position:absolute;right:1rem;bottom:1rem;
  background:#000;color:#fff;
  padding:.4rem 1rem;font-size:.8rem;border-radius:.25rem;
  transition:.4s;z-index:2;
}
.highlight-slide:hover .highlight-button{
  background:#fff;color:#000;
}

/* 全幅にしたい .highlight-grid が「is-layout-constrained」の子にいる場合だけ */
.is-layout-constrained > .highlight-grid{
  max-width:none;  /* WP の幅制限を解除           */
  width:100%;      /* ビューポートいっぱいに広げる */
}