/* ===== WPP (人気記事) ===== */
.popular-section{ margin-bottom:96px; }
.popular-title{
  max-width:1320px; margin:0 auto 1rem; padding:0 16px;
  font-weight:700; font-size:clamp(20px,2.2vw,28px); text-align:center;
}
.popular-actions{ max-width:var(--popular-max-width,1320px); margin:24px auto 0; text-align:center; padding:0 16px; }
.popular-button{
  display:inline-block; box-sizing:border-box; width:240px; max-width:100%;
  font-size:16px; padding:12px 32px; text-decoration:none; text-align:center;
  border-radius:48px; font-weight:700; background:#0070c0; color:#fff;
}
.popular-button:hover,.popular-button:focus{ opacity:.9; }

.wpp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; padding:0; }
.wpp-grid__item img{ width:100%; height:auto; border-radius:8px; display:block; }
.wpp-thumbnail{ margin:0; }
.wpp-grid__title{ display:block; margin-top:.5rem; line-height:1.4; }
.wpp-grid__meta{ font-size:.85rem; opacity:.7; }

/* モバイル：横スワイプ + peek */
@media (max-width:768px){
  .popular-carousel{ --peek:12vw; --gap:16px; position:relative; }
  .popular-carousel .wpp-grid{
    display:flex; gap:var(--gap); list-style:none; margin:0;
    padding:0 calc(var(--peek) - (var(--gap)/2)) 8px 0;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .popular-carousel .wpp-grid::-webkit-scrollbar{ display:none; }
  .popular-carousel .wpp-grid > .wpp-grid__item{ flex:0 0 calc(100% - (var(--peek) * 2)); scroll-snap-align:center; }
  .popular-carousel .wpp-grid::after{ content:""; flex:0 0 var(--peek); }
}