/*
 * CTA（picico-core / modules/cta）
 *
 * 値は picico-theme の tokens.css（--picico-*）から取る。
 * テーマが picico-theme でないときのために、var() の第 2 引数でフォールバックを置く。
 * !important は使わない（CLAUDE.md）。
 * .pc-btn の基本形はテーマの components.css が持つ。ここではテーマが無いときの
 * 最低限の体裁だけを :where() で補い、テーマ側の指定に勝たないようにする。
 */

.pc-cta {
	margin-block: var(--picico-space-xl, 3rem) 0;
	padding: var(--picico-space-md, 1.5rem);
	border: var(--picico-border-width, 1px) solid var(--picico-color-border, #dce2e0);
	border-top: var(--picico-border-width-accent, 4px) solid var(--picico-color-primary, #2b7a5e);
	border-radius: var(--picico-radius-md, 12px);
	background: var(--picico-color-surface-alt, #f5f7f6);
	text-align: center;
}

.pc-cta__title {
	margin: 0 0 var(--picico-space-xs, 0.5rem);
	color: var(--picico-color-text, #22282a);
	font-family: var(--picico-font-heading, sans-serif);
	font-size: var(--picico-font-size-lg, 1.125rem);
	font-weight: var(--picico-font-weight-bold, 700);
	line-height: var(--picico-line-height-heading, 1.4);
}

.pc-cta__body {
	margin: 0 0 var(--picico-space-md, 1.5rem);
	color: var(--picico-color-text, #22282a);
	font-size: var(--picico-font-size-sm, 0.875rem);
	line-height: var(--picico-line-height-body, 1.9);
	text-align: left;
}

.pc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--picico-space-xs, 0.5rem);
	justify-content: center;
	margin: 0;
}

.pc-cta__actions .pc-btn {
	flex: 1 1 14rem;
	max-width: 100%;
}

.pc-cta__note {
	margin: var(--picico-space-sm, 1rem) 0 0;
	color: var(--picico-color-text-muted, #5b6668);
	font-size: var(--picico-font-size-xs, 0.75rem);
}

/* テーマが .pc-btn を持たない場合の最低限の体裁。specificity は :where() で 0 にする。 */
:where(.pc-cta__actions) .pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--picico-tap-size, 2.75rem);
	padding: 0.75rem 1.25rem;
	border-radius: var(--picico-radius-pill, 999px);
	font-weight: var(--picico-font-weight-bold, 700);
	text-decoration: none;
}

:where(.pc-cta__actions) .pc-btn--accent {
	/* 白文字を載せるので、橙の濃い塗り（4.5:1 以上）を使う。テーマ無しでも同じ値にフォールバック */
	background: var(--picico-color-accent-fill, #bd5117);
	color: var(--picico-color-on-accent, #fff);
}

:where(.pc-cta__actions) .pc-btn--outline {
	border: var(--picico-border-width, 1px) solid var(--picico-color-primary, #2b7a5e);
	background: var(--picico-color-surface, #fff);
	color: var(--picico-color-primary, #2b7a5e);
}

@media (min-width: 48em) {
	.pc-cta {
		padding: var(--picico-space-lg, 2rem);
	}

	.pc-cta__body {
		text-align: center;
	}

	.pc-cta__actions .pc-btn {
		flex: 0 1 auto;
	}
}