/**
 * Mobile-only spacing and utilities. Applies only below 768px.
 * .add-right-padding kicks in earlier, at 1024px.
 */

/* Logo block (e.g. with three-column-stack): column alignment + logo sizes. All viewports. */
.logo-block.wp-block-columns,
.logo-block .wp-block-columns {
	align-items: center !important;
}
.logo-block .wp-block-column {
	display: flex !important;
	align-items: center !important;
	min-width: 0 !important;
}
/* Left column (1, 4): left aligned */
.logo-block .wp-block-column:nth-child(3n + 1) {
	justify-content: flex-start !important;
	text-align: left !important;
}
/* Center column (2, 5): center aligned */
.logo-block .wp-block-column:nth-child(3n + 2) {
	justify-content: center !important;
	text-align: center !important;
}
/* Right column (3, 6): right aligned */
.logo-block .wp-block-column:nth-child(3n) {
	justify-content: flex-end !important;
	text-align: right !important;
}
/* One row (6 columns): center 3 and 4 so they don’t sit too close. Reverts to left/right when it snaps to 2 rows at 1024px. */
@media (min-width: 1025px) {
	.logo-block .wp-block-column:nth-child(3),
	.logo-block .wp-block-column:nth-child(4) {
		justify-content: center !important;
		text-align: center !important;
	}
}
/* Logo wrapper: add .logo-landscape or .logo-square to the wrapper (link/div) around each logo. */
.logo-block .logo-landscape,
.logo-block .logo-square {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
}
/* Desktop logo sizes */
.logo-block .logo-landscape img,
.logo-block .logo-landscape svg,
.logo-block .logo-landscape object {
	max-width: 130px !important;
	width: auto !important;
	height: auto !important;
	max-height: none;
}
.logo-block .logo-square img,
.logo-block .logo-square svg,
.logo-block .logo-square object {
	max-width: 65px !important;
	max-height: 65px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

@media (max-width: 1024px) {
	.add-right-padding {
		padding-right: 2em !important;
	}
	/* Logo block: snap to 2 rows (3 columns) at 1024px so alignment matches. */
	.logo-block.three-column-stack.wp-block-columns,
	.logo-block.three-column-stack .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 0.6em 0.6em !important;
		row-gap: 1.5em !important;
	}
	.logo-block.three-column-stack .wp-block-column {
		min-width: 0 !important;
	}
}

@media (max-width: 768px) {
	/* Preset spacing 60 (60px on desktop) becomes 40px on mobile */
	:root {
		--wp--preset--spacing--60: 40px;
	}

	.wp-site-blocks {
		padding-top: 0;
	}

	.cover-headline {
		padding-top: 40px !important;
	}

	.hide-on-mobile {
		display: none !important;
	}

	.footer-spacer {
		height: 10vh !important;
		min-height: 10vh !important;
	}

	.mobile-section {
		padding-top: 40px !important;
	}

	.reduce-vertical-padding {
		padding-top: 30px !important;
		padding-bottom: 26px !important;
	}

	/* Who we are: tighten vertical gap between stacked columns on mobile (negative margin) */
	.who-we-are.wp-block-columns,
	.who-we-are .wp-block-columns {
		gap: 0 !important;
	}
	.who-we-are .wp-block-column + .wp-block-column {
		margin-top: -3rem !important;
	}

	.reduced-vh {
		height: 50vh !important;
		min-height: 50vh !important;
	}

	/* Two-column stack: 1 2 3 4 on desktop → 1 2 / 3 4 on mobile; row gap doubled for vertical space */
	.two-column-stack.wp-block-columns,
	.two-column-stack .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.6em 0.6em !important;
		row-gap: 1.5em !important;
	}
	.two-column-stack .wp-block-column {
		min-width: 0 !important;
	}

	/* Three-column stack: 1 2 3 4 5 6 on desktop → 1 2 3 / 4 5 6 on mobile; row gap doubled for vertical space */
	.three-column-stack.wp-block-columns,
	.three-column-stack .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 0.6em 0.6em !important;
		row-gap: 1.5em !important;
	}
	.three-column-stack .wp-block-column {
		min-width: 0 !important;
	}

	/* Logo block: smaller logo sizes on mobile */
	.logo-block .logo-landscape img,
	.logo-block .logo-landscape svg,
	.logo-block .logo-landscape object {
		max-width: 90px !important;
	}
	.logo-block .logo-square img,
	.logo-block .logo-square svg,
	.logo-block .logo-square object {
		max-width: 45px !important;
		max-height: 45px !important;
	}

	.big-number {
		font-size: 60px !important;
	}

	/* List: text left-aligned, dropdown chevron 75% size and right-aligned (mobile only) */
	.list {
		text-align: left !important;
	}
	/* Inline SVGs (if any) */
	.list svg {
		transform: scale(0.75) !important;
		transform-origin: right center !important;
	}
	/* Details block: chevron 75% size, pushed to the right; text stays left */
	.list .wp-block-details summary,
	.list .qd-details summary,
	.list details summary {
		justify-content: flex-start !important;
	}
	.list .wp-block-details summary::after,
	.list .qd-details summary::after,
	.list details summary::after {
		width: 22.5px !important;
		height: 12.75px !important;
		background-size: 22.5px 12.75px !important;
		margin-left: auto !important;
	}

	/* Numbers section: match theme content width (94%) on mobile so it isn’t narrower */
	.numbers-section,
	.numbers-section.is-layout-constrained,
	.numbers-section .is-layout-constrained {
		width: 94% !important;
		max-width: 94% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Main content: same 94% width on mobile for all pages (incl. imprint/impressum). Any direct child of main that isn’t the cover. */
	main > *:not(.wp-block-cover):not(.wp-block-cover-image) {
		width: 94% !important;
		max-width: 94% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}

	/* Special stack: 3 columns (left: one,three,four | middle: empty | right: two) → stack as one, two, three, four on mobile */
	.special-stack.wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
	}
	.special-stack.wp-block-columns .wp-block-column {
		display: contents !important;
	}
	.special-stack .one { order: 1 !important; padding-top: 40px !important; }
	.special-stack .two { order: 2 !important; margin-top: 1rem !important; }
	.special-stack .three { order: 3 !important; margin-top: 1rem !important; }
	.special-stack .four { order: 4 !important; margin-top: 1rem !important; }
	/* Middle column content (empty or spacer) goes last so it doesn’t break order */
	.special-stack.wp-block-columns .wp-block-column:nth-child(2) * {
		order: 10 !important;
	}

	/* Footer top half: two columns – left = Holding + its block (.qd-footer-left), right = rest */
	.qd-footer-top,
	.qd-footer .qd-footer-top,
	footer .qd-footer-top,
	.qd-footer .wp-block-group > .wp-block-group > .wp-block-group:first-child,
	footer .wp-block-group > .wp-block-group > .wp-block-group:first-child {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0.5rem 1.5rem !important;
		align-items: start !important;
	}
	/* Left column: spans all rows so right column rows don’t get stretched by Holding height */
	.qd-footer-top .qd-footer-left,
	.qd-footer .qd-footer-top .qd-footer-left,
	footer .qd-footer-top .qd-footer-left,
	.qd-footer .wp-block-group > .wp-block-group > .wp-block-group:first-child > .qd-footer-left,
	footer .wp-block-group > .wp-block-group > .wp-block-group:first-child > .qd-footer-left {
		grid-column: 1 !important;
		grid-row: 1 / -1 !important;
	}
	/* Right column: each group in its own row so Contact sits close under Careers (top-aligned with Partnerships) */
	.qd-footer-top > *:not(.qd-footer-left),
	.qd-footer .qd-footer-top > *:not(.qd-footer-left),
	footer .qd-footer-top > *:not(.qd-footer-left),
	.qd-footer .wp-block-group > .wp-block-group > .wp-block-group:first-child > *:not(.qd-footer-left),
	footer .wp-block-group > .wp-block-group > .wp-block-group:first-child > *:not(.qd-footer-left) {
		grid-column: 2 !important;
	}
}