/**
 * Component classes for Elementor.
 *
 * Every class here is meant to be typed into a widget or container under
 * Advanced → CSS Classes. Nothing targets Elementor's generated class names
 * (.elementor-element-xxxx) or its internal structure, because those change when
 * the page is re-saved. Selectors stay one level deep so an editor can still
 * override padding, colour or typography from the panel.
 *
 * Naming: nm-<block> and nm-<block>--<variant>.
 */

/* ---------------------------------------------------------------------------
 * nm-section — a container with rhythm the panel cannot express in one control.
 * Use on a Container when you want the vertical spacing to scale with viewport.
 * ------------------------------------------------------------------------- */
.nm-section {
	padding-block: clamp(var(--hbc-space-lg), 6vw, var(--hbc-space-2xl));
}

.nm-section--tight {
	padding-block: clamp(var(--hbc-space-md), 3vw, var(--hbc-space-lg));
}

.nm-section--flush {
	padding-block: 0;
}

/* ---------------------------------------------------------------------------
 * nm-card-grid — auto-fitting grid. Elementor's container grid needs a fixed
 * column count per breakpoint; this fills the row with whatever fits, which is
 * what product and post listings usually want.
 * ------------------------------------------------------------------------- */
.nm-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--hbc-grid-min), 1fr));
	gap: var(--hbc-space-md);
	align-items: stretch;
}

.nm-card-grid--wide {
	--hbc-grid-min: 340px;
}

.nm-card-grid--narrow {
	--hbc-grid-min: 180px;
}

/* ---------------------------------------------------------------------------
 * nm-card — surface treatment plus a lift on hover.
 * Set the background, border colour and padding in the panel; this only adds
 * the parts Elementor has no control for.
 * ------------------------------------------------------------------------- */
.nm-card {
	position: relative;
	height: 100%;
	border-radius: var(--hbc-radius-md);
	transition: transform var(--hbc-transition), box-shadow var(--hbc-transition);
}

.nm-card:hover,
.nm-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--hbc-shadow-lg);
}

/* Makes the whole card clickable from a single link inside it, without adding
   a nested-anchor accessibility problem. Put nm-card-link on the button or
   heading link widget inside an nm-card. */
.nm-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ---------------------------------------------------------------------------
 * nm-media — aspect-ratio crop for image widgets whose sources are inconsistent.
 * ------------------------------------------------------------------------- */
.nm-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	border-radius: inherit;
}

.nm-media--square img {
	aspect-ratio: 1 / 1;
}

.nm-media--wide img {
	aspect-ratio: 16 / 9;
}

.nm-media--portrait img {
	aspect-ratio: 3 / 4;
}

/* Slow zoom on hover, for image widgets inside a card. */
.nm-media--zoom {
	overflow: hidden;
}

.nm-media--zoom img {
	transition: transform 600ms var(--hbc-ease);
}

.nm-card:hover .nm-media--zoom img,
.nm-media--zoom:hover img {
	transform: scale(1.05);
}

/* ---------------------------------------------------------------------------
 * nm-btn-ghost — an underline-on-hover text button. Elementor's button widget
 * covers filled and outlined styles well; this is the one it cannot do.
 * ------------------------------------------------------------------------- */
.nm-btn-ghost .elementor-button,
a.nm-btn-ghost {
	position: relative;
	background: transparent;
	padding-inline: 0;
}

.nm-btn-ghost .elementor-button::after,
a.nm-btn-ghost::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--hbc-transition);
}

.nm-btn-ghost:hover .elementor-button::after,
a.nm-btn-ghost:hover::after,
.nm-btn-ghost .elementor-button:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ---------------------------------------------------------------------------
 * nm-reveal — scroll-in entrance. Elementor's own entrance animations replay on
 * every viewport entry and cannot be staggered; this runs once and staggers
 * siblings. Driven by assets/js/main.js.
 * ------------------------------------------------------------------------- */
.nm-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms var(--hbc-ease), transform 600ms var(--hbc-ease);
	transition-delay: var(--nm-reveal-delay, 0ms);
}

.nm-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Never hide content when JS is unavailable or motion is reduced. */
.no-js .nm-reveal,
.elementor-editor-active .nm-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.nm-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * nm-flow — vertical rhythm for a container of mixed text widgets.
 * ------------------------------------------------------------------------- */
.nm-flow > * + * {
	margin-block-start: var(--hbc-space-md);
}

/* ---------------------------------------------------------------------------
 * nm-sticky — sticky column inside a two-column container. Elementor Pro's
 * sticky effect uses fixed positioning and escapes the container; this does not.
 * ------------------------------------------------------------------------- */
.nm-sticky {
	position: sticky;
	top: var(--hbc-sticky-offset, var(--hbc-space-lg));
	align-self: start;
}

/* ---------------------------------------------------------------------------
 * Accessibility baseline. Elementor does not render a visible focus ring on
 * every widget; this makes keyboard navigation usable site-wide.
 * ------------------------------------------------------------------------- */
.hbc :focus-visible {
	outline: 2px solid var(--hbc-color-accent);
	outline-offset: 2px;
	border-radius: var(--hbc-radius-sm);
}

.nm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}