/* ================================================
   AMOTZ — RESEARCH  "לא דעה שלי. מחקר."  (Figma 566:10249)
   ================================================
   band      1440x1130 · the shared botanical background · padding 100/60 · gap 60
   head      942px · Polin Bold 54/1.2 tracking -1.8 · intro Polin Medium 18/1.5
   card      1320px · #472D00 · padding 32 · radius 24 except TOP-RIGHT and BOTTOM-LEFT 100
   photo     half the card · 636px · radius 8 except BOTTOM-LEFT 68
   panel     half the card · #F6F4EE · radius 8 except TOP-RIGHT 68 · padding 40/24
   result    Polin Semibold 24/1.2 tracking 1, opened by a 116px rule
   citation  Polin Regular 12/1.5 — ENGLISH, so it is bidi-isolated
   ================================================ */

.az-research {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	padding: 100px var(--az-edge);
	overflow: hidden;
}

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

.az-research__head {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	max-width: 942px;
	text-align: right;
	/* The head is narrower than the card below it and sits against the SAME right edge.
	   `margin-inline-END: auto` is what does that under dir="rtl": inline-end is the LEFT, so
	   the free space collects on the left and the block is pushed right. `margin-inline-start`
	   — which this was — puts the space on the right and pushes it left, the opposite. */
	margin-inline-end: auto;
}

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

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

/* ------------------------------------------------
   THE CARD
   ------------------------------------------------ */
.az-carousel--research {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1320px;
}

.az-carousel--research .az-carousel__track {
	padding: 0;
	/* No gutter here, so the snapport is not inset either — see the note on
	   scroll-padding in amotz-curriculum.css. */
	scroll-padding-inline: 0;
}

.az-carousel--research .az-carousel__item {
	flex: 0 0 100%;
	max-width: 100%;
}

.az-research__card {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 32px;
	overflow: hidden;
	background-color: var(--az-brown);
	/* PHYSICAL corners: the two 100px are TOP-RIGHT and BOTTOM-LEFT, so the card is
	   diagonally symmetric. The photo and panel inside echo that with 68px on the opposite
	   diagonal. Logical properties would rotate the whole arrangement under RTL. */
	border-radius: 24px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 100px;
}

/* THE PHOTO IS ON THE LEFT, so the PANEL is written first — under dir="rtl" the first flex
   child lands on the right. That is also the correct reading order: the panel is the content
   and the photograph is illustration. */
/* `space-between` over THREE children — label, body, nav — which is what the design does and
   what produces its spacing: the label pinned to the top, the nav to the bottom, and the body
   sitting between them with roughly 85px of air either side.

   THE NAV MUST STAY VISIBLE FOR THIS TO HOLD. Hiding it when there is only one study leaves
   two children and sends the body to the bottom of the panel; centring the body instead just
   moves the dead space around. Rendering the design's own panel settled it — the buttons are
   drawn there. See the `--static` note below. */
.az-research__panel {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 636px;
	padding: 40px 24px;
	background-color: var(--az-cream);
	border-radius: 8px;
	border-top-right-radius: 68px;
	text-align: right;
}

/* `position: relative` so the photograph inside can be taken OUT OF FLOW.
   This box has a min-height but no definite height, so a `height: 100%` on an in-flow child
   has nothing to resolve against and falls back to the image's INTRINSIC height. The source is
   900x1350; at the ~620px this column gets, that is 930px tall — which dragged the whole card
   from the design's 700px to about 1000px and squashed the panel's proportions with it.

   `align-self: stretch` already makes this column match the card's height, which the panel
   sets. Positioning the image absolutely lets it fill that height instead of dictating it. */
.az-research__photo {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	align-self: stretch;
	min-height: 636px;
	overflow: hidden;
	border-radius: 8px;
	border-bottom-left-radius: 68px;
}

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

/* Label row. The glyph is FIRST so RTL puts it on the right, at the start of the line —
   in the Figma tree it is second because the canvas is LTR. */
.az-research__label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--az-brown);
}

/* Kept at its own colours rather than forced to currentColor: unlike the stroke glyphs
   elsewhere this one is a small multi-colour illustration (#2D2D2D, #C88D35, white), and
   flattening it to one colour would lose it. */
.az-research__label svg {
	display: block;
	width: 6.574px;
	height: 24px;
}

.az-research__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* THE RESEARCH NAV IS NEVER HIDDEN, unlike the curriculum's and the bonus section's — it is
   simply left out of the `.az-carousel--static` rule in amotz-curriculum.css rather than
   overridden back here.

   Those two put their buttons in a row BELOW the track, so hiding them when there is nothing
   to page to just removes a row. This one lives INSIDE the card and is one of three items its
   `space-between` distributes, so hiding it changes the card's internal spacing.

   With a single study both buttons come up disabled, which is honest and still matches the
   comp now that the disabled state keeps its fill. */

.az-research__card-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--az-brown);
}

.az-research__desc {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--az-brown);
}

.az-research__result {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.az-research__result-label {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--az-brown);
}

/* Rule first so RTL puts it on the physical right — the start of the line. Same construction
   as the story panel's 46px rule and the about section's 72px one, at 116px. */
.az-research__result-row {
	display: flex;
	align-items: center;
	gap: 16px;
}

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

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

.az-research__result-text span {
	display: block; /* the design breaks this into two authored lines */
}

/* The citation is ENGLISH inside a right-to-left document. Without isolation the bidi
   algorithm drags its trailing punctuation and the bracketed year to the wrong end —
   "BMC Med 15, 23 (2017)" comes out mangled. `.az-ltr` from amotz.css does the isolating;
   this only sets the type. */
.az-research__citation {
	font-size: 12px;
	font-weight: 400; /* Polin Regular — the only place in the design that uses it */
	line-height: 1.5;
	color: var(--az-brown);
	text-align: right;
}

/* ------------------------------------------------
   NAV
   ------------------------------------------------
   The same two buttons as the curriculum's, inside the panel rather than under the row. */
.az-research__nav {
	display: flex;
	gap: 16px;
	align-items: center;
}

.az-research__nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.az-research__nav button:disabled {
	/* The FILL stays at full strength. The design draws both buttons solid, and dimming a
	   white disc to 35% on a #0C0C0C band reads as GREY rather than as disabled — which is
	   what it looked like on the live page. Only the chevron fades now, so the button keeps
	   the colour the design specifies and the affordance is still honest. */
	cursor: default;
}

.az-research__nav button:disabled svg {
	opacity: 0.45;
}

.az-research__nav button:not(:disabled):hover {
	filter: brightness(1.1);
}

.az-research__nav svg {
	display: block;
	width: 18px;
	height: 18px;
}

.az-research__nav .az-research__prev {
	background-color: #FFFFFF;
	border: 1px solid var(--az-rule);
	color: #A28660;
}

.az-research__nav .az-research__next {
	background-image: linear-gradient(to right, #CEAF83, #795D36);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #FFFFFF;
}

.az-research__nav .az-research__next svg {
	transform: rotate(180deg);
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1100px) {
	.az-research {
		padding: 72px 32px;
		gap: 40px;
	}

	.az-research__panel,
	.az-research__photo {
		min-height: 0;
	}

	.az-research__panel {
		padding: 32px 24px;
	}

	.az-research__card-title {
		font-size: 26px;
	}

	.az-research__result-text {
		font-size: 20px;
	}
}

@media (max-width: 820px) {
	.az-research {
		padding: 56px 20px;
	}

	.az-research__card {
		flex-direction: column;
		align-items: stretch;
		padding: 20px;
		border-top-right-radius: 56px;
		border-bottom-left-radius: 56px;
	}

	/* Panel first in source means it is ALSO first once stacked, which is right — the study
	   is the content. The photo takes a banner crop under it. */
	.az-research__photo {
		order: 1;
		aspect-ratio: 16 / 10;
		border-bottom-left-radius: 40px;
	}

	.az-research__panel {
		border-top-right-radius: 40px;
	}

	.az-research__rule {
		height: 72px;
	}

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

	.az-research__intro {
		font-size: 16px !important;
	}
}

/* ------------------------------------------------
   PROSE SCIENCE SECTION
   ------------------------------------------------
   "איך להאט את ההזדקנות" writes its science block as running paragraphs about the 14 hallmarks
   of ageing rather than as study cards. Same measure and rhythm as the intro so the section
   reads as one piece whichever form it takes. */
.az-research__prose {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.az-research__prose p {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	text-align: right;
	color: #FCFCF7;
}

@media (max-width: 700px) {
	.az-research__prose p { font-size: 16px; line-height: 26px; }
}

/* The header overlaps the top of the page, so an anchor landing here would put the section's first
   line underneath it. `scroll-margin-top` stops the jump short by the header's height. */
#research {
	scroll-margin-top: 120px;
}