/**
 * How We Work Widget — structural styles.
 * Colors, typography, spacing and column widths are controlled live from
 * the Elementor editor (Style tab); this file only holds layout mechanics
 * and safe responsive fallbacks. Background is transparent by default —
 * no decorative texture is applied.
 */

.hww-how-we-work {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background-color: transparent;
}

.hww-how-we-work *,
.hww-how-we-work *::before,
.hww-how-we-work *::after {
	box-sizing: border-box;
}

.hww-how-we-work__inner {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

/* Stacked layout: heading block on top, features grid below ------------ */
.hww-how-we-work__heading-block {
	width: 100%;
	margin-bottom: 64px;
}

/* Eyebrow ---------------------------------------------------------------- */
.hww-how-we-work__eyebrow {
	display: block;
}

/* Heading ------------------------------------------------------------- */
.hww-how-we-work__heading {
	margin: 0;
	font-weight: normal;
}

.hww-how-we-work__heading-line {
	display: block;
}

/* Features grid ---------------------------------------------------------- */
.hww-how-we-work__features {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	column-gap: 64px;
	row-gap: 56px;
	width: 100%;
}

.hww-how-we-work__feature {
	min-width: 0;
}

.hww-how-we-work__title {
	margin: 0 0 16px;
}

.hww-how-we-work__description {
	margin: 0;
}

/* Responsive fallbacks --------------------------------------------------
 * Applied only if the responsive controls in the Style tab have not been
 * changed from their own responsive defaults, guaranteeing a sane stacked
 * layout on tablet/mobile even in unusual editor setups.
 */
@media ( max-width: 767px ) {
	.hww-how-we-work__features {
		grid-template-columns: 1fr;
	}

	.hww-how-we-work__title {
		margin-bottom: 12px;
	}
}