/**
 * Two-Column Alternating Text & Image Rows Block Styles
 *
 * @package 3MW_Blocks
 * @since 1.0.0
 */

/* ==========================================================================
   Base Layout
   ========================================================================== */

.two-column-alternating {
	width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   Header Section
   ========================================================================== */

.two-column-alternating__header {
	text-align: center;
	margin-bottom: var(--space-3xl);
}

.two-column-alternating__heading {
	margin: 0 0 var(--space-lg) 0;
	max-width: var(--max-width-content-md);
	margin-inline: auto;
}

.two-column-alternating__subtitle {
	font-size: var(--font-size-lead);
	max-width: var(--max-width-content-md);
	margin-inline: auto;
}

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

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

.two-column-alternating__container {
	/* flex-col utility class provides: display: flex; flex-direction: column */
	row-gap: var(--space-3xl);
}

/* ==========================================================================
   Row Layout
   ========================================================================== */

.two-column-alternating .row {
	--row-gap: var(--space-3xl); /* ~80px gap between columns */
	gap: var(--row-gap);
}

/* Default vertical alignment - center */
.two-column-alternating__row {
	align-items: center;
}

/* Vertical alignment options */
.two-column-alternating.align-items-top .two-column-alternating__row {
	align-items: flex-start;
}

.two-column-alternating.align-items-bottom .two-column-alternating__row {
	align-items: flex-end;
}

/* Reverse layout for alternating rows using CSS order */
.two-column-alternating__row.row-reverse .two-column-alternating__content {
	order: 2;
}

.two-column-alternating__row.row-reverse .two-column-alternating__image-col {
	order: 1;
}

/* ==========================================================================
   Content Column
   ========================================================================== */

.two-column-alternating__row-heading {
	margin-bottom: var(--space-lg);
}

.two-column-alternating__description ul,
.two-column-alternating__description ol {
	margin-left: 0;
}

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

.two-column-alternating__button-wrap {
	display: flex;
	align-items: center; /* Prevent flex stretch - buttons maintain their natural height */
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: var(--space-xl);
}

/* ==========================================================================
   Image Column
   ========================================================================== */

.two-column-alternating__image-col {
	position: relative;
	overflow: hidden;
}

.two-column-alternating__figure {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center; /* Center images in container */
}

.two-column-alternating__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Image fit: contain option */
.two-column-alternating.image-fit-contain .two-column-alternating__figure {
	height: auto;
	border-radius: 0;
	overflow: visible;
}

.two-column-alternating.image-fit-contain .two-column-alternating__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 400px;
	object-fit: contain;
	border-radius: var(--radius-card);
}

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

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

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

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

/* ==========================================================================
   Mobile Breakpoint (max 767px)
   ========================================================================== */

@media (max-width: 767px) {
	.two-column-alternating .row {
		--row-gap: 0; /* Fix mobile content going off screen */
	}

	/* Text always comes first on mobile - reset order */
	.two-column-alternating__content,
	.two-column-alternating__row.row-reverse .two-column-alternating__content {
		order: 1;
		margin-bottom: var(--space-xl);
	}

	.two-column-alternating__image-col,
	.two-column-alternating__row.row-reverse .two-column-alternating__image-col {
		order: 2;
		max-width: 100%;
	}

	.two-column-alternating__content-inner,
	.two-column-alternating__row.row-reverse .two-column-alternating__content-inner {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	/* Fix image overflow on mobile */
	.two-column-alternating__figure {
		height: auto;
		max-width: 100%;
	}

	.two-column-alternating__img {
		height: auto;
		max-width: 100%;
		width: 100%;
	}

	/* Center images on mobile */
	.two-column-alternating__figure,
	.two-column-alternating__row.row-reverse .two-column-alternating__figure {
		justify-content: center;
	}

	/* Adjust spacing */
	.two-column-alternating__header {
		margin-bottom: var(--space-2xl);
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.two-column-alternating__button-wrap {
		display: none;
	}
}

/* ==========================================================================
   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 styles - Flexible Content already provides container spacing */
.flexible-content-area-block .two-column-alternating .two-column-alternating__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-alternating .row {
	--row-gap: revert;
	gap: var(--row-gap);
}