/* ================================================
   AMOTZ V4 — RETREAT  "ארבעה ימים שעושים לגוף ריסטארט"  (Figma 538:3478 §9)
   ================================================
   band     1440x1082 · botanical photo · padding 110/60
   row      1320x862 · two columns · copy 655 (canvas left) · photo 550 (canvas right)
   support  620 wide · 2x2 grid of numbered items, gap 16
   card     518 wide, pinned to the BOTTOM of the photo column
              inner  #FCFCF7, r8, stroke #E4E8E4, padding 16 — label / date / spots / button
              strip  #F5F5F5, padding 8 — two 12/500 note lines
   ================================================

   TWO COLUMNS, NOT COORDINATES. The file draws the copy at x60 and the photo at x830 inside a
   1320 row. Those are positions in a fixed frame; the relationship is a two-column split, and
   under RTL the photo column comes FIRST in source so it lands on the right.

   The stated gap is 281, which cannot be literal: 655 + 550 + 281 = 1486 inside a 1320 row.
   The two columns plus their real spacing come to 1320, so `space-between` is what the file
   actually describes. */

.azh-retreat {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 110px var(--az-edge);
	background-color: var(--az-cream);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.azh-retreat__inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	max-width: 1320px;
}

/* ------------------------------------------------
   PHOTO COLUMN  (550x862, padding 16, r16)
   ------------------------------------------------
   The photograph is the column's own background and the card sits inside its padding, pinned
   to the bottom — `justify-content: flex-end` rather than an absolute offset, so the card
   stays 16px off the base whatever the column's height. */
.azh-retreat__figure {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 0 1 550px;
	min-width: 0;
	min-height: 862px;
	padding: 16px;
	background-color: #E4E8E4;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 16px;
}

.azh-retreat__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.azh-retreat__cardmain {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 12px;
	padding: 16px;
	background-color: #FCFCF7;
	border: 1px solid #E4E8E4;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
}

.azh-retreat__kicker {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	color: #C88D35;
}

.azh-retreat__date {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	color: #152114;
}

/* The spots line sits opposite the date's kicker — a scarcity note, so it keeps the accent
   rather than the body colour. */
.azh-retreat__spots {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	color: #C88D35;
}

.azh-retreat__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	padding: 10px 24px;
	background-image: var(--az-gradient-gold);
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	color: var(--az-on-gold);
}

/* The two note lines under the button, on their own #F5F5F5 strip. */
.azh-retreat__notes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 8px;
	background-color: #F5F5F5;
	border: 1px solid #E4E8E4;
	border-top: 0;
	border-radius: 0 0 8px 8px;
}

.azh-retreat__note {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	text-align: right;
	color: #C88D35;
}

/* ------------------------------------------------
   COPY COLUMN  (655 wide)
   ------------------------------------------------ */
.azh-retreat__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	flex: 1 1 655px;
	min-width: 0;
}

.azh-retreat__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* 32 sits between the TITLE and the body block, which is the file's value. It must not also
	   fall between paragraphs: Figma holds the body as ONE text node whose paragraphs are plain
	   line breaks at 24px leading, so 32px of gap between each one spread the column far taller
	   than the design and pushed the support grid down. */
	gap: 32px;
	width: 100%;
}

/* The paragraphs are their own block so the 32px above cannot leak between them. 12px keeps
   them readable as separate thoughts while staying close to the file's single-line-break
   rhythm. */
.azh-retreat__bodyblock {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

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

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

/* ------------------------------------------------
   SUPPORT GRID  (2x2, gap 16)
   ------------------------------------------------
   Each item is a numbered chip: the digit on the RIGHT of its text, per the file (number x676
   against text x429 on the first item). Number first in source. */
.azh-retreat__block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
}

.azh-retreat__label {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	text-align: right;
	color: #3D5B34;
}

.azh-retreat__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}

/* 302x70, padding 16, r16, #FCFCF7 with a #E5E6E0 hairline. SPACE_BETWEEN is the important
   one — the text and the number are pushed to opposite ends of the card, not sat next to each
   other with a gap. */
.azh-retreat__item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px;
	background-color: #FCFCF7;
	border: 1px solid #E5E6E0;
	border-radius: 16px;
}

/* THE NUMBER IS A 38px GOLD DISC, not bare text — #ECC55A, fully round, 8px padding, digit
   centred in #0C0C0C. The first build rendered the digit on its own and lost the whole chip. */
.azh-retreat__num {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	background-color: #ECC55A;
	border-radius: 1000px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #0C0C0C;
}

.azh-retreat__itemtext {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
	color: #152114;
}

/* ------------------------------------------------
   SCHEDULE — A TIMELINE, NOT A LIST
   ------------------------------------------------
   The first build made this a 2-column grid of plain lines, which is not what the file draws
   at all. It is a vertical timeline: a 1px x 112 rule in #152114 beside a stacked column of
   four entries, each carrying a 10x10 dot with a 2px #E4E8E4 ring.

   The dots are not decorative — they are a state ramp down the four days:
     #D3FA99 (pale green, the opening)  ·  #3D5B34  ·  #3D5B34  ·  #0C0C0C (the close)
   so the colour is per item, not one shared value.

   The rule comes FIRST in source so it lands on the right under RTL, outside the dots — the
   file separates them by the row's 16px gap rather than running the line through them. */
.azh-retreat__timeline {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.azh-retreat__rule {
	flex: none;
	align-self: stretch;
	width: 1px;
	min-height: 112px;
	background-color: #152114;
}

.azh-retreat__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL start = right */
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dot FIRST in source so it renders rightmost, next to the rule — the file puts every dot at
   x688 with the text running leftwards from it. */
.azh-retreat__listitem {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	text-align: right;
	color: #152114;
}

.azh-retreat__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border: 2px solid #E4E8E4;
	border-radius: 1000px;
	background-color: #3D5B34;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   655 + 550 needs 1205px before any gap, so the two-up gives out just under the design width.
   Stacked, the COPY leads — the photo card carries the date and the button, which mean nothing
   until you have read what the four days are. */
@media (max-width: 1250px) {
	.azh-retreat__inner {
		flex-direction: column;
		gap: 40px;
	}

	.azh-retreat__copy,
	.azh-retreat__figure {
		flex: 1 1 auto;
		width: 100%;
	}

	.azh-retreat__figure {
		min-height: 520px;
	}
}

@media (max-width: 780px) {
	.azh-retreat {
		padding: 56px 20px;
	}

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

	.azh-retreat__grid,
	.azh-retreat__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.azh-retreat__figure {
		min-height: 420px;
	}
}