/* Replacement for the former GreenShift icon boxes. */
.gc-iconbox { display: flex; justify-content: flex-start; }
.gc-iconbox__wrap { display: inline-flex; }
.gc-iconbox svg { display: block; }
.gc-iconbox--boxed .gc-iconbox__wrap {
	box-sizing: border-box; width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	background-color: #fff; border-radius: 50%;
}
.gc-iconbox--boxed svg { width: 24px; height: 24px; }

/* Icon + heading rows: the icon column hugs the icon, the heading takes the rest,
   and the pair stays side by side on narrow screens instead of stacking. */
.wp-block-columns:has(> .wp-block-column > .gc-iconbox--boxed) {
	flex-wrap: nowrap !important; align-items: center !important; gap: 14px !important;
	width: 100%; box-sizing: border-box;
}
/* Selector specificity beats core's mobile rule (.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important }). */
.wp-block-columns:has(> .wp-block-column > .gc-iconbox--boxed) > .wp-block-column:has(> .gc-iconbox--boxed) {
	flex: 0 0 52px !important; flex-basis: 52px !important; width: 52px;
}
.wp-block-columns:has(> .wp-block-column > .gc-iconbox--boxed) > .wp-block-column:not(:has(> .gc-iconbox)) {
	flex: 1 1 auto !important; flex-basis: auto !important; min-width: 0;
}
.wp-block-columns:has(> .wp-block-column > .gc-iconbox--boxed) .wp-block-heading {
	margin-left: 0 !important;
	font-size: clamp(1rem, 0.75rem + 0.6vw, 1.25rem) !important;
	word-break: normal !important; overflow-wrap: normal !important;
}

/* Four narrow cards side by side (782-1279px): icon above the heading so long words like
   "Finanzbereich" get the full card width. Below 782px the cards stack and the row layout returns. */
@media (min-width: 782px) and (max-width: 1279px) {
	.wp-block-columns:has(> .wp-block-column > .gc-iconbox--boxed) {
		flex-direction: column !important; align-items: flex-start !important; gap: 12px !important;
	}
	.wp-block-columns:has(> .wp-block-column > .gc-iconbox--boxed) > .wp-block-column {
		align-self: flex-start !important;
	}
	.wp-block-columns:has(> .wp-block-column > .gc-iconbox--boxed) > .wp-block-column:not(:has(> .gc-iconbox)) {
		width: 100%;
	}
}

/* Mobile (below WordPress' 782px column breakpoint). */
@media (max-width: 781px) {
	/* Mobile-only hero cover: same 20px gutter as the rest of the page (was ~11px). */
	.wp-block-cover.fr-desktop-hide.fr-tablet-hide {
		padding-left: 20px !important; padding-right: 20px !important;
	}
	/* Long words like "Betriebswirtschaftliche" must fit the narrow screen. */
	.wp-block-cover.fr-desktop-hide.fr-tablet-hide h1 { font-size: clamp(1.4rem, 6vw, 2.1rem) !important; }
	/* Desktop hero where it still shows (768-781px): keep photo and text side by side
	   instead of stacking the text across the face; 20px gutter. */
	.wp-block-cover.fr-mobile-hide { padding-left: 20px !important; padding-right: 20px !important; }
	.wp-block-cover.fr-mobile-hide .wp-block-columns { flex-wrap: nowrap !important; }
	.wp-block-cover.fr-mobile-hide .wp-block-columns > .wp-block-column { flex-basis: 50% !important; }
	.wp-block-cover.fr-mobile-hide h1 { font-size: 1.6rem !important; }
	/* Logo rows: a 3-column grid at uniform height instead of six ~35px logos squeezed into one line. */
	.wp-block-group.is-nowrap.is-layout-flex:has(> figure.wp-block-image) {
		display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 16px; justify-items: center; align-items: center;
		padding: 20px 16px !important;
	}
	.wp-block-group.is-nowrap.is-layout-flex:has(> figure.wp-block-image) > figure.wp-block-image { margin: 0; }
	.wp-block-group.is-nowrap.is-layout-flex:has(> figure.wp-block-image) > figure.wp-block-image img {
		width: auto !important; height: auto !important; max-width: 100%; max-height: 36px; object-fit: contain;
	}
}

/* Desktop hero at medium widths: the text column otherwise runs to the window edge (0px at 1024px). */
@media (min-width: 782px) and (max-width: 1279px) {
	.wp-block-cover.fr-mobile-hide .wp-block-cover__inner-container {
		box-sizing: border-box; padding-left: 30px !important; padding-right: 30px !important;
	}
}

/* Mobile menu open/close buttons: browsers default <button> to the arrow cursor. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { cursor: pointer; }

/* Mailto button in the former contact-form sections (styled like the old form's submit button). */
.gc-mailto .wp-block-button__link {
	color: #fff !important;
	background-color: transparent !important;
	border: 1px solid #fff !important;
	border-radius: 30px !important;
}

/* From the site's former global custom CSS (contact-form rules dropped). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*[id] { scroll-margin-top: 100px; }