/* =callout alternate block */

.block-callout-alternate {
	border: 2px solid var(--wp--preset--color--secondary);
}

.editor-styles-wrapper .wp-block-cwp-callout-alternate.has-background {
	padding: 0; /* to get rid of editor styles on outer ACF wrapper block */
}

.block-callout-alternate .block-callout-alternate__inner p.block-callout-alternate__title,
.block-callout-alternate .block-callout-alternate__inner > h2:first-child,
.block-callout-alternate .block-callout-alternate__inner > h3:first-child {
	font-size: var(--wp--preset--font-size--huge);
	font-family: var(--wp--preset--font-family--primary);
	line-height: var(--wp--custom--line-height--small);
	font-weight: 700;
	margin-bottom: 0;
}

.block-callout-alternate .block-callout-alternate__inner p.block-callout-alternate__title + p,
.block-callout-alternate .block-callout-alternate__inner > h2:first-child + p,
.block-callout-alternate .block-callout-alternate__inner > h3:first-child + p {  /* spacing between title and content */
	margin-top: 10px;
}

/* when post listing block isn't the first child, reduce top margin */
.block-callout-alternate .cwp-inner > .cwp-large:not(:first-child){
	margin-top: var(--wp--style--block-gap);
}

@media only screen and (max-width: 767px) {
	/* it might or might not have a background and we need to have enough specificity when it does */
	.block-callout-alternate,
	.block-callout-alternate.has-background {
		padding: 16px 16px;
	}
}

@media only screen and (min-width: 768px) {
	/* it might or might not have a background and we need to have enough specificity when it does */
	.block-callout-alternate,
	.block-callout-alternate.has-background {
		padding: 28px 32px 28px;
	}
}