/*
 * AI service pages: original theme banner.
 * Heading, intro and breadcrumb inherit the theme's .inner-banner styles, as on
 * the Odoo and Business Intelligence pages. This file only adds the banner
 * buttons and resets spacing that the page content set for its old white hero.
 */

/* Buttons in the banner, matching the homepage "Book a Meeting" button */
.aranv-ai-banner .aranv-banner-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 30px;
	margin: 6px 0 34px;
}
.aranv-ai-banner .aranv-banner-btn {
	display: inline-block;
	min-width: 199px;
	height: 58px;
	padding: 0 28px;
	border-radius: 50px;
	background-color: #ef4036;
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #fff;
	-webkit-text-fill-color: #fff;
	font-size: 18px;
	font-weight: 500;
	line-height: 58px;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.aranv-ai-banner .aranv-banner-btn:hover,
.aranv-ai-banner .aranv-banner-btn:focus-visible {
	background-color: #fff;
	color: #000;
	-webkit-text-fill-color: #000;
}
.aranv-ai-banner .aranv-banner-link {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background-image: none;
	font-size: 18px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: #ef4036;
	text-underline-offset: 6px;
}
.aranv-ai-banner .aranv-banner-link:hover {
	color: #ef4036;
	-webkit-text-fill-color: #ef4036;
}
.aranv-ai-banner .aranv-banner-btn:focus-visible,
.aranv-ai-banner .aranv-banner-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* The page content forces top padding (with !important) to clear the header
   above its old white hero. The banner now does that, as on other pages. */
html body .cms-page-mid-main.aranv-ai-page-main,
html body .cms-page-mid-main.aranv-ai-page-main:has(.aranv-ai-review) {
	padding-top: 0 !important;
}

/* The workflow graphic stays as the first content block, centred. */
html body .aranv-ai-review .ai-hero.aranv-ai-hero-figure {
	display: block;
	padding: 80px 0 40px;
}
html body .aranv-ai-review .ai-hero.aranv-ai-hero-figure > figure {
	max-width: 860px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.aranv-ai-banner .aranv-banner-actions {
		gap: 14px 22px;
		margin-bottom: 24px;
	}
	.aranv-ai-banner .aranv-banner-btn {
		min-width: 0;
		height: 50px;
		line-height: 50px;
		padding: 0 24px;
		font-size: 17px;
	}
	.aranv-ai-banner .aranv-banner-link {
		font-size: 17px;
	}
	html body .aranv-ai-review .ai-hero.aranv-ai-hero-figure {
		padding: 40px 0 24px;
	}
}