/**
 * トップページ等：Gutenberg カスタムブロックスタイル
 * register_block_style() は functions.php の tbt_register_front_block_styles()
 */

/* ── メディアとテキスト：和紙テクスチャ（重厚） ─────────────────────────
 * .is-style-takahashi-washi（class-tcf-design.php）と同一の雲竜紙風テクスチャ
 */
.wp-block-media-text.is-style-washi-heavy {
  background-color: var(--tbt-media-content-bg, #fcfaf5);
  background-image:
    repeating-linear-gradient(
      105deg,
      rgba(42, 22, 16, 0.014) 0px,
      transparent 1px,
      transparent 7px,
      rgba(212, 175, 55, 0.01) 8px,
      transparent 9px,
      transparent 16px
    ),
    repeating-linear-gradient(
      -88deg,
      rgba(255, 255, 255, 0.14) 0px,
      transparent 2px,
      transparent 10px,
      rgba(44, 38, 32, 0.008) 11px,
      transparent 12px,
      transparent 20px
    ),
    linear-gradient(98deg, rgba(212, 175, 55, 0.028) 0%, transparent 30%, transparent 70%, rgba(212, 175, 55, 0.018) 100%),
    linear-gradient(82deg, transparent 0%, rgba(255, 252, 248, 0.5) 50%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.008) 0px, transparent 1px, transparent 3px),
    url("https://www.transparenttextures.com/patterns/natural-paper.png");
  background-blend-mode: normal, normal, normal, normal, normal, multiply;
  background-size: auto, auto, 100% 100%, 100% 100%, 3px 3px, auto;
  border: none;
  border-radius: 12px;
  box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.35);
  filter: contrast(1.02) brightness(1.02);
  -webkit-filter: contrast(1.02) brightness(1.02);
  overflow: hidden;
  box-sizing: border-box;
}

.wp-block-media-text.is-style-washi-heavy .wp-block-media-text__content {
  padding: clamp(1.25rem, 3vw, 1.875rem);
}

.wp-block-media-text.is-style-washi-heavy .wp-block-media-text__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── メディアとテキスト：左画像・右画像 和紙フェード（トップ用） ───────────
 * clip-path: ベジェ path（.media）/ テキスト側フェード: ::after グラデーション
 */

.wp-block-media-text.is-style-media-left-washi,
.wp-block-media-text.is-style-media-right-washi {
  /* __content の background-color（#fcfaf5）とフェード先を同期 */
  --tbt-media-content-bg: #fcfaf5;
  --tbt-media-washi-bg: var(--tbt-media-content-bg);
  --tbt-washi-white-rgb: 252, 250, 245;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  align-items: stretch;
}

/* テキスト：不透明な和紙テクスチャ */
.wp-block-media-text.is-style-media-left-washi .wp-block-media-text__content,
.wp-block-media-text.is-style-media-right-washi .wp-block-media-text__content {
  background-color: var(--tbt-media-content-bg, #fcfaf5);
  background-image:
    repeating-linear-gradient(
      105deg,
      rgba(42, 22, 16, 0.014) 0px,
      transparent 1px,
      transparent 7px,
      rgba(212, 175, 55, 0.01) 8px,
      transparent 9px,
      transparent 16px
    ),
    repeating-linear-gradient(
      -88deg,
      rgba(255, 255, 255, 0.14) 0px,
      transparent 2px,
      transparent 10px,
      rgba(44, 38, 32, 0.008) 11px,
      transparent 12px,
      transparent 20px
    ),
    linear-gradient(98deg, rgba(212, 175, 55, 0.028) 0%, transparent 30%, transparent 70%, rgba(212, 175, 55, 0.018) 100%),
    linear-gradient(82deg, transparent 0%, rgba(255, 252, 248, 0.5) 50%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.008) 0px, transparent 1px, transparent 3px),
    url("https://www.transparenttextures.com/patterns/natural-paper.png");
  background-blend-mode: normal, normal, normal, normal, normal, multiply;
  background-size: auto, auto, 100% 100%, 100% 100%, 3px 3px, auto;
  box-shadow: inset 0 0 80px rgba(255, 255, 255, 0.35);
  filter: contrast(1.02) brightness(1.02);
  -webkit-filter: contrast(1.02) brightness(1.02);
  padding: clamp(1.25rem, 3vw, 1.875rem);
  box-sizing: border-box;
  opacity: 1;
  isolation: isolate;
}

.wp-block-media-text.is-style-media-left-washi .wp-block-media-text__media,
.wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media {
  position: relative;
  z-index: 0;
  overflow: visible !important;
  isolation: isolate;
  background-color: var(--tbt-media-content-bg, #fcfaf5);
  background-image:
    repeating-linear-gradient(
      105deg,
      rgba(42, 22, 16, 0.014) 0px,
      transparent 1px,
      transparent 7px,
      rgba(212, 175, 55, 0.01) 8px,
      transparent 9px,
      transparent 16px
    ),
    url("https://www.transparenttextures.com/patterns/natural-paper.png");
  background-blend-mode: normal, multiply;
  background-size: auto, auto;
}

/* テキスト側へ和紙色グラデーション（mask-image は不使用） */
.wp-block-media-text.is-style-media-left-washi .wp-block-media-text__media::after,
.is-style-media-left-washi .wp-block-media-text__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  z-index: 2;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(var(--tbt-washi-white-rgb), 0.5) 50%,
    rgba(var(--tbt-washi-white-rgb), 0.85) 100%
  );
  pointer-events: none;
}

.wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media::after,
.is-style-media-right-washi .wp-block-media-text__media::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  z-index: 2;
  background: linear-gradient(
    to left,
    transparent 0%,
    rgba(var(--tbt-washi-white-rgb), 0.5) 50%,
    rgba(var(--tbt-washi-white-rgb), 0.85) 100%
  );
  pointer-events: none;
}

.wp-block-media-text.is-style-media-left-washi .wp-block-media-text__media img,
.wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右画像：テキストボックスの高さが縮む問題 */
.wp-block-media-text.is-style-media-right-washi .wp-block-media-text__content {
  min-height: 100%;
  height: 100%;
  align-self: stretch;
}

/* 左画像：左端を非対称ベジェでカット（破れた和紙） */
.wp-block-media-text.is-style-media-left-washi .wp-block-media-text__media,
.is-style-media-left-washi .wp-block-media-text__media {
  /* viewBox 0 0 500 500: M 18 0 C 0 45 … → 要素幅高に自動フィット */
  -webkit-clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CclipPath id='tbt-media-left-torn' clipPathUnits='objectBoundingBox'%3E%3Cpath d='M 0.036,0 C 0,0.09 0.056,0.19 0.016,0.32 C -0.016,0.44 0.044,0.55 0.01,0.68 C -0.01,0.78 0.03,0.84 0,0.9 L 0,1 L 1,1 L 1,0 Z'/%3E%3C/clipPath%3E%3C/svg%3E%23tbt-media-left-torn");
  clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CclipPath id='tbt-media-left-torn' clipPathUnits='objectBoundingBox'%3E%3Cpath d='M 0.036,0 C 0,0.09 0.056,0.19 0.016,0.32 C -0.016,0.44 0.044,0.55 0.01,0.68 C -0.01,0.78 0.03,0.84 0,0.9 L 0,1 L 1,1 L 1,0 Z'/%3E%3C/clipPath%3E%3C/svg%3E%23tbt-media-left-torn");
  overflow: visible;
}

/* 右画像：右端を非対称ベジェでカット（破れた和紙） */
.wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media,
.is-style-media-right-washi .wp-block-media-text__media {
  /* viewBox 0 0 500 500: M 0 0 L 500 0 C 478 55 … */
  -webkit-clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CclipPath id='tbt-media-right-torn' clipPathUnits='objectBoundingBox'%3E%3Cpath d='M 0,0 L 1,0 C 0.956,0.11 1.01,0.22 0.976,0.35 C 0.94,0.48 0.996,0.58 0.964,0.71 C 0.93,0.83 0.98,0.89 0.96,1 L 0,1 Z'/%3E%3C/clipPath%3E%3C/svg%3E%23tbt-media-right-torn");
  clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CclipPath id='tbt-media-right-torn' clipPathUnits='objectBoundingBox'%3E%3Cpath d='M 0,0 L 1,0 C 0.956,0.11 1.01,0.22 0.976,0.35 C 0.94,0.48 0.996,0.58 0.964,0.71 C 0.93,0.83 0.98,0.89 0.96,1 L 0,1 Z'/%3E%3C/clipPath%3E%3C/svg%3E%23tbt-media-right-torn");
  overflow: visible;
}

/* モバイル：clip-path とグラデーションオーバーレイを無効（アニメーションは hero.css で維持） */
@media (max-width: 781px) {
  /* 固定2カラムグリッドを解除して縦積み */
  .wp-block-media-text.is-style-media-left-washi,
  .wp-block-media-text.is-style-media-right-washi,
  .is-style-media-left-washi,
  .is-style-media-right-washi {
    grid-template-columns: 1fr !important;
  }

  .wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media,
  .is-style-media-right-washi .wp-block-media-text__media {
    order: -1;
  }

  .wp-block-media-text.is-style-media-left-washi .wp-block-media-text__content,
  .wp-block-media-text.is-style-media-right-washi .wp-block-media-text__content,
  .is-style-media-left-washi .wp-block-media-text__content,
  .is-style-media-right-washi .wp-block-media-text__content {
    grid-column: 1;
    width: 100%;
  }

  .wp-block-media-text.is-style-media-left-washi .wp-block-media-text__media,
  .wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media,
  .is-style-media-left-washi .wp-block-media-text__media,
  .is-style-media-right-washi .wp-block-media-text__media {
    grid-column: 1;
    width: 100%;
  }

  .wp-block-media-text.is-style-media-left-washi .wp-block-media-text__media,
  .wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media,
  .is-style-media-left-washi .wp-block-media-text__media,
  .is-style-media-right-washi .wp-block-media-text__media {
    -webkit-clip-path: none !important;
    clip-path: none !important;
  }

  .wp-block-media-text.is-style-media-left-washi .wp-block-media-text__media::after,
  .wp-block-media-text.is-style-media-right-washi .wp-block-media-text__media::after,
  .is-style-media-left-washi .wp-block-media-text__media::after,
  .is-style-media-right-washi .wp-block-media-text__media::after {
    display: none !important;
  }

  /* 見出し：テーマ既定の1.5倍 */
  .wp-block-media-text.is-style-media-left-washi .wp-block-media-text__content :where(h2, h3),
  .wp-block-media-text.is-style-media-right-washi .wp-block-media-text__content :where(h2, h3),
  .is-style-media-left-washi .wp-block-media-text__content :where(h2, h3),
  .is-style-media-right-washi .wp-block-media-text__content :where(h2, h3) {
    font-size: calc(1em * 1.5) !important;
    letter-spacing: revert !important;
  }

  /* 本文（見出し相当のフォントサイズクラスは除外） */
  .is-style-media-left-washi .wp-block-media-text__content
    :where(p, li, a):not(.has-large-font-size):not(.has-medium-font-size),
  .is-style-media-right-washi .wp-block-media-text__content
    :where(p, li, a):not(.has-large-font-size):not(.has-medium-font-size) {
    font-size: clamp(0.75rem, 2.9vw, 0.88rem) !important;
    line-height: 1.75;
  }

  /* has-large-font-sizeは見出し相当として大きく保つ */
  .is-style-media-left-washi .wp-block-media-text__content .has-large-font-size,
  .is-style-media-right-washi .wp-block-media-text__content .has-large-font-size {
    font-size: clamp(1.1rem, 4.2vw, 1.35rem) !important;
  }

  /* テキストリンク（こだわり・通販・事業内容・店舗案内など） */
  .is-style-media-left-washi .wp-block-media-text__content a,
  .is-style-media-right-washi .wp-block-media-text__content a {
    font-size: clamp(0.72rem, 2.8vw, 0.85rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.3rem !important;
    display: inline-block !important;
  }
}

/* ── 引用：下線（区切り） ───────────────────────────────────────────── */
.wp-block-quote.is-style-underline-divider,
blockquote.wp-block-quote.is-style-underline-divider {
  border-left: none !important;
  border-bottom: 1px solid rgba(184, 139, 70, 0.38);
  padding: 0 0 1rem !important;
  margin: 0 0 1.5rem !important;
  background: transparent;
}

.wp-block-quote.is-style-underline-divider::before,
.wp-block-quote.is-style-underline-divider::after {
  content: none !important;
  display: none !important;
}

.wp-block-quote.is-style-underline-divider cite,
.wp-block-quote.is-style-underline-divider footer {
  display: block;
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: none;
  font-size: 0.92em;
  color: rgba(42, 22, 16, 0.72);
}