/* Angled Panel
----------------------------------------------------------------------------- */

.wp-block-media-text.is-style-angled-panel {
	--angled-media-inset: 6.25rem;
	--angled-media-text-gap: 3rem;
	--angled-media-block: 3rem;
}

.wp-block-group > .wp-block-group.alignwide:has(> .wp-block-media-text.is-style-angled-panel) > .wp-block-media-text.is-style-angled-panel + .wp-block-media-text.is-style-angled-panel {
	margin-top: 240px;
}

.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
}

.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content:has(> p + .wp-block-group) {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: start;
	gap: 24px;
}

.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content:has(> p + .wp-block-group) > .wp-block-group {
	gap: 40px;
}

.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content:has(> p + .wp-block-group) > .wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wp-block-media-text.is-style-angled-panel .wp-block-media-text__media {
	height: 508px;
}

.wp-block-media-text.is-style-angled-panel .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-media-text.is-style-angled-panel.is-image-fill-element > .wp-block-media-text__media {
	height: 100%;
}

/* Angled Media & Angled Panel Shapes
----------------------------------------------------------------------------- */

/* The copy panel and the full photo are separate slanted shapes with rounded
 * corners and a white gap between them. Every measure is a share of the card
 * width, so the slant and the gap hold at any width. The copy panel reaches
 * 19.89% of its own column (10.46% of the card) under the photo, and its
 * padding sets the card height; the filled photo stretches to match.
 * Each clip-path has a polygon fallback before the rounded shape(). */
.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) {
	--angled-media-radius: 2rem;

	overflow: hidden;
}

.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.5rem;
	background-color: var(--wp--preset--color--navy-100);
}

@media (min-width: 501px) {

	.wp-block-media-text.is-style-angled-media {
		--angled-media-inset: 4.5rem;
		--angled-media-text-gap: 4.375rem;
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) {
		grid-template-columns: 52.6% 47.4% !important;
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel):not(.has-media-on-the-right) {
		grid-template-columns: 47.4% 52.6% !important;
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) .wp-block-media-text__content {
		position: relative;
		z-index: 1;
		align-self: stretch;
		width: 119.89%;
		padding-block: var(--angled-media-block, 5.25rem);
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel).has-media-on-the-right .wp-block-media-text__content {
		padding-inline: var(--angled-media-inset) calc(19.89% + var(--angled-media-text-gap));
		clip-path: polygon(0 0, 81.67% 0, 100% 100%, 0 100%);
		clip-path: shape(from 0 0, line to calc(81.67% - var(--angled-media-radius)) 0, curve to calc(81.67% + 0.35 * var(--angled-media-radius)) calc(0.94 * var(--angled-media-radius)) with 81.67% 0, line to calc(100% - 0.35 * var(--angled-media-radius)) calc(100% - 0.94 * var(--angled-media-radius)), curve to calc(100% - var(--angled-media-radius)) 100% with 100% 100%, line to 0 100%, close);
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel):not(.has-media-on-the-right) .wp-block-media-text__content {
		margin-left: -19.89%;
		padding-inline: calc(19.89% + var(--angled-media-text-gap)) var(--angled-media-inset);
		clip-path: polygon(18.33% 0, 100% 0, 100% 100%, 0 100%);
		clip-path: shape(from calc(18.33% + var(--angled-media-radius)) 0, line to 100% 0, line to 100% 100%, line to var(--angled-media-radius) 100%, curve to calc(0.35 * var(--angled-media-radius)) calc(100% - 0.94 * var(--angled-media-radius)) with 0 100%, line to calc(18.33% - 0.35 * var(--angled-media-radius)) calc(0.94 * var(--angled-media-radius)), curve to calc(18.33% + var(--angled-media-radius)) 0 with 18.33% 0, close);
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel).has-media-on-the-right .wp-block-media-text__media {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 24.39% 100%);
		clip-path: shape(from var(--angled-media-radius) 0, line to 100% 0, line to 100% 100%, line to calc(24.39% + var(--angled-media-radius)) 100%, curve to calc(24.39% - 0.35 * var(--angled-media-radius)) calc(100% - 0.94 * var(--angled-media-radius)) with 24.39% 100%, line to calc(0.35 * var(--angled-media-radius)) calc(0.94 * var(--angled-media-radius)), curve to var(--angled-media-radius) 0 with 0 0, close);
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel):not(.has-media-on-the-right) .wp-block-media-text__media {
		clip-path: polygon(0 0, 100% 0, 75.61% 100%, 0 100%);
		clip-path: shape(from 0 0, line to calc(100% - var(--angled-media-radius)) 0, curve to calc(100% - 0.35 * var(--angled-media-radius)) calc(0.94 * var(--angled-media-radius)) with 100% 0, line to calc(75.61% + 0.35 * var(--angled-media-radius)) calc(100% - 0.94 * var(--angled-media-radius)), curve to calc(75.61% - var(--angled-media-radius)) 100% with 75.61% 100%, line to 0 100%, close);
	}
}

@media (min-width: 501px) and (max-width: 860px) {

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) {
		--angled-media-radius: 1rem;
	}

	.wp-block-media-text.is-style-angled-media {
		--angled-media-inset: 1.5rem;
		--angled-media-text-gap: 2.1875rem;
		--angled-media-block: 3.5rem;
	}

	.wp-block-media-text.is-style-angled-media .wp-block-media-text__content {
		gap: 2rem;
	}
}

/* Mobile: the shapes rotate. The copy panel's bottom edge rises 5.906rem to
 * the right; the full-width photo's top edge rises 6.6875rem, starting 1rem
 * below the panel at the right edge. */
@media (max-width: 500px) {

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) {
		--angled-media-radius: 1.5rem;

		display: flex;
		flex-direction: column;
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) .wp-block-media-text__content {
		order: -1;
		gap: 2rem;
		padding: 1.5rem 1rem 7.125rem;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5.906rem), 0 100%);
		clip-path: shape(from 0 0, line to 100% 0, line to 100% calc(100% - 5.906rem - var(--angled-media-radius)), curve to calc(100% - 0.96 * var(--angled-media-radius)) calc(100% - 5.906rem + 0.27 * var(--angled-media-radius)) with 100% calc(100% - 5.906rem), line to calc(0.96 * var(--angled-media-radius)) calc(100% - 0.27 * var(--angled-media-radius)), curve to 0 calc(100% - var(--angled-media-radius)) with 0 100%, close);
	}

	.wp-block-media-text:is(.is-style-angled-media, .is-style-angled-panel) .wp-block-media-text__media {
		align-self: stretch;
		aspect-ratio: 343 / 283;
		margin-top: -4.906rem;
		clip-path: polygon(0 6.6875rem, 100% 0, 100% 100%, 0 100%);
		clip-path: shape(from 0 calc(6.6875rem + var(--angled-media-radius)), curve to calc(0.95 * var(--angled-media-radius)) calc(6.6875rem - 0.3 * var(--angled-media-radius)) with 0 6.6875rem, line to calc(100% - 0.95 * var(--angled-media-radius)) calc(0.3 * var(--angled-media-radius)), curve to 100% var(--angled-media-radius) with 100% 0, line to 100% calc(100% - var(--angled-media-radius)), curve to calc(100% - var(--angled-media-radius)) 100% with 100% 100%, line to var(--angled-media-radius) 100%, curve to 0 calc(100% - var(--angled-media-radius)) with 0 100%, close);
	}
}

@media (max-width: 500px) {

	.wp-block-group > .wp-block-group.alignwide:has(> .wp-block-media-text.is-style-angled-panel) > .wp-block-media-text.is-style-angled-panel + .wp-block-media-text.is-style-angled-panel {
		margin-top: 40px;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content {
		gap: 32px;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content > .wp-block-group {
		gap: 16px;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content:has(> p + .wp-block-group) {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content:has(> p + .wp-block-group) > .wp-block-group {
		gap: 32px;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content:has(> p + .wp-block-group) > .wp-block-group > .wp-block-group p {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 8;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content:has(> p + .wp-block-group) > .wp-block-group > .wp-block-group p + p {
		display: none;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__media {
		height: auto;
	}
}

@media (min-width: 501px) and (max-width: 860px) {

	.wp-block-group > .wp-block-group.alignwide:has(> .wp-block-media-text.is-style-angled-panel) > .wp-block-media-text.is-style-angled-panel + .wp-block-media-text.is-style-angled-panel {
		margin-top: 32px;
	}

	.wp-block-media-text.is-style-angled-panel {
		--angled-media-inset: 1.5rem;
		--angled-media-text-gap: 0rem;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content {
		gap: 32px;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__content > .wp-block-group {
		gap: 16px;
	}

	.wp-block-media-text.is-style-angled-panel .wp-block-media-text__media {
		height: 100%;
		min-height: 508px;
	}
}