/**
 * Media Text Block - Frontend Styles
 *
 * @package Quinn
 */

.quinn-media-text {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	padding-top: var(--padding-top, 0);
	padding-bottom: var(--padding-bottom, 0);
	background-color: var(--quinn-media-text-bg, transparent);
	--quinn-media-text-bleed-left: 0px;
	--quinn-media-text-bleed-right: 0px;
}

.quinn-media-text > .container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--content-gap, 48px);
	align-items: stretch;
}

.quinn-media-text .container::before,
.quinn-media-text .container::after {
	display: none;
}

.quinn-media-text--image-left > .container {
	grid-template-areas: "media content";
}

.quinn-media-text--image-right > .container {
	grid-template-areas: "content media";
}

.quinn-media-text--no-image > .container {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "content";
}

.quinn-media-text__media {
	grid-area: media;
	position: relative;
	min-width: 0;
}

.quinn-media-text--no-image .quinn-media-text__media {
	display: none;
}

.quinn-media-text__media-inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.quinn-media-text--image-left .quinn-media-text__media-inner {
	left: calc(-1 * var(--quinn-media-text-bleed-left));
}

.quinn-media-text--image-right .quinn-media-text__media-inner {
	right: calc(-1 * var(--quinn-media-text-bleed-right));
}

/* Contained: image stays within the container, no bleed */
.quinn-media-text.quinn-media-text--image-contained .quinn-media-text__media-inner {
	left: 0;
	right: 0;
}

.quinn-media-text__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.quinn-media-text__content {
	grid-area: content;
	min-width: 0;
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 768px) {
	.quinn-media-text {
		padding-top: var(--padding-top-mobile, var(--padding-top, 0));
		padding-bottom: var(--padding-bottom-mobile, var(--padding-bottom, 0));
	}

	.quinn-media-text > .container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--content-gap-mobile, var(--content-gap, 24px));
		column-gap: 0;
	}

	.quinn-media-text--image-left > .container,
	.quinn-media-text--image-right > .container {
		grid-template-areas:
			"media"
			"content";
	}

	.quinn-media-text__media {
		min-height: var(--mobile-media-height, 240px);
	}

	.quinn-media-text--image-left .quinn-media-text__media-inner,
	.quinn-media-text--image-right .quinn-media-text__media-inner {
		left: 50%;
		right: auto;
		width: 100vw;
		transform: translateX(-50%);
	}

	.quinn-media-text.quinn-media-text--image-contained .quinn-media-text__media-inner {
		left: 0;
		right: 0;
		width: 100%;
		transform: none;
	}
}