/* Canvas = front. Overlay ::after sul padre; core/image abs (data-type in editor). */

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

/*
  InnerBlocks: .container sul front; in editor il layout Gutenberg.
  position:static così lo sfondo si ancora a .note-hero, non alla colonna copy.
*/
.note-hero > .container,
.note-hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
.note-hero > .container > .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-bottom: 72px;
}

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

.note-hero .wp-block-image,
.note-hero [data-type="core/image"] {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	overflow: hidden;
}

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

/*
  Gutenberg mette style="height:auto" sull'img in canvas:
  senza !important object-fit:cover non riempie l'hero.
*/
.editor-styles-wrapper .note-hero img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}

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

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

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