/* General pre-footer: editable counterpart to the fixed homepage pre-footer. */
.wp-block-studio-zed-pre-footer-general { margin: 0; max-width: none; width: 100%; }

.pre-footer-general {
	box-sizing: border-box;
	height: auto;
	position: relative;
	width: 100%;
}
.pre-footer-general--chalk { background: var(--sz-chalk); color: var(--sz-graphite); }
.pre-footer-general--graphite { background: var(--sz-graphite); color: var(--sz-chalk); }

.pre-footer-general__layout {
	align-items: center;
	box-sizing: border-box;
	display: grid;
	gap: clamp(3rem, 6.5vw, 6rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* Cap the combined columns and gap at 1600px, centered within the section. */
	padding: clamp(4rem, 6.2vw, 7rem) max(var(--layout-margin-desktop), calc((100% - 100rem) / 2));
	min-height: 0;
	overflow: hidden;
	position: relative;
}
.pre-footer-general__layout::before,
.pre-footer-general__layout::after {
	background: var(--sz-stone);
	bottom: 0;
	content: "";
	height: var(--chamfer-full-desktop);
	pointer-events: none;
	position: absolute;
	width: var(--chamfer-full-desktop);
	z-index: 3;
}
.pre-footer-general__layout::before { clip-path: polygon(0 0, 0 100%, 100% 100%); left: 0; }
.pre-footer-general__layout::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); right: 0; }

.pre-footer-general__media {
	/* Keep the image square independently of the copy height. */
	align-self: center;
	aspect-ratio: 1 / 1;
	min-height: 0;
	overflow: hidden;
	position: relative;
}
.pre-footer-general__image { position: absolute; inset: 0; display: block; height: 100%; object-fit: cover; object-position: center 80%; width: 100%; }

.pre-footer-general__content {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 0;
}
.pre-footer-general__copy { max-width: 39rem; width: 100%; }
.pre-footer-general__heading {
	font-family: var(--font-heading);
	font-size: var(--type-heading-m-size);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: var(--type-heading-m-line);
	margin: 0 0 1rem;
	text-transform: uppercase;
}
.pre-footer-general__large-text {
	font-family: var(--font-body);
	font-size: var(--type-body-l-size);
	font-weight: var(--type-body-l-weight);
	line-height: var(--type-body-l-line);
	margin: 0 0 1rem;
}
.pre-footer-general__normal-text {
	font-family: var(--font-body);
	font-size: var(--type-body-r-size);
	font-weight: var(--type-body-r-weight);
	line-height: var(--type-body-r-line);
	margin: 0;
}
.pre-footer-general__button { margin-top: 2rem; }

@media (max-width: 64rem) {
	.pre-footer-general { height: auto; }
	.pre-footer-general__layout { gap: 2.5rem; grid-template-columns: minmax(0, 1fr); padding: 4rem var(--layout-margin-tablet); }
	.pre-footer-general__media,
	.pre-footer-general__content {
		box-sizing: border-box;
		margin-inline: auto;
		max-width: 39rem;
		width: 100%;
	}

	.pre-footer-general__content {
		text-align: center;
	}

	.pre-footer-general__image { object-position: 53% 62%; }
	.pre-footer-general__layout::before, .pre-footer-general__layout::after { height: var(--chamfer-full-tablet); width: var(--chamfer-full-tablet); }
	.pre-footer-general__content { padding: 0; }
}

@media (max-width: 48rem) {
	.pre-footer-general { height: auto; padding-top: 0; } /* No mobile grid-square/top transition area. */
	.pre-footer-general__layout { display: block; height: auto; padding: 0 0 var(--chamfer-full-mobile); }
	.pre-footer-general__layout::before, .pre-footer-general__layout::after { height: var(--chamfer-full-mobile); width: var(--chamfer-full-mobile); }
	.pre-footer-general__media { aspect-ratio: auto; max-width: none; height: auto; min-height: 0; }

	/* Chalk cap slopes down from the outer corners to the image's top edge. */
	.pre-footer-general__media::before {
		background: var(--sz-chalk);
		clip-path: polygon(0 0, 100% 0, calc(100% - var(--chamfer-container-mobile)) 100%, var(--chamfer-container-mobile) 100%);
		content: "";
		height: var(--chamfer-container-mobile);
		inset: 0 0 auto;
		pointer-events: none;
		position: absolute;
		z-index: 1;
	}

	.pre-footer-general__image { position: static; height: auto; object-fit: initial; object-position: initial; width: 100%; }
	.pre-footer-general__content { max-width: none; padding: 4.25rem var(--layout-margin-mobile) 3.25rem; text-align: center; }
	.pre-footer-general__copy { margin-inline: auto; max-width: 31rem; }
	.pre-footer-general__heading { margin-inline: auto; max-width: 20rem; }
}