/**
 * Service Cards Widget
 *
 * Most of the visual design now lives in Tailwind utility classes on
 * the render() output (see inc/elementor/widgets/service-cards.php).
 * This stylesheet only owns the bits that need to be component-scoped
 * so Elementor's "Layout" and "Colors" Style controls keep working —
 * the controls emit selectors like `{{WRAPPER}} .bh-svc => background:
 * {{VALUE}}`, and those wins because Elementor's per-post dynamic CSS
 * is enqueued after the theme stylesheet.
 *
 * Two things remain in CSS:
 *   1. A small fallback for browsers without `aspect-ratio` support
 *      (caniuse: ~95% global — the fallback covers the last 5%).
 *   2. The Elementor Editor preview iframe doesn't always have the
 *      latest tailwind.min.css available immediately after a theme
 *      update; this file ships the *minimum* visual scaffolding so the
 *      editor preview is recognisable as a card even before Tailwind
 *      resolves.
 *
 * Anything visual beyond that — colours, paddings, radii, shadows,
 * typography — comes from Tailwind utilities or Elementor controls.
 */

/* ---------- Section scaffold ---------- */
.bh-svc {
	display: flex;
	flex-direction: column;
	gap: 60px;
	padding: 80px 100px;
}

/* ---------- Card fallback (Tailwind owns primary styles) ---------- */
.bh-svc__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 12px;
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
}

@media (min-width: 640px) {
	.bh-svc__card {
		padding: 16px;
	}
}

/* ---------- Image wrap ---------- */
.bh-svc__img-wrap {
	width: 100%;
	background: #e5e5e5;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}

.bh-svc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Body content ---------- */
.bh-svc__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1;
}

/* ---------- Image wrap aspect-ratio fallback ----------
   The Tailwind utility `aspect-[16/10]` emits `aspect-ratio: 16 / 10`.
   For browsers that don't support `aspect-ratio` we fall back to a
   classic padding-bottom trick + absolute-positioned image (the image
   utilities already use `absolute inset-0` so the trick lines up).
*/
@supports not (aspect-ratio: 1 / 1) {
	.bh-svc__img-wrap {
		position: relative;
		height: 0;
		padding-bottom: 62.5%; /* 16:10 */
	}

	/* On wider viewports the Tailwind `sm:h-[200px]` kicks in. Tailwind's
	   `sm:` breakpoint = 640px, mirror it here for the fallback path. */
	@media (min-width: 640px) {
		.bh-svc__img-wrap {
			height: 200px;
			padding-bottom: 0;
		}
	}
}

/* ---------- Icon size for Elementor's rendered <i> + <svg> ----------
   Elementor's Icons_Manager renders either an <i class="fas fa-…"> or
   an inline <svg>. Both inherit the 18px font-size we set via Tailwind
   `text-fuel-yellow` (which sets `color`, not `font-size`). We pin a
   sensible icon-glyph size here so the icon badge looks balanced
   inside its 36×36 (size-9) container. */
.bh-svc__icon i,
.bh-svc__icon svg {
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.bh-svc {
		padding: 56px 32px;
		gap: 40px;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.bh-svc {
		padding: 40px 16px;
		gap: 32px;
	}

	.bh-svc__icon i,
	.bh-svc__icon svg {
		width: 16px;
		height: 16px;
		font-size: 16px;
	}
}