/* ================================================
   AMOTZ — ABOUT  (Figma 566:10232)
   ================================================
   band      1440x875 · full-bleed botanical background · padding 100/60
   portrait  677x675 · 1.5px rgba(255,255,255,.54) border
             radius 200 top-left · 24 top-right · 100 bottom-right · 24 bottom-left
   copy      611px · headline Polin Bold 54/1.2 tracking -1.8 #152114
   body      Polin Medium 16/1.5 · #4A4540
   callout   Polin Semibold 20/1.2 · tracking 1 · #472D00, opened by a 72px rule
   CTA       the shared gold foil + fine print
   ================================================ */

.az-about {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px var(--az-edge);
	overflow: hidden;
}

.az-section .az-about__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.az-about__row {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	width: 100%;
	max-width: 1320px;
}

/* THE PORTRAIT IS ON THE RIGHT AND IS WRITTEN FIRST.
   In the Figma tree the copy comes first because it is the LEFTMOST column on an LTR canvas.
   Under dir="rtl" the first flex child lands on the RIGHT, so the order is inverted here.

   Unusually for this design, that also gives the correct reading order: reading right to
   left, the portrait genuinely is the first thing encountered. The story panel needed the
   opposite treatment because its copy is the right-hand column. */
.az-about__portrait {
	position: relative;
	flex-shrink: 0;
	width: 677px;
	height: 675px;
	overflow: hidden;
	/* PHYSICAL corners, matching the canvas: a 200px top-left facing the copy, a 100px
	   bottom-right, 24px on the other two. Logical properties would swap the pair under RTL
	   and point the big corner away from the text. */
	border: 1.5px solid rgba(255, 255, 255, 0.54);
	border-radius: 200px 24px 100px 24px;
}

.az-section .az-about__portrait img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.az-about__copy {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 611px;
	max-width: 100%;
	text-align: right;
}

.az-about__title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #152114;
}

.az-about__body {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: #4A4540;
}

/* The callout and its rule — same construction as the story panel's, at 72px rather than
   46px. The rule is FIRST in the markup so dir="rtl" puts it at the physical right, which in
   Hebrew is the start of the line. In Figma it is a 72x2 horizontal line rotated 90deg inside
   a zero-width box; a 2px x 72px block is the same mark without the transform. */
.az-about__callout {
	display: flex;
	align-items: center;
	gap: 16px;
}

.az-about__rule {
	flex-shrink: 0;
	width: 2px;
	height: 72px;
	background-color: var(--az-brown);
	border-radius: 1px;
}

.az-about__callout-text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--az-brown);
}

/* ------------------------------------------------
   CTA
   ------------------------------------------------ */
.az-about__cta-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 330px;
	max-width: 100%;
}

.az-about__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 14px 28px;
	border-radius: 1000px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.az-about__cta:hover,
.az-about__cta:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #FFFFFF;
}

.az-about__fineprint {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.16px;
	color: #8C8578;
	white-space: nowrap;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   611 + 677 + gutters needs about 1400px, so the two columns start squeezing immediately
   below the design width and stack not long after. */
@media (max-width: 1280px) {
	.az-about__portrait {
		width: 46%;
		height: auto;
		aspect-ratio: 677 / 675;
	}

	.az-about__copy {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (max-width: 900px) {
	.az-about {
		padding: 72px 24px;
	}

	.az-about__row {
		/* Copy first once stacked: on a phone the prose is what the section is for, and a
		   675px portrait above it would push the headline off the first screen. */
		flex-direction: column-reverse;
		gap: 32px;
	}

	.az-about__portrait {
		width: 100%;
		aspect-ratio: 4 / 3;
		border-top-left-radius: 100px;
		border-bottom-right-radius: 56px;
	}

	.az-about__copy {
		width: 100%;
		gap: 24px;
	}

	.az-about__cta-col {
		width: 100%;
	}

	.az-about__cta {
		width: 100%;
	}

	.az-about__fineprint {
		white-space: normal;
	}

	/* See the !important note in amotz-announcement-bar.css. */
	.az-about__title {
		font-size: clamp(28px, 7vw, 38px) !important;
		letter-spacing: -0.03em !important;
	}

	.az-about__callout-text {
		font-size: clamp(17px, 4.2vw, 19px) !important;
	}
}