/* Canvas = front. Overlay su core/image .hero__bg (data-type in editor). */

.editor-styles-wrapper .wp-block-turchet-hero {
	width: 100%;
	max-width: none;
}

/*
  InnerBlocks: .hero__content sul front; in editor il layout Gutenberg.
  position:static così lo sfondo si ancora a .hero, non alla colonna copy.
*/
.hero > .hero__content,
.hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
.hero > .hero__content > .block-editor-inner-blocks > .block-editor-block-list__layout {
	position: static;
	z-index: auto;
	width: min(calc(100% - 32px), var(--container));
	margin-inline: auto;
	padding: 72px 0 88px;
	max-width: 640px;
}

.hero .block-editor-inner-blocks,
.hero .block-editor-block-list__layout {
	position: static;
}

.hero .wp-block-image.hero__bg,
.hero [data-type="core/image"]:has(.hero__bg) {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	width: auto;
	max-width: none;
	height: auto;
}

.hero .wp-block-image.hero__bg img,
.hero [data-type="core/image"]:has(.hero__bg) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero [data-type="core/image"]:has(.hero__bg) figure {
	position: static;
	width: 100%;
	height: 100%;
	margin: 0;
}

.hero .eyebrow,
.hero h1,
.hero p,
.hero .wp-block-buttons,
.hero [data-type="core/paragraph"],
.hero [data-type="core/heading"],
.hero [data-type="core/buttons"] {
	position: relative;
	z-index: 1;
}

.hero .wp-block-buttons,
.hero [data-type="core/buttons"] {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 32px 0 0;
}

.hero .wp-block-button {
	margin: 0;
}

@media (max-width: 980px) {
	.hero > .hero__content,
	.hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
	.hero > .hero__content > .block-editor-inner-blocks > .block-editor-block-list__layout {
		padding: 56px 0 64px;
	}
}

@media (max-width: 720px) {
	.hero > .hero__content,
	.hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
	.hero > .hero__content > .block-editor-inner-blocks > .block-editor-block-list__layout {
		padding: 40px 0 48px;
		max-width: none;
	}

	.hero .wp-block-buttons,
	.hero [data-type="core/buttons"] {
		flex-direction: column;
		align-items: stretch;
	}

	.hero .wp-block-button,
	.hero .wp-block-button .wp-block-button__link {
		width: 100%;
	}
}

@media (max-width: 860px) {
	.hero > .hero__content,
	.hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
	.hero > .hero__content > .block-editor-inner-blocks > .block-editor-block-list__layout {
		width: min(calc(100% - 24px), var(--container));
	}
}