/**
 * Icon CTA (blog sidebars) — variables set on .bb-icon-cta via acf-blog-icon-cta.php
 *
 * @package blueprint-blogs
 */

.bb-icon-cta {
	box-sizing: border-box;
	--bb-ib-card-border-width: 0px;
	--bb-ib-card-border-color: transparent;
	--bb-ib-card-border-color-hover: var(--bb-ib-card-border-color);
	/* Layout / typography: PHP in wp_head sets most; these match safe defaults. */
	--bb-ib-title-text-align: left;
	--bb-ib-content-text-align: left;
	--bb-ib-title-justify: flex-start;
	--bb-ib-icon-align-self: center;
	--bb-ib-row-align-items: flex-start;
	--bb-ib-icon-rest-bg: transparent;
}

/*
 * The child theme’s icon-boxes.css targets .icon-box-wrapper with border-left and extra
 * left padding. Higher specificity and explicit reset so blog sidebars never show that rule.
 */
.bb-icon-cta .icon-box-wrapper {
	width: 100%;
	/* Beat global .icon-box-wrapper rules from theme icon-boxes.css (same class names) */
	border: none !important;
	border-left: none !important;
	padding: 0 !important;
	padding-left: 0 !important;
}

.bb-icon-cta .icon-box-grid {
	display: flex;
	flex-direction: column;
	gap: var(--bb-ib-gap);
}

.bb-icon-cta .icon-box-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	border-radius: var(--bb-ib-border-radius);
	overflow: hidden;
	box-sizing: border-box;
	/* Card frame (outer border) — 0 / transparent when disabled in ACF */
	border: var(--bb-ib-card-border-width) solid var(--bb-ib-card-border-color);
	transition: all 0.3s ease;
}

.bb-icon-cta .icon-box-item.has-full-link:hover,
.bb-icon-cta .icon-box-item:not(.has-full-link):hover {
	border-color: var(--bb-ib-card-border-color-hover);
}

.bb-icon-cta .icon-box-item:not(.has-full-link) {
	padding: var(--bb-ib-padding);
}

.bb-icon-cta .icon-box-icon {
	flex-shrink: 0;
	width: var(--bb-ib-icon-size);
	height: var(--bb-ib-icon-size);
	border-radius: var(--bb-ib-icon-shape);
	border: var(--bb-ib-border-width) solid var(--bb-ib-icon-color);
	background-color: var(--bb-ib-icon-rest-bg, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--bb-ib-icon-font-size);
	color: var(--bb-ib-icon-border-color);
	transition: all 0.3s ease;
}

/* None (icon only): no frame—font size + Icon Color only; hover uses hover icon color. */
.bb-icon-cta--shape-none .icon-box-icon {
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--bb-ib-icon-color);
}

.bb-icon-cta--shape-none .icon-box-item.has-full-link:hover .icon-box-icon,
.bb-icon-cta--shape-none .icon-box-item:not(.has-full-link):hover .icon-box-icon {
	color: var(--bb-ib-hover-icon-color);
	background-color: var(--bb-ib-hover-icon-bg);
}

.bb-icon-cta .icon-box-content {
	flex: 1;
}

/* Button link: title/copy + CTA stack vertically; row beside icon stays horizontal */
.bb-icon-cta .icon-box-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	align-items: stretch;
	gap: 12px;
}

.bb-icon-cta .icon-box-body .icon-box-content {
	flex: 0 1 auto;
	width: 100%;
}

.bb-icon-cta .icon-box-body .bb-ica-btn {
	align-self: flex-start;
}

/* Preset/text: Blueprint `rw_render_buttons()` — global per-type icons */
.bb-icon-cta .icon-box-body .rw-btns.bb-ica-rw-btns {
	display: inline-flex;
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
}

.bb-icon-cta .icon-box-title {
	margin: 0 0 12px 0;
	color: var(--bb-ib-title-color);
}

.bb-icon-cta .icon-box-snippet {
	margin: 0;
	color: var(--bb-ib-content-color);
}

.bb-icon-cta .icon-box-snippet p {
	margin: 0;
	color: var(--bb-ib-content-color);
}

.bb-icon-cta .icon-box-full-link {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	text-decoration: none;
	color: inherit;
	width: 100%;
	padding: var(--bb-ib-padding);
	transition: background-color 0.3s ease;
}

.bb-icon-cta .icon-box-item {
	background-color: var(--bb-ib-bg-color);
}

/* Icon position: left of title and text (default) */
.bb-icon-cta--icon-left .icon-box-content {
	padding-top: 8px;
}

/* Above title and text: stack icon first */
.bb-icon-cta--icon-above .icon-box-item,
.bb-icon-cta--icon-above .icon-box-full-link {
	flex-direction: column;
	align-items: stretch;
}

.bb-icon-cta--icon-above .icon-box-icon {
	align-self: var(--bb-ib-icon-align-self, center);
}

.bb-icon-cta--icon-above .icon-box-content {
	padding-top: 0;
}

/* Below title and text: title + copy first, icon last */
.bb-icon-cta--icon-below .icon-box-item,
.bb-icon-cta--icon-below .icon-box-full-link {
	flex-direction: column;
	align-items: stretch;
}

.bb-icon-cta--icon-below .icon-box-item:not(.has-button-link) .icon-box-content {
	order: 1;
	padding-top: 0;
}

.bb-icon-cta--icon-below .icon-box-item.has-button-link .icon-box-body {
	order: 1;
	padding-top: 0;
}

.bb-icon-cta--icon-below .icon-box-icon {
	order: 2;
	align-self: var(--bb-ib-icon-align-self, center);
}

.bb-icon-cta .icon-box-item.has-full-link:hover .icon-box-full-link {
	background-color: var(--bb-ib-hover-bg);
	text-decoration: none;
}

.bb-icon-cta .icon-box-item.has-full-link:hover .icon-box-icon {
	background-color: var(--bb-ib-hover-icon-bg);
	color: var(--bb-ib-hover-icon-color);
	border-color: var(--bb-ib-hover-icon-border-color);
	text-decoration: none;
}

.bb-icon-cta .icon-box-item.has-full-link:hover .icon-box-title {
	color: var(--bb-ib-hover-title-color);
}

.bb-icon-cta .icon-box-item.has-full-link:hover .icon-box-snippet {
	color: var(--bb-ib-hover-content-color);
	text-decoration: none;
}

.bb-icon-cta .icon-box-title-link {
	color: var(--bb-ib-title-color);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: color 0.3s ease;
}

.bb-icon-cta .icon-box-title-link:hover {
	color: var(--bb-ib-hover-title-link-color);
}

.bb-icon-cta .icon-box-arrow {
	display: inline-block;
	transition: transform 0.3s ease;
	font-size: 30px;
}

.bb-icon-cta .icon-box-title-link:hover .icon-box-arrow {
	color: var(--bb-ib-hover-title-link-color);
}

@media (max-width: 992px) {
	.bb-icon-cta .icon-box-wrapper {
		border: none !important;
		border-left: none !important;
		padding: 1.25rem 0 !important;
		padding-left: 0 !important;
	}
}

@media (max-width: 768px) {
	.bb-icon-cta .icon-box-grid {
		gap: 20px;
	}

	.bb-icon-cta .icon-box-item {
		gap: 16px;
	}

	.bb-icon-cta .icon-box-full-link {
		padding: 16px;
	}

	.bb-icon-cta .icon-box-item:not(.has-full-link) {
		padding: 16px;
	}

	.bb-icon-cta .icon-box-icon {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}

	.bb-icon-cta--shape-none .icon-box-icon {
		width: auto;
		height: auto;
	}

	.bb-icon-cta .icon-box-arrow {
		font-size: 20px;
	}
}

/* ── Button link style ──────────────────────────────────────────────────────── */
.bb-icon-cta .bb-ica-btn {
	display: inline-flex;
	align-items: center;
	align-self: var(--bb-ib-title-justify, flex-start);
	max-width: 100%;
	margin-top: 0;
	padding: var(--bb-ib-btn-padding, 10px 20px);
	background:
		var(--bb-ib-btn-bg, transparent) padding-box,
		var(--bb-ib-btn-border, currentColor) border-box;
	color: var(--bb-ib-btn-text, inherit) !important;
	border: var(--bb-ib-btn-border-width, 1px) solid transparent;
	border-radius: var(--bb-ib-btn-radius, 4px);
	text-decoration: none;
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.bb-icon-cta .bb-ica-btn:hover,
.bb-icon-cta .bb-ica-btn:focus {
	background:
		var(--bb-ib-btn-bg-hover, var(--bb-ib-btn-bg, transparent)) padding-box,
		var(--bb-ib-btn-border-hover, var(--bb-ib-btn-border, currentColor)) border-box;
	color: var(--bb-ib-btn-text-hover, var(--bb-ib-btn-text, inherit)) !important;
}