/*
 * blocks.css — コアブロックの見た目。
 *
 * 余白・色・文字サイズの既定は theme.json が持つ。ここに書くのは
 * theme.json で表現できないもの（疑似要素・要素同士の関係・レイアウト）だけ。
 * `is-style-*` の登録は inc/block-styles.php（Phase 3）。
 *
 * 旧 STORK ブロック（wp-block-stk-plugin-*）には触らない。Phase 3 の legacy.css の担当。
 */

/* ---------------------------------------------------------------- 画像・ギャラリー */

.wp-block-image {
	margin-inline: 0;
}

.wp-block-image img {
	height: auto;
	border-radius: var(--picico-radius-sm);
}

.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption,
.wp-block-audio figcaption {
	margin-block-start: var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	text-align: center;
}

.wp-block-image.is-style-rounded img {
	border-radius: 50%;
}

/* ---------------------------------------------------------------- 引用 */

.wp-block-quote {
	margin-inline: 0;
	padding: var(--picico-space-sm) var(--picico-space-md);
	border-left: 4px solid var(--picico-color-primary-light);
	border-radius: 0 var(--picico-radius-sm) var(--picico-radius-sm) 0;
	background-color: var(--picico-color-surface-alt);
}

.wp-block-quote cite {
	display: block;
	margin-block-start: var(--picico-space-xs);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	font-style: normal;
}

.wp-block-pullquote {
	padding: var(--picico-space-md);
	border-block: 2px solid var(--picico-color-primary);
	text-align: center;
}

/* ---------------------------------------------------------------- ボタン */

.wp-block-buttons {
	gap: var(--picico-space-sm);
}

.wp-block-button__link {
	padding: 0.75em 1.5em;
	border: 1px solid transparent;
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-primary);
	color: var(--picico-color-surface);
	font-weight: var(--picico-font-weight-bold);
	line-height: 1.4;
	text-decoration: none;
}

.wp-block-button__link:hover {
	background-color: var(--picico-color-primary-dark);
	color: var(--picico-color-surface);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--picico-color-primary);
	background-color: transparent;
	color: var(--picico-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--picico-color-primary-pale);
	color: var(--picico-color-primary-dark);
}

/* ---------------------------------------------------------------- グループ・カラム */

.wp-block-group.has-background {
	padding: var(--picico-space-md);
	border-radius: var(--picico-radius-md);
}

.wp-block-columns {
	gap: var(--picico-space-md);
}

/* ---------------------------------------------------------------- 表 */

/*
 * ブロックの表は <figure class="wp-block-table"> が外側にあるので、
 * 横スクロールは figure に持たせ、table は table のままにする。
 * article.css の `:where(.entry-content) table`（display:block）より
 * specificity が高いので、こちらが勝つ。
 */
.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.5em 0.8em;
	border: 1px solid var(--picico-color-border);
}

.wp-block-table th {
	background-color: var(--picico-color-primary-pale);
	text-align: left;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--picico-color-surface-alt);
}

/* ---------------------------------------------------------------- 埋め込み */

.wp-block-embed {
	margin-inline: 0;
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed iframe {
	max-width: 100%;
}

/* コアの wp-embed-aspect-* が付かない古い埋め込みへの保険。 */
.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.wp-block-embed-vimeo .wp-block-embed__wrapper iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Twitter / X の埋め込みは自前で幅を持つので、はみ出しだけ止める。 */
.wp-block-embed-twitter .wp-block-embed__wrapper {
	overflow-x: auto;
}

/* ---------------------------------------------------------------- コード・区切り */

.wp-block-code,
.wp-block-preformatted {
	padding: var(--picico-space-sm);
	overflow-x: auto;
	border: 1px solid var(--picico-color-border);
	border-radius: var(--picico-radius-sm);
	background-color: var(--picico-color-surface-alt);
}

.wp-block-separator {
	height: 1px;
	border: 0;
	background-color: var(--picico-color-border);
}

.wp-block-separator.is-style-dots {
	background: none;
}

/* ---------------------------------------------------------------- 幅 */

/*
 * alignwide / alignfull は本文幅の制限を抜ける。
 * 実際に広げるのはサイドバーの無いテンプレートだけ（article.css の
 * .pc-page--wide / .pc-page--full / .pc-page--lp）。
 * 2カラムのページで広げるとサイドバーに重なるので、ここでは中央寄せだけ。
 */
.entry-content .alignwide,
.entry-content .alignfull {
	margin-inline: auto;
}