/*
 * block-styles.css
 * register_block_style() で登録したカスタムブロックスタイルの CSS
 */

/* ------------------------------------------------------------------
   core/button — Outline
   ------------------------------------------------------------------ */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	color: inherit;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	background-color: currentColor;
}

/* ------------------------------------------------------------------
   core/separator — Wavy（波線）
   ------------------------------------------------------------------ */
.wp-block-separator.is-style-wavy {
	border: none !important;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q5 0 10 6 Q15 12 20 6 Q25 0 30 6 Q35 12 40 6' fill='none' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: center;
	background-size: 40px 12px;
}

/* 幅指定をWordPressのalignクラスに委ねる */
.wp-block-separator.is-style-wavy:not(.alignwide):not(.alignfull) {
	max-width: var(--wp--style--global--content-size, 840px);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-separator.is-style-wavy.alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
	width: 100%;
}

.wp-block-separator.is-style-wavy.alignfull {
	max-width: 100%;
	width: 100%;
}

/* ------------------------------------------------------------------
   abira/query-loop-card パターン
   ------------------------------------------------------------------ */

/* アイキャッチ画像が無い投稿でも、画像枠分のスペースを確保する。
   post-featured-image ブロックは画像が無いと何も出力しないため、
   親要素（.post-card__media）側に aspect-ratio を持たせて場所を確保する。 */
.post-card__media {
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--subtle, #f5f5f5);
	overflow: hidden;
}

.post-card__media .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.post-card__media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 抜粋（本文）を5行までに制限し、それ以降は省略 */
.post-card__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}