/*
 * blocks-custom.css — モノクロ独自ブロック（STEP10）の見た目。
 *
 * 責任範囲: monokuro/cta, monokuro/product-card,
 * monokuro/product-card-button, monokuro/pr-badge のフロント表示と
 * エディタ内プレビュー。
 *
 * 既存の .btn / .btn--primary / .btn--secondary / .badge / .badge--pr /
 * カードの設計思想（border・radius-md・shadow-cardの使い方）をそのまま
 * 再利用し、ここで新しい色・角丸・ボタンデザインは追加しない
 * （STEP10承認条件）。フォーカス表示は base.css の
 * a:focus-visible / button:focus-visible が全ての <a>/<button> に
 * 既に適用されるため、本ファイルでの追加定義は不要。
 */

/* ---------- monokuro/cta ---------- */

.monokuro-cta {
	background: var(--color-accent-tint);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	margin: 0 0 var(--space-6);
	max-width: var(--wide-width);
}

.monokuro-cta__title {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--space-2);
}

.monokuro-cta__text {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-4);
}

.monokuro-cta .btn {
	margin: 0;
}

/* ---------- monokuro/product-card ---------- */
/* 既存.cardと同じ視覚語彙（白背景・境界線・radius-md）を踏襲しつつ、
   全体をリンク化するcard__linkとは異なり、リンクはASPボタン単位で持つ。 */

.product-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	margin: 0 0 var(--space-6);
	max-width: var(--content-width);
}

.product-card__pr {
	display: inline-block;
	margin: var(--space-4) 0 0 var(--space-4);
}

.product-card__media {
	aspect-ratio: 3 / 2;
	background: var(--color-surface);
	overflow: hidden;
	margin-top: var(--space-3);
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__body {
	padding: var(--space-4);
}

.product-card__name {
	font-size: var(--font-size-lead);
	font-weight: var(--font-weight-bold);
	margin: 0 0 var(--space-2);
}

.product-card__description {
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-4);
}

/* ASPボタン群: 複数ASPを対等な重みで並べる（特定ASPを主要ボタン化しない）。
   狭幅では1カラム、それ以外はflex-wrapで自然に折り返す。 */

.product-card__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.product-card__button {
	flex: 1 1 160px;
	text-align: center;
}

@media (max-width: 479px) {
	.product-card__buttons {
		flex-direction: column;
	}

	.product-card__button {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* ---------- エディタ内プレビュー ---------- */
/* フロント用クラス（.product-card等）とは意図的に別名にし、
   編集画面固有のレイアウト崩れを本番用CSSに混入させない。 */

.monokuro-cta-editor__preview,
.product-card-editor__preview {
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-top: var(--space-3);
}

.monokuro-cta-editor__warning {
	color: var(--color-accent);
	font-size: var(--font-size-sm);
	margin: var(--space-2) 0 0;
}

.product-card-editor__media-control {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.product-card-editor__image {
	max-width: 240px;
	border-radius: var(--radius-sm);
	margin: var(--space-3) 0;
}

.product-card-editor__hint {
	font-size: var(--font-size-caption);
	color: var(--color-text-muted);
	margin: var(--space-1) 0 var(--space-3);
}

.product-card-editor__buttons {
	margin-top: var(--space-3);
}

.product-card-button-editor {
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-3);
}

.product-card-button-editor__preview {
	display: inline-block;
	margin-top: var(--space-2);
	pointer-events: none;
}

.monokuro-pr-badge-editor__label-control {
	margin-top: var(--space-2);
	max-width: 240px;
}