/**
 * トップページのボタンの横幅を揃える
 *
 * オレンジのボタン（コアのボタンブロック custom-logo-orange と、新着情報の「続きを見る」）に
 * 共通の最小幅を付ける。いちばん長い「お問い合わせフォーム」＋「＞」（約271px）が収まる 280px。
 * FAQ の回答の横に並ぶ「詳しくはこちら」（横並びグループ .is-nowrap 内）は対象外。
 *
 * @package satooya-custom
 */

.wp-block-button__link.has-custom-logo-orange-background-color,
.satooya-news-tabs__more-link {
	min-width: 280px;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
}

.is-nowrap .wp-block-button__link.has-custom-logo-orange-background-color {
	min-width: 0;
}

/* -------------------------------------------------- X（旧Twitter）へのバナーボタン
 * 「お知らせ一覧（SNS・BLOG・NEWS）」の X タイムライン埋め込みは、X 側の制限で表示されないため、
 * 各アカウントのヘッダー画像をリンク付きバナー（画像ブロック・追加CSSクラス satooya-x-banner）に置き換えた。
 * 押せることが分かるよう、角丸・影・ホバーで浮く、ボタン風の見た目にする。
 */
.satooya-x-banner a {
	display: block;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 4px 16px rgba( 180, 120, 80, 0.14 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.satooya-x-banner img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( hover: hover ) {
	.satooya-x-banner a:hover {
		transform: translateY( -4px );
		box-shadow: 0 8px 22px rgba( 180, 120, 80, 0.2 );
	}
}

.satooya-x-banner figcaption {
	margin-top: 12px;
	text-align: center;
	font-size: 14.46px;
	font-weight: 500;
	letter-spacing: 1px;
	color: #333;
}

.satooya-x-banner figcaption::after {
	content: " ›";
	color: var( --wp--preset--color--custom-logo-orange, #f29100 );
	font-weight: 700;
}

/* -------------------------------------------------- お知らせ一覧（SNS・BLOG・NEWS）の投稿リスト
 * 日付（120px）＋カテゴリ（120px）の列でカテゴリ「【県北・県央・鹿行地区】」が折り返すため、
 * カテゴリ列を 190px に広げる（外側の列 240px → 320px）。
 * ブロックのインライン style（flex-basis）を上書きするため !important を使う。
 * 対象はページ送り付きのクエリ（トップではこの一覧だけ）。
 */
.wp-block-query:has( .wp-block-query-pagination ) .wp-block-post-template .wp-block-column[style*="flex-basis:240px"] {
	flex-basis: 320px !important;
}

.wp-block-query:has( .wp-block-query-pagination ) .wp-block-post-template .wp-block-column[style*="flex-basis:240px"] .wp-block-column[style*="flex-basis:120px"]:last-child {
	flex-basis: 190px !important;
}

/* ページ送り：コラム一覧と同じ丸い番号。現在ページはサイトのオレンジ */
/* テーマ（X-T9）が :root 付き（詳細度 0-3-0）で青い四角を指定しているため、:root body を前置して上書きする */
:root body .wp-block-query-pagination {
	gap: 10px;
	align-items: center;
}

:root body .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 10px;
}

:root body .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid #e5cfb5;
	border-radius: 50%;
	background: #fff;
	color: #333;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
}

:root body .wp-block-query-pagination .page-numbers.current {
	border-color: var( --wp--preset--color--custom-logo-orange, #f29100 );
	background: var( --wp--preset--color--custom-logo-orange, #f29100 );
	color: #fff;
}

:root body .wp-block-query-pagination .page-numbers.dots {
	width: auto;
	border: 0;
	background: none;
}

:root body .wp-block-query-pagination a.page-numbers:hover {
	border-color: var( --wp--preset--color--custom-logo-orange, #f29100 );
	color: var( --wp--preset--color--custom-logo-orange, #f29100 );
}

:root body .wp-block-query-pagination-previous,
:root body .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0 6px;
	padding: 0;
	background: none;
	color: var( --wp--preset--color--custom-logo-orange, #f29100 );
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

:root body .wp-block-query-pagination-previous:hover,
:root body .wp-block-query-pagination-next:hover {
	text-decoration: underline;
}

/* -------------------------------------------------- オレンジのボタンの右に「＞」
 * 本文のブロックは変えず、CSS で白い線の矢印を描き足す。文字と矢印をまとめて中央に置く。
 */
.wp-block-button__link.has-custom-logo-orange-background-color,
.satooya-news-tabs__more-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.wp-block-button__link.has-custom-logo-orange-background-color::after,
.satooya-news-tabs__more-link::after {
	content: "";
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-right: 2px; /* 回転ではみ出す分 */
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease;
}

@media ( hover: hover ) {
	.wp-block-button__link.has-custom-logo-orange-background-color:hover::after,
	.satooya-news-tabs__more-link:hover::after {
		transform: translateX( 3px ) rotate( 45deg );
	}
}

/* -------------------------------------------------- 動画メッセージ（VIDEO）のカード
 * VK グリッドカードの中に、カバー画像（YouTube へのリンク）＋タイトル（h2）＋「画像をクリック」。
 * ・中身が上下中央揃えのため、タイトルの行数でサムネイルの位置がずれる → 上揃え
 * ・タイトル（h2 24px）がセクション見出しと同じ大きさで重い → 18px・太字、2行分の高さを確保して揃える
 * ・「画像をクリック」は控えめな補足にし、再生アイコンで動画であることを示す
 * 対象はカバーにリンクが付いたグリッドカード（トップではこのセクションだけ）。
 */
.vk_gridcolcard:has( .wp-block-cover-vk-link ) .vk_gridcolcard_item_body {
	justify-content: flex-start;
}

.vk_gridcolcard:has( .wp-block-cover-vk-link ) .vk_gridcolcard_item_body h2 {
	min-height: calc( 18px * 1.6 * 2 );
	margin-top: 0 !important; /* カバーとの間は本文の余白ブロック（24px）で取る */
	font-size: 18px;
	font-weight: 700 !important;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

.vk_gridcolcard:has( .wp-block-cover-vk-link ) .vk_gridcolcard_item_body h2 + p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 6px !important;
	color: #6b6b6b;
	font-size: 13px;
}

/* 再生アイコン */
.vk_gridcolcard:has( .wp-block-cover-vk-link ) .vk_gridcolcard_item_body h2 + p::before {
	content: "\25B6"; /* ▶ */
	color: var( --wp--preset--color--custom-logo-orange, #f29100 );
	font-size: 11px;
	line-height: 1;
}

/* 1枚おきにカードを 32px 下げる演出（先頭の余白ブロック）を無効にし、サムネイルの位置を揃える */
.vk_gridcolcard:has( .wp-block-cover-vk-link ) .vk_gridcolcard_item_body > .wp-block-vk-blocks-spacer:first-child {
	display: none;
}

@media ( max-width: 767px ) {
	.vk_gridcolcard:has( .wp-block-cover-vk-link ) .vk_gridcolcard_item_body h2 {
		min-height: 0;
		font-size: 16px;
	}
}

/* タイトルを小さくすると中身の幅が縮み、左のサムネイルが狭くなるため、カード幅いっぱいに固定 */
.vk_gridcolcard:has( .wp-block-cover-vk-link ) .vk_gridcolcard_item_body {
	width: 100%;
	grid-template-columns: 100%; /* 中身はグリッド。列幅が中身（タイトル）に合わせて縮むのを防ぐ */
}

.vk_gridcolcard:has( .wp-block-cover-vk-link ) .wp-block-cover {
	width: 100%;
	box-sizing: border-box;
}

/* -------------------------------------------------- 里親のこと（FOSTERCARE）の3枚のカード
 * VK グリッドカード（blockId de253ebb-…）。動画メッセージのカードとトンマナを揃える。
 * ・イラストの縦の長さが 320/319/316px とばらつき、タイトル位置がずれる → 画像枠の比率を固定して収める
 * ・タイトル 21px → 18px・太字、説明文 16px → 14.5px（左寄せのまま）
 */
.vk_gridcolcard-de253ebb-f723-4652-974a-e5fef00bc722 .vk_gridcolcard_item_header {
	aspect-ratio: 347 / 320 !important; /* ブロックの style="aspect-ratio:auto" を上書き */
	height: auto !important;
}

.vk_gridcolcard-de253ebb-f723-4652-974a-e5fef00bc722 .vk_gridcolcard_item_header > * {
	height: 100%;
	margin: 0;
}

.vk_gridcolcard-de253ebb-f723-4652-974a-e5fef00bc722 .vk_gridcolcard_item_header img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vk_gridcolcard-de253ebb-f723-4652-974a-e5fef00bc722 .vk_gridcolcard_item_body h2 {
	margin-top: 12px !important;
	font-size: 18px !important; /* has-x-large-font-size（!important）を上書き */
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

.vk_gridcolcard-de253ebb-f723-4652-974a-e5fef00bc722 .vk_gridcolcard_item_body p {
	margin-top: 10px !important;
	font-size: 14.5px;
	line-height: 1.8;
}

@media ( max-width: 767px ) {
	.vk_gridcolcard-de253ebb-f723-4652-974a-e5fef00bc722 .vk_gridcolcard_item_body h2 {
		font-size: 16px !important;
	}
}