/* Reacties layout — placeholder for future styling. */
.reacties-layout {
	--button-bg-1: var(--fdhl-red-dark);
	--button-bg-1-hover: var(--fdhl-red-darker);
	--pk-heading-color: #ffffff;
	background-color: var(--fdhl-red-dark);
	color: #ffffff;
	padding-bottom: max(4rem, 6 * var(--su));
}

.reacties-layout .pk-grid-container {
	padding-block: max(2rem, calc(5 * var(--su)));
	background-color: var(--fdhl-red);
	border-radius: 0.75rem;
}
.reacties-layout #commentform > p:not(.logged-in-as):not(.comment-form-cookies-consent) {
	display: flex;
	flex-direction: column;
}
.reacties-layout #commentform > .logged-in-as a {
	color: #ffffff;
	font-weight: 700;
}
.reacties-layout #commentform > .comment-notes {
	font-size: var(--desktop-body-xs);
	margin-bottom: 0.5em;
}
.reacties-layout #commentform .comment-form-cookies-consent {
	flex-direction: row;
}
.reacties-layout #commentform input[type="submit"] {
	width: fit-content;
}

.reacties-layout .content-col > h3.pk-heading {
	border-bottom: 1px solid rgba(255,255,255,0.5);
	padding-bottom: 1em;
	margin-bottom: 1em;
}
.reacties-layout .content-col .reacties-list {
	list-style: none;
	padding: 0;
}
.reacties-layout .content-col .reacties-list .comment {
	margin-block: max(2rem, calc(4 * var(--su)));
}
.reacties-layout .content-col .reacties-list .comment .reactie-date {
	font-weight: 700;
	font-size: var(--desktop-body-xxs);
}
.reacties-layout .content-col .reacties-list .comment .reactie-author {
	font-size: var(--desktop-body-lg);
	font-weight: 700;
	margin-bottom: 0.25em;
}

@media screen and (max-width: 1200px) {
	.reacties-layout .pk-grid-container {
		padding-inline: 2rem;
	}
}

@media screen and (max-width: 992px) {
	.reacties-layout .pk-grid-container {
		padding-inline: 1.5rem;
	}
}

@media screen and (max-width: 767px) {
	.reacties-layout .pk-grid-container {
		padding-inline: 1rem;
	}
}