/*
 * msa-widget.css — フロント表示用スタイル。
 *
 * Monokuroテーマが定義するCSSカスタムプロパティ（--color-accent等）が
 * 存在すれば var(--xxx, フォールバック値) の仕組みで自動的にそれを継承し、
 * テーマ側の見た目（白基調・控えめな枠線・角丸ボタン等、Editorial×Utility）
 * に合わせる。フォールバック値はSTEP27指示書§6のワインレッド系を採用して
 * おり、Monokuroテーマが無い環境でもこのプラグイン単体で破綻しない
 * （STEP27指示書§14）。
 *
 * .msa-* という専用クラスのみを使用し、.product-card 等の既存テーマ
 * クラスとは一切重複させない。
 */

.msa-card {
	position: relative;
	box-sizing: border-box;
	background: var(--color-bg, #ffffff);
	border: 1px solid var(--color-border, #e2ddd6);
	border-radius: var(--radius-md, 8px);
	padding: 16px;
	overflow: hidden;
}

.msa-card__pr {
	display: inline-block;
	font-size: var(--font-size-sm, 13px);
	font-weight: var(--font-weight-bold, 700);
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: var(--color-accent-tint, #f1e4e6);
	color: var(--color-accent, #7A2E3A);
	line-height: 1.6;
	margin-bottom: 12px;
}

.msa-card__media {
	display: block;
	margin: 0 0 12px;
}

/*
 * 画像のみモード（STEP27-2）: サービス名が空で画像のみの場合、
 * .msa-card__mediaがカード内の最後の要素になるため下マージンは不要にする。
 */
.msa-card--image-only .msa-card__media {
	margin-bottom: 0;
}

/*
 * 画像自体がアフィリエイトリンクになる場合のアンカー表示。<a>は
 * デフォルトでinlineのため、画像を包む場合はdisplay:blockが必要
 * （.msa-card__mediaで指定済みのものをそのまま継承）。
 */
.msa-card__media--link {
	text-decoration: none;
	border-radius: var(--radius-sm, 6px);
	overflow: hidden;
	transition: opacity 0.15s ease;
}

.msa-card__media--link:hover {
	opacity: 0.85;
}

.msa-card__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm, 6px);
	display: block;
}

.msa-card__body {
	min-width: 0;
}

.msa-card__name {
	margin: 0 0 6px;
	font-size: var(--font-size-lead, 16px);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-text, #292524);
	line-height: 1.5;
}

.msa-card__description {
	margin: 0 0 14px;
	font-size: var(--font-size-sm, 13px);
	color: var(--color-text-muted, #78716c);
	line-height: 1.7;
}

.msa-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 16px;
	border-radius: var(--radius-button, 6px);
	background: var(--color-accent, #7A2E3A);
	color: var(--color-accent-contrast, #ffffff);
	font-size: var(--font-size-base, 15px);
	font-weight: var(--font-weight-bold, 700);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.msa-card__button:hover {
	background: var(--color-accent-hover, #5c2029);
	color: var(--color-accent-contrast, #ffffff);
}

.msa-card__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * 楽天モーションウィジェット（STEP27-3）。
 *
 * サイドバー列は300px固定で、楽天ウィジェットも300px固定幅のため、
 * .msa-cardの標準padding(16px)をそのまま使うとウィジェットが
 * サイドバー幅からはみ出す（300 - 32px < 300px）。そのため、この
 * モードでは左右のpaddingとborder/背景を無効化し、PRバッジと
 * ウィジェット本体がそのまま300px幅で収まるようにする（§14・§23）。
 * 楽天側の見た目（design:'slide'）は既にウィジェット自身が制御して
 * いるため、Monokuro側で追加の装飾（枠線・背景）は行わない。
 */
.msa-card--rakuten {
	padding: 12px 0 0;
	border: none;
	background: transparent;
	border-radius: 0;
}

.msa-card--rakuten .msa-card__pr {
	margin: 0 0 8px 0;
}

.msa-card__rakuten-slot {
	max-width: 300px;
	overflow: hidden;
}

/*
 * 900px未満での非表示（§5）。
 * 通常はMonokuroテーマの .site-sidebar 自体が900px未満でdisplay:noneに
 * なるため実質的に二重の対応になるが、テーマに依存しない独立動作
 * （§14）を保証するため、このプラグイン自身でも明示的に同じ基準で
 * 非表示にする。スマートフォン本文への自動広告挿入は行わない。
 */
@media (max-width: 899px) {
	.msa-card {
		display: none;
	}
}