/* --------------------------------------------------------------------------
   Mayuri "Since 1997" badge widget.

   Replaces the old .mev-arch::after append. Everything here is scoped to
   .mev-sb, so nothing else on the page can be affected, and removing the
   widget removes the badge.
   -------------------------------------------------------------------------- */

.mev-sb {
	--sb-x: 24px;
	--sb-y: 24px;
	--sb-z: 4;
	line-height: 0;
}

/* Pinned to a corner of the nearest positioned ancestor. The team sets the
   parent container to Position: Relative in Elementor. If they forget, the
   badge pins to the section above rather than disappearing, which is a visible
   mistake rather than a silent one. */
.mev-sb.is-overlay {
	position: absolute;
	z-index: var(--sb-z);
	pointer-events: none;
}

.mev-sb.is-overlay .mev-sb-link { pointer-events: auto; }

.mev-sb-tl { top: var(--sb-y);    left: var(--sb-x); }
.mev-sb-tr { top: var(--sb-y);    right: var(--sb-x); }
.mev-sb-bl { bottom: var(--sb-y); left: var(--sb-x); }
.mev-sb-br { bottom: var(--sb-y); right: var(--sb-x); }

/* Normal flow, e.g. sitting beside a heading inside the white card. */
.mev-sb.is-flow {
	display: flex;
	justify-content: flex-end;
}

/* The theme ships a global `img { height: auto }` which fights an explicit
   height, so width drives the box and the intrinsic square keeps it round.
   See mayuri-menu-grid-widget for the same collision. */
.mev-sb-img {
	display: block;
	width: 140px;
	max-width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transform-origin: center;
}

.mev-sb.has-shadow .mev-sb-img {
	filter: drop-shadow(0 6px 18px rgba(18, 48, 31, .28));
}

/* Pinned into the hero's white panel. The script sets the panel to
   position:relative; these rules do the rest. Same corner classes as the
   section overlay, so the two modes behave identically. */
.mev-sb.pin-card { position: absolute; }

/* The script moves the whole Elementor widget wrapper into the card so that
   Elementor's own `.elementor-element-<id> .mev-sb-img` rules keep matching.
   display:contents removes that wrapper from the box tree, so .mev-sb still
   positions against the card exactly as if it were a direct child. */
.mev-sb-host { display: contents; }

/* The panel has generous padding (p-7 / md:p-10 / lg:p-12). A badge pinned hard
   into the corner reads as an afterthought, so it overlaps the padding edge
   slightly, the way the reference artwork does. */
.mev-sb.pin-card.mev-sb-tr { top: var(--sb-y); right: var(--sb-x); left: auto; }
.mev-sb.pin-card.mev-sb-tl { top: var(--sb-y); left: var(--sb-x); right: auto; }

/* Phone. The panel is only ~300px of usable width, so an absolutely positioned
   badge always lands on the heading no matter how it is nudged. Below 768px it
   leaves the overlay entirely and sits in the flow above the eyebrow, pushed to
   the right. The script puts it first in the card so this needs no extra markup.
   Desktop and tablet are unaffected: there the badge is absolute, so its DOM
   position does not matter. */
@media (max-width: 767px) {
	.mev-sb.pin-card {
		position: static;
		display: block;
		width: -moz-max-content;
		width: max-content;
		max-width: 100%;
		/* Left edge lines up with the eyebrow and heading, so the badge reads as
		   part of the text column rather than floating off to one side. */
		margin: 0 auto .9rem 0;
	}
}

/* The badge is decoration. Never let it swallow a tap meant for the CTA
   underneath it on a phone. */
@media (max-width: 767px) {
	.mev-sb.is-overlay { pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mev-sb-img { transition: none !important; }
}