/**
 * Two Column Features Section
 *
 * Alternating left/right layout with overlapping photo + info card.
 * Info card background handled by JSON attributes.
 * Inter-row spacing handled by CSS (.feature + .feature) because the
 * responsive values (50px mobile / 150px desktop) don't map to tokens.
 * Info card padding stays in CSS (not JSON) because the overlap transforms
 * need to override padding-left/right at desktop. Inline styles from JSON
 * would silently win at specificity (1,0,0) and break the overlap.
 *
 * CSS handles: transforms, box-shadows, z-index, order, responsive widths,
 * image alignment within columns, and discover-video play button positioning.
 *
 * !important on flex-wrap and align-items is required because WP core's
 * block-columns inline CSS uses !important on those properties.
 *
 * @package Condor
 */

/* ==========================================================================
   Section Spacing (fluid, justified — not expressible in JSON)
   ========================================================================== */

.two-col-features {
	padding: 50px 0;
}

@media (min-width: 768px) {
	.two-col-features {
		padding-bottom: 100px;
	}
}

@media (min-width: 1024px) {
	.two-col-features {
		padding: 100px 0 140px 0;
	}
}

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

/* WP core columns CSS uses !important on flex-wrap: nowrap (at 782px+) and
   align-items: normal. The only way to override !important is with !important
   at equal or higher specificity. gap: 0 overrides the WP container class
   which generates gap: 2em 0 from the columns layout system. */
.two-col-features .wp-block-columns.feature {
	justify-content: space-between;
	flex-wrap: wrap !important;
	align-items: flex-end !important;
	gap: 0 !important;
}

/* Inter-row spacing (responsive 50px/150px — no matching design token) */
.two-col-features .wp-block-columns.feature + .wp-block-columns.feature {
	padding-top: 50px;
}

@media (min-width: 768px) {
	.two-col-features .wp-block-columns.feature + .wp-block-columns.feature {
		padding-top: 150px;
	}

	/* Equal column widths + stacking context. WP's default flex: 1 1 0px
	   doesn't guarantee equal widths when padding differs (120px overlap
	   clearance inflates the info column). Explicit 50% + border-box
	   keeps padding inside the 50% width. Matches production.
	   position: relative required for z-index to work. */
	.two-col-features .feature .photo,
	.two-col-features .feature .info {
		flex: 0 0 50% !important;
		box-sizing: border-box;
		position: relative;
	}

	/* Overlap transforms — justified (no JSON equivalent) */
	.two-col-features .feature.align-left .info {
		transform: translate3d(-80px, 40px, 0);
		padding-left: 120px;
	}

	.two-col-features .feature.align-left .photo {
		z-index: 1;
	}

	.two-col-features .feature.align-right .info {
		transform: translate3d(80px, 40px, 0);
		padding-right: 120px;
		order: -1;
	}

	.two-col-features .feature.align-right .photo {
		z-index: 1;
	}

	/* Image alignment within columns — pushes image toward the overlap seam */
	.two-col-features .feature.align-left .photo img {
		margin-left: auto;
	}

	.two-col-features .feature.align-right .photo img {
		margin-right: auto;
	}
}

/* ==========================================================================
   Info Card + Photo Styling (justified — box-shadows, padding)
   ========================================================================== */

.two-col-features .feature .photo img {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
	display: block;
	width: 100%;
}

.two-col-features .feature .info {
	padding: 2.5rem 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Desktop padding — overlap transforms need extra clearance */
@media (min-width: 768px) {
	.two-col-features .feature .info {
		padding: 4rem 2.5rem;
	}
}

/* ==========================================================================
   Content Styling (justified — link color override, no JSON equivalent)
   ========================================================================== */

.two-col-features .feature .info .copy a {
	color: var(--wp--preset--color--bright-red);
}

/* ==========================================================================
   Discover Video Play Button Overlay
   ========================================================================== */

.two-col-features .discover-video {
	position: relative;
}

.two-col-features .discover-video .play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}