/* ================================================
   AMOTZ V4 — CORPORATE  "מרצה גם לחברות"  (Figma 538:3478 §10)
   ================================================
   band   1440x910 · #0C0C0C · padding 100/60
   row    1320x710 · space-between · photo 567x710 (canvas left) · copy 610 (canvas right)
   flare  1414x707 vector, #ECC55A at 20% — behind everything
   photo  567x710 · r16 · 1.5px stroke · drop shadow 20
   copy   title 54/70 #FFFFFF · sub 16/24 #ECC55A · gap 50 to the buttons
   btns   380x50 row, gap 16 — gold (right) + outlined (left), both 14/600, pad 14/28
   ================================================

   TWO BUTTONS WITH DIFFERENT WEIGHTS. The gold one is the primary and sits on the RIGHT (file:
   x1213 against the outlined one at x1000), so under RTL it comes FIRST in source. The outlined
   button has a STROKE and no fill — it is a ghost button, not a second gold one. */

.azh-corp {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 910px;
	padding: 100px var(--az-edge);
	background-color: #0C0C0C;
	isolation: isolate;
	overflow: hidden;
}

/* The 1414x707 flourish. The file draws it at 20% opacity, which is nearly invisible once the
   SVG is rendered at web scale over #0C0C0C — in Figma it sits over a lighter working canvas.
   Raised to 0.55 on the client's call so it actually reads, and exposed as a control rather
   than buried, since "how present should this be" is a judgement the design owner makes, not a
   number to copy.

   Behind everything and inert to the pointer — at 1414px it would otherwise cover both
   buttons. */
.azh-corp__flare {
	position: absolute;
	z-index: 0;
	/* FULL BLEED. The file draws this 1414 wide against a 1440 frame — i.e. edge to edge — so a
	   fixed 1414px was only ever correct at exactly that viewport, and on anything wider it left
	   bare black down both sides. Pinned to all four edges instead, so it spans the band at any
	   width.

	   `cover` rather than `contain`: contain letterboxes the shape and reintroduces the same
	   gap it was meant to close. */
	inset: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0.55;
	pointer-events: none;
}

.azh-corp__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	max-width: 1320px;
}

/* COPY FIRST in source → renders on the right, which is where the file puts it (x770 against
   the photograph at x60). */
.azh-corp__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 50px;
	flex: 0 1 610px;
	min-width: 0;
}

.azh-corp__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.azh-corp__title {
	margin: 0;
	width: 100%;
	font-size: 54px;
	font-weight: 700;
	line-height: 70px;
	letter-spacing: -1.144px;
	text-align: right;
	color: #FFFFFF;
}

.azh-corp__sub {
	margin: 0;
	width: 100%;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: right;
	color: #ECC55A;
}

/* ------------------------------------------------
   BUTTONS
   ------------------------------------------------ */
.azh-corp__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

.azh-corp__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 14px 28px;
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
	text-decoration: none;
}

.azh-corp__btn--gold {
	background-image: var(--az-gradient-gold);
	border: 0;
	color: var(--az-on-gold);
}

/* Ghost button: a 1px stroke and NO fill. The file gives it no background at all, so it reads
   as the secondary of the pair rather than a second gold pill. */
.azh-corp__btn--ghost {
	background-color: transparent;
	border: 1px solid rgba(252, 252, 247, 0.6);
	color: #FCFCF7;
}

.azh-corp__btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
}

.azh-corp__btn-icon svg { display: block; width: 15px; height: 15px; }

/* ------------------------------------------------
   PHOTOGRAPH  (567x710, r16, 1.5px stroke, drop shadow 20)
   ------------------------------------------------ */
/* THE BORDER IS THE GOLD GRADIENT, NOT A FLAT COLOUR. The file gives this rectangle
   `stroke type=IMAGE` at 1.5px — the same gold ramp as the buttons, painted as a stroke. A CSS
   border cannot take a gradient, so the figure carries the ramp as its background and 1.5px of
   padding; the image sits on top and the ramp shows through as the edge.

   The first build used a flat translucent white, which read as a grey hairline and lost the
   gold entirely. */
.azh-corp__figure {
	flex: 0 1 567px;
	min-width: 0;
	padding: 1.5px;
	background-image: var(--az-gradient-gold);
	border-radius: 16px;
	/* Gold, not black: DROP_SHADOW #FFCC00 at 20%, radius 20, offset -4/10. On a #0C0C0C band a
	   black shadow is invisible — this one is a glow, and it is what lifts the portrait off the
	   background. */
	box-shadow: -4px 10px 20px rgba(255, 204, 0, 0.2);
}

.az-section .azh-corp__photo {
	display: block;
	width: 100%;
	aspect-ratio: 567 / 710;
	object-fit: cover;
	/* 16 minus the 1.5px ramp, so the inner corner sits concentric with the outer one. */
	border-radius: 14.5px;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   610 + 567 needs 1177px before the gap. Stacked, the COPY leads — a portrait with no heading
   above it says nothing about corporate talks. */
@media (max-width: 1200px) {
	.azh-corp {
		min-height: 0;
		padding: 64px var(--az-edge);
	}

	.azh-corp__inner {
		flex-direction: column;
		gap: 40px;
	}

	.azh-corp__copy,
	.azh-corp__figure {
		flex: 1 1 auto;
		width: 100%;
	}

	.azh-corp__figure { max-width: 567px; }
}

@media (max-width: 700px) {
	.azh-corp {
		padding: 48px 20px;
	}

	.azh-corp__title {
		font-size: 32px;
		line-height: 1.15;
		letter-spacing: -0.6px;
	}

	/* Two 50px pills side by side stop fitting well below this; stacked, both go full width so
	   neither reads as the afterthought. */
	.azh-corp__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.azh-corp__btn {
		justify-content: center;
	}

	.azh-corp__flare { display: none; }
}