/**
 * Hero + framed image: tablet keeps side-by-side; stack only on mobile.
 * Also fixes inline min-height / padding-top:0 that break tablet spacing.
 */

.hero-block--2-columns:has(.mestari-framed-image) .wp-block-columns,
.hero-block--2-columns:has(.jk-framed-image) .wp-block-columns,
.hero-block--2-columns:has(.wp-block-mestariteema-framed-image) .wp-block-columns,
.hero-block--2-columns:has(.wp-block-jerryketola-kuva-kehyksilla) .wp-block-columns {
	gap: clamp(24px, 3vw, 48px) !important;
}

.hero-block--2-columns:has(.mestari-framed-image) .wp-block-columns > .wp-block-column,
.hero-block--2-columns:has(.jk-framed-image) .wp-block-columns > .wp-block-column,
.hero-block--2-columns:has(.wp-block-mestariteema-framed-image) .wp-block-columns > .wp-block-column,
.hero-block--2-columns:has(.wp-block-jerryketola-kuva-kehyksilla) .wp-block-columns > .wp-block-column {
	min-width: 0 !important;
}

@media screen and (min-width: 769px) {
	.hero-block.hero-block--2-columns {
		min-height: 0 !important;
	}

	.hero-block.hero-block--2-columns > .container,
	.hero-block.hero-block--2-columns > .container:has(.hero-content-2col) {
		min-height: 0 !important;
		justify-content: flex-start !important;
	}

	.hero-block--2-columns .wp-block-columns,
	.hero-block--2-columns .wp-block-columns.is-not-stacked-on-mobile {
		flex-wrap: nowrap !important;
		flex-direction: row !important;
		width: 100% !important;
		max-width: 100% !important;
		gap: clamp(24px, 3vw, 48px) !important;
	}

	.hero-block--2-columns .wp-block-columns > .wp-block-column,
	.hero-block--2-columns .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column,
	.hero-block--2-columns .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*="flex-basis"] {
		flex: 1 1 0 !important;
		flex-grow: 1 !important;
		flex-shrink: 1 !important;
		flex-basis: 0 !important;
		min-width: 0 !important;
		max-width: calc(50% - 24px) !important;
		width: auto !important;
	}
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
	.hero-block.hero-block--2-columns {
		min-height: 0 !important;
	}

	.hero-block.hero-block--2-columns > .container,
	.hero-block.hero-block--2-columns > .container:has(.hero-content-2col) {
		justify-content: flex-start !important;
		align-items: stretch !important;
		min-height: 0 !important;
	}

	.hero-block--2-columns .wp-block-columns,
	.hero-block--2-columns:has(.mestari-framed-image) .wp-block-columns,
	.hero-block--2-columns:has(.jk-framed-image) .wp-block-columns,
	.hero-block--2-columns:has(.wp-block-mestariteema-framed-image) .wp-block-columns,
	.hero-block--2-columns:has(.wp-block-jerryketola-kuva-kehyksilla) .wp-block-columns {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 32px !important;
		row-gap: 32px !important;
		column-gap: 32px !important;
		width: 100% !important;
	}

	.hero-block--2-columns .wp-block-columns > .wp-block-column,
	.hero-block--2-columns .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column,
	.hero-block--2-columns .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*="flex-basis"] {
		flex: 1 1 0 !important;
		flex-grow: 1 !important;
		flex-shrink: 1 !important;
		flex-basis: 0 !important;
		min-width: 0 !important;
		max-width: calc(50% - 24px) !important;
		width: auto !important;
	}

	.hero-block--2-columns .wp-block-columns > .wp-block-column.is-vertically-aligned-center {
		justify-content: center !important;
		align-self: center !important;
	}

	.hero-block--2-columns .wp-block-columns > .wp-block-column.is-vertically-aligned-top {
		justify-content: flex-start !important;
		align-self: flex-start !important;
	}

	.hero-block--2-columns .wp-block-columns > .wp-block-column.is-vertically-aligned-bottom {
		justify-content: flex-end !important;
		align-self: flex-end !important;
	}

	.hero-block .hero-content h1,
	.hero-block .wp-block-heading:where(h1) {
		margin-top: 0 !important;
		margin-bottom: 0.5em !important;
	}

	.hero-block .wp-block-paragraph {
		margin-top: 0 !important;
		margin-bottom: 0.75em !important;
	}

	.hero-block .wp-block-paragraph:last-of-type {
		margin-bottom: 0 !important;
	}

	/* Gap before whatever follows the buttons (e.g. a rating bar), none at the end of the column */
	.hero-block .wp-block-buttons,
	.hero-block .wp-block-paragraph + .wp-block-buttons {
		margin-top: 1em !important;
		margin-bottom: 1em !important;
	}

	.hero-block .wp-block-buttons:last-child {
		margin-bottom: 0 !important;
	}

	.hero-block .mestari-framed-image,
	.hero-block .jk-framed-image,
	.hero-block .wp-block-mestariteema-framed-image,
	.hero-block .wp-block-jerryketola-kuva-kehyksilla,
	.hero-block .mestari-framed-image__img,
	.hero-block .jk-framed-image__img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-top: 0 !important;
	}

	body.header-overlay-active .hero-block.hero-block--2-columns {
		padding-top: calc(var(--mestari-header-height, 64px) + var(--padding-default-top, 60px)) !important;
	}
}

@media screen and (max-width: 768px) {
	.hero-block--2-columns .wp-block-columns,
	.hero-block--2-columns:has(.mestari-framed-image) .wp-block-columns,
	.hero-block--2-columns:has(.jk-framed-image) .wp-block-columns,
	.hero-block--2-columns:has(.wp-block-mestariteema-framed-image) .wp-block-columns,
	.hero-block--2-columns:has(.wp-block-jerryketola-kuva-kehyksilla) .wp-block-columns {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: 24px !important;
		row-gap: 24px !important;
		column-gap: 24px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.hero-block--2-columns .wp-block-columns > .wp-block-column {
		flex: 0 0 auto !important;
		flex-basis: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		align-self: stretch !important;
	}

	.hero-block .mestari-framed-image,
	.hero-block .jk-framed-image,
	.hero-block .wp-block-mestariteema-framed-image,
	.hero-block .wp-block-jerryketola-kuva-kehyksilla,
	.hero-block .mestari-framed-image__img,
	.hero-block .jk-framed-image__img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-top: 0 !important;
	}

	.hero-block.hero-block--2-columns {
		min-height: 0 !important;
	}
}