/*
 * HAZUSEKAI 機種TOP表示（拡張）
 * - 1カード=1リンク（aタグ入れ子禁止）
 * - CSS変数(--hazu-*)はPHP/Elementorから注入
 */

.hazu-top-machines{
  width:100%;

  /* ----- Defaults (safe even when Elementor/shortcode vars are not injected) ----- */
  --hazu-cols-pc:8;
  --hazu-cols-tab:4;
  --hazu-cols-sp:2;

  --hazu-gap-pc:12px;
  --hazu-gap-tab:12px;
  --hazu-gap-sp:10px;

  --hazu-card-mg-pc:0px;
  --hazu-card-mg-tab:0px;
  --hazu-card-mg-sp:0px;

  --hazu-card-pad-pc:0px;
  --hazu-card-pad-tab:0px;
  --hazu-card-pad-sp:0px;

  --hazu-img-mb-pc:8px;
  --hazu-img-mb-tab:6px;
  --hazu-img-mb-sp:4px;

  --hazu-title-size-pc:14px;
  --hazu-title-size-tab:13px;
  --hazu-title-size-sp:12px;

  --hazu-lines-pc:2;
  --hazu-lines-tab:2;
  --hazu-lines-sp:2;

  --hazu-title-align:center;
  --hazu-title-lh:1.25;
  --hazu-title-weight:600;
  --hazu-title-color:#111;

  --hazu-img-aspect:3/4; /* default to uniform height; set to auto to disable */
  --hazu-img-fit:contain;

  /* Image sizing defaults (override with --hazu-*-img-scale / --hazu-*-img-maxw) */
  --hazu-pc-img-scale:100%;
  --hazu-tab-img-scale:90%;
  --hazu-sp-img-scale:72%;
  --hazu-pc-img-maxw:9999px;
  --hazu-tab-img-maxw:9999px;
  --hazu-sp-img-maxw:140px;

  --hazu-link-decoration:none;

  /* ----- Active (responsive) variables ----- */
  --hazu-cols:var(--hazu-cols-pc);
  --hazu-gap:var(--hazu-gap-pc);
  --hazu-card-mg:var(--hazu-card-mg-pc);
  --hazu-card-pad:var(--hazu-card-pad-pc);

  /* 画像と機種名の間隔（互換：--hazu-img-mb を残す） */
  --hazu-img-mb:var(--hazu-img-mb-pc);
  --hazu-img-title-gap:var(--hazu-img-mb);

  --hazu-title-size:var(--hazu-title-size-pc);
  --hazu-title-lines:var(--hazu-lines-pc);

  --hazu-img-scale:var(--hazu-pc-img-scale);
  --hazu-img-maxw:var(--hazu-pc-img-maxw);

  /* レイアウト崩れ対策 */
  box-sizing:border-box;
}


.hazu-top-machines *,
.hazu-top-machines *:before,
.hazu-top-machines *:after{ box-sizing:inherit; }

@media (max-width:1024px){
  .hazu-top-machines{
    --hazu-cols:var(--hazu-cols-tab);
    --hazu-gap:var(--hazu-gap-tab);
    --hazu-card-mg:var(--hazu-card-mg-tab);
    --hazu-card-pad:var(--hazu-card-pad-tab);

    --hazu-img-mb:var(--hazu-img-mb-tab);
    --hazu-title-size:var(--hazu-title-size-tab);
    --hazu-title-lines:var(--hazu-lines-tab);
    --hazu-img-scale:var(--hazu-tab-img-scale);
    --hazu-img-maxw:var(--hazu-tab-img-maxw);
  }
}

@media (max-width:767px){
  .hazu-top-machines{
    --hazu-cols:var(--hazu-cols-sp);
    --hazu-gap:var(--hazu-gap-sp);
    --hazu-card-mg:var(--hazu-card-mg-sp);
    --hazu-card-pad:var(--hazu-card-pad-sp);

    --hazu-img-mb:var(--hazu-img-mb-sp);
    --hazu-title-size:var(--hazu-title-size-sp);
    --hazu-title-lines:var(--hazu-lines-sp);
    --hazu-img-scale:var(--hazu-sp-img-scale);
    --hazu-img-maxw:var(--hazu-sp-img-maxw);
  }
}

/* Grid */
.hazu-top-grid{
  display:grid;
  grid-template-columns:repeat(var(--hazu-cols),minmax(0,1fr));
  gap:var(--hazu-gap);
  align-items:start;
  margin:0;
  padding:0;
}

/* Card */
.hazu-top-card{
  margin:var(--hazu-card-mg);
  padding:0;
}

/* 1カード=1リンク（aの入れ子を禁止：ブラウザがDOMを書き換えて崩れるのを防止） */
.hazu-card-link{
  display:flex;
  flex-direction:column;
  text-decoration:var(--hazu-link-decoration);
  color:inherit;
  padding:var(--hazu-card-pad);
  margin:0;
}

/* 画像枠（高さを揃える） */
.hazu-media{
  width:var(--hazu-img-scale);
  max-width:var(--hazu-img-maxw);
  margin:0 auto;
  margin-bottom:var(--hazu-img-title-gap);
  aspect-ratio:var(--hazu-img-aspect);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.hazu-top-machines .hazu-cabinet-img{
  width:100%;
  height:100%;
  object-fit:var(--hazu-img-fit);
  display:block;
  max-width:100%;
}

/* タイトル */
.hazu-top-machines .hazu-title{
  display:block;
  text-align:var(--hazu-title-align,center);
  font-size:var(--hazu-title-size,14px);
  line-height:var(--hazu-title-lh,1.25);
  font-weight:var(--hazu-title-weight,600);
  color:var(--hazu-title-color,#111);
  margin:0;
  padding:0;
}

/* 行数で省略（line-clamp） */
.hazu-top-machines .hazu-title.is-truncate{
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--hazu-title-lines);
  text-overflow:ellipsis;
}

/* 文字数で省略（サーバー側でカット済みだが、保険として） */
.hazu-top-machines .hazu-title.is-truncate-char{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* charsモード：PC/タブ/スマホで別文字数を出し分け（PHPで生成したspanをCSSで切替） */
.hazu-top-machines .hazu-title.is-truncate-char .hazu-title--pc,
.hazu-top-machines .hazu-title.is-truncate-char .hazu-title--tab,
.hazu-top-machines .hazu-title.is-truncate-char .hazu-title--sp{
  display:none;
}
.hazu-top-machines .hazu-title.is-truncate-char .hazu-title--pc{ display:block; }
@media (max-width:1024px){
  .hazu-top-machines .hazu-title.is-truncate-char .hazu-title--pc{ display:none; }
  .hazu-top-machines .hazu-title.is-truncate-char .hazu-title--tab{ display:block; }
}
@media (max-width:767px){
  .hazu-top-machines .hazu-title.is-truncate-char .hazu-title--tab{ display:none; }
  .hazu-top-machines .hazu-title.is-truncate-char .hazu-title--sp{ display:block; }
}

/* Empty */
.hazu-top-empty{ padding:8px 0; }