/**
 * core/media-text - Timeline
 */

.wp-block-media-text.is-style-timeline {
	--media-text--shape--offset: var(--wp--preset--spacing--30);
	--media-text--shape--translate--block-start: calc(var(--media-text--shape--offset) * -1);
	--media-text--shape--translate--inline-start: calc(var(--media-text--shape--offset) * -1);
	--media-text--content--padding-block: var(--wp--preset--spacing--60);
	--media-text--content--padding-inline: var(--wp--preset--spacing--30);
	--media-text--content--font-size: var(--wp--preset--font-size--large);

	display: grid;
	position: relative;
	grid-template-columns: 1fr;
	gap: 0 var(--wp--preset--spacing--30);
	z-index: -1;
}

/* Content */
.wp-block-media-text.is-style-timeline .wp-block-media-text__content {
	grid-column: 1;
	grid-row: 2;
	padding-block: var(--media-text--content--padding-block);
	padding-inline: var(--media-text--content--padding-inline);
}

.wp-block-media-text.is-style-timeline p {
	font-size: var(--media-text--content--font-size);
	line-height: 1.5;
}

/* Media */
.wp-block-media-text.is-style-timeline .wp-block-media-text__media {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	aspect-ratio: 720 / 360;
}

.wp-block-media-text.is-style-timeline .wp-block-media-text__media img {
	position: relative;
	block-size: 100%;
	inline-size: 100%;
	z-index: 1;
	object-fit: cover;
}

/* Background shape */
.wp-block-media-text.is-style-timeline .wp-block-media-text__media::before {
	display: block;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 100%;
	inline-size: 100%;
	translate: var(--media-text--shape--translate--inline-start) var(--media-text--shape--translate--block-start);
	background-color: var(--wp--preset--color--accent-2-no-wcag);
	content: '';
	z-index: 0;
}

/* Right alignment */
.wp-block-media-text.is-style-timeline.has-media-on-the-right {
	--media-text--shape--translate--inline-start: var(--media-text--shape--offset);
}

/* Placeholder */
.wp-block-media-text.is-style-timeline .wp-block-media-text__media.components-placeholder::before {
	z-index: -1;
}

@media (width >= 1024px) {
	.wp-block-media-text.is-style-timeline {
		--media-text--shape--offset: var(--wp--preset--spacing--30);
		--media-text--shape--translate--inline-start: calc(var(--wp--custom--spacing--gutter) / -2);
		--media-text--content--padding-block: calc(var(--media-text--shape--offset) * 2) calc(var(--media-text--shape--offset) * 2.5);
		--media-text--content--padding-inline: var(--wp--preset--spacing--30);

		grid-template-columns: 1fr 1fr;
		align-items: flex-start;
	}

	.wp-block-media-text.is-style-timeline :is(.wp-block-media-text__content, .wp-block-media-text__media) {
		grid-row: 1;
	}

	.wp-block-media-text.is-style-timeline .wp-block-media-text__content,
	.wp-block-media-text.is-style-timeline.has-media-on-the-right .wp-block-media-text__media {
		grid-column: 2;
	}

	/* Right alignment */
	.wp-block-media-text.is-style-timeline.has-media-on-the-right {
		--media-text--shape--translate--inline-start: calc(var(--wp--custom--spacing--gutter) / 2);
	}

	.wp-block-media-text.is-style-timeline.has-media-on-the-right .wp-block-media-text__content {
		grid-column: 1;
	}

	.wp-block-media-text.is-style-timeline + .wp-block-media-text.is-style-timeline {
		margin-block-start: 0;
	}
}

@media (width >= 1200px) {
	.wp-block-media-text.is-style-timeline {
		--media-text--shape--offset: var(--wp--preset--spacing--60);
		--media-text--content--padding-inline: var(--wp--preset--spacing--60);
		--media-text--content--font-size: 1.125rem;
	}
}

@media (width < 1024px) {
	.wp-block-group:has(> .wp-block-media-text.is-style-timeline) {
		margin-inline: calc(var(--wp--style--root--padding-left) * -1);
		padding-block-start: 0 !important;
	}
}