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

/* image-right stacks text-then-image on mobile (natural DOM order — see
   text-block.php render order). Flip it so the image leads on mobile too,
   matching the visual "image side" the layout name implies. */
@media (max-width: 767px) {
	.mvc-text-block--image-right .mvc-text-block__media {
		order: -1;
	}
}

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

/* ── align-center: centers text/CTA within the body column (tb_align='center') ─
 * mvc-section-header--center (typography.css) handles text-align; this adds
 * the max-width + auto margins needed so paragraphs don't stretch full-width
 * on a wide 'full' layout track. */
.mvc-text-block--align-center .mvc-text-block__body {
	max-width: 640px;
	margin-inline: auto;
}

/* ── bleed: image breaks out to the browser edge on its side ─────────────────
 * Composes with image-left / image-right (PHP only emits the class for those
 * layouts). The media element ignores the .mvc-container's max-width/padding
 * on its outer side using the standard viewport-breakout formula — this works
 * regardless of container width or the visitor's viewport size, unlike a
 * fixed-pixel margin. The text column is untouched, so it still reads at a
 * normal container-constrained width. Single column below 768px (mobile
 * already stacks full-width, so no breakout is needed there).
 */
/* Mobile: the section stacks to a single column, so the horizontal breakout
 * below doesn't apply — but the section's top/bottom padding still wrapped
 * around the image (there was no mobile equivalent of the zero-padding/
 * reapply-to-body trick), leaving an oversized gap above the image that
 * didn't exist on desktop. Zero it here too so the image sits flush at the
 * top of the section, matching the desktop bleed's vertical treatment. */
@media (max-width: 767px) {
	.mvc-text-block--bleed {
		padding-top: 0;
		padding-bottom: 0;
	}
	.mvc-text-block--bleed .mvc-text-block__body {
		padding-top: var(--space-6);
		padding-bottom: var(--section-py-sm);
	}
	.mvc-text-block--bleed .mvc-text-block__media {
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
	}

	/* Break the image out of .mvc-container's side padding so it runs flush
	   edge-to-edge horizontally on mobile too, same viewport-breakout formula
	   used for the desktop side-bleed — then give it a fixed taller aspect
	   ratio (mobile has no side-by-side column to set its height, so
	   height:auto alone reads short/cramped once it's full-bleed). */
	.mvc-text-block--bleed .mvc-text-block__media {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		aspect-ratio: 4 / 5;
	}
	.mvc-text-block--bleed .mvc-text-block__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media (min-width: 768px) {
	/* A negative margin alone repositions a grid item but doesn't grow its
	 * box — the item is still sized to its grid track, so the <img> (which is
	 * width:100% of ITS OWN box) would just shift left/right without getting
	 * any bigger. Explicitly widening the box by the same breakout distance,
	 * on top of its track width (100%), is what actually makes the photo
	 * bigger, not just shifted. */
	.mvc-text-block--bleed.mvc-text-block--image-left .mvc-text-block__media {
		width: calc(100% + (50vw - 50%));
		margin-left: calc(50% - 50vw);
	}
	.mvc-text-block--bleed.mvc-text-block--image-right .mvc-text-block__media {
		width: calc(100% + (50vw - 50%));
		margin-right: calc(50% - 50vw);
	}
	/* Zero the section's own top/bottom padding so the image touches the
	 * section above/below with no gap — then add that same padding back to
	 * ONLY the text column, so the copy still gets normal breathing room
	 * while the photo runs edge-to-edge vertically as well as horizontally. */
	.mvc-text-block--bleed {
		padding-top: 0;
		padding-bottom: 0;
	}
	.mvc-text-block--bleed .mvc-text-block__body {
		padding-top: var(--section-py);
		padding-bottom: var(--section-py);
	}

	/* Full-bleed reads as a photograph, not a card — the shape/border/shadow
	 * treatment (rounded corners, borders) that suits an inset image looks
	 * wrong flush to the browser edge, so bleed always renders edge-square. */
	.mvc-text-block--bleed .mvc-text-block__media {
		border-radius: 0;
		border-width: 0;
		box-shadow: none;
	}
}

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

/* ── Gold hover CTA (tb_cta_hover='gold') ──────────────────────────────────
 * The stock .mvc-btn--ghost:hover (utilities.css) fills with a light gray —
 * on a light/default section background that reads as barely-there. This
 * fills with the accent gold instead, matching the eyebrow/title above it
 * and giving a clearly visible hover state (same "button lights up" feel as
 * hero-band's light-on-dark ghost hover, just recolored for a light bg). */
.mvc-text-block__cta .mvc-btn--hover-gold:hover {
	background: var(--mvc-color-accent, var(--color-accent));
	border-color: var(--mvc-color-accent, var(--color-accent));
	color: #ffffff !important;
}

@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);
}

/* ── Darker eyebrow (tb_eyebrow_color='accent-dark') ───────────────────────
 * The stock accent-color eyebrow above is pale by design (a light-touch
 * label) — this swaps in the deeper accent-dark shade for better legibility
 * on a plain light/default section background with no image to anchor it.
 * Two classes chained (not descendant) so this beats .mvc-section-eyebrow
 * (typography.css, also a single-class selector) on specificity alone,
 * regardless of stylesheet load order. */
p.mvc-text-block__eyebrow.mvc-text-block__eyebrow--accent-dark {
	color: var(--color-accent-dark, var(--mvc-color-accent, var(--color-accent)));
}

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