/*
 * Sadam Image — full-width image section.
 *
 * Sister block to Sadam Hero: same ACF-options-driven architecture, but only
 * the image fields are read. The image is rendered at 100% width with
 * `height: auto`, so its native aspect ratio is preserved and nothing is
 * cropped on either axis. The section's height follows the image.
 *
 * Like the hero CSS, every declaration is marked `!important` because the
 * theme's global stylesheet aggressively re-sets margins, paddings, and
 * widths via its own `!important` rules.
 */

/* ---- Container --------------------------------------------------------- */

.sadam-image {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.sadam-image.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* ---- Image ------------------------------------------------------------- */

/*
 * `line-height: 0` on the wrapper kills the descender gap that some browsers
 * leave under an inline-block <img>. The image itself is set to `display:
 * block` already, so the wrapper line-height is just defence-in-depth.
 */
.sadam-image__bg {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}

.sadam-image__bg img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* ---- Editor empty-state hint ------------------------------------------- */

/*
 * Inline-flow hint shown in the editor preview when no image is set on the
 * options page. Margin gives the otherwise-empty section enough height to
 * be visible in the inserter.
 */
.sadam-image__editor-hint {
	display: inline-block !important;
	margin: 24px !important;
	padding: 12px 16px !important;
	background: rgba(0, 0, 0, 0.6) !important;
	color: #fff !important;
	border-radius: 4px !important;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* ---- Editor parity ----------------------------------------------------- */

.acf-block-preview .sadam-image {
	margin: 0 !important;
}