/* Audience-specific intro below the hero of hospitalcampus.php (src/Template/hospitalcampus/audienceIntro.php). */

.rd-audience-intro {
	/* the variant carries Figma's 24px side padding itself, instead of container-fluid's 15px */
	padding-left: 0;
	padding-right: 0;
	color: var(--rd-font-dark);
	text-align: center;
}

.rd-audience-intro-variant {
	padding: var(--rd-spacing-x-big) var(--rd-spacing-x-big) 0;
}

.rd-audience-intro-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: var(--rd-spacing-md);
}

.rd-audience-intro-header h2 {
	font-size: var(--rd-fontsize-14);
	line-height: var(--rd-lineheights-0);
	font-weight: var(--rd-fontweights-open-sans-0);
	margin: 0;
}

.rd-audience-intro-badge {
	padding: 7px 14px;
	border-radius: var(--rd-borderradius-pill);
	background-color: var(--rd-hc-blue-50);
	color: var(--rd-hc-blue-500);
	font-size: var(--rd-fontsize-4);
	line-height: 20px;
	font-weight: var(--rd-fontweights-open-sans-1);
}

.rd-audience-intro-text {
	max-width: 880px;
	margin: 0 auto var(--rd-spacing-md);
	color: var(--rd-hc-text-subtle);
	font-size: var(--rd-fontsize-6);
	line-height: 30px;
}

.rd-audience-intro-features-wrapper {
	display: flex;
	justify-content: center;
}

/* Figma "Features": three fixed-width teasers spread over the full width. */
.rd-audience-intro-features {
	max-width: 1450px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 386px));
	justify-content: space-between;
	gap: var(--rd-spacing-lg);
	padding: var(--rd-spacing-x-big) 0;
}

.rd-audience-intro .rd-feature-element {
	width: auto;
}

.rd-audience-intro-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	margin-bottom: var(--rd-spacing-md);
	background: url(/src/img/2024/images/hc-feature-blob.png) center / contain no-repeat;
}

.rd-audience-intro-icon span::before {
	width: 56px;
	height: 56px;
	margin-right: 0;
	background-color: var(--rd-hc-blue-800);
}

/* The titles break onto two lines; the box keeps the texts below them aligned across the row. */
.rd-audience-intro .rd-feature-title {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 72px;
	color: var(--rd-neutral-900);
	letter-spacing: 0.01em;
}

.rd-audience-intro .rd-feature-text {
	letter-spacing: 0.01em;
}

.rd-audience-intro-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rd-spacing-md);
	padding-bottom: calc(var(--rd-spacing-lg) + var(--rd-spacing-md)); /* 56px */
}

/* Figma "Beratung anfordern (Secondary)": the grey Untitled UI secondary button. Not a modified
   rd-primary-btn-outline — Button.css sets every property of that one !important. */
.rd-audience-intro-secondary-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	padding: 9px var(--rd-spacing-md);
	border: var(--rd-borderwidth-border-default) solid var(--rd-button-secondary-border);
	border-radius: 20px;
	background-color: var(--rd-bg-primary);
	color: var(--rd-button-secondary-text);
	font-size: var(--rd-fontsize-4);
	line-height: 20px;
	font-weight: var(--rd-fontweights-open-sans-1);
}

.rd-audience-intro-secondary-btn:hover,
.rd-audience-intro-secondary-btn:focus-visible {
	background-color: var(--rd-list-default-dark);
	color: var(--rd-button-secondary-text);
	text-decoration: none;
}

@media (max-width: 991px) {
	.rd-audience-intro-features {
		grid-template-columns: minmax(0, 386px);
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.rd-audience-intro-header h2 {
		font-size: var(--rd-fontsize-11);
	}
}