/**
 * ROYA - Single project
 *
 * Figma 140:3 (1440x5511). Page-scoped, loaded on is_singular('roya_project')
 * only. Four blocks of its own - head, mosaic gallery, share band, more
 * projects - and then the shared contact block, which the design draws here
 * value for value and which this sheet does not touch.
 *
 * Every max in a clamp() below is the design's own pixel value at 1440; the
 * vw term is that value / 1440, so the whole page holds its proportions down
 * to the phone the design never drew.
 */

/*
 * The design draws every rule on this screen in חום בינוני, not אפור גרפיט -
 * sampled at four of them off the 1440 render (y955, y1156, y2584, y2850).
 * Scoped here rather than corrected in tokens.css; see the wip file.
 */
.roya-single-project {
	--roya-rule: var(--roya-brown);

	/* The circle-arrow, 100px in the design (140:6) - shared by the cue and by
	   the row that has to reserve its height, so the two cannot drift apart. */
	--roya-project-cue: clamp(2.75rem, 6.944vw, 6.25rem);
}


/* ==========================================================================
   Head
   140:39 photograph 979x734 radius 30 at y147, 140:5 rule at y955, 140:157
   title at y1008, 140:4 rule at y1159 with 140:6 sitting ON it.

   Deliberately not components/page-head.php - that device is two HALF rules,
   a Brown Sugar ghost and a 150px sage title, and this shares none of it.
   ========================================================================== */

.roya-project-head {
	/* 19px between the header's bottom edge (y128) and the photograph. */
	padding-block-start: clamp(0.5rem, 1.319vw, 1.1875rem);
}

.roya-project-head__media,
.roya-project-head__lockup {
	/* The head runs x230-x1209 - narrower than the site's usual 1230. */
	--roya-container: 979px;
}

.roya-project-head__photo {
	display: block;
	width: 100%;
	aspect-ratio: 979 / 734;
	object-fit: cover;
	border-radius: clamp(1rem, 2.083vw, 1.875rem); /* 30px */
	box-shadow: var(--roya-shadow-box);
}

.roya-project-head__lockup {
	/* 74px from the photograph's bottom edge to the first rule. */
	margin-block-start: clamp(2rem, 5.139vw, 4.625rem);
}

.roya-project-head__title {
	/* 96px Fb Mega Regular in דיו - one notch of its own, between the 128 of a
	   section title on dark and the 64 of a form label. */
	margin-block: clamp(1.5rem, 3.472vw, 3.125rem) 0; /* 50px under the rule */
	color: var(--roya-text);
	font-size: clamp(2rem, 6.667vw, 6rem);
	font-weight: var(--roya-weight-regular);
	line-height: 1;
	text-align: center;
}

/*
 * The lower rule and the cue share one box: the design centres the circle on
 * the rule instead of hanging it underneath, so the row is exactly one circle
 * tall and the rule is painted across its middle.
 */
.roya-project-head__cue-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--roya-project-cue);
}

.roya-project-head__cue-row .roya-rule {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(50% - (var(--roya-rule-width) / 2));
}

.roya-project-head__cue {
	position: relative; /* over the rule */
	display: block;
	width: var(--roya-project-cue);
	height: var(--roya-project-cue);
	line-height: 0;
}

.roya-project-head__cue img {
	width: 100%;
	height: auto;
}


/* ==========================================================================
   Mosaic gallery
   143:182 - 1244x1196 at y1281: a 6-column, 5-row grid, gap 12, radius 30.
   Column 197.333, row 229.6, so a row is 1.16351 of a column.

   The spans come from the template (D-B3): the design's nine fixed slots
   become a repeating block of six plus a tail chosen by the remainder, so any
   number of photographs fills whole rows.
   ========================================================================== */

.roya-project-gallery {
	/* 122 from the lower rule to the gallery, 50 of which is the circle's own
	   overhang below that rule. */
	padding-block-start: clamp(2rem, 5vw, 4.5rem);
}

/*
 * The row height has to track the GALLERY's width, not the viewport (G-25) -
 * and an element cannot query the container it declares, so the stage exists
 * purely to be that container.
 */
.roya-project-gallery__stage {
	--roya-container: 1244px;

	container-type: inline-size;
}

/*
 * LTR on purpose, and the only thing on this page that is.
 *
 * VISUAL SIDES, read off the 1440 render of 143:182: the first slot (the tall
 * 2x2) is at the far LEFT, the second 2x2 is in the middle, and the SHORT 1-row
 * slot is at the far RIGHT of row 1. On an RTL page a plain grid puts column 1
 * at the visual right, which lands every one of those on the opposite side -
 * the whole mosaic comes out mirrored. Flipping the grid's direction, and only
 * the grid's, restores the design. There is no text inside these cells - just
 * photographs in aria-labelled buttons - so nothing here reads right to left.
 * Consequence to check: the gallery's FIRST photograph sits at the top LEFT.
 */
.roya-project-gallery__grid {
	--roya-gallery-gap: clamp(0.375rem, 0.833vw, 0.75rem); /* 12px */

	direction: ltr;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	/* One column, times the design's row/column ratio. */
	grid-auto-rows: calc(
		((100cqw - (5 * var(--roya-gallery-gap))) / 6) * 1.16351
	);
	gap: var(--roya-gallery-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.roya-project-gallery__cell {
	grid-column: span var(--roya-gallery-cols, 2);
	grid-row: span var(--roya-gallery-rows, 1);
	min-width: 0;
}

.roya-project-gallery__tile {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	background: none;
	border: 0;
	border-radius: clamp(1rem, 2.083vw, 1.875rem); /* 30px */
	cursor: zoom-in;
	transition: box-shadow var(--roya-transition);
}

/* No hover state exists in the design (docs/01-design-system.md section 6);
   the card's own box shadow is the quietest way to say "this is a control". */
.roya-project-gallery__tile:hover {
	box-shadow: var(--roya-shadow-box);
}

.roya-project-gallery__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   Share band
   140:63-67. Full-bleed sage band 244 tall between two full-width rules, a
   static "SHARE" watermark behind it, the prompt at the visual right and the
   three circles at the visual left.
   ========================================================================== */

.roya-project-share {
	margin-block-start: clamp(2.5rem, 7.431vw, 6.6875rem); /* 107px */
}

.roya-project-share__band {
	position: relative;
	overflow: hidden; /* clips the oversized watermark, as the design does */
	/* 11px of cream between the band and each rule. */
	margin-block: clamp(0.375rem, 0.764vw, 0.6875rem);
	padding-block: clamp(1.5rem, 4.444vw, 4rem); /* 64 + 116 + 64 = 244 */
	background-color: var(--roya-accent);
}

/*
 * Static, not the drifting section-head marquee (G-09): the design pins this
 * one centred inside the band and lets the band's own edges cut it.
 */
.roya-project-share__ghost {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	color: var(--roya-watermark-strong);
	font-family: var(--roya-font-display);
	font-size: var(--roya-text-watermark); /* 240px */
	line-height: 0.725;                    /* box 174 on 240 */
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.roya-project-share__row {
	/* The design's row is x216-x1247 = 1031, but Fb Mega sets the invitation
	   wider than Figma's cut (G-13) and the title broke to two lines. Widened
	   instead of shrinking the type (the client rejected size-tuning, D-23):
	   first to 1064 for the interim woff (550px line), then to 1080 for the
	   official WOFF2, which runs another ~1% wider (556px against the 558 the
	   1064 row left - a 2px fit is exactly what G-13 says not to trust).
	   24.5px a side against the design - invisible. */
	--roya-container: 1080px;

	position: relative; /* over the watermark */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--roya-space-4);
}

.roya-project-share__title {
	margin: 0;
	color: var(--roya-on-accent);
	font-size: var(--roya-text-label); /* 64px */
	font-weight: var(--roya-weight-regular);
	line-height: 1;
	/* Kept from the wrapping era: if a client-edited longer string ever
	   wraps again, it breaks balanced instead of ragged. */
	text-wrap: balance;
}

/* DOM order is visual right to left in RTL: WhatsApp, Facebook, LinkedIn puts
   LinkedIn on the visual left, which is where the design draws it. */
ul.roya-project-share__links {
	display: flex;
	align-items: center;
	gap: clamp(var(--roya-space-2), 4.4vw, 3.9375rem); /* 63px */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The contact block's circle, unchanged: 116px cream disc, sage glyph,
   soft shadow, colours swapping on hover. */
.roya-project-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--roya-social-size);
	height: var(--roya-social-size);
	background-color: var(--roya-cream);
	border-radius: var(--roya-radius-circle);
	box-shadow: var(--roya-shadow-soft);
	transition: background-color var(--roya-transition);
}

.roya-project-share__icon {
	width: 52%;
	height: 52%;
	background-color: var(--roya-accent);
	mask: center / contain no-repeat;
	-webkit-mask: center / contain no-repeat;
	transition: background-color var(--roya-transition);
}

.roya-project-share__link:hover {
	background-color: var(--roya-graphite);
}

.roya-project-share__link:hover .roya-project-share__icon {
	background-color: var(--roya-cream);
}

.roya-project-share__link--whatsapp .roya-project-share__icon {
	mask-image: url("../img/icon-whatsapp.svg");
	-webkit-mask-image: url("../img/icon-whatsapp.svg");
}

.roya-project-share__link--facebook .roya-project-share__icon {
	mask-image: url("../img/icon-facebook.svg");
	-webkit-mask-image: url("../img/icon-facebook.svg");
}

/* The design's own glyph (handover item 6) - it replaced a stand-in data:
   URI that carried a generic LinkedIn mark, not the file's. */
.roya-project-share__link--linkedin .roya-project-share__icon {
	mask-image: url("../img/icon-linkedin.svg");
	-webkit-mask-image: url("../img/icon-linkedin.svg");
}


/* ==========================================================================
   More projects
   140:62 heading at 64, then 144:18/23/26 - three 419x432 cards at a 50 gap
   in a 1358-wide row.

   The card is components/related-card.php ('sage' variant, components.css);
   only the strip's own grid lives here.
   ========================================================================== */

.roya-project-related {
	/* 101 under the band's lower rule, and 94 before the contact block adds
	   its own 55 of section gap. */
	padding-block: clamp(2.5rem, 7.014vw, 6.3125rem) clamp(2.5rem, 6.528vw, 5.875rem);
}

.roya-project-related__title {
	margin: 0 auto;
	color: var(--roya-text);
	font-size: var(--roya-text-label); /* 64px */
	font-weight: var(--roya-weight-light);
	line-height: 1;
	text-align: center;
}

.roya-project-related__grid {
	/* x43 to x1401 - wider than the site's 1230 and than the archive's 1245.
	   The site gutter is 48 at this width, which would cap the row at 1344, so
	   the row carries the design's own 41 instead. */
	--roya-container: 1358px;
	--roya-gutter: clamp(1rem, 2.847vw, 2.5625rem);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 3.472vw, 3.125rem);           /* 50px */
	margin-block-start: clamp(2rem, 5.556vw, 5rem); /* 80px */
}

/* The card is components/related-card.php ('sage' variant), styled in
   components.css - shared with the single article's related strip
   (handover item 5). It replaced a from-scratch restyle of
   components/project-card.php that duplicated the article card rule for
   rule, differing only in the frame colour. */


/* ==========================================================================
   Mobile
   The design has no mobile screens (docs/06-do-not.md). Nothing below is
   measured: the mosaic's six columns are unreadable on a phone, so it drops
   to two and then to one, and every composition that only exists at width
   stacks.
   ========================================================================== */

@media (max-width: 900px) {
	/* Two columns of equal tiles - the spans are a 1244px composition. */
	.roya-project-gallery__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: auto;
	}

	.roya-project-gallery__cell {
		grid-column: span 1;
		grid-row: span 1;
	}

	.roya-project-gallery__tile {
		aspect-ratio: 4 / 3;
	}

	/* One card per row, held at its design width so it never stretches into a
	   shape the design does not have. */
	.roya-project-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.roya-project-related .roya-related-card {
		width: min(100%, 419px);
		margin-inline: auto;
	}
}

@media (max-width: 767px) {
	/* The band's row is a two-end composition; stacked, both ends centre. */
	.roya-project-share__row {
		flex-direction: column;
		justify-content: center;
		gap: var(--roya-space-3);
		text-align: center;
	}

	.roya-project-share__band {
		padding-block: clamp(1.5rem, 5vw, 2.5rem);
	}

	/* The circle-arrow straddles a rule that is now most of the screen wide;
	   it reads as a cut line rather than a device, so the rule goes. */
	.roya-project-head__cue-row .roya-rule {
		display: none;
	}
}

@media (max-width: 560px) {
	.roya-project-gallery__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}