/**
 * ROYA - Projects archive
 *
 * Figma 18:456 (1440x7946). Page-scoped, loaded on the roya_project archive
 * only. The inner-page head and the contact block are shared components and
 * live elsewhere; this sheet is the grid and the card.
 */

/* ==========================================================================
   Grid
   Two columns of 584 with 77 between them - 1245 across, against the site's
   usual 1230 - and 117 between the rows.
   ========================================================================== */

.roya-projects-archive {
	padding-block: var(--roya-section-gap);

	/*
	 * The row rules below reach past the viewport on both sides. `clip` rather
	 * than `hidden`: it stops the overflow without turning the section into a
	 * scroll container, so nothing here can put a horizontal scrollbar on the
	 * document (which is what health.js would fail on).
	 */
	overflow-x: clip;
}


.roya-projects-archive__grid {
	/* x97 to x1342 in the design. */
	--roya-container: 1245px;

	/* The design starts this grid at y803; the shared section gap alone put
	   it at y744, which parked the head's left half-rule right against the
	   first row - the client read it as a stray bar cutting between the
	   cards. The missing 59 restores the design's own separation (closes
	   08-handover item 8 for this archive). */
	margin-block-start: clamp(1.5rem, 4.097vw, 3.6875rem);

	/* Named so the lone-card rule below can subtract it. */
	--roya-archive-col-gap: clamp(1rem, 5.347vw, 4.8125rem); /* 77px */

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--roya-archive-col-gap);
	row-gap: clamp(2rem, 8.125vw, 7.3125rem);    /* 117px */
}

/*
 * An odd number of projects leaves one card alone in the last row, and the
 * design CENTRES it rather than letting it sit in a column: with eleven cards
 * the last one is at x423 on a 1440 canvas, where the centre is 428 - while
 * every other row runs 92-98 and 753-759. Ours had it in the first column,
 * which in RTL is the visual right.
 *
 * Safe as an :nth-child rule because every child of this grid is a card - the
 * empty-state paragraph is outside it.
 */
@media (min-width: 901px) {
	.roya-projects-archive__grid > .roya-project-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--roya-archive-col-gap)) / 2);
	}
}

.roya-projects-archive__empty {
	text-align: center;
}


/* ==========================================================================
   Card
   Figma 183:62-88. A ירוק מרווה frame 584x746 on radius 20 around a שמנת card
   544x700 on radius 10 - so 20 of sage showing at the sides and 23 top and
   bottom. Inside: an arch photograph 290x421, the title at 45, and the pill.
   ========================================================================== */

.roya-project-card {
	display: flex;
	/* The positioning context for the row rule its ::before draws. */
	position: relative;
}

.roya-project-card__frame {
	display: block;
	/* Above the row rule, so the line passes behind the card. */
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(0.5rem, 1.597vw, 1.4375rem) clamp(0.5rem, 1.389vw, 1.25rem);
	background-color: var(--roya-accent);
	border-radius: var(--roya-radius-card);
	box-shadow: var(--roya-shadow-box);
	color: inherit;
	text-decoration: none;
}

.roya-project-card__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 59 above the photograph, 33 under the pill. */
	padding-block: clamp(1.25rem, 4.097vw, 3.6875rem) clamp(1rem, 2.292vw, 2.0625rem);
	background-color: var(--roya-cream);
	border-radius: clamp(0.375rem, 0.694vw, 0.625rem); /* 10px */
}

/*
 * The arch, not a rounded rectangle: 220 of radius on a 290x421 box closes the
 * top and the bottom into curves, the same shape the home page's project cards
 * use. Sized against the CARD rather than the viewport - 290 of the 544 inner
 * card - so it holds its share whatever the column does.
 */
.roya-project-card__photo {
	display: block;
	width: 53.31%; /* 290 of 544 */
	aspect-ratio: 290 / 421;
	object-fit: cover;
	border-radius: var(--roya-radius-arch);
	box-shadow: var(--roya-shadow-box);
}

.roya-project-card__photo--empty {
	background-color: var(--roya-media-placeholder);
}

.roya-project-card__title {
	margin: clamp(1rem, 3.194vw, 2.875rem) 0 0; /* 46px under the photograph */
	/* The card itself has no inline padding - the photograph is 290 of the full
	   544 and a padded box would shrink what that percentage resolves against -
	   so the breathing room for a long title lives here. */
	padding-inline: clamp(0.75rem, 2vw, 1.75rem);
	color: var(--roya-text);
	font-size: clamp(1.125rem, 3.125vw, 2.8125rem); /* 45px */
	font-weight: var(--roya-weight-light);
	line-height: 1;
	text-align: center;
}

/*
 * The section pill at the card's own size: 220x54 with a 37px icon and a 25px
 * label, against the 76-tall 40px version .roya-button ships with.
 */
.roya-project-card__cta {
	--roya-button-height: clamp(2.25rem, 3.75vw, 3.375rem); /* 54px */
	--roya-text-button: clamp(0.875rem, 1.736vw, 1.5625rem); /* 25px */
	--roya-icon-size: clamp(1.5rem, 2.569vw, 2.3125rem);     /* 37px */

	gap: clamp(0.375rem, 0.625vw, 0.5625rem); /* 9px, node 183:73 to 183:76 */
	margin-block-start: clamp(1rem, 2.917vw, 2.625rem); /* 42px */
	padding-block: 0;
	padding-inline: clamp(0.75rem, 1.25vw, 1.125rem);
}

/* The whole card is the link, so the hover belongs to the frame. */
.roya-project-card__frame:hover .roya-project-card__cta {
	background-color: var(--roya-graphite);
	box-shadow: var(--roya-shadow-card);
}


/* ==========================================================================
   Row rules
   Figma 183:61 / 18:567 / 103:15 / 103:45 / 183:2 / 183:31 - six of them, one
   per card row, each 1457 wide on a 1440 canvas (so full-bleed, ~8.5 past
   each edge), 3px, אפור גרפיט #433D35 - which is exactly --roya-rule.

   Each sits at the EXACT vertical centre of its row. Measured on all six:
   card tops 803 / 1666 / 2529 / 3392 / 4262 / 5106, cards 746 tall, so the
   centres are 1176 / 2039 / 2902 / 3765 / 4635 / 5479 - and those are the six
   rule positions, delta 0 on every one.

   Drawn from the CARD rather than from the section, because only the card
   knows where its own row's centre is. Both cards in a row draw the same line
   at the same y, so they overlap into one continuous rule; the last row holds
   a single card and still gets its rule, which is what the design does too.
   The card then paints on top of it - the line passes BEHIND the cards.
   ========================================================================== */

.roya-project-card::before {
	content: "";
	position: absolute;
	inset-block-start: calc(50% - (var(--roya-rule-width) / 2));
	/* Far enough to clear any viewport; the section clips it. */
	inset-inline: -100vw;
	height: var(--roya-rule-width);
	background-color: var(--roya-rule);
}


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

@media (max-width: 900px) {
	/* One column. The card keeps its frame and its proportions; only the grid
	   changes, so nothing about the composition is invented. */
	.roya-projects-archive__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--roya-space-5);
	}
}