/* components/text-block/text-block.css */

/* ════════════════════════════════════════════════════════════════════════════
 * LAYOUTS — explicit CSS Grid per variant. Mobile-first single column,
 *           switches to multi-column at 768px+. No cascade tricks.
 * ════════════════════════════════════════════════════════════════════════════ */

.mvc-text-block__inner {
	display: grid;
	gap: var(--space-10);
	grid-template-columns: 1fr; /* mobile default */
	align-items: center;
}

/* ── Two-column layouts: use --mvc-tb-cols custom property ────────────────
 * PHP emits style="--mvc-tb-cols: 3fr 2fr;" etc. when editor picks a non-default
 * ratio. Default is 1fr 1fr (50/50) — set via fallback in the var() call.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.mvc-text-block--image-left .mvc-text-block__inner,
	.mvc-text-block--image-right .mvc-text-block__inner,
	.mvc-text-block--two-col .mvc-text-block__inner,
	.mvc-text-block--header-top-cols .mvc-text-block__inner {
		grid-template-columns: var(--mvc-tb-cols, 1fr 1fr);
		gap: var(--space-12);
	}

	/* image-left: explicit column placement (DOM order is image, then body) */
	.mvc-text-block--image-left .mvc-text-block__media { grid-column: 1; }
	.mvc-text-block--image-left .mvc-text-block__body  { grid-column: 2; }
	/* image-right and the rest follow natural DOM order */
}

/* ── Equal-height columns — flip align-items from center to stretch ───────
 * Only meaningful at 768px+ where columns are side-by-side. Mobile stacks.
 * ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
	.mvc-text-block--equal-height .mvc-text-block__inner {
		align-items: stretch;
	}
	/* Body and media wrappers fill their grid cell so backgrounds/borders
	 * (e.g. the image shadow/border) reach the full column height. */
	.mvc-text-block--equal-height .mvc-text-block__body,
	.mvc-text-block--equal-height .mvc-text-block__media {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	/* When body is full-height, push CTA to the bottom of the column */
	.mvc-text-block--equal-height .mvc-text-block__body .mvc-text-block__cta {
		margin-block-start: auto;
	}
	/* Equal-height image — make the picture fill the column */
	.mvc-text-block--equal-height .mvc-text-block__media .mvc-text-block__img {
		flex: 1;
		object-fit: cover;
		min-height: 0;
	}
}

/* ── image-top: image stacked above text (always single column) ──────────── */
.mvc-text-block--image-top .mvc-text-block__inner {
	grid-template-columns: 1fr;
	align-items: stretch;
}

/* ── image-bottom: text above image (use grid row reversal in DOM) ───────── */
.mvc-text-block--image-bottom .mvc-text-block__inner {
	grid-template-columns: 1fr;
	align-items: stretch;
}
/* image-bottom DOM order: body first, then image (PHP emits in that order) */

/* ── header-top-cols: title band above, then image | body cols ───────────── */
@media (min-width: 768px) {
	.mvc-text-block--header-top-cols .mvc-text-block__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
	}
}

/* ── header-top-image-mid-body-bottom: title band, then stacked ──────────── */
.mvc-text-block--header-top-image-mid-body-bottom .mvc-text-block__inner {
	grid-template-columns: 1fr;
}

/* ── two-col-text: no image, eyebrow+title left, body+pillars+CTA right ─── */
@media (min-width: 768px) {
	.mvc-text-block--two-col-text .mvc-text-block__inner {
		grid-template-columns: var(--mvc-tb-cols, 1fr 1.5fr);
		gap: var(--space-12);
		align-items: start;
	}
}

/* The two body columns inside two-col-text */
.mvc-text-block--two-col-text .mvc-text-block__body--titles .mvc-text-block__content,
.mvc-text-block--two-col-text .mvc-text-block__body--titles .mvc-text-block__subtitle,
.mvc-text-block--two-col-text .mvc-text-block__body--titles .mvc-text-block__pillars,
.mvc-text-block--two-col-text .mvc-text-block__body--titles .mvc-text-block__cta {
	/* Defensive: render_header('header-only') already omits these,
	 * but if any sneak through they should not show in the titles column. */
	display: none;
}

/* ── full: single centered column ────────────────────────────────────────── */
.mvc-text-block--full .mvc-text-block__inner {
	grid-template-columns: 1fr;
}

/* ════════════════════════════════════════════════════════════════════════════
 * IMAGE — base + shape variants + depth (border, shadow)
 * Custom properties applied inline by PHP cascade down to the <img>.
 * ════════════════════════════════════════════════════════════════════════════ */

.mvc-text-block__media {
	/* Border-radius lives on the wrapper so shadow can wrap to the rounded edge */
	border-radius: var(--mvc-tb-img-radius, var(--radius-lg));
	overflow: hidden;
	border-width: var(--mvc-tb-img-border-width, 0);
	border-style: solid;
	border-color: var(--mvc-tb-img-border-color, var(--mvc-color-border, rgba(0,0,0,0.12)));
	box-shadow: var(--mvc-tb-img-shadow, none);
	transition: box-shadow var(--motion-fast, 0.2s) ease, transform var(--motion-fast, 0.2s) ease;
}

.mvc-text-block__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Shape variants — set the CSS custom property on the wrapper.
 * Default is moderately rounded; square is sharp; rounded is heavily; circle is round + 1:1. */
.mvc-text-block__media--shape-default { --mvc-tb-img-radius: var(--radius-lg); }
.mvc-text-block__media--shape-square  { --mvc-tb-img-radius: 0; }
.mvc-text-block__media--shape-rounded { --mvc-tb-img-radius: var(--radius-2xl); }
.mvc-text-block__media--shape-circle  {
	--mvc-tb-img-radius: 9999px;
	aspect-ratio: 1;
}
.mvc-text-block__media--shape-circle .mvc-text-block__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Border width variants */
.mvc-text-block__media--border-thin   { --mvc-tb-img-border-width: 1px; }
.mvc-text-block__media--border-medium { --mvc-tb-img-border-width: 2px; }
.mvc-text-block__media--border-thick  { --mvc-tb-img-border-width: 4px; }

/* Shadow depth variants — five presets */
.mvc-text-block__media--shadow-soft {
	--mvc-tb-img-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
}
.mvc-text-block__media--shadow-medium {
	--mvc-tb-img-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -3px rgba(0, 0, 0, 0.06);
}
.mvc-text-block__media--shadow-strong {
	--mvc-tb-img-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.18), 0 8px 16px -6px rgba(0, 0, 0, 0.08);
}
.mvc-text-block__media--shadow-dramatic {
	--mvc-tb-img-shadow:
		0 30px 60px -12px rgba(0, 0, 0, 0.30),
		0 18px 36px -18px rgba(0, 0, 0, 0.22),
		0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.mvc-text-block__headline {
	font-size: var(--text-4xl);
	margin-block-end: var(--space-4);
}

.mvc-text-block__content {
	margin-block-end: var(--space-4);
}

.mvc-text-block__cta {
	margin-block-start: var(--space-6);
}

@media (max-width: 479px) {
	.mvc-text-block__headline { font-size: var(--text-3xl); }
}

/* ── Premium icon pillars row (used in "The Difference" sections) ────────── */
.mvc-text-block__pillars {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
	margin-block-start: var(--space-8);
}

@media (min-width: 640px) {
	.mvc-text-block__pillars {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mvc-text-block__pillar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}

.mvc-text-block__pillar-icon {
	width: 40px;
	height: 40px;
	/* Cascade: per-pillar override → block-level default → theme accent token */
	color: var(--mvc-pillar-icon-color, var(--mvc-color-accent, var(--color-accent)));
	flex-shrink: 0;
}

/* ── Pillar icon-position variants (controlled by tb_pillars_icon_position) ── */

/* Top (default) — already handled by .mvc-text-block__pillar flex-direction:column */

/* Left — icon | label (single row) */
.mvc-text-block__pillars--icon-left .mvc-text-block__pillar {
	flex-direction: row;
	align-items: center;
	gap: var(--space-3);
}

/* Right — label | icon (reversed row) */
.mvc-text-block__pillars--icon-right .mvc-text-block__pillar {
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
	text-align: right;
}

.mvc-text-block__pillar-label {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	line-height: var(--leading-snug);
	color: inherit;
}

/* Dark bg — text inherits section color, icon stays accent */
.mvc-section--dark .mvc-text-block__pillar-label { color: rgba(255,255,255,0.9); }
[data-mvc-section-gradient] .mvc-text-block__pillar-label { color: rgba(255,255,255,0.9); }

/* ── Eyebrow above text-block headline ──────────────────────────────────── */
.mvc-text-block__eyebrow {
	display: block;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mvc-color-accent, var(--color-accent));
	margin-block-end: var(--space-3);
}

/* ── Subtitle (lead paragraph) ──────────────────────────────────────────── */
.mvc-text-block__subtitle {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	color: var(--mvc-color-text-muted, var(--color-text-muted, inherit));
	margin-block-end: var(--space-5);
	max-width: 60ch;
}

.mvc-section--dark .mvc-text-block__subtitle,
[data-mvc-section-gradient] .mvc-text-block__subtitle {
	color: rgba(255, 255, 255, 0.85);
}

/* ── Header-top band (eyebrow + title above two-column grid) ────────────── */
.mvc-text-block__header-top {
	margin-block-end: var(--space-8);
	max-width: 800px;
}

.mvc-text-block--header-top-cols .mvc-text-block__header-top,
.mvc-text-block--header-top-image-mid-body-bottom .mvc-text-block__header-top {
	text-align: left;
}

/* ── Full-width pillars strip (below inner grid, spans container) ───────── */
.mvc-text-block__pillars-strip {
	margin-block-start: var(--space-10);
	padding-block-start: var(--space-8);
	border-block-start: 1px solid var(--mvc-color-border, rgba(0, 0, 0, 0.08));
}

.mvc-text-block__pillars-strip .mvc-text-block__pillars {
	margin-block-start: 0;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
	.mvc-text-block__pillars-strip .mvc-text-block__pillars {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mvc-section--dark .mvc-text-block__pillars-strip,
[data-mvc-section-gradient] .mvc-text-block__pillars-strip {
	border-block-start-color: rgba(255, 255, 255, 0.12);
}

/* Dark section image: keep a subtle frame outline ONLY when editor hasn't
 * explicitly set a shadow choice. Defers to editor controls. */
.mvc-section--dark .mvc-text-block__media:not([class*="--shadow-"]),
[data-mvc-section-gradient="brand-dark"] .mvc-text-block__media:not([class*="--shadow-"]),
[data-mvc-section-gradient="brand-mesh"] .mvc-text-block__media:not([class*="--shadow-"]) {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ── Dark-section button contrast ───────────────────────────────────────────
 * Secondary and ghost buttons use transparent backgrounds and rely on
 * --mvc-color-btn2-* tokens for color/border. On dark sections those tokens
 * typically resolve to the primary brand color (navy), which is invisible
 * against a dark background. Override to white-on-transparent so all three
 * button styles remain readable on any dark or gradient-dark section.
 * ───────────────────────────────────────────────────────────────────────── */
.mvc-section--dark .mvc-text-block__cta .mvc-btn--secondary,
[data-mvc-section-gradient="brand-dark"] .mvc-text-block__cta .mvc-btn--secondary,
[data-mvc-section-gradient="brand-mesh"] .mvc-text-block__cta .mvc-btn--secondary,
[data-mvc-section-gradient="accent"] .mvc-text-block__cta .mvc-btn--secondary {
	color:        rgba(255, 255, 255, 0.95);
	border-color: rgba(255, 255, 255, 0.6);
	background:   transparent;
}

.mvc-section--dark .mvc-text-block__cta .mvc-btn--secondary:hover,
[data-mvc-section-gradient="brand-dark"] .mvc-text-block__cta .mvc-btn--secondary:hover,
[data-mvc-section-gradient="brand-mesh"] .mvc-text-block__cta .mvc-btn--secondary:hover,
[data-mvc-section-gradient="accent"] .mvc-text-block__cta .mvc-btn--secondary:hover {
	background:   rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.85);
	color:        #ffffff;
}

.mvc-section--dark .mvc-text-block__cta .mvc-btn--ghost,
[data-mvc-section-gradient="brand-dark"] .mvc-text-block__cta .mvc-btn--ghost,
[data-mvc-section-gradient="brand-mesh"] .mvc-text-block__cta .mvc-btn--ghost,
[data-mvc-section-gradient="accent"] .mvc-text-block__cta .mvc-btn--ghost {
	color:        rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.35);
	background:   transparent;
}

.mvc-section--dark .mvc-text-block__cta .mvc-btn--ghost:hover,
[data-mvc-section-gradient="brand-dark"] .mvc-text-block__cta .mvc-btn--ghost:hover,
[data-mvc-section-gradient="brand-mesh"] .mvc-text-block__cta .mvc-btn--ghost:hover,
[data-mvc-section-gradient="accent"] .mvc-text-block__cta .mvc-btn--ghost:hover {
	background:   rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.55);
	color:        rgba(255, 255, 255, 0.95);
}

/* ════════════════════════════════════════════════════════════════════════════
 * VISUAL STYLE OVERRIDES — purely decorative (typography, spacing, emphasis).
 * These do NOT affect layout structure; tb_layout owns that.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Editorial — newspaper-style body columns, larger title ──────────────── */
.mvc-text-block--style-editorial .mvc-text-block__headline {
	font-size: var(--text-5xl);
	letter-spacing: var(--tracking-tight, -0.01em);
}
.mvc-text-block--style-editorial .mvc-text-block__content {
	font-size: var(--text-lg);
	line-height: var(--leading-loose);
	columns: 2;
	column-gap: var(--space-10);
}
@media (max-width: 767px) {
	.mvc-text-block--style-editorial .mvc-text-block__content {
		columns: 1;
	}
}

/* ── Luxury — generous padding, refined typography ───────────────────────── */
.mvc-text-block--style-luxury {
	padding-block: var(--space-20, 5rem);
}
.mvc-text-block--style-luxury .mvc-text-block__headline {
	font-weight: var(--font-weight-light, 300);
	letter-spacing: var(--tracking-wide, 0.02em);
	font-size: var(--text-5xl);
}
.mvc-text-block--style-luxury .mvc-text-block__subtitle {
	font-size: var(--text-xl);
	line-height: var(--leading-relaxed);
	max-width: 56ch;
}
.mvc-text-block--style-luxury .mvc-text-block__inner {
	gap: var(--space-16, 4rem);
}
@media (min-width: 768px) {
	.mvc-text-block--style-luxury .mvc-text-block__inner {
		gap: var(--space-20, 5rem);
	}
}

/* ── Compact — tighter spacing, smaller headline ─────────────────────────── */
.mvc-text-block--style-compact {
	padding-block: var(--space-8, 2rem);
}
.mvc-text-block--style-compact .mvc-text-block__headline {
	font-size: var(--text-2xl);
	margin-block-end: var(--space-2);
}
.mvc-text-block--style-compact .mvc-text-block__subtitle {
	font-size: var(--text-base);
	margin-block-end: var(--space-3);
}
.mvc-text-block--style-compact .mvc-text-block__inner {
	gap: var(--space-6);
}
.mvc-text-block--style-compact .mvc-text-block__cta {
	margin-block-start: var(--space-4);
}