/**
 * 電子カタログ ネイティブカラム補助CSS（catalog 固定ページ slug=catalog 本文用）
 * --------------------------------------------------------------
 * なぜこのCSSか:
 *   本文を core の「カラムブロック」(wp:columns / wp:column / wp:image / wp:heading)
 *   ネイティブ構成へ移行した（CEO 要望: 編集画面でカタログをカラムとして直接編集・
 *   並べ替え・追加削除できること）。旧 .dc-catalog-* 自前グリッドは廃止。
 *   ここでは「素のネイティブブロック」を尊重しつつ、最小限の体裁だけを整える:
 *     1) カバー画像は原寸が 110px 前後と小さく比率もまちまち（152〜185px高）なので、
 *        カラム幅いっぱい + A4縦長比(110:156)に統一する。
 *     2) PDFリンク付きカバーにホバーの手応え（軽い浮き上がり）を与える。
 *     3) カタログ名(h4)の体裁（サイズ・余白）を一覧向けに整える。
 *
 * スコープ:
 *   すべて .catalog-content（page-catalog.php の本文ラッパー）配下に限定。
 *   テーマ全体の .wp-block-image / 見出しには影響させない。
 *   フロント(wp_enqueue) とエディタ(add_editor_style) の両方で同一ファイルを読み、
 *   編集画面とフロントの見た目を一致させる。
 */

/* カラム行どうしの縦間隔（行=wp:columns を3つ並べるため） */
.catalog-content .wp-block-columns {
  margin-bottom: 1.5rem;
}
.catalog-content .wp-block-columns:last-child {
  margin-bottom: 0;
}

/* カバー画像: カラム幅いっぱい + A4縦長比に統一（小さい原寸のばらつきを吸収） */
.catalog-content .wp-block-image {
  margin: 0;
}
.catalog-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 110 / 156;
  object-fit: cover;
  background-color: #f1f5f9;       /* slate-100: 読み込み中/余白の下地 */
  border-radius: 0.5rem;           /* rounded-lg */
  border: 1px solid #f1f5f9;
}

/* PDFリンク付きカバーのホバー手応え（リンクなしカバーには付かない） */
.catalog-content .wp-block-image a {
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
}
.catalog-content .wp-block-image a img {
  transition: transform 0.3s ease;
}
.catalog-content .wp-block-image a:hover img {
  transform: scale(1.04);
}

/* カタログ名（h4・中央寄せ）の体裁 */
.catalog-content .wp-block-columns h4.wp-block-heading {
  margin: 0.625rem 0 0;            /* 画像との間に余白 */
  font-size: 0.9375rem;            /* 15px 相当 */
  line-height: 1.4;
  font-weight: 700;
  color: #1e293b;                  /* slate-800 */
}

/* --------------------------------------------------------------
 * スマホ〜小型タブレット（<=781px）: 4列を 2列に折り返す
 * --------------------------------------------------------------
 * なぜ <=781px か:
 *   core のカラム縦積み(モバイル)判定の境界は max-width:781px（782px 以上で
 *   4列横並び nowrap になる）。この境界に合わせると「781px 以下=2列」
 *   「782px 以上=4列」ときれいに二分でき、601〜781px が1列になる中途半端な
 *   帯を作らずに済む。
 * なぜ !important が必要か:
 *   この catalog のカラム行は「モバイルで縦積みする」既定のまま保存されている
 *   （.is-not-stacked-on-mobile クラスは付いていない）。そのため core/block-library が
 *     @media (max-width:781px){
 *       .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
 *          { flex-basis: 100% !important; }
 *     }
 *   を当て、スマホでは 4枚が縦に1列で積まれる。
 *   これを「各カラム 50%幅」に上書きして 1行2列にする。
 *   core が flex-basis に !important を付けているため、上書きにも !important が要る。
 *   flex-wrap は既に wrap（core 既定）なので変更不要だが、行内の隙間 gap は
 *   1rem に固定し、flex-basis を calc(50% - 0.5rem) に合わせてちょうど2枚/行にする。
 *   すべて .catalog-content 配下限定で、他ページの core カラムには影響しない。
 */
@media (max-width: 781px) {
  /* 行内の隙間=1rem（折り返し後の左右/上下の間隔を一定にする） */
  .catalog-content .wp-block-columns {
    gap: 1rem;
    margin-bottom: 1rem;           /* 2列時はカード行間を少し詰める */
  }
  /* core の flex-basis:100%(縦積み) を上書きし、各カラムを50%幅にして1行2列にする */
  .catalog-content .wp-block-columns > .wp-block-column {
    flex-basis: calc(50% - 0.5rem) !important;
    flex-grow: 0 !important;
    max-width: calc(50% - 0.5rem);
  }
}