/* ================================================
   AMOTZ — STAT STRIP  (Figma 566:9840)
   ================================================
   band    1440x110 · #0C0C0C · 1px #CEAF83 hairline top AND bottom · padding 24/60
   row     4 items, 124px each, 160px apart (976px total) inside a 1320px column
   glow    950x50 gold ellipse, 0.4 alpha, gaussian blur 100 — behind the row
   icon    20x20 stroke glyph, #ECC55A
   value   Polin Semibold 16 · white · leading-none
   label   Polin Medium 12/1.2 · #9CA3AF · tracking 0.55 · uppercase
   ================================================ */

.az-strip {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px var(--az-edge);
	background-color: var(--az-ink);
	/* Both hairlines are in the design (`border-t border-b`). They are what separates this
	   band from the hero above and the cream section below — without them the dark band
	   bleeds into the hero's own dark scrim and the strip stops reading as a separate
	   element. */
	border-top: 1px solid var(--az-rule);
	border-bottom: 1px solid var(--az-rule);
}

.az-strip__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1320px; /* the design's content column */
}

/* ------------------------------------------------
   THE GLOW  (566:9842)
   ------------------------------------------------
   A 950x50 ellipse, #F2B351 at 40%, under a gaussian blur of stdDeviation 100. In Figma the
   node is 950x50 and the artwork is inset by -400% vertically and -21.05% horizontally to
   give the blur room — which works out to exactly the SVG's own 1350x450 frame, so one
   viewBox unit is one pixel and the file can be used at its natural size.

   Shipped as the SVG rather than rebuilt as a radial-gradient: it is 684 bytes, it is exact,
   and approximating a Gaussian falloff with colour stops is guesswork that looks close at
   one width and wrong at another. `preserveAspectRatio="none"` inside the file means it
   stretches cleanly when the strip narrows. */
.az-strip__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 1350px;
	max-width: 100%;
	height: 450px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
}

.az-strip__items {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	/* The design's 160px gap. `justify-content: center` on the parent, not space-between here
	   — the four items are a fixed-width cluster centred in the column, not a row that
	   stretches to fill it. */
	gap: 160px;
}

.az-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 124px;
	text-align: center;
}

.az-strip__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/* The glyphs are stroke paths on a `fill="none"` root, rewritten to `stroke="currentColor"`
   when they were brought in — so the colour is set HERE and inherited, rather than baked into
   five separate files. This is the whole reason they are inlined instead of run through
   Elementor's icon control, which forces `fill` onto them and turns each outline into a
   solid blob. */
.az-strip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: #ECC55A;
}

.az-strip__icon svg,
.az-section .az-strip__icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.az-strip__value {
	font-size: 16px;
	font-weight: 600;
	line-height: 1; /* the design's `leading-none` */
	color: var(--az-on-ink);
	white-space: nowrap;
}

.az-strip__label {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.55px;
	/* Hebrew has no case, so this only affects any Latin the client types. Kept because the
	   design declares it. */
	text-transform: uppercase;
	color: var(--az-on-ink-muted);
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   976px of items inside a 1320px column has room to spare at 1440, and none at all below
   about 1100 once the 60px gutters are counted. The gap is what gives first — it is the
   largest number in the row by far, and shrinking it costs nothing visually until the items
   are nearly touching.

   Then the row wraps to 2x2 rather than scrolling: four items at 124px are legible on a
   phone, and a horizontal scroller hides half the proof on the screen where it matters most. */
@media (max-width: 1200px) {
	.az-strip__items {
		gap: 90px;
	}
}

/* TWO COLUMNS ON MOBILE — an explicit GRID, not wrapped flex.
   Flex wrapping was supposed to give two per row, but each item still carries the design's
   124px width and its own `white-space: nowrap` value, so whether two fitted depended on the
   viewport and the longest label. On a narrow phone they fell to one per row and the band
   turned into a very tall column.

   A 2-column grid is deterministic: exactly two, at any width, regardless of content. */
@media (max-width: 900px) {
	.az-strip {
		padding: 32px 24px;
	}

	.az-strip__items {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		/* ROW gap only. The widget's Gap control writes `column-gap` into the page stylesheet at
		   (0,3,0), which this can never outrank — so the two properties are split between them
		   rather than fought over. Horizontal spacing comes from the control's mobile default. */
		row-gap: 32px;
		width: 100%;
	}

	.az-strip__item {
		/* The fixed 124px would stop a cell from filling its column. */
		width: auto;
		max-width: 100%;
	}

	/* The glow is drawn for a 1350px band; at phone width it is mostly off-canvas and only
	   adds a smear behind the left column. */
	.az-strip__glow {
		display: none;
	}
}

@media (max-width: 480px) {
	.az-strip__items {
		row-gap: 28px;
	}

	.az-strip__label {
		letter-spacing: 0.3px;
	}
}