/*
 * en2x Zitat – structural, instance-independent styles.
 *
 * Light box: round portrait left, large quote right (typographic marks added in
 * the template), name/function below, optional link. Background + text colour
 * come inline per instance; everything here is colour-agnostic (uses inherit).
 * The side gutter is the shared token so it aligns to the hero/container edge.
 * Font inherited (Rubik).
 */

.en2x-zitat {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	font-family: inherit;
}

/* Variant "standard": full-width article quote (portrait left). The left edge
 * bleeds to the screen (margin-left: 0); the right keeps the side gutter. The
 * inner left padding compensates the removed left margin so image/text stay
 * aligned with the rest of the content. */
.en2x-zitat--standard {
	flex-direction: row;
	margin: 25px var(--en2x-side-gutter, 20px) 57px 0;
	padding: 40px 40px 40px calc(var(--en2x-side-gutter, 20px) + 40px);
}

/* Variant "box": a contained box (no left bleed) with the side gutter on BOTH
 * sides, stacked layout (portrait on top), normal padding – sits and fills well
 * in any column, e.g. a 1/3 column. */
.en2x-zitat--box {
	flex-direction: column;
	gap: 24px;
	margin: 0 var(--en2x-side-gutter, 20px) 32px;
	padding: 32px;
}

/* Round portrait, cover-cropped to a square regardless of source ratio. */
.en2x-zitat__media {
	flex: 0 0 auto;
}

.en2x-zitat__img {
	display: block;
	width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: 50%;
}

.en2x-zitat__body {
	flex: 1 1 auto;
	min-width: 0;
}

.en2x-zitat__quote {
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
}

/* Margin + padding reset, scoped 3 classes deep so it beats the theme's global
 * <p> spacing (Salient adds both a bottom margin AND bottom padding to <p>),
 * even where those use !important. Without the padding reset the quote keeps a
 * large green padding box → big gap before the name. */
.en2x-zitat .en2x-zitat__body .en2x-zitat__quote {
	margin: 0 0 8px !important;
	padding: 0 !important;
}

.en2x-zitat .en2x-zitat__body .en2x-zitat__cite {
	margin: 0 !important;
	padding: 0 !important;
}

/* Size variants. */
.en2x-zitat--gross .en2x-zitat__quote {
	font-size: 30px;
}

.en2x-zitat--kleiner .en2x-zitat__quote {
	font-size: 20px;
}

.en2x-zitat__quote a {
	color: inherit;
}

.en2x-zitat__cite {
	font-size: 13px;
	font-weight: 600;
	color: inherit;
	opacity: 0.85;
}

.en2x-zitat__link {
	display: inline-block;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Responsive: stack (portrait on top) and tighten on mobile.
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.en2x-zitat {
		flex-direction: column;
		gap: 18px;
	}

	/* Standard keeps its left-aligned inner padding (compensating the bleed). */
	.en2x-zitat--standard {
		padding: 28px 28px 28px calc(var(--en2x-side-gutter, 20px) + 28px);
	}

	.en2x-zitat--box {
		padding: 28px;
	}

	.en2x-zitat__img {
		width: 96px;
		height: 96px;
	}

	.en2x-zitat--gross .en2x-zitat__quote {
		font-size: 22px;
	}

	.en2x-zitat--kleiner .en2x-zitat__quote {
		font-size: 18px;
	}
}