/**
 * Link Card Embed frontend styles.
 *
 * すべて .lce-card 配下に限定し、テーマCSSとの衝突を避けます。
 */

.lce-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--lce-card-maxw);
	margin: 1.5em auto;
	overflow: hidden;
	text-decoration: none;
	color: var(--lce-title-color);
	background: var(--lce-card-bg);
	border: var(--lce-border-width) solid var(--lce-border-color);
	border-radius: var(--lce-radius);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lce-card,
.lce-card * {
	box-sizing: border-box;
}

.lce-card:focus-visible {
	outline: 3px solid #2271b1;
	outline-offset: 3px;
}

.lce-card--hover:hover {
	transform: translateY(-2px);
}

.lce-card--shadow-none {
	box-shadow: none;
}

.lce-card--shadow-small {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.lce-card--shadow-medium {
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.lce-card--shadow-large {
	box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18);
}

.lce-card__media {
	display: block;
	position: relative;
	width: 100%;
	background: #f3f4f6;
	overflow: hidden;
}

/*
 * 画像枠の縦横比を作ります。
 *
 * 以前は 16:9 固定の 56.25% でしたが、
 * Image ratio 設定に連動できるように CSS変数へ変更します。
 *
 * --lce-image-ratio は includes/assets.php の lce_get_css_variables() で生成されます。
 *
 * 例：
 * - 16:9 => 56.25%
 * - 4:3  => 75%
 * - 1:1  => 100%
 */
.lce-card__media::before {
	content: "";
	display: block;
	padding-top: var(--lce-image-ratio);
}

/*
 * リンクカード内の実画像です。
 *
 * ここは単独の .lce-card__image ではなく、
 * .lce-card .lce-card__media > img.lce-card__image という限定的で強いセレクタにしています。
 *
 * 理由:
 * WordPressテーマ側には、以下のような汎用画像CSSが入っていることが多いためです。
 *
 * img {
 *     max-width: 100%;
 *     height: auto;
 * }
 *
 * また、今回確認されたテーマ側CSSでは、以下のような指定がリンクカード画像にも当たっていました。
 *
 * .blog-single .bs-content img:not(.wp-block-cover__image-background) {
 *     max-width: 100%;
 *     height: auto;
 * }
 *
 * この height:auto がリンクカード画像に勝つと、
 * 画像枠 .lce-card__media の高さは残っているのに、
 * 実画像だけが横幅基準の自然な高さで表示されます。
 *
 * その結果、横長すぎるOGP画像では画像の下に余白が残り、
 * テキストとの間に不自然な空白ができたように見えます。
 *
 * このプラグインでは、画像全体を必ず見せることよりも、
 * リンクカードの画像枠をきれいに埋めることを優先します。
 *
 * そのため、画像は枠いっぱいに張り付け、
 * object-fit: cover で左右または上下が多少見切れる表示にします。
 */
.lce-card .lce-card__media > img.lce-card__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;

	/*
	 * height だけは !important を付けます。
	 *
	 * 今回の直接原因は、テーマ側の
	 * .blog-single .bs-content img:not(.wp-block-cover__image-background)
	 * による height:auto の上書きです。
	 *
	 * height:auto が残ると object-fit: cover を指定していても、
	 * 画像本体が画像枠の高さまで伸びず、下側に空白ができます。
	 *
	 * この指定は .lce-card .lce-card__media > img.lce-card__image に限定しているため、
	 * 記事本文の通常画像、ギャラリー画像、WordPress画像ブロック、カバー画像には影響しません。
	 */
	height: 100% !important;

	/*
	 * テーマ側の img { max-width: 100%; height: auto; } 系の影響を受けにくくします。
	 *
	 * max-width: none;
	 *   テーマの画像保護CSSに引っ張られて、absolute画像のサイズ計算が崩れるのを防ぎます。
	 *
	 * min-width: 100%;
	 * min-height: 100%;
	 *   画像の縦横比が極端でも、最低限カード画像枠を埋めるようにします。
	 */
	max-width: none;
	min-width: 100%;
	min-height: 100%;

	/*
	 * OGP画像やSNSカード画像は、取得元サイトによって比率が大きく異なります。
	 *
	 * object-fit: contain にすると画像全体は見えますが、
	 * 横長すぎる画像・縦長すぎる画像では画像枠の中に余白が発生します。
	 * その結果、フロント側で画像と本文の間に不自然な空白があるように見えます。
	 *
	 * リンクカードでは「画像全体を必ず見せる」よりも、
	 * 「画像枠をきれいに埋めてカードとして崩れない」ことを優先します。
	 *
	 * そのため、左右または上下が多少見切れてもよい前提で cover 固定にします。
	 * これにより、極端に横長なOGP画像でも画像枠いっぱいに表示され、
	 * テキスト上部の空白が出にくくなります。
	 */
	object-fit: cover;

	/*
	 * cover で見切れる場合の基準位置です。
	 *
	 * 横長画像で縦方向を埋める場合は左右が見切れます。
	 * その際、中央を基準にトリミングすることで、
	 * 片側だけに大きく寄った見切れ方を避けます。
	 */
	object-position: center center;
}

/*
 * 画像プレースホルダーです。
 *
 * 以前は display:grid と min-height で高さを作り、
 * ::before を content:none にしていたため、
 * Image ratio の設定が疑似画像へ反映されませんでした。
 *
 * 改修後は通常画像と同じく .lce-card__media::before で比率を作り、
 * 中央の丸いアイコンだけを absolute 配置します。
 *
 * これにより、実画像がある場合も、疑似画像プレースホルダーの場合も、
 * 同じ Image ratio 設定でレイアウト確認できます。
 */
.lce-card__media--placeholder {
	min-height: 0;
}

.lce-card__placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	font-size: 32px;
	font-weight: 800;
	background: rgba(0, 0, 0, 0.08);
	color: var(--lce-meta-color);
	transform: translate(-50%, -50%);
}

.lce-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	padding: 1em 1.1em;
	background: var(--lce-body-bg);
}

.lce-card__title {
	display: -webkit-box;
	-webkit-line-clamp: var(--lce-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--lce-title-size);
	font-weight: var(--lce-title-weight);
	line-height: 1.45;
	color: var(--lce-title-color);
}

.lce-card__description {
	display: -webkit-box;
	-webkit-line-clamp: var(--lce-desc-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--lce-desc-size);
	line-height: 1.55;
	color: var(--lce-desc-color);
}

.lce-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	font-size: 12px;
	line-height: 1.4;
	color: var(--lce-meta-color);
}

.lce-card__site {
	font-weight: 700;
}

.lce-card__domain {
	opacity: 0.85;
}

.lce-card--image-left,
.lce-card--image-right {
	flex-direction: row;
}

.lce-card--image-right {
	flex-direction: row-reverse;
}

.lce-card--image-left .lce-card__media,
.lce-card--image-right .lce-card__media {
	flex: 0 0 34%;
	min-width: 180px;
}

/*
 * 左右レイアウト時の画像比率です。
 *
 * 以前は左右レイアウトだけ 1:1 固定でした。
 * そのため Image ratio を 16:9 / 4:3 に変更しても、
 * 左右配置では疑似画像も登録画像も正方形のままでした。
 *
 * 改修後は top 配置と同じく --lce-image-ratio を使います。
 */
.lce-card--image-left .lce-card__media::before,
.lce-card--image-right .lce-card__media::before {
	padding-top: var(--lce-image-ratio);
}

.lce-card--image-none .lce-card__media,
.lce-card--no-image .lce-card__media {
	display: none;
}

.lce-card--fallback {
	opacity: 0.96;
}

@media (max-width: 640px) {
	.lce-card--image-left,
	.lce-card--image-right {
		flex-direction: column;
	}

	.lce-card--image-left .lce-card__media,
	.lce-card--image-right .lce-card__media {
		flex-basis: auto;
		min-width: 0;
	}

	/*
	 * スマホ表示でも Image ratio を維持します。
	 *
	 * 以前はスマホ時に 16:9 固定へ戻していましたが、
	 * 管理画面で選択した比率と実表示がズレるため、
	 * ここも --lce-image-ratio に統一します。
	 */
	.lce-card--image-left .lce-card__media::before,
	.lce-card--image-right .lce-card__media::before {
		padding-top: var(--lce-image-ratio);
	}
}