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

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

.two-column-content.align-items-stretch .two-column-content__column {
	height: 100%;
}

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

/* Column background image (set via the --column-bg-image custom property in the
   template). Mirrors the padded/rounded treatment of solid-colour columns. */
.two-column-content__column--has-bg-image {
	padding: var(--space-xl);
	border-radius: var(--radius-card);
	background-image: var(--column-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

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

/* Column CTA button */
.two-column-content__cta {
	margin-top: var(--space-lg);
}

/* When columns stretch to equal height, pin each CTA to the bottom of its column
   so the two CTAs align across the row regardless of differing content length.
   margin-top: auto absorbs the spare vertical space; the column is a flex column
   (flex-col) stretched to full row height via align-items: stretch. */
.two-column-content.align-items-stretch .two-column-content__cta {
	margin-top: auto;
	padding-top: var(--space-lg);
}

/* Section title: H1 size (block-scoped so it beats the global single-class
   .section-title). Alignment is deliberately NOT set here: the section header
   is left-aligned site-wide via `.two-column-content .section-header` in
   frontend-child.css, and a `text-align` on the title itself would win on
   specificity (element rule vs. parent container rule) and leave the title
   centered above a left-aligned subtitle. */
.two-column-content .section-title {
	font-size: var(--font-size-h1);
}

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

/* Headings: long single words (e.g. "Contraindications") can exceed the
   column width in narrow has-bg columns once Android Chrome's automatic
   text-size-adjust font-boosting inflates the heading beyond its declared
   fluid size — a boost desktop testing at the same CSS width doesn't
   reproduce. text-size-adjust: 100% opts the heading out of that boosting;
   overflow-wrap is a safety net so a still-tight word wraps instead of
   overflowing the column. */
.two-column-content__content h1,
.two-column-content__content h2,
.two-column-content__content h3,
.two-column-content__content h4,
.two-column-content__content h5,
.two-column-content__content h6 {
	text-size-adjust: 100%;
	overflow-wrap: break-word;
}

/* Lists */

/* Matches icon-text-box-grid's box-description list treatment: smaller text
   reads better in these compact content areas. padding-left overrides the
   global bullet-list gap (--space-lg), which reads as oversized once the
   text itself is smaller. */
.two-column-content__content li {
	padding-left: var(--space-md);
}

.two-column-content__content li:not(:last-child) {
	margin-bottom: var(--space-sm);
}

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

	/* The H1-size section-title override above (line ~121) is sized for
	   tablet/desktop, where the fluid H1 clamp's floor (50px) is still a
	   reasonable "bigger than normal" section title. On phones that same
	   50px floor doesn't shrink any further - H1 has no mobile-specific
	   reduction the way H2/H4/H5 do (see CHANGELOG "reduce fluid font-size
	   min values") - so a short CTA sentence like "Ready to review the
	   evidence and prescribe Cingal?" wraps across 4+ lines at a size that
	   dominates the whole viewport. Step down to H2 at this breakpoint
	   instead of introducing a new one-off size. */
	.two-column-content .section-title {
		font-size: var(--font-size-h2);
	}

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

	.two-column-content .row.two-column-content__grid {
		/* column-gap alone (not the --row-gap custom property/shorthand) fixes
		   the original off-screen overflow: a 12-column grid reserves 11
		   internal column-gaps regardless of how many items actually span
		   across them, so even a modest gap value multiplies across all 11 and
		   can overflow a narrow viewport. row-gap provides the vertical space
		   between the two stacked (col-sm-12) columns directly on the grid
		   container, which — unlike a margin on the first column — still
		   applies when the block has the align-items-stretch modifier: a
		   stretched item's own margin does not expand its auto-sized grid row
		   track, so a margin-based approach silently collapses to 0 in that
		   case. See the .cingal-ready override below, which already used
		   row-gap for exactly this reason. */
		row-gap: var(--space-xl);
		column-gap: 0;
	}
}

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

/* ==========================================================================
   "cingal-ready" Modifier
   Opt-in via an Additional CSS class on the block. Makes the two columns
   equal height and sets the space between them to --space-md (up to 24px).
   Placed after the
   editor-preview rule so it also wins in the editor (equal specificity).
   ========================================================================== */

.two-column-content.cingal-ready .row.two-column-content__grid {
	align-items: stretch;
	column-gap: var(--space-md);
}

.two-column-content.cingal-ready .two-column-content__column {
	height: 100%;
}

.editor-styles-wrapper .two-column-content.cingal-ready .row.two-column-content__grid,
[data-type="acf/two-column-content"].cingal-ready .row.two-column-content__grid {
	column-gap: var(--space-md);
}

/* Mobile: columns stack, so provide a matching vertical gap — smaller than
   the base block's default (--space-xl) to match .cingal-ready's tighter
   desktop column-gap (--space-md). The base rule now also uses row-gap
   directly (see above), so no margin reset is needed here. */
@media (width <= 767px) {
	.two-column-content.cingal-ready .row.two-column-content__grid {
		row-gap: var(--space-md);
	}
}

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

/* ==========================================================================
   "wide-gap-columns" Modifier
   Opt-in via an Additional CSS class on the block. Widens the space between
   columns beyond the site-wide default (whose 5% cap is the binding
   constraint at typical desktop widths) by raising the percentage cap so
   --space-3xl's own ceiling becomes the binding constraint instead.

   Placed after the Flexible Content Area Nesting Fix above: both selectors
   share equal specificity (4 classes), and this block needs to win when
   nested inside a Flexible Content Area — source order after an
   equal-specificity rule is what decides that, not selector order.
   ========================================================================== */

.two-column-content.wide-gap-columns .row.two-column-content__grid {
	--row-gap: min(var(--space-3xl), 8%);
}

@media (width <= 767px) {
	.two-column-content.wide-gap-columns .row.two-column-content__grid {
		--row-gap: 0; /* keep the raised desktop cap out of mobile var consumers */
	}
}

/* ==========================================================================
   Mobile Gap — Flexible Content Area Nesting
   The FCA nesting fix above sets the `gap` shorthand at 4-class specificity,
   which beats the base mobile row-gap longhand (3 classes) and consumes
   var(--row-gap) — zeroed on mobile by the wide-gap-columns rule — so
   FCA-nested blocks stacked with no gap. Same longhands at matching
   specificity, placed after that rule, restore the stacked-column gap.
   ========================================================================== */

@media (width <= 767px) {
	.flexible-content-area-block .two-column-content .row.two-column-content__grid {
		row-gap: var(--space-xl);
		column-gap: 0;
	}
}