/* ARC Starter Templates — Elementor bridge.
   Neutralizes Elementor defaults that would fight the Tailwind design:
   - removes Elementor's automatic spacing between widgets (the Tailwind
     gap and space-y utilities on the wrappers already control rhythm)
   - lets widget wrappers carry the original utility classes              */

.arc-tpl .elementor-widget {
	margin-block-end: 0;
}

/* Image widgets: the widget wrapper carries the h-* and object-* utility
   classes; the inner <img> fills it so cropping matches the static design. */
.arc-tpl .elementor-widget-image,
.arc-tpl .elementor-widget-image .elementor-image {
	width: 100%;
}
.arc-tpl .elementor-widget-image img {
	width: 100%;
	height: 100%;
	object-fit: inherit;
	border-radius: inherit;
	display: block;
}

/* -------------------------------------------------------------------------
 * Gutenberg wp:image blocks (Arc_ST_Blocks converter — non-Elementor path).
 * The <figure> carries the template's sizing/crop classes while the inner
 * <img> keeps none; WP's own "height:auto" then lets the photo overflow its
 * frame and cover sibling content. Same fill behaviour as the image widget.
 * ---------------------------------------------------------------------- */
.arc-tpl .wp-block-image {
	margin-block-end: 0;
}
.arc-tpl .wp-block-image[class*="mx-auto"] {
	margin-inline: auto;
}
.arc-tpl .wp-block-image > img {
	width: 100%;
	height: 100%;
	object-fit: inherit;
	border-radius: inherit;
	display: block;
}

/* Containers keep their own width — the Tailwind max-w-* and mx-auto
   utilities on the wrapper already handle centering. */
.arc-tpl .e-con,
.arc-tpl .e-con-inner {
	min-width: 0;
}

/* Text editors inherit color/typography from the utility classes. */
.arc-tpl .elementor-widget-text-editor {
	color: inherit;
	font-family: inherit;
}

/* -------------------------------------------------------------------------
 * Native button widgets converted from a.btn-* anchors.
 * The Tailwind utility classes live on the widget wrapper — neutralize
 * Elementor's own button skin so the utilities win and the inner anchor
 * inherits the wrapper's colors/typography.
 * ---------------------------------------------------------------------- */

.arc-tpl .elementor-widget-button[class*="btn-"] .elementor-button,
body.arc-tpl .elementor-widget-button[class*="btn-"] .elementor-button {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: inherit;
	font: inherit;
	color: inherit;
	cursor: pointer;
	width: 100%;
	height: 100%;
}