/**
 * 画像なし・読み込み失敗時のロゴ プレースホルダー（共通）
 *
 * HTML 構造（共通）:
 *   <element data-media-placeholder>          ← エラー時に .is-no-image が JS で付与
 *     <img data-media-broken-handler src=...> ← エラー時に .is-broken が JS で付与
 *   </element>
 *
 * JS: assets/js/components/media-placeholder.js
 * PHP: inc/media-placeholder.php
 */

[data-media-placeholder] {
	position: relative;
}

[data-media-placeholder].is-no-image {
	background-color: var(--wp--preset--color--gray-200);
}

[data-media-placeholder].is-no-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('../../images/logo.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: clamp(3rem, 40%, 7.5rem) auto;
	pointer-events: none;
}

/* プレースホルダー状態では本来の画像は隠す */
[data-media-placeholder].is-no-image > img,
[data-media-placeholder].is-no-image img[data-media-broken-handler],
img[data-media-broken-handler].is-broken {
	display: none;
}