/**
 * ROYA - Single article
 *
 * Figma 18:1015 (1440x5530). Page-scoped, loaded on is_singular('post') only.
 * The contact block and the footer are shared and live elsewhere; this sheet
 * is the head, the prose, the share band and the more-articles cards.
 *
 * Every rule on this screen is חום בינוני and not the graphite --roya-rule
 * default - read off the design's exported Line 15 / Line 17 svgs, not the
 * render. docs/01-design-system.md section 4 describes the graphite variant.
 */

/* ==========================================================================
   Head
   18:1067 photograph 979x734 radius 30 with צל קופסאות, 18:1028 a 979 rule 77
   below it, 18:1068 the title at 96 Fb Mega Regular boxed at 1113, and 18:1027
   a second 979 rule carrying the 100px circle-arrow (18:1029) on its centre.
   ========================================================================== */

.roya-article__head {
	/* 19px from the header's bottom edge to the photograph. */
	padding-block-start: clamp(0.75rem, 1.319vw, 1.1875rem);
}

.roya-article__rule,
.roya-article-share__rule {
	--roya-rule: var(--roya-brown);
}

.roya-article__hero {
	width: min(100% - (var(--roya-gutter) * 2), 979px);
	margin: 0 auto;
}

/*
 * The design's frame is 4:3 and the client uploads whatever they have, so the
 * ratio is held here and the photograph is cropped into it rather than the
 * page height moving with each article.
 */
.roya-article__hero-image {
	width: 100%;
	aspect-ratio: 979 / 734;
	object-fit: cover;
	border-radius: clamp(0.875rem, 2.083vw, 1.875rem); /* 30px */
	box-shadow: var(--roya-shadow-card);
}

.roya-article__rule {
	width: min(100% - (var(--roya-gutter) * 2), 979px);
	/* 77 under the photograph. */
	margin: clamp(1.5rem, 5.347vw, 4.8125rem) auto 0;
}

.roya-article__title {
	/* The design boxes the title at 1113, narrower than the 979 rules are wide
	   but wider than they are - it wraps on its own measure. */
	--roya-container: 1113px;

	margin-block-start: clamp(1rem, 2.153vw, 1.9375rem); /* 31 under the rule */
	font-size: clamp(2rem, 6.667vw, 6rem);               /* 96 */
	/* Regular, against the Light every other heading on this site uses -
	   18:1068 names the face explicitly. */
	font-weight: var(--roya-weight-regular);
	line-height: 1.104; /* 96 of type on a 106 advance: lh 1.0 plus 10px */
	text-align: center;
}

/*
 * The rule and the circle are one thing: the circle is opaque and sits on the
 * line's centre, so the line is the row's own background rather than a sibling
 * that would have to be cut in two around it.
 */
.roya-article__cue-row {
	position: relative;
	display: flex;
	justify-content: center;
	width: min(100% - (var(--roya-gutter) * 2), 979px);
	margin: clamp(1rem, 2.153vw, 1.9375rem) auto 0; /* 31 under the title box */
}

.roya-article__cue-row::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: 50%;
	height: var(--roya-rule-width);
	background-color: var(--roya-brown);
	transform: translateY(-50%);
}

.roya-article__cue {
	position: relative; /* over the rule */
	display: block;
	line-height: 0;
}

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


/* ==========================================================================
   Prose - the measure only
   18:1102. The body's .roya-prose typography lives in components.css (it is
   shared with generic pages); this sheet keeps just the article's measure.
   ========================================================================== */

.roya-article__body {
	/* Right edge x1368 with a widest line of ~1313: the measure is the 1440
	   canvas less a 72 gutter each side. */
	--roya-container: 1296px;

	/* 108 under the rule in the design - but the circle hangs 54 below that
	   line, and the cue row's box ends with the circle, so the gap that has to
	   be written here is the remaining 54. */
	margin-block-start: clamp(1.25rem, 3.75vw, 3.375rem);
}

/* The .roya-prose rules moved to components.css - the accessibility page
   (and any generic page) renders editor HTML through the same wrapper. */


/* ==========================================================================
   Share band
   18:1091-1095. A full-bleed ירוק מרווה band 244 tall with 11px of שמנת
   between it and a 1440 rule on each side. The "SHARE SHARE" watermark sits
   behind at 240 in 10% אפור גרפיט; the invitation is on the visual right and
   the three circles on the visual left.
   ========================================================================== */

.roya-article-share {
	margin-block-start: clamp(1.5rem, 4.444vw, 4rem); /* 64 under the body */
}

.roya-article-share__band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(7rem, 16.944vw, 15.25rem); /* 244 */
	/* 11px of page showing between each rule and the band. */
	margin-block: clamp(0.25rem, 0.764vw, 0.6875rem);
	padding-block: var(--roya-space-3);
	background-color: var(--roya-accent);
	overflow: hidden;
}

/*
 * The same drifting marquee every section watermark on this site uses - four
 * copies in a max-content track translated by exactly half, so the loop point
 * is invisible (components.css, G-09). The @keyframes is global; only the
 * styling is local. inset-block + align-items centres it without a transform,
 * which the animation needs for itself.
 */
.roya-article-share__ghost {
	position: absolute;
	inset-block: 0;
	/* Physically left, not logical: the track overhangs to the right, so
	   drifting left never exposes a gap. */
	left: 0;
	display: flex;
	align-items: center;
	width: max-content;
	color: var(--roya-watermark-strong);
	color: color-mix(in srgb, var(--roya-graphite) 10%, transparent);
	font-family: var(--roya-font-display);
	font-size: var(--roya-text-watermark); /* 240 */
	font-weight: var(--roya-weight-regular);
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	animation: roya-ghost-drift 60s linear infinite;
}

.roya-article-share__ghost > span {
	padding-inline-end: 0.5em;
}

/*
 * The circles run x216-690 and the invitation ends at ~x1352, so the row spans
 * 1136 with its centre 64px right of the page's - the label is an auto-width
 * text node the designer placed by eye. Centring 1140 splits that 64 between
 * the two ends instead of inheriting it on one.
 */
.roya-article-share__row {
	--roya-container: 1140px;

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

/* First in the DOM, so in this RTL row it lands at the visual right, where the
   design draws it. */
.roya-article-share__label {
	margin: 0;
	color: var(--roya-on-accent);
	font-size: var(--roya-text-label); /* 64 */
	font-weight: var(--roya-weight-regular);
	line-height: 1;
}

ul.roya-article-share__list {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 4.375vw, 3.9375rem); /* 63 between the circles */
	list-style: none;
}

.roya-article-share__link {
	display: grid;
	place-items: center;
	width: var(--roya-social-size); /* 116 */
	height: var(--roya-social-size);
	background-color: var(--roya-cream);
	border-radius: var(--roya-radius-circle);
	box-shadow: var(--roya-shadow-soft);
	color: var(--roya-accent);
	transition: background-color var(--roya-transition), color var(--roya-transition);
}

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

/* The glyphs are the assets/img/ files, masked and painted currentColor so
   the circle's hover swap carries them. The files hold the bare 70-unit
   glyphs; the design insets each glyph 70/116 into its circle, so the box is
   60.3% of the circle (the LinkedIn file carries its extra inset itself). */
.roya-article-share__icon {
	width: 60.3%;
	height: 60.3%;
	background-color: currentColor;
	mask: center / contain no-repeat;
	-webkit-mask: center / contain no-repeat;
}

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

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

.roya-article-share__icon--linkedin {
	mask-image: url("../img/icon-linkedin.svg");
	-webkit-mask-image: url("../img/icon-linkedin.svg");
}


/* ==========================================================================
   More articles
   18:1090 and 144:29. Three 419x432 cards 52 apart, under a 64px heading that
   right-aligns to the grid's own right edge rather than to the page's.
   ========================================================================== */

.roya-article-related {
	padding-block-start: clamp(2rem, 7.014vw, 6.3125rem);  /* 101 under the rule */
	/* 178 from the cards to the contact block, less the ~55 that block already
	   pads itself by. */
	padding-block-end: clamp(2rem, 8.542vw, 7.6875rem);
}

.roya-article-related__inner {
	/* x35 to x1396 in the design - the card row is wider than the site's 1230. */
	--roya-container: 1361px;
}

.roya-article-related__title {
	margin: 0;
	color: var(--roya-text);
	font-size: var(--roya-text-label); /* 64 */
	font-weight: var(--roya-weight-light);
	line-height: 1;
	/* `start` = the grid's right edge in this RTL document, which is where the
	   design ends the heading (x1396, the rightmost card's own edge). */
	text-align: start;
}

.roya-article-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 3.611vw, 3.25rem); /* 52 */
	margin-block-start: clamp(1.25rem, 3.542vw, 3.1875rem); /* 51 */
}

/* The card itself is components/related-card.php, styled in components.css -
   it is shared with the single project's related strip (handover item 5). */


/* ==========================================================================
   Narrower than the canvas
   The design has no mobile screens (docs/06-do-not.md), so everything below is
   ours. Nothing changes shape until it has to.
   ========================================================================== */

@media (max-width: 1024px) {
	.roya-article-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	/*
	 * Side by side, the invitation and the circles stop fitting long before the
	 * type reaches its clamp floor - three 116px circles and a 64px line need
	 * ~1100px between them. Stacked and centred, the band keeps its reading:
	 * an invitation with the buttons under it.
	 */
	.roya-article-share__row {
		flex-direction: column;
		justify-content: center;
		gap: var(--roya-space-3);
	}

	.roya-article-share__label {
		text-align: center;
	}

	/* The band grows to fit the stack; the 244 becomes a floor, not a height. */
	.roya-article-share__band {
		padding-block: var(--roya-space-5);
	}

	/* Centred rather than start-aligned once the heading is wider than one
	   card - hanging off a two-column grid's right edge reads as a stray. */
	.roya-article-related__title {
		text-align: center;
	}
}

@media (max-width: 600px) {
	.roya-article-related__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * One card per row at full width would be a 590px-tall block on a 375
	 * screen. Letting it run wider than tall keeps three of them scannable.
	 */
	.roya-related-card__link {
		aspect-ratio: 419 / 380;
	}
}