/* Put your site-specific CSS here. Example tweaks: */

/* カテゴリーラベルのサイズ */
.p-postList__item .p-postList__cat {
  font-size: 12px;
  padding: 3px 8px;
}

/* 地域/ジャンルボタンの見た目（例） */
.finder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0; margin: 0 0 24px;
}
.finder-btn {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid var(--color_border, #eee);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  text-decoration: none;
  font-weight: 600;
  background: #fff;
}
.finder-btn:hover { transform: translateY(-1px); }
@media (min-width: 768px){
  .finder-grid{ grid-template-columns: repeat(6, 1fr); }
}
/* ===== 「地域から探す」「ジャンルから探す」を強制ボタン化・グリッド化 ===== */
/* リスト（UL/LI）で作っている場合 */
.finder-panel ul{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* スマホ3列 */
  gap:6px;
  list-style:none;      /* 黒い点を消す */
  padding-left:0;       /* 左の余白を消す */
  margin:8px 0 0;
}
.finder-panel ul li{ margin:0; }
.finder-panel ul li a{
  display:block;
  text-align:center;
  font-size:13px;       /* ←赤枠の文字サイズに合わせる */
  padding:6px 8px;      /* ←赤枠の高さに合わせる */
  border:1px solid var(--color_border,#e5e7eb);
  border-radius:8px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.finder-panel ul li a:hover{
  background:var(--color_main_thin,#f6fafb);
  transform:translateY(-1px);
}

/* SWELLの「ボタン」ブロック（Buttons）で作っている場合にも効かせる */
.finder-panel .wp-block-buttons{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)); /* スマホ3列 */
  gap:6px; margin:8px 0 0;
}
.finder-panel .wp-block-button__link{
  display:block; width:100%;
  text-align:center;
  font-size:13px;
  padding:6px 8px;
  border:1px solid var(--color_border,#e5e7eb);
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

/* PC時は少し広めに（4列＆サイズ微増） */
@media (min-width: 768px){
  .finder-panel ul,
  .finder-panel .wp-block-buttons{
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:8px;
  }
  .finder-panel ul li a,
  .finder-panel .wp-block-button__link{
    font-size:14px;
    padding:7px 10px;
  }
}
/* ── スマホで超コンパクト（地域/ジャンルどちらにも効く） ── */
@media (max-width: 768px){

  /* 見出しも小さく */
  .finder-panel .finder-title{
    font-size: 16px !important;
    margin: 4px 0 6px !important;
  }

  /* UL/Buttons どちらでもグリッド化 */
  .finder-panel ul,
  .finder-panel .wp-block-buttons{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important; /* ←小さくしたいので4列 */
    gap: 4px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin: 6px 0 0 !important;
  }

  .finder-panel ul li,
  .finder-panel .wp-block-button{
    margin: 0 !important;
  }

  /* ボタン本体（超コンパクト） */
  .finder-panel ul li a,
  .finder-panel .wp-block-button__link{
    font-size: 12px !important;   /* ←さらに小さくしたいなら11pxに */
    line-height: 1.1 !important;
    padding: 4px 6px !important;  /* ←高さ/横幅を絞る肝 */
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: center !important;
    min-height: 0 !important;
  }
}

/* PCは少しだけ余裕 */
@media (min-width: 769px){
  .finder-panel ul,
  .finder-panel .wp-block-buttons{
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .finder-panel ul li a,
  .finder-panel .wp-block-button__link{
    font-size: 13px !important;
    padding: 6px 8px !important;
  }
}