/**
 * Paired Content Container Styles
 */

.paired-container {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* Desktop: side-by-side flex layout */
@media (min-width: 600px) {
	/* Only activate flex when BOTH main content and paired content are visible */
	.paired-container:has(.paired-content:not([style*="none"])):has(.wp-block-post-content:not([style*="none"])),
	.paired-container:has(.paired-content:not([style*="none"])):has(.entry-content:not([style*="none"])) {
		display: flex;
		gap: 1rem;
		align-items: stretch;
		width: auto;
		max-width: 100%;
	}

	/* Direct children flex sizing */
	.paired-container:has(.paired-content:not([style*="none"])):has(.wp-block-post-content:not([style*="none"])) > *,
	.paired-container:has(.paired-content:not([style*="none"])):has(.entry-content:not([style*="none"])) > * {
		min-width: 0;
	}

	/* Let blocks figure out their own width based on content */
	.paired-container:has(.paired-content:not([style*="none"])):has(.wp-block-post-content:not([style*="none"])) > *,
	.paired-container:has(.paired-content:not([style*="none"])):has(.entry-content:not([style*="none"])) > * {
		flex: 1 1 0;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	/* Column ordering: original-first (default - no change needed) */

	/* Column ordering: shavian-left */
	.paired-container.order-shavian-left.has-shavian-pair > .paired-content {
		order: -1;
	}
	.paired-container.order-shavian-left.has-roman-pair > .paired-content {
		order: 1;
	}

	/* Column ordering: roman-left */
	.paired-container.order-roman-left.has-roman-pair > .paired-content {
		order: -1;
	}
	.paired-container.order-roman-left.has-shavian-pair > .paired-content {
		order: 1;
	}
}

/* Mobile: vertical stack */
@media (max-width: 599px) {
	.paired-container {
		display: block;
	}

	.paired-container > * {
		display: block;
		margin: 0 0 2rem 0;
	}

	/* When paired content is hidden, respect that */
	.paired-container > .paired-content[style*="none"] {
		display: none !important;
	}
}

/* Editor preview */
.paired-container-editor {
	border: 1px dashed rgba(0, 0, 0, 0.2);
	padding: 1rem;
	min-height: 100px;
}