/**
 * Two-Column Content Block Styles
 *
 * Responsive two-column layout with WYSIWYG content support.
 * Uses design system variables for consistency.
 *
 * @package 3MW_Blocks
 * @since 1.0.0
 */

/* ==========================================================================
   Base Container
   ========================================================================== */

.two-column-content {
	width: 100%;
	overflow: hidden; /* Prevent content overflow on mobile */
}

/* ==========================================================================
   Grid Layout
   ========================================================================== */

/* Grid system (.row class) provides layout - no custom grid needed */

/* REMOVED: display: grid */

/* REMOVED: grid-template-columns - grid system handles all ratios via column classes:
   - 50-50: .col-6 + .col-6
   - 33-67: .col-4 + .col-8
   - 67-33: .col-8 + .col-4
   - 40-60: .col-5 + .col-7
   - 60-40: .col-7 + .col-5
*/

.two-column-content .row.two-column-content__grid {
	--row-gap: min(var(--space-3xl), 5%); /* Cap gap to prevent overflow on narrower viewports */

	gap: var(--row-gap);
	align-items: center; /* Default vertical alignment */
}

/* Vertical alignment options */
.two-column-content.align-items-top .row.two-column-content__grid {
	align-items: start;
}

.two-column-content.align-items-bottom .row.two-column-content__grid {
	align-items: end;
}

/* ==========================================================================
   Column Styles
   ========================================================================== */

/* Empty class .two-column-content__column - uses flex-col utility class which provides: display: flex; flex-direction: column */

/* Empty class .two-column-content__content - placeholder for future styles */

/* ==========================================================================
   Column Background Colors
   Uses FSE utility classes (has-{color}-background-color) from theme.json
   ========================================================================== */

.two-column-content__column--has-bg {
	padding: var(--space-xl);
	border-radius: var(--radius-card);
}

@media (width <=767px) {
	.two-column-content__column--has-bg {
		padding: var(--space-lg);
	}
}

/* ==========================================================================
   WYSIWYG Content Styles
   ========================================================================== */

/* Reset margins for first/last elements */
.two-column-content__content>*:first-child {
	margin-top: 0;
}

.two-column-content__content>*:last-child {
	margin-bottom: 0;
}

/* Lists */

.two-column-content__content li {
	margin-bottom: var(--space-xs);
}

/* Images */
.two-column-content__content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: var(--space-sm);
}

.two-column-content__content img[src$=".png"],
.two-column-content__content img[src$=".jpg"],
.two-column-content__content img[src$=".jpeg"],
.two-column-content__content img[src$=".webp"] {
	border-radius: var(--radius-card);
}

/* ==========================================================================
   Column Background Text Adaptation
   Text color adapts based on the column's own background color,
   independent of the section's background color.

   Uses .has-nested-bg class (added via PHP) + global --dark-bg-* variables.
   The global rule in utilities.css handles the reset for light columns
   on dark sections automatically.
   ========================================================================== */

/* Apply text colors using --dark-bg-* variables (inherited or reset by .has-nested-bg) */
.two-column-content .two-column-content__column--has-bg h1,
.two-column-content .two-column-content__column--has-bg h2,
.two-column-content .two-column-content__column--has-bg h3,
.two-column-content .two-column-content__column--has-bg h4,
.two-column-content .two-column-content__column--has-bg h5,
.two-column-content .two-column-content__column--has-bg h6 {
	color: var(--dark-bg-heading);
}

.two-column-content .two-column-content__column--has-bg a:not(.btn) {
	color: var(--dark-bg-link);
}

.two-column-content .two-column-content__column--has-bg a:not(.btn):hover,
.two-column-content .two-column-content__column--has-bg a:not(.btn):focus {
	color: var(--dark-bg-link-hover);
	opacity: var(--dark-bg-link-hover-opacity);
}

.two-column-content .two-column-content__column--has-bg a:not(.btn):focus-visible {
	outline-color: var(--dark-bg-focus);
}

/* ==========================================================================
   Intermediate Breakpoint (1024px - 1400px)
   Prevents horizontal overflow when container constrains before gap reduces
   ========================================================================== */

@media (width <= 1400px) {
	.two-column-content__grid {
		--row-gap: var(--space-2xl); /* Reduced from --space-3xl to prevent overflow */
	}
}

/* ==========================================================================
   Tablet Breakpoint (768px - 1024px)
   ========================================================================== */

@media (width <= 1024px) {
	.two-column-content__grid {
		--row-gap: var(--space-xl); /* Further reduced gap on tablet */
	}
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (width <= 991px) {
	.two-column-content {
		margin-bottom: var(--space-xl);
	}
}

@media (width <= 767px) {
	.two-column-content {
		margin-bottom: var(--space-lg);
	}

	.two-column-content__container {
		padding-inline: var(--space-sm);
		max-width: 100%; /* Prevent overflow */
	}

	.two-column-content .row.two-column-content__grid {
		--row-gap: 0; /* Fix mobile content going off screen */
	}

	/* Add spacing between stacked columns on mobile */
	.two-column-content__column:first-child {
		margin-bottom: var(--space-xl);
	}
}

/* ==========================================================================
   Editor Preview Fix
   Prevent horizontal scrollbar in block editor's constrained preview width.
   Caps column-gap while preserving full row-gap for vertical spacing.
   ========================================================================== */

.editor-styles-wrapper .two-column-content .row.two-column-content__grid,
[data-type="acf/two-column-content"] .row.two-column-content__grid {
	column-gap: min(var(--row-gap), 6%);
}

/* ==========================================================================
   Flexible Content Area Nesting Fix
   When nested inside Flexible Content Area blocks, override conflicting styles.
   Flexible Content applies width/gap rules that can break the grid layout
   and overflow:hidden can clip images unexpectedly.
   ========================================================================== */

/* Reset container padding - Flexible Content already provides container spacing */
.flexible-content-area-block .two-column-content .two-column-content__container {
	padding-inline: 0;
	max-width: calc(100% - var(--row-gap));
}

/* Ensure grid row maintains its own gap settings, not inherited from Flexible Content */
.flexible-content-area-block .two-column-content .row.two-column-content__grid {
	--row-gap: revert;

	gap: var(--row-gap);
}