/* Keep the associations directory and its original gate illustration in
 * separate layout tracks: the legacy 65% content width overlapped the art. */
.hr-page--spolky {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.hr-page--spolky > .hr-page__illustration {
	position: static;
	width: min(58vw, 13.5rem);
	height: auto;
	margin: 0 0 2rem auto;
	justify-self: end;
}

.hr-page--spolky > .hr-entry-content {
	width: 100%;
	max-width: none;
	min-width: 0;
}

.hr-page--spolky :is(.wpb-content-wrapper > p, .hr-entry-content > p):has(> a) {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
}

.hr-page--spolky :is(.wpb-content-wrapper > p, .hr-entry-content > p):has(> a) a {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The original arrow asset has a white stroke. As a background image it
 * disappears on outlined white pills; a mask inherits green/default and
 * white/hover without changing the source asset or duplicating rich icons. */
.hr-page--spolky :is(.wpb-content-wrapper > p, .hr-entry-content > p):has(> a) a:not(.hr-external-link):not(.hr-download-link):not(:has(.hr-download-icon, .hr-external-icon))::after {
	background: currentColor;
	-webkit-mask-image: url("../icons/icon-arrow-right.svg"), url("../icons/icon-arrow-right.svg");
	mask-image: url("../icons/icon-arrow-right.svg"), url("../icons/icon-arrow-right.svg");
	-webkit-mask-size: 150%, 150%;
	mask-size: 150%, 150%;
	-webkit-mask-position: center, calc(50% + 0.3px) calc(50% + 0.3px);
	mask-position: center, calc(50% + 0.3px) calc(50% + 0.3px);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	mask-composite: add;
}

@media (min-width: 37.5rem) {
	.hr-page--spolky :is(.wpb-content-wrapper > p, .hr-entry-content > p):has(> a) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 37.5rem) and (max-width: 59.999rem) {
	.hr-page--spolky {
		grid-template-columns: minmax(0, 1fr) 13.5rem;
		column-gap: 2rem;
	}

	.hr-page--spolky > .hr-page__header {
		grid-column: 1;
		grid-row: 1;
	}

	.hr-page--spolky > .hr-page__illustration {
		grid-column: 2;
		grid-row: 1;
	}

	.hr-page--spolky > .hr-entry-content {
		grid-column: 1 / -1;
	}
}

@media (min-width: 60rem) {
	.hr-page--spolky {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2rem;
	}

	.hr-page--spolky > .hr-page__header {
		grid-column: 1 / -1;
	}

	.hr-page--spolky > .hr-page__illustration {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		max-width: 37.375rem;
		margin: 0;
		align-self: start;
	}

	.hr-page--spolky > .hr-entry-content {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Figma 2265:7064 uses a left-aligned label and a trailing edge arrow. */
.hr-page--e-podatelna .hr-form__submit {
	justify-content: space-between;
}