/**
 * MVエリア（custom/mv-block）design_handoff_wp_blocks block 33（大）/ 34（小）
 * variant属性で5種類を切り替える。既存の front-page.php の MV（.mv, .mv__*）とは
 * 完全に別クラス（.cwt-mv-*）なので衝突しない。
 */

.cwt-mv {
  padding-inline: var(--wp--custom--container--padding, 24px);
}

/*
 * 5バリエーション共通：内側のコンテンツ幅の上限。
 * .cwt-mv 自体（背景のグラデーション・単色帯など）は画面幅いっぱいに広がってよいが、
 * 中のテキスト・CTAはここで contentSize に制限し中央寄せにする。
 * これが無いと（特に小サイズ3種：gradient/lavender/plain）テキストが
 * 画面幅に合わせて際限なく広がってしまう。
 * large-split / large-photo の .cwt-mv__inner には既にバリエーション別の詳細指定があるが、
 * この共通ルールと同じ値なので上書きされるだけで問題ない。
 */
.cwt-mv__inner {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
}
/*
 * small-gradient / small-plain は .cwt-mv__inner が無く、段落が .cwt-mv の直接の子。
 * ここで幅を指定しても、後方のバリエーション別ルールの margin: 0 に
 * 詳細度が同点のまま上書きされてしまうため、実際の指定は各バリエーション側の
 * margin 宣言に直接組み込む（このコメントの下ではなく、各 ---- 34-* ---- ブロック内）。
 */

/*
 * ---- 33-1. 大（分割）：グラデ背景 + 右ビジュアル（固定高さ・中央トリミング）
 *              + テキストは全幅オーバーレイ（画像に被ってよい） ----
 * .cwt-mv__visual は右半分・高さ固定・object-fit:coverで中央トリミング。
 * .cwt-mv__text は position:absolute で .cwt-mv__inner いっぱいに重ね、
 * 画像の上に来るよう z-index を上げる。
 */
.cwt-mv--large-split {
  background: var(--wp--preset--gradient--article-mv-gradient);
  min-height: 350px;
  display: flex;
  align-items: center;
}
.cwt-mv--large-split .cwt-mv__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-block: 40px;
}
.cwt-mv--large-split .cwt-mv__text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.cwt-mv--large-split .cwt-mv__visual {
  width: 50%;
  height: 270px;
  margin-left: auto;
  border-radius: var(--wp--custom--radius--surface, 24px);
  overflow: hidden;
}
.cwt-mv--large-split .cwt-mv__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cwt-mv--large-split .cwt-mv__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  margin: 0 0 16px;
}
.cwt-mv--large-split .cwt-mv__subtitle {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--body-text);
  margin: 0;
}

/* ---- 33-2. 大（全面写真）：写真 + 濃色オーバーレイ ---- */
.cwt-mv--large-photo {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  background-color: var(--wp--preset--color--dark-accent);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.cwt-mv--large-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wp--preset--gradient--photo-overlay);
}
.cwt-mv--large-photo .cwt-mv__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
  padding-block: 40px;
}
.cwt-mv--large-photo .cwt-mv__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 40px;
  font-weight: 700;
  color: var(--wp--preset--color--white);
  margin: 0 0 12px;
}
.cwt-mv--large-photo .cwt-mv__subtitle {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--white);
  margin: 0;
}

/* ---- 34-1. 小（グラデ帯）：H1 32px ---- */
.cwt-mv--small-gradient {
  background: var(--wp--preset--gradient--article-mv-gradient);
  padding-block: 40px;
}
.cwt-mv--small-gradient .cwt-mv__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin: 0 auto;
  text-align: center;
}
.cwt-mv--small-gradient .cwt-mv__subtitle {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--heading-text);
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin: 8px auto 0;
  text-align: center;
}

/* ---- 34-2. 小（ラベンダー帯）：見出し + 右CTA ---- */
.cwt-mv--small-lavender {
  background: var(--wp--preset--color--lavender-bg);
  padding-block: 32px;
}
.cwt-mv--small-lavender .cwt-mv__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cwt-mv--small-lavender .cwt-mv__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  margin: 0;
}
.cwt-mv--small-lavender .cwt-mv__cta {
  display: inline-block;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  text-decoration: none;
  flex-shrink: 0;
}

/* ---- 34-3. 小（プレーン）：背景なし・下ボーダーのみ ---- */
.cwt-mv--small-plain {
  padding-block: 24px;
  border-bottom: 1px solid var(--wp--preset--color--divider);
}
.cwt-mv--small-plain .cwt-mv__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin: 0 auto;
}
/* 投稿日・カテゴリーなどのメタ情報を、罫線（.cwt-mv--small-plainのborder-bottom）より
   上・タイトルのすぐ下に表示したい場合にsubtitleとして渡す（single.phpで使用） */
.cwt-mv--small-plain .cwt-mv__subtitle {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--caption-text);
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin: 8px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.cwt-mv--small-plain .cwt-mv__subtitle a {
  color: inherit;
}

@media (max-width: 767px) {
  .cwt-mv--large-split .cwt-mv__visual {
    width: 100%;
    height: 220px;
  }
  .cwt-mv--large-split .cwt-mv__title,
  .cwt-mv--large-photo .cwt-mv__title {
    font-size: 28px;
  }
  .cwt-mv--small-lavender .cwt-mv__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}