/*
 * Canonical theme-block layout (all logodom/* blocks follow the same pattern; see docs/THEME_BLOCKS_FRONTEND_CONTRACT.md):
 * - Page shell = host; no page-wide container around all blocks.
 * - Theme block = root <section> + one inner container (max-width + padding) inside the block — never from page shell.
 * - Transition = optional second <section> sibling below the main section (same block render), not nested.
 *
 * LD_MediaLeft (below): root .ld-block-ld-ml, inner .ld-block-ld-ml__inner; self-contained widths — do not use outer .ld-container.
 */

/* --- logodom/ld-media-left (front) --- */
/* Root section vertical rhythm: 30px (host main has no vertical padding). */
.ld-block-ld-ml {
	padding-top: 30px;
	padding-bottom: 30px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.ld-block-ld-ml__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	width: 100%;
	max-width: var(--logodom-max-width, 72rem);
	margin-inline: auto;
	padding-inline: var(--logodom-space-3, 1rem);
	box-sizing: border-box;
}

.ld-block-ld-ml--c-default {
	background-color: var(--logodom-color-bg, #ffffff);
}

.ld-block-ld-ml--c-surface {
	background-color: var(--logodom-color-surface, #f9fafb);
}

.ld-block-ld-ml--c-accent {
	background-color: var(--logodom-color-palette-accent-bg, #eff6ff);
}

.ld-block-ld-ml--c-brand {
	background-color: var(--logodom-color-palette-brand-bg, #f0f4ff);
}

.ld-block-ld-ml--c-muted {
	background-color: var(--logodom-color-border, #e5e7eb);
}

/* --- logodom/ld-head-avatar (front) — shares palette modifiers .ld-block-ld-ml--c-* --- */
.ld-block-ld-head-avatar {
	padding-top: 30px;
	padding-bottom: 30px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.ld-block-ld-head-avatar__row1 {
	margin: 0 0 var(--logodom-space-5, 2rem);
}

.ld-block-ld-head-avatar__row1:last-child {
	margin-bottom: 0;
}

.ld-block-ld-head-avatar__heading {
	margin: 0;
	font-family: var(--logodom-font-sans);
	line-height: 1.2;
}

.ld-block-ld-head-avatar__row2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 0;
	/* Compact author/meta module: do not stretch children across full inner width */
	gap: var(--logodom-space-4, 1rem);
}

.ld-block-ld-head-avatar__row1 + .ld-block-ld-head-avatar__row2 {
	margin-top: var(--logodom-space-4, 1.25rem);
}

.ld-block-ld-head-avatar__avatar {
	flex: 0 0 auto;
	width: 5.5rem;
	height: 5.5rem;
	max-width: 6rem;
	max-height: 6rem;
}

.ld-block-ld-head-avatar__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--logodom-radius-md, 8px);
}

.ld-block-ld-head-avatar__lines {
	flex: 0 1 auto;
	min-width: 0;
	max-width: min(22rem, 100%);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	text-align: left;
}

.ld-block-ld-head-avatar__line {
	margin: 0;
	font-family: var(--logodom-font-sans);
	font-size: 0.9375rem;
	line-height: 1.45;
	color: inherit;
}

.ld-block-ld-head-avatar__line--2 {
	opacity: 0.88;
	font-size: 0.875rem;
}

@media (max-width: 30rem) {
	.ld-block-ld-head-avatar__row2 {
		flex-direction: column;
		align-items: center;
	}

	.ld-block-ld-head-avatar__lines {
		align-items: center;
		max-width: 100%;
		text-align: center;
	}

	.ld-block-ld-head-avatar__line {
		text-align: center;
	}
}

.ld-block-ld-ml__heading {
	margin: 0 0 var(--logodom-space-5, 2rem);
	font-family: var(--logodom-font-sans);
	line-height: 1.2;
}

.ld-block-ld-ml__row1 {
	margin: 0 0 var(--logodom-space-5, 2rem);
}

.ld-block-ld-ml__row1.entry-content > *:first-child {
	margin-top: 0;
}

.ld-block-ld-ml__row1.entry-content > *:last-child {
	margin-bottom: 0;
}

.ld-block-ld-ml__grid {
	display: grid;
	gap: var(--logodom-space-5, 2rem);
	align-items: start;
}

/* No CTA row: last main block is grid or row1 — no residual bottom border/shadow mistaken for a CTA separator */
.ld-block-ld-ml:not(.ld-block-ld-ml--has-bottom) .ld-block-ld-ml__grid:last-child,
.ld-block-ld-ml:not(.ld-block-ld-ml--has-bottom) .ld-block-ld-ml__row1:last-child {
	border-bottom: none;
	box-shadow: none;
}

@media (min-width: 48rem) {
	.ld-block-ld-ml__grid--ratio-40-60 {
		grid-template-columns: minmax(0, 40%) minmax(0, 60%);
	}

	.ld-block-ld-ml__grid--ratio-50-50 {
		grid-template-columns: minmax(0, 50%) minmax(0, 50%);
	}

	.ld-block-ld-ml__grid--ratio-60-40 {
		grid-template-columns: minmax(0, 60%) minmax(0, 40%);
	}

	.ld-block-ld-ml__grid--ratio-33-67 {
		grid-template-columns: minmax(0, 33%) minmax(0, 67%);
	}

	.ld-block-ld-ml__grid--ratio-67-33 {
		grid-template-columns: minmax(0, 67%) minmax(0, 33%);
	}
}

/* Single-column row2: no empty sibling column */
.ld-block-ld-ml__grid--media-only,
.ld-block-ld-ml__grid--text-only {
	display: block;
}

.ld-block-ld-ml__col--media {
	min-width: 0;
}

.ld-block-ld-ml__col--text {
	min-width: 0;
}

.ld-block-ld-ml__richtext.entry-content > *:first-child {
	margin-top: 0;
}

.ld-block-ld-ml__richtext.entry-content > *:last-child {
	margin-bottom: 0;
}

.ld-block-ld-ml__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--logodom-radius-md, 8px);
}

.ld-block-ld-ml__video-box {
	position: relative;
	border-radius: var(--logodom-radius-md, 8px);
	overflow: hidden;
	background: var(--logodom-color-border, #e5e7eb);
}

.ld-block-ld-ml__video {
	display: block;
	position: relative;
	z-index: 0;
	width: 100%;
	height: auto;
	vertical-align: middle;
}

.ld-block-ld-ml__video-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	z-index: 1;
}

.ld-block-ld-ml__video-play-icon {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.45);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ld-block-ld-ml__video-play-icon::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.6rem 0 0.6rem 1rem;
	border-color: transparent transparent transparent #ffffff;
	/* Triangle is asymmetric; small nudge for optical center inside the circle */
	transform: translateX(0.125rem);
}

/* CTA row: only rendered in PHP when both label + modal title are set; keep wrapper visually neutral (no inherited border/line). */
.ld-block-ld-ml__bottom {
	margin-top: var(--logodom-space-5, 2rem);
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	display: flex;
	justify-content: center;
	text-align: center;
}

/*
 * Bottom CTA (LD_MediaLeft): parity with logodom-2 MLTR bottom modal CTA
 * (.logodom-content-host .ld-mltr-bottom-cta__btn.ld-btn in css/blocks/theme-blocks.css).
 * Overrides foundation `button` where needed; hover uses higher specificity than `button:hover`.
 */
.ld-block-ld-ml__cta {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 1.125rem 2.125rem;
	border: none;
	border-radius: 1.25rem;
	background: var(--logodom-color-landing-cta, #ff7096);
	color: #fff;
	font-family: var(--logodom-font-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(29, 42, 58, 0.12);
	transition: transform 0.3s ease, opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

button.ld-block-ld-ml__cta:hover {
	background: var(--logodom-color-landing-cta, #ff7096);
	border-color: transparent;
	color: #fff;
	opacity: 1;
	transform: scale(1.06);
}

button.ld-block-ld-ml__cta:focus-visible {
	outline: none;
	box-shadow:
		0 1px 2px rgba(29, 42, 58, 0.12),
		0 0 0 3px rgba(255, 112, 150, 0.35);
}

button.ld-block-ld-ml__cta:active {
	transform: scale(1.03);
}

/* Transition: separate sibling section (wave / color handoff), not inside .ld-block-ld-ml */
.ld-block-ld-ml-tr {
	display: block;
	margin: 0;
	margin-top: 0;
	padding: 0;
	padding-top: 0;
	line-height: 0;
	width: 100%;
	box-sizing: border-box;
}

.ld-block-ld-ml-tr__svg-wrap {
	display: block;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}

.ld-block-ld-ml-tr__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 100;
	vertical-align: bottom;
}

/*
 * Auto-generated Contents (TOC) — render-layer; same row contract as logodom/* sections (see ContentsToc.php).
 * Outer .wp-block-logodom-contents-toc participates in .logodom-page-shell__inner--block-flow theme-row rules.
 */
.wp-block-logodom-contents-toc {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: relative;
	z-index: 0;
	overflow: visible;
}

.wp-block-logodom-contents-toc .logodom-contents.ld-block-contents {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	/* Vertical rhythm matches .ld-block-ld-ml root (theme section row). */
	padding-block: 30px;
	/* Slight surface + bottom edge so the block reads as a real section (not invisible on white). */
	color: var(--logodom-color-text, #1a1a1a);
	background: var(--logodom-color-surface, #f9fafb);
	border: none;
	border-bottom: 1px solid var(--logodom-color-border, #e5e7eb);
}

.wp-block-logodom-contents-toc .logodom-contents__title {
	margin: 0 0 var(--logodom-space-3, 1rem);
	font-size: var(--logodom-font-size-h2, 30px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--logodom-color-text, #1a1a1a);
}

.wp-block-logodom-contents-toc .logodom-contents__richtext.entry-content > *:first-child {
	margin-top: 0;
}

.wp-block-logodom-contents-toc .logodom-contents__richtext.entry-content > *:last-child {
	margin-bottom: 0;
}

.wp-block-logodom-contents-toc .logodom-contents__list {
	display: block;
	margin: 0;
	padding-left: 1.5rem;
	padding-inline-start: 1.5rem;
	font-size: var(--logodom-font-size-body, 20px);
	line-height: var(--logodom-line-height, 1.5);
	list-style-type: decimal;
	list-style-position: outside;
	color: var(--logodom-color-text, #1a1a1a);
}

.wp-block-logodom-contents-toc .logodom-contents__item {
	margin-block: 0 var(--logodom-space-2, 0.5rem);
}

.wp-block-logodom-contents-toc .logodom-contents__link {
	color: var(--logodom-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

.wp-block-logodom-contents-toc .logodom-contents__link:hover {
	color: var(--logodom-color-accent-hover);
}

/*
 * LD Contents marker — visible backlink (TOC parser signal). Reads as body text by default; hover: scale + brand tint.
 */
p.logodom-contents-marker[data-logodom-contents-link="1"] {
	margin-block: 0 var(--logodom-space-3, 1rem);
	font-family: inherit;
	font-size: inherit;
	line-height: var(--logodom-line-height, 1.5);
	color: inherit;
}

p.logodom-contents-marker[data-logodom-contents-link="1"] a,
p.logodom-contents-marker[data-logodom-contents-link="1"] a:visited {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	vertical-align: baseline;
	transform-origin: 50% 60%;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

p.logodom-contents-marker[data-logodom-contents-link="1"] a:hover {
	color: var(--logodom-color-contents-marker-hover);
	transform: scale(1.1);
}

p.logodom-contents-marker[data-logodom-contents-link="1"] a:focus-visible {
	outline: none;
	border-radius: 2px;
	box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	p.logodom-contents-marker[data-logodom-contents-link="1"] a,
	p.logodom-contents-marker[data-logodom-contents-link="1"] a:visited {
		transition: color 0.15s ease;
	}

	p.logodom-contents-marker[data-logodom-contents-link="1"] a:hover {
		transform: none;
	}
}

/*
 * LD_ContentsSections — Row2 injected <ol> (ContentsToc.php). Unnumbered list look; links are text-like.
 * (Not under .wp-block-logodom-contents-toc — needs its own rules or global <a> wins.)
 */
section[data-logodom-block="ld-contents-sections"] .logodom-contents__list {
	display: block;
	margin: 0;
	padding-left: 0;
	padding-inline-start: 0;
	font-size: var(--logodom-font-size-body, 20px);
	line-height: var(--logodom-line-height, 1.5);
	list-style: none;
	list-style-type: none;
	color: var(--logodom-color-text, #1a1a1a);
}

section[data-logodom-block="ld-contents-sections"] .logodom-contents__item {
	list-style: none;
	margin-block: 0 var(--logodom-space-2, 0.5rem);
}

section[data-logodom-block="ld-contents-sections"] .logodom-contents__list .logodom-contents__link,
section[data-logodom-block="ld-contents-sections"] .logodom-contents__list .logodom-contents__link:visited {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	font-size: inherit;
	line-height: inherit;
	vertical-align: baseline;
	transform-origin: 50% 60%;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

section[data-logodom-block="ld-contents-sections"] .logodom-contents__list .logodom-contents__link:hover {
	color: var(--logodom-color-contents-list-link-hover);
	transform: scale(1.1);
}

section[data-logodom-block="ld-contents-sections"] .logodom-contents__list .logodom-contents__link:focus-visible {
	outline: none;
	border-radius: 2px;
	box-shadow: 0 0 0 3px rgba(153, 51, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	section[data-logodom-block="ld-contents-sections"] .logodom-contents__list .logodom-contents__link,
	section[data-logodom-block="ld-contents-sections"] .logodom-contents__list .logodom-contents__link:visited {
		transition: color 0.15s ease;
	}

	section[data-logodom-block="ld-contents-sections"] .logodom-contents__list .logodom-contents__link:hover {
		transform: none;
	}
}

/* Editor UI for LD_MediaLeft: see css/editor-ld-media-left.css (editor_style only). */