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

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

.two-column-alternating {
	width: 100%;
	overflow: hidden;
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;
}

.two-column-alternating.has-background {
	position: relative;
}

.two-column-alternating__overlay {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--gradient--gradient-overlay-2, linear-gradient(0deg, rgb(26 85 154 / 85%) -20.8%, rgb(26 85 154 / 85%) 94.36%));
	pointer-events: none;
	z-index: 1;
}

.two-column-alternating.has-background > *:not(.two-column-alternating__overlay) {
	position: relative;
	z-index: 2;
}

/* Editor: ensure content stays above overlay */
.editor-styles-wrapper .two-column-alternating > .two-column-alternating__header,
.editor-styles-wrapper .two-column-alternating > .two-column-alternating__container,
.block-editor-block-list__block .two-column-alternating > .two-column-alternating__header,
.block-editor-block-list__block .two-column-alternating > .two-column-alternating__container {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   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;
}

/* Full-width header: let the title & subtitle span the full container width
   instead of being capped at the default readable width. */
.two-column-alternating__header--full .two-column-alternating__heading,
.two-column-alternating__header--full .two-column-alternating__subtitle {
	max-width: 100%;
}

/* ==========================================================================
   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 {
	/* column-gap is capped separately from row-gap: the grid has 11 internal
	   gutters (12-column track), so a plain `gap` shorthand at this size
	   multiplies across all of them and shrinks/clips the columns even though
	   each row only ever has 2 items spanning the grid. See the "Grid Gap
	   Math" note in grid-system.css. */
	--row-gap: calc(var(--space-3xl) * 1.5); /* Wider gap between columns */

	row-gap: var(--row-gap);
	column-gap: min(var(--row-gap), 6%);
}

/* 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-sm);
	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;
}

/* ==========================================================================
   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 (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;
	}
}

/* ==========================================================================
   Image Collage Layout
   Two stacked images on the left, one tall image spanning full height on the right.
   Matches the 3-image mosaic layout from the design reference.
   ========================================================================== */

.two-column-alternating__collage {
	display: grid;
	grid-template-columns: 1fr 1.1fr;

	/* Each left image is 4/3 aspect-ratio; rows size from that.
	   The right column spans both rows and fills the full height. */
	grid-template-rows: 1fr 1fr;
	gap: var(--space-sm);

	/* Drive the overall height so the right portrait item has room */
	aspect-ratio: 16 / 11;
}

.two-column-alternating__collage-item {
	overflow: hidden;
	border-radius: var(--radius-card);
	min-height: 250px;
}

/* Top-left: row 1, column 1 */
.two-column-alternating__collage-item--top-left {
	grid-column: 1;
	grid-row: 1;
}

/* Bottom-left: row 2, column 1 */
.two-column-alternating__collage-item--bottom-left {
	grid-column: 1;
	grid-row: 2;
}

/* Right: spans both rows — tall portrait */
.two-column-alternating__collage-item--right {
	grid-column: 2;
	grid-row: 1 / span 2;
}

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

/* Lightbox wrapper inside collage items */
.two-column-alternating__collage-item .two-column-alternating__img-lightbox {
	width: 100%;
	height: 100%;
	display: block;
	cursor: zoom-in;
}

@media (width <= 767px) {
	.two-column-alternating__collage {
		gap: var(--space-sm);
		aspect-ratio: 4 / 3;
	}

	.two-column-alternating__collage-item {
		min-height: unset;
	}
}

/* ==========================================================================
   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: calc(var(--space-3xl) * 1.5);

	row-gap: var(--row-gap);
	column-gap: min(var(--row-gap), 6%);
}