/**
 * block grid layouting styles
 *
 * shoutout to [Robert Johnson](https://our.umbraco.com/member/280929) on Umbraco's community forum
 * for this example.
 * see https://our.umbraco.com/forum/using-umbraco-and-getting-started/112073-block-grid-how-to-make-it-mobile-friendly#comment-346153
 */
.umb-block-grid__layout-container {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
	grid-gap: 0px;
	grid-auto-flow: row;
	grid-auto-rows: minmax(50px, -webkit-min-content);
	grid-auto-rows: minmax(50px, min-content);
}

.umb-block-grid__layout-item {
	position: relative;
	/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
	grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
	grid-row: span var(--umb-block-grid--item-row-span, 1);
}
.umb-block-grid__layout-item[data-col-span="12"] > *:first-child {
		padding-top: 3em;
}

	.umb-block-grid__layout-item[data-force-left] {
		grid-column-start: 1;
	}

	.umb-block-grid__layout-item[data-force-right] {
		grid-column-start: calc(1 + var(--umb-block-grid--grid-columns) - var(--umb-block-grid--item-column-span));
	}

	.umb-block-grid__layout-item .richtext-block,
	.umb-block-grid__layout-item form {
		padding: 10px 0;
	}


.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
	grid-gap: 40px;
	grid-auto-flow: row;
	grid-auto-rows: minmax(50px, -webkit-min-content);
	grid-auto-rows: minmax(50px, min-content);
	width: 100%;
}

.umb-block-grid__area {
	position: relative;
	/* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
	grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
	grid-row: span var(--umb-block-grid--area-row-span, 1);
}

.umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item:not(.reduced-padding):not(.separator-below):not(:has(+ .umb-block-grid__layout-item.separator-above)) {
	padding-bottom: 3em;
}

.blockgrid-row.--fullwidth, .umb-block-grid__layout-item.--fullwidth {
	position: relative;
	width: 100vw;
	left: calc(-1 * (100vw - 100%)/2);
}

	.blockgrid-row.--fullwidth > .container, .umb-block-grid__layout-item.--fullwidth > .container {
		padding-top: 3em;
	}

.umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right):has( + .umb-block-grid__area), .umb-block-grid__area:has(+ .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left)) {
	margin-right: 40px;
}

.umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right) + .umb-block-grid__area, .umb-block-grid__area + .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left) {
	padding-left: 40px;
}

	.umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right) + .umb-block-grid__area::before, .umb-block-grid__area + .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left)::before {
		border-left: 1px solid var(--saturns-ring);
		height: 100%;
		content: "";
		display: block;
		width: 0px;
		position: absolute;
		left: 0;
	}
.has-med-bg .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right) + .umb-block-grid__area::before, .has-dark-bg .umb-block-grid__area + .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left)::before,
.has-dark-bg .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right) + .umb-block-grid__area::before, .has-dark-bg .umb-block-grid__area + .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left)::before,
footer .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right) + .umb-block-grid__area::before, footer .umb-block-grid__area + .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left)::before {
	border-left: 1px solid rgba(255,255,255,0.4);
}

.umb-block-grid__layout-item:has( > .separator-below) + .umb-block-grid__layout-item > .container::before,
.umb-block-grid__layout-item.separator-below + .umb-block-grid__layout-item > .container::before,
* + .umb-block-grid__layout-item:has(> .separator-above) > .container::before,
.umb-block-grid__layout-item.separator-above > .container::before {
	border-top: 1px solid var(--saturns-ring);
	width: calc(100% - 12px);
	content: "";
	display: block;
	height: 0px;
	position: relative;
	margin-bottom: 80px;
}
.has-dark-bg .umb-block-grid__layout-item:has( > .separator-below) + .umb-block-grid__layout-item > .container::before,
.has-dark-bg .umb-block-grid__layout-item.separator-below + .umb-block-grid__layout-item > .container::before,
.has-dark-bg * + .umb-block-grid__layout-item:has(> .separator-above) > .container::before,
.has-dark-bg .umb-block-grid__layout-item.separator-above > .container::before,
footer .umb-block-grid__layout-item:has( > .separator-below) + .umb-block-grid__layout-item > .container::before,
footer .umb-block-grid__layout-item.separator-below + .umb-block-grid__layout-item > .container::before,
footer * + .umb-block-grid__layout-item:has(> .separator-above) > .container::before,
footer .umb-block-grid__layout-item.separator-above > .container::before {
	border-top: 1px solid rgba(255,255,255,0.4);
}
.umb-block-grid__layout-item:has( > .separator-below.separator-dashed ) + .umb-block-grid__layout-item > .container::before,
.umb-block-grid__layout-item.separator-below.separator-dashed + .umb-block-grid__layout-item > .container::before,
* + .umb-block-grid__layout-item:has(> .separator-above.separator-dashed ) > .container::before,
.umb-block-grid__layout-item.separator-above.separator-dashed > .container::before {
	border-top-style: dashed;
}
.umb-block-grid__layout-item:has( > .separator-below.separator-dotted ) + .umb-block-grid__layout-item > .container::before,
.umb-block-grid__layout-item.separator-below.separator-dotted + .umb-block-grid__layout-item > .container::before,
* + .umb-block-grid__layout-item:has(> .separator-above.separator-dotted ) > .container::before,
.umb-block-grid__layout-item.separator-above.separator-dotted > .container::before {
	border-top-style: dotted;
}

.container .umb-block-grid .container {
	padding-left: 0;
	padding-right: 0;
}
.container .umb-block-grid .umb-block-grid__layout-item[data-col-span="12"] > .container > .richtext-block {
	margin-right: -15px;
	margin-left: -15px;
}

@media (min-width:1024px) {
	.umb-block-grid__layout-item {
		grid-column-end: span var(--umb-block-grid--item-column-span, 1);
	}

	.umb-block-grid__area {
		grid-column-end: span var(--umb-block-grid--area-column-span, 1);
	}
}

@media (max-width:991px) {
	.umb-block-grid__area-container {
		--umb-block-grid--area-grid-columns: 1 !important;
	}
	.umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right) + .umb-block-grid__area, .umb-block-grid__area + .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left) {
		padding-left: inherit;
		padding-top: 40px;
	}
	.umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-right) + .umb-block-grid__area::before, .umb-block-grid__area + .umb-block-grid__area:has(>.umb-block-grid__layout-container>.separator-left)::before {
		content: "";
		display: block;
		border-left: none;
		border-top: 1px solid var(--saturns-ring);
		height: 0px;
		width: 100%;
		position: absolute;
		left: unset;
		top: 0;
	}
}