.hb-citat {
	--hb-citat-colors-default-background: #ffffff;
	--hb-citat-colors-emphasizing: #00a651;
	--hb-citat-colors-tinge: #f0f3f2;
	--hb-citat-line-height: 1.3;
	--hb-citat-vr-base: calc(var(--hb-citat-line-height) * 1rem);
}

.hb-citat {
	position: relative;
	min-height: 18rem;
	max-inline-size: 47.5rem;
	margin-inline: calc(var(--hb-citat-vr-base) * -1);
	margin-block: var(--hb-citat-vr-base);
	padding: calc(var(--hb-citat-vr-base) * 8) var(--hb-citat-vr-base) var(--hb-citat-vr-base);
	background-color: var(--hb-citat-colors-tinge);
	overflow: hidden; /* prevent background-image to go out of set border-radius */

	isolation: isolate;
	--hb-citat-image: url(https://brontosaurus.cz/wp-content/themes/brontosaurus-theme/frontend/dist/images/logo-hb-brontosaurus.svg); /* default */
}
@media (min-width: 39.001em) { /* $header-breakpoint-navigationHiddenToVisible */
	.hb-citat {
		margin-inline: calc(var(--hb-citat-vr-base) * -2);
	}
}
@media (min-width: 50.001em) {
	.hb-citat {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: calc(var(--hb-citat-vr-base) * 2);
		margin-left: auto;
		margin-right: auto;
		border-radius: 2em;
		background-color: transparent;
	}
}

.hb-citat::before {
	content: "";
	display: block;
	width: 50%;
	height: calc(var(--hb-citat-vr-base) * 7); /* we need it in line height unit as we use padding-top on the text below */
	position: absolute;
	top: 0;
	left: 0;
	background-image: var(--hb-citat-image);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (min-width: 50.001em) {
	.hb-citat::before {
		height: 100%;
		z-index: -1;
	}
}
.hb-citat:not(.hb-citat--right)::before {
	left: 50%;
}

.hb-citat::after {
	left: 0;
}
.hb-citat--right::after {
	left: initial;
	right: 0;
}
@media (min-width: 50.001em) {
	.hb-citat::after {
		content: "";
		display: block;
		width: 50%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: -1;
		background-color: var(--hb-citat-colors-tinge);
	}
}

.hb-citat__text {
	margin: 0;
	z-index: 2; /* so that text doesn't hide when clicked onto block area in gutenberg */
}
.hb-citat__text:not(:last-child) {
	margin-block-end: calc(var(--hb-citat-vr-base) * 0.5);
}
@media (min-width: 50.001em) {
	.hb-citat__text {
		max-width: calc(50% - calc(var(--hb-citat-vr-base) * 2));
	}
}
@media (min-width: 50.001em) {
	.hb-citat--right .hb-citat__text {
		margin-inline-start: calc(50% + calc(var(--hb-citat-vr-base) * 2));
	}
}


.hb-citat__quotation {
	font-style: italic;
	margin-block-end: var(--hb-citat-vr-base);
	position: relative;
}
.hb-citat__quotation::before {
	 content: "„";

	/* hanging punctuation */
	position: absolute;
	left: -0.4em;
}
.hb-citat__quotation::after {
	content: "“";
}
.hb-citat__quotation .rich-text {
	display: inline;
}


.hb-citat__person {
	font-size: 0.8em;
	text-align: right;
	line-height: var(--hb-citat-line-height);
	color: #444;
}