/**
 * Utility Classes (u-*)
 */

/* ==========================================
 * 行数制限用クラス
 * ========================================== */
/* 1行テキスト制限（三点リーダー） */
.u-ellipsis {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 複数行テキスト制限（参考：2行制限 / 3行制限） */
.u-line-clamp-2 {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.u-line-clamp-3 {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ==========================================
 * リスト用クラス
 * ========================================== */
/* リストの先頭ドット（中黒）と余白を消去 */
.u-list-unstyled {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* ==========================================
 * テキストリンク用クラス
 * ========================================== */
/* 通常時: text-primary / ホバー時: primary */
.u-link-primary-hover,
.u-link-primary-hover a {
  color: var(--wp--preset--color--text-primary) !important;
  text-decoration: none !important;
  transition: color var(--transition-base) !important;
}
.u-link-primary-hover:hover,
.u-link-primary-hover a:hover {
  color: var(--wp--preset--color--primary) !important;
}

/* ==========================================
   レスポンシブ改行制御
   ========================================== */

/* 【スマホサイズ】横幅767px以下で <br> を無効化 */
@media screen and (max-width: 767px) {
  .u-br-pc br {
    display: none !important;
  }
}

/* ==========================================
   テキスト揃え
   ========================================== */
.u-text-left {
  text-align: left !important;
}
.u-text-center {
  text-align: center !important;
}
.u-text-right {
  text-align: right !important;
}

/* ==========================================
   Flexbox ユーティリティ
   ========================================== */

/* 【共通】カラムを縦方向に反転 */
.u-flex-col-reverse {
  flex-direction: column-reverse !important;
}

/* 【スマホサイズ】横幅767px以下でカラムを反転 */
@media screen and (max-width: 767px) {
  .u-flex-col-reverse-sp {
    flex-direction: column-reverse !important;
  }
}

/* 【タブレットサイズ】横幅768px〜1023pxでカラムを反転 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .u-flex-col-reverse-tab {
    flex-direction: column-reverse !important;
  }
}

/* 【PCサイズ】横幅1024px以上でカラムを反転 */
@media screen and (min-width: 1024px) {
  .u-flex-col-reverse-pc {
    flex-direction: column-reverse !important;
  }
}

/* 【エディター】共通プレビューでカラムを縦方向に反転 */
.editor-styles-wrapper .u-flex-col-reverse {
  flex-direction: column-reverse !important;
}

/* 【エディター】モバイルプレビューでカラムを反転 */
.editor-styles-wrapper.is-small-viewport .u-flex-col-reverse-sp {
  flex-direction: column-reverse !important;
}

/* 【エディター】タブレットプレビューでカラムを反転 */
.editor-styles-wrapper.is-medium-viewport .u-flex-col-reverse-tab {
  flex-direction: column-reverse !important;
}

/* 【エディター】PCプレビューでカラムを反転 */
.editor-styles-wrapper.is-large-viewport .u-flex-col-reverse-pc {
  flex-direction: column-reverse !important;
}

/* 【共通】カラムを左右反転 */
.u-flex-row-reverse {
  flex-direction: row-reverse !important;
}

/* 【スマホサイズ】横幅767px以下でカラムを左右反転 */
@media screen and (max-width: 767px) {
  .u-flex-row-reverse-sp {
    flex-direction: row-reverse !important;
  }
}

/* 【タブレットサイズ】横幅768px〜1023pxでカラムを左右反転 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .u-flex-row-reverse-tab {
    flex-direction: row-reverse !important;
  }
}

/* 【PCサイズ】横幅1024px以上でカラムを左右反転 */
@media screen and (min-width: 1024px) {
  .u-flex-row-reverse-pc {
    flex-direction: row-reverse !important;
  }
}

/* 【エディター】共通プレビューでカラムを左右反転 */
.editor-styles-wrapper .u-flex-row-reverse {
  flex-direction: row-reverse !important;
}

/* 【エディター】モバイルプレビューでカラムを左右反転 */
.editor-styles-wrapper.is-small-viewport .u-flex-row-reverse-sp {
  flex-direction: row-reverse !important;
}

/* 【エディター】タブレットプレビューでカラムを左右反転 */
.editor-styles-wrapper.is-medium-viewport .u-flex-row-reverse-tab {
  flex-direction: row-reverse !important;
}

/* 【エディター】PCプレビューでカラムを左右反転 */
.editor-styles-wrapper.is-large-viewport .u-flex-row-reverse-pc {
  flex-direction: row-reverse !important;
}

/* ==========================================
   z-index
   ========================================== */
.u-z-10 {
  z-index: 10 !important;
}
.u-z-20 {
  z-index: 20 !important;
}
.u-z-30 {
  z-index: 30 !important;
}

/* ==========================================
   幅・サイズ制御用クラス
   ========================================== */
/* 親要素の幅いっぱい（100%）に拡大 */
.u-w-full {
  width: 100% !important;
}

:is(.wp-block-image, .wp-block-post-featured-image).u-w-full {
  width: 100%;
}

:is(.wp-block-image, .wp-block-post-featured-image).u-w-full a {
  display: block;
  width: 100%;
}

:is(.wp-block-image, .wp-block-post-featured-image).u-w-full img,
.u-w-full :is(img, svg) {
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  max-width: 100%;
}

/* ==========================================
   Overflow hidden （要素の角丸処理用）
   ========================================== */
.u-overflow-hidden {
  overflow: hidden !important;
}

/* ==========================================
   ホバーアニメーション（画像ズーム）
   ========================================== */
/* 1. 画像コンテナ（表示エリア）のクリッピング設定
   親要素（グループ等）または画像ブロック自体に .u-hover-zoom を付与。
   画像表示エリアの枠内で画像が拡大するようクリッピング */
.u-hover-zoom,
.u-hover-zoom :is(.wp-block-image, .wp-block-post-featured-image),
:is(.wp-block-image, .wp-block-post-featured-image).u-hover-zoom {
  overflow: hidden !important;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* リンク付き画像の場合のラッパー処理 */
.u-hover-zoom :is(.wp-block-image, .wp-block-post-featured-image) a,
:is(.wp-block-image, .wp-block-post-featured-image).u-hover-zoom a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

/* 2. 内包する画像本体（img）の初期スタイル・トランジション */
.u-hover-zoom :is(.wp-block-image, .wp-block-post-featured-image) img,
:is(.wp-block-image, .wp-block-post-featured-image).u-hover-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform-origin: center center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* 3. ホバー時およびキーボードフォーカス時に拡大 */
.u-hover-zoom:is(:hover, :focus-within) :is(.wp-block-image, .wp-block-post-featured-image) img,
:is(.wp-block-image, .wp-block-post-featured-image).u-hover-zoom:is(:hover, :focus-within) img {
  transform: scale(1.08);
}

/* モーション低減環境への配慮 */
@media (prefers-reduced-motion: reduce) {
  .u-hover-zoom :is(.wp-block-image, .wp-block-post-featured-image) img,
  :is(.wp-block-image, .wp-block-post-featured-image).u-hover-zoom img {
    transition: none !important;
    transform: none !important;
  }
}