/**
 * No.30 共通 CTA（cta）。
 * Figma: 789:12623。
 *
 * __inner
 *   __figure（logo）
 *   __detail
 *     __body（紹介文）
 *     __foot
 *       __certification（すみだモダン認証の文言）
 *       __actions（公式 SNS + 問い合わせ）
 *
 * テーマのパターン版は __foot に公式 SNS と問い合わせを直接並べる（1段）。
 * 縦2段は __foot が __certification / __actions を持つときだけ。
 */

.cta,
.cta * {
	box-sizing: border-box;
}

.cta,
.cta .wp-block-group,
.cta .wp-block-buttons,
.cta .wp-block-button,
.cta .wp-block-paragraph {
	margin-top: 0;
	margin-bottom: 0;
}

.cta {
	width: 100%;
	color: var(--wp--preset--color--base-black);
	font-family: var(--wp--preset--font-family--jp-sans);
	background-color: var(--wp--preset--color--base-white);
	border-block-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
}

.cta__inner {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--custom--molecule--md);
	box-sizing: border-box;
	width: 100%;
	max-width: 64rem; /* 1024px */
	margin-inline: auto;
	padding-block: var(--wp--custom--organism--sm);
}

.cta__figure {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	width: 17.5rem; /* 280px */
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.cta__logo {
	display: block;
	color: inherit;
	text-decoration: none;
}

.cta__logo:focus {
	outline: none;
}

.cta__logo:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.cta__logo-img {
	display: block;
	width: 16.5rem; /* 264px */
	height: 3.5625rem; /* 57px */
	object-fit: contain;
}

.cta__detail {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
}

.cta__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	box-sizing: border-box;
	width: 100%;
	padding: var(--wp--custom--atom--xxl, 1rem);
	border-block-start: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
	border-block-end: var(--wp--custom--border-width--thin, 1px) solid var(--wp--preset--color--line-grey);
}

.cta__body > p,
.cta__body > .wp-block-paragraph {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 2;
}

.cta__foot {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--custom--molecule--rg, 1.5rem);
	width: 100%;
	max-width: 100%;
}

.cta__foot:has(> .cta__certification, > .cta__actions) {
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	gap: var(--wp--custom--molecule--rg, 1.5rem);
}

.cta__certification {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--atom--md, 0.625rem);
	max-width: 100%;
}

.cta__certification-text {
	margin: 0;
	color: var(--wp--preset--color--base-black);
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: var(--wp--custom--line-height--regular, 1.5);
}

.cta__certification-link {
	color: inherit;
	text-decoration: underline;
	text-underline-position: from-font;
}

.cta__certification-link:focus {
	outline: none;
}

.cta__certification-link:focus-visible {
	outline: 1px solid var(--wp--preset--color--logo-blue);
	outline-offset: 2px;
}

.cta__certification-break {
	display: none;
}

.cta__actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 2rem; /* 32px */
	max-width: 100%;
}

.cta__sns {
	display: flex;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	gap: var(--wp--custom--atom--md, 0.625rem);
	min-height: 0;
}

.cta__sns-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--text-xs);
	font-weight: var(--wp--custom--font-weight--regular, 400);
	line-height: 1;
	white-space: nowrap;
}

.cta .sns-links,
.cta .sns-links[data-layout="horizontal"] {
	align-self: center;
	align-items: center;
	flex: 0 0 auto;
	height: auto;
	min-height: 0;
	gap: var(--wp--custom--atom--xs, 0.25rem);
}

.cta .sns-links__item {
	display: flex;
	align-items: center;
	align-self: center;
	flex: 0 0 auto;
	line-height: 0;
}

.cta .sns-links__link {
	flex: 0 0 auto;
	align-self: center;
	inline-size: 2rem; /* 32px */
	block-size: 2rem;
}

.cta .sns-links__link .icon {
	top: 0;
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.cta__action .wp-block-button,
.cta__action .wp-block-button__link,
.cta__foot .wp-block-buttons,
.cta__foot .wp-block-button,
.cta__foot .wp-block-button__link {
	margin: 0;
}

/* PC: 1行目 ロゴ＋本文、2行目 公式SNS＋ボタン（全幅右寄せ） */
@media (min-width: 768px) {
	.cta .cta__inner {
		display: grid;
		grid-template-columns: 17.5rem minmax(0, 1fr);
		grid-template-areas:
			"figure body"
			"foot foot";
		align-items: center;
		column-gap: 0;
		row-gap: var(--wp--custom--molecule--md);
	}

	.cta .cta__detail {
		display: contents;
	}

	.cta .cta__figure {
		grid-area: figure;
	}

	.cta .cta__body {
		grid-area: body;
	}

	.cta .cta__foot {
		grid-area: foot;
	}
}

@media (max-width: 767px) {
	.cta .cta__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--custom--molecule--xxs);
		padding-inline: 0;
	}

	.cta .cta__figure {
		width: auto;
	}

	.cta .cta__detail {
		width: 100%;
		gap: 1.5rem;
	}

	.cta .cta__body {
		padding-inline: var(--wp--custom--molecule--rg);
	}

	.cta .cta__foot {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--wp--custom--atom--xxl);
		padding-inline: var(--wp--custom--molecule--rg);
	}

	.cta .cta__foot:has(> .cta__certification, > .cta__actions) {
		flex-wrap: nowrap;
		align-items: center;
		gap: 2rem; /* 32px */
	}

	.cta .cta__certification {
		justify-content: center;
	}

	.cta .cta__certification-text {
		text-align: center;
	}

	.cta .cta__certification-break {
		display: inline;
	}

	.cta .cta__actions {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--wp--custom--atom--xxl);
	}

	.cta .cta__action .btn,
	.cta .cta__action .wp-block-button__link {
		--sumida-btn-pad: var(--wp--custom--atom--rg);
		--sumida-btn-gap: var(--wp--custom--atom--rg);
		min-width: var(--wp--custom--sizing--button-min--xs);
		max-width: min(100%, var(--wp--custom--sizing--button-max--xs));
		font-size: var(--wp--preset--font-size--text-xs);
	}
}