/* ==========================================================
   DONATION POST
   Single posts assigned to the "Donacije" category
========================================================== */

.single-post {
	--im-donation-content-width: 980px;
	--im-donation-section-gap: clamp(48px, 6vw, 76px);
}


/* ==========================================================
   DONATION PAGE WRAPPER
========================================================== */

.single-post .im-donation-page {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.single-post .im-donation-page > * {
	margin-top: 0;
}


/* ==========================================================
   DONATION BODY
========================================================== */

.single-post .im-donation-body {
	display: flow-root;

	width: min(
		calc(100% - clamp(32px, 8vw, 128px)),
		var(--im-donation-content-width)
	);
	max-width: var(--im-donation-content-width);
	margin-inline: auto !important;
	padding-top: var(--im-donation-section-gap);
	padding-bottom: clamp(32px, 4vw, 52px);
}

/*
 * Override Gutenberg constrained-layout widths.
 * The floated image keeps its own width, while text blocks
 * use the full available content width.
 */
.single-post .im-donation-body > :where(
	:not(.alignleft):not(.alignright):not(.alignfull)
) {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

.single-post .im-donation-body > :first-child {
	margin-top: 0;
}

.single-post .im-donation-body > :last-child {
	margin-bottom: 0;
}


/* ==========================================================
   PROOF OF PAYMENT
========================================================== */

.single-post .im-donation-proof {
	float: left;

	width: min(37%, 360px);
	max-width: 360px;
	margin:
		0
		clamp(28px, 4vw, 46px)
		28px
		0 !important;
}

.single-post .im-donation-proof a {
	display: block;

	cursor: zoom-in;
}

.single-post .im-donation-proof img {
	display: block;

	width: 100%;
	height: auto;
}


/* ==========================================================
   TEXT
========================================================== */

.single-post .im-donation-body > p {
	margin-block: 0 !important;

	color: var(--im-ink-a82);
	font-size: 16px;
	line-height: 1.75;
}

.single-post .im-donation-body > p + p {
	margin-top: 15px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {
	.single-post .im-donation-body {
		width: min(
			calc(100% - 40px),
			var(--im-donation-content-width)
		);
	}

	.single-post .im-donation-proof {
		width: min(42%, 330px);
		margin-right: 32px !important;
	}
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 689px) {
	.single-post .im-donation-body {
		width: calc(100% - 32px);
		padding-top: 36px;
		padding-bottom: 44px;
	}

	.single-post .im-donation-proof {
		float: none;

		width: min(100%, 520px);
		max-width: none;
		margin:
			0
			auto
			28px !important;
	}

	.single-post .im-donation-body > p {
		font-size: 15px;
		line-height: 1.7;
	}

	.single-post .im-donation-body > p + p {
		margin-top: 12px !important;
	}
}