/**
 * Inline in-content ad banner.
 *
 * @package Hamechadesh
 */

.hm-ad-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border-radius: var(--hm-radius-xl);
	margin-block: var(--hm-space-lg);
	padding: 10px;
	contain: layout paint;
}

.hm-ad-inline__slot {
	display: block;
	width: 100%;
	max-width: 728px; /* desktop default — overridden in the mobile rule */
	min-height: 90px;
}

.hm-ad-inline__slot .aso-zone {
	display: block;
	width: 100%;
	min-height: 90px;
	text-decoration: none;
}

/* Mobile-emitted banner is zone 96767 (320×100). Server-side wp_is_mobile()
   in components/ad-inline.php emits ONLY the mobile <ins> on phones, so
   these dimensions are guaranteed to match the markup that's rendered.
   The media-query is kept (rather than scoping by .hm-ad-inline--mobile)
   so a desktop-rendered banner still adapts gracefully if the viewport is
   narrowed past 767px after page load. */
@media (max-width: 767px) {
	.hm-ad-inline {
		padding: 6px;
		border-radius: var(--hm-radius-lg);
	}

	.hm-ad-inline__slot {
		max-width: 320px;
	}

	.hm-ad-inline__slot,
	.hm-ad-inline__slot .aso-zone {
		min-height: 100px;
	}
}