/*
Theme Name: Twenty Twenty-Five Child (Timmy)
Template: twentytwentyfive
Version: 1.0.0
Description: Child theme for timmy.hoerschler.com — custom CSS for the tho-blocks plugin lives here.
Author: woogency
Text Domain: twentytwentyfive-child
*/

/* ============================================================
   tho/leistung — section with eyebrow, heading, description
   ============================================================ */

.tho-leistung {
	background-color: #eef0f6;
	padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 5vw, 4rem);
}

.tho-leistung__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.tho-leistung__header {
	max-width: 640px;
	margin: 0 0 clamp(3rem, 6vw, 5rem);
}

.tho-leistung__eyebrow {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #2a3aff;
	margin: 0 0 1.25rem;
}

.tho-leistung__heading {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.05;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #0a0a0a;
	margin: 0 0 1.5rem;
}

.tho-leistung__description {
	font-size: 1rem;
	line-height: 1.6;
	color: #6b7280;
	margin: 0;
	max-width: 520px;
}

.tho-leistung__rows {
	display: flex;
	flex-direction: column;
}

/* ============================================================
   tho/feature-row — bg-label + title + description
   ============================================================ */

.tho-feature-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1rem, 4vw, 4rem);
	padding: clamp(2rem, 4vw, 3rem) 0;
	border-bottom: 1px solid rgba(10, 10, 10, 0.08);
	position: relative;
}

.tho-feature-row:last-child {
	border-bottom: 0;
}

.tho-feature-row__bg {
	font-size: clamp(4rem, 12vw, 9rem);
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.04em;
	color: rgba(10, 10, 10, 0.08);
	margin: 0;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
}

.tho-feature-row__content {
	max-width: 460px;
}

.tho-feature-row__title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	line-height: 1.1;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #0a0a0a;
	margin: 0 0 0.75rem;
}

.tho-feature-row__description {
	font-size: 1rem;
	line-height: 1.6;
	color: #4b5563;
	margin: 0;
}

@media (max-width: 768px) {
	.tho-feature-row {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
	.tho-feature-row__bg {
		font-size: clamp(3.5rem, 18vw, 6rem);
	}
}

/* ============================================================
   Editor refinements — keep edit view close to the frontend
   ============================================================ */

.editor-styles-wrapper .tho-leistung,
.block-editor-block-list__block .tho-leistung {
	background-color: #eef0f6;
}

.block-editor-block-list__block .tho-feature-row__bg[contenteditable="true"],
.block-editor-block-list__block .tho-feature-row__title[contenteditable="true"],
.block-editor-block-list__block .tho-feature-row__description[contenteditable="true"],
.block-editor-block-list__block .tho-leistung__eyebrow[contenteditable="true"],
.block-editor-block-list__block .tho-leistung__heading[contenteditable="true"],
.block-editor-block-list__block .tho-leistung__description[contenteditable="true"] {
	outline: 1px dashed transparent;
	transition: outline-color 120ms ease;
}

.block-editor-block-list__block [contenteditable="true"]:focus {
	outline-color: #2a3aff;
}