/** Reusable page blocks. Values inherit the active Directory Design Studio. */

.snm-frontend .snm-reusable-region {
	display: grid;
	gap: clamp(16px, 2.5vw, 28px);
	width: 100%;
	min-width: 0;
	padding-block: clamp(18px, 3vw, 34px);
}

.snm-frontend .snm-reusable-region:empty {
	display: none;
}

.snm-frontend .snm-reusable-block {
	position: relative;
	isolation: isolate;
	width: min(calc(100% - clamp(32px, 6.8vw, 96px)), var(--snm-directory-wide, 1320px));
	margin-inline: auto;
	border: 1px solid var(--snm-design-border, #d9e3df);
	border-radius: var(--snm-directory-radius, 22px);
	background-color: var(--snm-design-surface, #fff);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 16px 45px rgba(9, 45, 48, .08);
	color: var(--snm-design-text, #102a2e);
	overflow: hidden;
}

.snm-frontend .snm-reusable-block--width-content {
	max-width: 820px;
}

.snm-frontend .snm-reusable-block--width-full {
	width: 100%;
	max-width: none;
	border-right-width: 0;
	border-left-width: 0;
	border-radius: 0;
}

.snm-frontend .snm-reusable-block__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.snm-frontend .snm-reusable-block--spacing-compact .snm-reusable-block__inner {
	padding: clamp(18px, 2.5vw, 28px);
}

.snm-frontend .snm-reusable-block--spacing-normal .snm-reusable-block__inner {
	padding: clamp(26px, 4vw, 48px);
}

.snm-frontend .snm-reusable-block--spacing-spacious .snm-reusable-block__inner {
	padding: clamp(38px, 6vw, 76px);
}

.snm-frontend .snm-reusable-block--align-center {
	text-align: center;
}

.snm-frontend .snm-reusable-block--align-center .snm-reusable-block__content > :where(ul, ol) {
	display: inline-block;
	text-align: left;
}

.snm-frontend .snm-reusable-block--accent {
	border-color: color-mix(in srgb, var(--snm-brand, #087a72) 35%, transparent);
	background: var(--snm-design-accent-soft, #e5f5f1);
}

.snm-frontend .snm-reusable-block--dark {
	border-color: rgba(255, 255, 255, .12);
	background: var(--snm-brand-deep, #082f34);
	color: #f6fffc;
}

.snm-frontend .snm-reusable-block--dark :where(h2, h3, h4, h5, h6, a) {
	color: #fff;
}

.snm-frontend .snm-reusable-block--outline {
	border: 2px solid var(--snm-brand, #087a72);
	background: transparent;
	box-shadow: none;
}

.snm-frontend .snm-reusable-block--transparent {
	border-color: transparent;
	background: transparent;
	box-shadow: none;
}

.snm-frontend .snm-reusable-block__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: var(--snm-block-overlay, rgba(7, 29, 33, .35));
	pointer-events: none;
}

.snm-frontend .snm-reusable-block:has(.snm-reusable-block__overlay) {
	color: #fff;
}

.snm-frontend .snm-reusable-block:has(.snm-reusable-block__overlay) :where(h2, h3, h4, h5, h6, a) {
	color: #fff;
}

.snm-frontend .snm-reusable-block__title {
	margin: 0 0 clamp(14px, 2vw, 22px);
	color: var(--snm-design-heading, #0b2529);
}

.snm-frontend .snm-reusable-block__content > :first-child {
	margin-top: 0;
}

.snm-frontend .snm-reusable-block__content > :last-child {
	margin-bottom: 0;
}

.snm-frontend .snm-reusable-block__content :where(img, video, iframe) {
	max-width: 100%;
	height: auto;
}

.snm-frontend .snm-reusable-block__content iframe {
	width: 100%;
}

.snm-frontend .snm-directory-shell > .snm-reusable-region {
	padding-block: 0;
}

.snm-frontend .snm-directory-shell > .snm-reusable-region .snm-reusable-block {
	width: 100%;
}

@supports not selector(:has(*)) {
	.snm-frontend .snm-reusable-block__overlay + .snm-reusable-block__inner,
	.snm-frontend .snm-reusable-block__overlay + .snm-reusable-block__inner :where(h2, h3, h4, h5, h6, a) {
		color: #fff;
	}
}

@media (max-width: 640px) {
	.snm-frontend .snm-reusable-region {
		padding-block: 16px;
	}

	.snm-frontend .snm-reusable-block {
		width: calc(100% - 28px);
		border-radius: 16px;
	}

	.snm-frontend .snm-reusable-block--width-full {
		width: 100%;
		border-radius: 0;
	}
}