/*
 * Rounded-corner version of the Hero background shape - frontend only (see
 * the enqueue call in functions.php for why). The editor falls back to the
 * straight-edged clip-path: polygon() in style.scss since it never loads
 * this stylesheet.
 */
.wp-block-concord-wp-hero:not(.has-simple-corner)::before {
	clip-path: url(#concord-hero-clip) !important;
}

.wp-block-concord-wp-hero.has-simple-corner::before {
	clip-path: url(#concord-hero-clip-simple) !important;
}

/* Keep the header and hero together inside the automatic page frame. */
.wp-block-concord-wp-hero.alignfull {
	width: calc(100% - (2 * var(--concord-page-frame)));
	max-width: none;
	margin-right: var(--concord-page-frame) !important;
	margin-left: var(--concord-page-frame) !important;
}

@media (prefers-reduced-motion: no-preference) {

	.wp-block-concord-wp-hero .hero__media {
		animation:
			concord-hero-media-slide-in 850ms
			cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
		backface-visibility: hidden;
		will-change: transform;
	}

	.wp-block-concord-wp-hero .hero__media-gallery-wrap,
	.wp-block-concord-wp-hero .hero__inner > .hero__media-gallery {
		animation:
			concord-hero-media-slide-in 850ms
			cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
		backface-visibility: hidden;
		will-change: transform;
	}

	.wp-block-concord-wp-hero .hero__media img {
		transform:
			translate3d(0, var(--hero-parallax-y, 0), 0)
			scale(var(--hero-parallax-scale, 1));
		will-change: transform;
	}

	.wp-block-concord-wp-hero .hero__media-gallery-wrap .hero__media-gallery,
	.wp-block-concord-wp-hero .hero__media--gallery .hero__media-gallery,
	.wp-block-concord-wp-hero .hero__inner > .hero__media-gallery {
		transform:
			translate3d(0, var(--hero-parallax-y, 0), 0)
			scale(var(--hero-parallax-scale, 1));
		transform-origin: center;
		will-change: transform;
	}
}

@keyframes concord-hero-media-slide-in {

	from {
		transform: translate3d(0, -12px, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (min-width: 901px) {

	.wp-block-concord-wp-hero .hero__inner {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 40px;
	}

	.wp-block-concord-wp-hero .hero__content {
		width: auto;
		max-width: 760px;
	}

	.wp-block-concord-wp-hero .hero__media {
		position: relative;
		top: calc(-1 * var(--wp--custom--spacing--section));
		right: auto;
		bottom: auto;
		display: block;
		width: auto;
		height: 0;
		margin: 0;
	}

	.wp-block-concord-wp-hero .hero__media img {
		width: auto;
		height: auto;
		max-width: min(52vw, 720px);
		max-height: 580px;
		margin: 0 0 0 auto;
		object-fit: contain;
	}

	.wp-block-concord-wp-hero.has-simple-corner .hero__media img {
		max-height: 480px;
		object-fit: contain;
	}
}