/**
 * ROYA - About page
 *
 * Figma 18:268 (1440x11518). Page-scoped, loaded after layout.css on the
 * `about` page only. Every value is measured from the file (D-19 explains how
 * to read it), not from a render.
 */

/* ==========================================================================
   Hero
   Photograph 18:385 full-bleed 1440x807 directly under the header. Glass
   panel 105:2 at x89, 718x806 - the same frosted cream the home page's about
   section uses, so it takes the same three tokens. Over it: ABOUT in Brown
   Sugar 150 (18:387, box top 220 inside the band), אודות in Fb Mega Light 150
   (18:388, top 333) and a 100px circle-arrow (18:389, top 531).
   ========================================================================== */

.roya-about-hero {
	position: relative;
	/* 807 of 1440. A ratio rather than a height: the photograph is the band. */
	aspect-ratio: 1440 / 807;
	width: 100%;
	overflow: hidden;
}

.roya-about-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Physical left, not inline-start: the panel is a measured piece of the
 * composition against the photograph behind it, and a logical value would
 * mirror it in RTL - the same call as the materials collage (D-12) and the
 * footer photograph (D-24).
 */
.roya-about-hero__panel {
	position: absolute;
	left: 6.181%;   /* x89 of 1440 */
	top: 0;
	bottom: 0;
	width: 49.861%; /* 718 of 1440 */

	display: flex;
	flex-direction: column;
	align-items: center;
	/* 220px from the band's top to the English word's box. */
	padding-block-start: clamp(2rem, 15.278vw, 13.75rem);

	background-color: var(--roya-glass-cream);
	backdrop-filter: blur(var(--roya-blur-strong));
	-webkit-backdrop-filter: blur(var(--roya-blur-strong));
	box-shadow: var(--roya-shadow-glass);
}

.roya-about-hero__en,
.roya-about-hero__title {
	margin: 0;
	color: var(--roya-cream);
	font-size: clamp(2.5rem, 10.417vw, 9.375rem); /* 150px */
	font-weight: var(--roya-weight-light);
	line-height: 1;
	text-align: center;
	/* In the design, and legible here: at 150px a 4px offset is under 3% of the
	   letter, where the 27% it made of the 32px menu is what the client
	   rejected (D-21). */
	text-shadow: 0 4px 4px rgba(58, 52, 46, 0.4);
}

.roya-about-hero__en {
	font-family: var(--roya-font-display);
	font-weight: var(--roya-weight-regular);
}

/*
 * The two words are a lockup, the Hebrew sitting up into the English's
 * descender space. The design puts 113px between the two boxes' TOPS - 220 and
 * 333 - which is the relationship worth reproducing; the overlap itself is
 * whatever the two line boxes happen to make of it. At line-height 1 our
 * English box is exactly 150 against Figma's 137, so the pull is 113 - 150.
 */
.roya-about-hero__title {
	/* MIN is the most negative argument, or clamp() returns the least of them
	   and the pull collapses - the same trap G-25 records. */
	margin-block-start: clamp(-2.3125rem, -2.569vw, -0.75rem); /* -37px */
}

.roya-about-hero__cue {
	display: block;
	line-height: 0;
	/* The design puts 198px between the Hebrew title's top and the cue's -
	   333 and 531 - and our title box is 150 rather than Figma's 173, so the
	   gap carries the difference. */
	margin-block-start: clamp(1rem, 3.333vw, 3rem); /* 48px */
}

.roya-about-hero__cue img {
	width: clamp(2.75rem, 6.944vw, 6.25rem); /* 100px */
	height: auto;
}


/* Mobile ----------------------------------------------------------------- */

@media (max-width: 900px) {
	/*
	 * No mobile design exists (docs/06-do-not). The panel stops being a
	 * half-width pane over the photograph and becomes the whole band, which
	 * keeps the type legible at any width without inventing a new composition.
	 */
	/*
	 * The desktop puts the frosted panel BESIDE the photograph. Stacked, it was
	 * first laid over the whole of it, so the picture only showed through the
	 * frost. It is a strip along the bottom now, with two thirds of the
	 * photograph clear above it - which keeps the relationship the design draws,
	 * glass next to picture rather than on top of it.
	 */
	.roya-about-hero {
		aspect-ratio: 3 / 4;
	}

	.roya-about-hero__photo {
		/* The subject stands at the right of a 1440x807 frame; a centred crop
		   at this ratio would cut him out. */
		object-position: 78% center;
	}

	.roya-about-hero__panel {
		/* A narrow strip along the bottom edge - three passes to get here: a
		   full overlay hid the photograph, a half-height slab was too heavy, and
		   a floating mid-frame band read worse than pinning it. 34% leaves two
		   thirds of the picture clear above it. */
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 34%;
		justify-content: center;
		padding-block-start: 0;
	}
}


/* ==========================================================================
   Statement
   Figma 18:269-272 over the 700px ghost 18:399, between a half-width rule on
   the right (18:392, y1039) and another on the left (18:394, y1716). Four
   lines of 96px ירוק מרווה on a 145px pitch, so line-height 1.51.
   The rules are PHYSICAL right and left: the design draws them on those sides
   and the page is RTL throughout, so mirroring them would be inventing.
   ========================================================================== */

.roya-about-statement {
	position: relative;
	/* The 700px ghost is 1592 wide at the canvas size and would scroll the page
	   sideways. The design frame clips it at 1440; so does this. */
	overflow: hidden;
	/* 104 from the hero to the top rule, then 69 to the first line; 28 from the
	   last line box to the bottom rule. */
	padding-block:
		clamp(3rem, 12.222vw, 11rem)
		clamp(1rem, 1.944vw, 1.75rem);
}

.roya-about-statement::before,
.roya-about-statement::after {
	content: "";
	position: absolute;
	width: 50%;
	height: var(--roya-rule-width);
	background-color: var(--roya-rule);
}

.roya-about-statement::before {
	top: clamp(2rem, 7.222vw, 6.5rem); /* 104px under the hero */
	right: 0;
}

.roya-about-statement::after {
	bottom: 0;
	left: 0;
}

/* The ghost is far wider than the viewport and must never scroll the page. */
.roya-about-statement__ghost {
	position: absolute;
	top: clamp(2.5rem, 10vw, 9rem); /* y1079, 144 into the section */
	left: 50%;
	transform: translateX(calc(-50% + 16px));
	z-index: -1;
	color: var(--roya-watermark);
	font-family: var(--roya-font-display);
	font-size: clamp(8rem, 48.611vw, 43.75rem); /* 700px */
	font-weight: var(--roya-weight-regular);
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.roya-about-statement__lines {
	position: relative;
	/* The design sets every line on ONE line across the full canvas - the third
	   runs about 1370 wide - so this block does not take the 1230 container. */
	width: 100%;
	max-width: none;
	padding-inline: clamp(1rem, 1.944vw, 1.75rem);
	text-align: center;
}

.roya-about-statement__lines p {
	margin: 0;
	color: var(--roya-accent);
	font-size: clamp(1.5rem, 6.667vw, 6rem); /* 96px */
	font-weight: var(--roya-weight-light);
	line-height: 1.51; /* the design 145px pitch on 96px type */
}


/* ==========================================================================
   Story
   Figma 18:273-274 (shared section head) and 18:396. Body is 45px Light, ink,
   centred; the two Brown Sugar ROYA marks (18:397-398) are decoration set into
   the margins.
   ========================================================================== */

.roya-about-story__body {
	position: relative;
	margin-block-start: clamp(2rem, 7.222vw, 6.5rem); /* 104px under the head */
	color: var(--roya-text);
	font-size: clamp(1rem, 3.125vw, 2.8125rem); /* 45px */
	font-weight: var(--roya-weight-light);
	/* 45px type with 10px under every line - the design sets each line as its
	   own paragraph with mb-10, so the pitch is 55 and not 45. */
	line-height: 1.222;
	text-align: center;
}

.roya-about-story__body p {
	margin: 0;
}

/* A paragraph break is a whole blank line in the design - an empty <p> with the
   same 10px under it - so 55px on top of the normal line pitch, not 10. */
.roya-about-story__body p + p {
	margin-block-start: 1.222em;
}

/*
 * The design's two loose ROYA marks are the brand name inside the sentences,
 * not decoration - they are seeded as text and the font stack picks Brown Sugar
 * up for the Latin letters by itself (G-11). The design sets them at 35 against
 * the 45 around them; inline they take the body size, which is the price of the
 * text staying editable as plain text.
 */


/* ==========================================================================
   Feature photograph
   Figma 22:43 - 1122x1123 centred, radius 20, on the card shadow.
   ========================================================================== */

.roya-about-photo {
	display: flex;
	justify-content: center;
	padding-block: var(--roya-section-gap);
}

.roya-about-photo__image {
	width: 77.917%; /* 1122 of 1440 */
	aspect-ratio: 1122 / 1123;
	object-fit: cover;
	border-radius: var(--roya-radius-card);
	box-shadow: var(--roya-shadow-card);
}


/* ==========================================================================
   Values
   Figma 18:400-428. The block runs x40 to x1392, wider than the shared
   container: a 716 frame in חום בהיר holding a 674 photograph, then a 636
   column of four blocks, the two columns touching with no gutter.
   ========================================================================== */

.roya-about-values__grid {
	/* 40 to 1392 in the design. */
	--roya-container: 1352px;

	display: grid;
	/* 636 then 716 of 1352, adjacent - the design leaves no gutter here. The
	   blocks come FIRST because column one is the rightmost in RTL, and that is
	   where the design puts them; the framed photograph takes the left. */
	grid-template-columns: 47.041% 52.959%;
	align-items: start;
	margin-block-start: clamp(2rem, 7.222vw, 6.5rem);
}

.roya-about-values__frame {
	/* 22px of חום בהיר showing around the photograph on every side. */
	padding: clamp(0.5rem, 1.528vw, 1.375rem);
	background-color: var(--roya-brown-light);
	border-radius: var(--roya-radius-card);
}

.roya-about-values__photo {
	display: block;
	width: 100%;
	aspect-ratio: 674 / 1713;
	object-fit: cover;
	border-radius: clamp(0.375rem, 0.694vw, 0.625rem); /* 10px */
}

/* The gap goes on the INLINE-END, which is the left in RTL - that is the side
   the framed photograph is on. As inline-start it landed on the far right and
   left the blocks touching the frame. */
ul.roya-about-values__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding-inline-end: clamp(1rem, 2.778vw, 2.5rem); /* 40px */
}

/*
 * Each block is 452 tall in the design and closes with a 175px rule at its
 * inline end. The rule is the separator, so the last block does without one.
 */
.roya-about-values__item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(0px, 31.389vw, 28.25rem); /* 452px */
	text-align: start;
}

.roya-about-values__item:not(:last-child)::after {
	content: "";
	/* IN THE FLOW, not positioned. The design holds the four rules on an exact
	   452 pitch, which only works because the copy it was drawn around fits
	   exactly; this copy is client-editable, and an absolutely placed rule cut
	   straight through the first block the moment its text ran to four lines.
	   margin auto keeps it on the pitch whenever there is slack, and the body
	   margin below guarantees clearance when there is not. */
	align-self: flex-start;
	margin-block-start: auto;
	margin-block-end: clamp(1rem, 3.472vw, 3.125rem); /* 50px to the next icon */
	width: clamp(5rem, 12.153vw, 10.9375rem); /* 175px */
	height: var(--roya-rule-width);
	background-color: var(--roya-rule);
}

.roya-about-values__icon {
	align-self: flex-start;
	width: clamp(3rem, 7.917vw, 7.125rem); /* 114px */
	height: auto;
	margin-block-end: clamp(1rem, 2.778vw, 2.5rem); /* 40px to the title */
}

.roya-about-values__title {
	margin: 0;
	color: var(--roya-heading);
	font-size: clamp(1.125rem, 3.333vw, 3rem); /* 48px */
	font-weight: var(--roya-weight-regular);
	line-height: 1.09;
}

.roya-about-values__body {
	/* The floor under the rule above - see its comment. */
	margin: 0 0 clamp(1rem, 2.083vw, 1.875rem);
	color: var(--roya-heading);
	font-size: clamp(1.125rem, 3.333vw, 3rem); /* 48px */
	font-weight: var(--roya-weight-light);
	line-height: 1.09;
}


/* ==========================================================================
   Process
   Figma 18:435-454. Five 1122x334 cards on a 167 radius - fully rounded ends -
   each a photograph under a gradient running dark at the right to translucent
   sage at the left. The number alternates side; one rule runs down the centre
   behind the stack (18:393).
   ========================================================================== */

.roya-about-process__track {
	position: relative;
	/* Full canvas, NOT the 1230 container: the cards are 77.9% of 1440, and
	   taking that share of 1230 rendered them 958 instead of 1122. */
	width: 100%;
	margin-block-start: clamp(2rem, 7.222vw, 6.5rem);
}

/* The connector, behind the cards and inset by half a card so it never shows
   above the first or below the last. */
.roya-about-process__track::before {
	content: "";
	position: absolute;
	inset-block: clamp(2rem, 11.597vw, 10.4375rem);
	left: 50%;
	width: var(--roya-rule-width);
	transform: translateX(-50%);
	background-color: var(--roya-rule);
}

ol.roya-about-process__list {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 452 pitch on a 334 card. */
	gap: clamp(1.5rem, 8.194vw, 7.375rem);
	list-style: none;
}

.roya-about-process__step {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 2.847vw, 2.5625rem); /* 41px */
	/* 1122 of 1440, capped there so the cards stop growing past the canvas. */
	width: min(77.917%, 70.125rem);
	min-height: clamp(9rem, 23.194vw, 20.875rem); /* 334px */
	padding-inline: clamp(1.25rem, 4.167vw, 3.75rem);
	overflow: hidden;
	border-radius: clamp(3rem, 11.597vw, 10.4375rem); /* 167px */
	box-shadow: var(--roya-shadow-card);
	color: var(--roya-cream);
	isolation: isolate;
}

/* Even steps put the number at the visual left. */
.roya-about-process__step--start {
	flex-direction: row-reverse;
}

.roya-about-process__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 270deg is "to left", so the dark stop lands at the right - which is the way
   the design draws all five. */
.roya-about-process__step::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(270deg, #3a342e 0%, rgba(124, 125, 108, 0.35) 100%);
}

.roya-about-process__number {
	flex-shrink: 0;
	font-family: var(--roya-font-display);
	font-size: clamp(3.5rem, 13.889vw, 12.5rem); /* 200px */
	line-height: 1;
}

.roya-about-process__copy {
	text-align: start;
	font-size: clamp(0.9375rem, 3.125vw, 2.8125rem); /* 45px */
	font-weight: var(--roya-weight-light);
	line-height: 1.15;
}

.roya-about-process__copy p {
	margin: 0;
}

.roya-about-process__title {
	margin: 0;
	/* base.css paints every heading אפור גרפיט, which on a dark photograph
	   reads as a smudge and all but disappears. The card sets cream on itself;
	   the title has to take it. */
	color: inherit;
	font-size: inherit;
	font-weight: var(--roya-weight-regular);
	line-height: 1.15;
}


/* Mobile ----------------------------------------------------------------- */

@media (max-width: 900px) {
	/* No mobile design exists (docs/06-do-not). Every two-column composition
	   becomes one column, and the pieces that only work at width - the giant
	   ghost, the centre connector - step aside rather than being shrunk. */
	.roya-about-statement__ghost,
	.roya-about-process__track::before {
		display: none;
	}

	.roya-about-values__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--roya-space-5);
	}

	ul.roya-about-values__list {
		padding-inline-end: 0;
	}

	/* Full container width, client note 2026-09-03 - narrowing it read as a
	   thumbnail rather than as the section it is on the desktop. */

	.roya-about-values__item {
		min-height: 0;
		gap: var(--roya-space-1);
	}

	/* The track is full-bleed so the desktop cards can be 77.9% of the CANVAS
	   rather than of a container. Stacked, that ran them into both screen edges;
	   the gutter puts them back on the same line as every other section. */
	.roya-about-process__track {
		padding-inline: var(--roya-gutter);
	}

	.roya-about-process__step,
	.roya-about-process__step--start {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--roya-space-2);
		width: 100%;
		padding: var(--roya-space-5) var(--roya-space-4);
		border-radius: var(--roya-radius-card);
		text-align: center;
	}

	.roya-about-process__copy {
		text-align: center;
	}
}