/* ==========================================================================
   Teconya — right-to-left overrides.

   Loaded only for RTL locales. Most of the layout needs nothing: CSS Grid
   mirrors column numbering under `direction: rtl`, and the rest of the theme
   uses logical properties. What remains are the cases logical properties
   cannot express.
   ========================================================================== */

/* Arabic sits taller on the line than the Latin faces; give it room. */
body { line-height: 1.7; }

.section-title h1,
.section-title h2 {
	line-height: 1.4em;

	/* Some implicit rows came out shorter than the line box they hold, and the
	   glyph box of an Arabic word can sit slightly proud of its row besides —
	   between them a word could print into the row beneath. Floor every row at
	   the line height and keep a gap between them. */
	grid-auto-rows: minmax( 1.4em, auto );
	row-gap: 0.45em;
}

/* The band formula assumes a 1.06 row against the font size, which is the Latin
   line box. Arabic is set at 1.4 here with a 0.45em row gap, so the reserve has
   to be restated in those terms or the title runs into the copy below it. */
.projects-intro,
.research-intro,
.awards,
.clients,
.page--about .team,
.page--about .services,
.other-projects,
.other-publications,
.manifesto,
.services-teaser {
	--title-band: max(
		60vh,
		calc( var(--title-rows) * var(--title-font) * 1.4 + ( var(--title-rows) - 1 ) * var(--title-font) * 0.45 + var(--title-extra, 0px) + 20vh )
	);
}

/* The hover wipe must travel with the reading direction. */
.button--has-hover::after,
.awards .awards__item > *::after,
.page--about .team .member > *::after,
.publication__inner > *::after { transform-origin: left; }

.button--has-hover:hover::after,
.button--has-hover:focus-visible::after,
.awards .awards__item:hover > *::after,
.page--about .team .member:hover > *::after,
.publication__inner:hover > *::after { transform-origin: right; }

/* The title link hangs off the end of its word: the base rule pushes it one
   link-width along the reading direction with a physical translate, which
   under RTL sends it back over the word. Push the other way. */
.section-title__link { transform: translate( -100% ); }
.section-title--manifesto .section-title__link { transform: none; }

/* Latin-only affordances that read as noise in Arabic. */
.card .card__label {
	text-align: start;
	text-align-last: start;
}

/* Arabic has no uppercase; the transform does nothing for Arabic glyphs but
   would still apply to any Latin mixed into these labels. Leave it off so the
   two scripts sit consistently. */
.header .nav,
.footer ul,
.awards .awards__list,
.subtitle h2,
.u-mono-label,
.project-item .title,
.entry-content h2,
.entry-content h3 { text-transform: none; }

/* Tabular figures stay left-to-right inside RTL text. The clocks are not
   here: their labels are Arabic now, and the time reads after the label. */
.awards__year,
.project-item .num { direction: ltr; unicode-bidi: isolate; }

/* --- Oversized titles ------------------------------------------------------
   The staggered placements are measured against the English words, and the
   Arabic ones are a different shape entirely: "اصطناعي" wants six of the twelve
   columns where "AI" wanted two. Grid column numbering already mirrors under
   `direction: rtl`, so column 1 is the right-hand edge and the reading order
   holds — only the spans and the row breaks need restating.

   Bounded to the wide layout: below 768px the base narrow rules stack every
   word full width, and since a media query adds no specificity, leaving these
   unbounded would let them outrank that and reinstate the collisions.
   ========================================================================== */

@media only screen and (min-width: 769px) {
	.manifesto { --title-rows: 5; }

	/* خدماتنا — one word where the English has two. */
	.section-title--services-teaser h2 > span:nth-child(1) { grid-row: 1; grid-column: 1 / span 6; }

	/* بحث / وذكاء / اصطناعي / مخصّص / ومنصّات / ووردبريس / تدوم / طويلًا */
	.section-title--manifesto h2 > span:nth-child(1) { grid-row: 1; grid-column: 1 / span 3; }
	.section-title--manifesto h2 > span:nth-child(2) { grid-row: 1; grid-column: 5 / span 3; }
	.section-title--manifesto h2 > span:nth-child(3) { grid-row: 2; grid-column: 2 / span 6; }
	.section-title--manifesto h2 > span:nth-child(4) { grid-row: 3; grid-column: 1 / span 5; }
	.section-title--manifesto h2 > span:nth-child(5) { grid-row: 3; grid-column: 7 / span 6; }
	.section-title--manifesto h2 > span:nth-child(6) { grid-row: 4; grid-column: 1 / span 6; }
	.section-title--manifesto h2 > span:nth-child(7) { grid-row: 5; grid-column: 2 / span 3; }
	.section-title--manifesto h2 > span:nth-child(8) { grid-row: 5; grid-column: 6 / span 4; }

	/* استوديو / صغير / قائم / على / ثلاثة / تخصّصات / مترابطة / ومتكاملة */
	.page--about .section-title--manifesto h2 > span:nth-child(1) { grid-row: 1; grid-column: 1 / span 6; }
	.page--about .section-title--manifesto h2 > span:nth-child(2) { grid-row: 2; grid-column: 2 / span 4; }
	.page--about .section-title--manifesto h2 > span:nth-child(3) { grid-row: 2; grid-column: 7 / span 3; }
	.page--about .section-title--manifesto h2 > span:nth-child(4) { grid-row: 3; grid-column: 1 / span 3; }
	.page--about .section-title--manifesto h2 > span:nth-child(5) { grid-row: 3; grid-column: 5 / span 4; }
	.page--about .section-title--manifesto h2 > span:nth-child(6) { grid-row: 4; grid-column: 1 / span 7; }
	.page--about .section-title--manifesto h2 > span:nth-child(7) { grid-row: 5; grid-column: 1 / span 6; }
	.page--about .section-title--manifesto h2 > span:nth-child(8) { grid-row: 5; grid-column: 7 / span 6; }

	/* من / البحث / للتطبيق — "للتطبيق" wants seven columns, "Practice" wanted five. */
	.section-title--experiments h2 > span:nth-child(1) { grid-row: 1; grid-column: 1 / span 2; }
	.section-title--experiments h2 > span:nth-child(2) { grid-row: 2; grid-column: 3 / span 5; }
	.section-title--experiments h2 > span:nth-child(3) { grid-row: 3; grid-column: 2 / span 7; }
}

/* Arabic words run longer than the English they replace, so the paired
   placements the base keeps at this width no longer fit. One word per row. */
@media only screen and (max-width: 768px) {
	/* Every title word is full width here, so a link pushed a link-width past
	   the word's cell (the rule above) leaves the viewport on the left. In
	   flow after the word instead, where the full-width cell has room for it. */
	.section-title__link { transform: none; }

	/* The base pulls word two up half a line to tuck it under word one. Once the
	   words are stacked that pull lifts it into the row above, so it goes. */
	.section-title--services h2 > span:nth-child(1) { grid-row: 1; grid-column: 1 / -1; margin-top: 0; }
	.section-title--services h2 > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; margin-top: 0; }
	.section-title--services h2 > span:nth-child(3) { grid-row: 3; grid-column: 1 / -1; margin-top: 0; }
	.page--about .services { --title-rows: 3; }

	.section-title--awards h2 > span:nth-child(1) { grid-row: 1; grid-column: 1 / -1; }
	.section-title--awards h2 > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
	.section-title--awards h2 > span:nth-child(3) { grid-row: 3; grid-column: 1 / -1; }
	.awards { --title-rows: 3; }
	.clients { --title-rows: 3; }

	/* The 584px rules in the base sheet still place words 2 and 3 on partial
	   columns, which the Arabic words overrun — "اصطناعي" alone is wider than
	   the six columns it was left in. Restated at full width. */
	.section-title--manifesto h2 > span:nth-child(1) { grid-row: 1; grid-column: 1 / -1; }
	.section-title--manifesto h2 > span:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
	.section-title--manifesto h2 > span:nth-child(3) { grid-row: 3; grid-column: 1 / -1; }
	.section-title--manifesto h2 > span:nth-child(4) { grid-row: 4; grid-column: 1 / -1; }
	.section-title--manifesto h2 > span:nth-child(5) { grid-row: 5; grid-column: 1 / -1; }
	.section-title--manifesto h2 > span:nth-child(6) { grid-row: 6; grid-column: 1 / -1; }
	.section-title--manifesto h2 > span:nth-child(7) { grid-row: 7; grid-column: 1 / -1; }
	.section-title--manifesto h2 > span:nth-child(8) { grid-row: 8; grid-column: 1 / -1; }

	.section-title--projects h1 > span,
	.section-title--projects h2 > span,
	.section-title--services-teaser h2 > span,
	.section-title--research h1 > span,
	.section-title--other-projects h2 > span,
	.section-title--team h2 > span { grid-column: 1 / -1; }
}

/* Client sites: the ticker rolls the other way on the Arabic page, and the
   title words take full rows on small screens as the other bands do. */
[dir="rtl"] .clients-ticker__track { animation-direction: reverse; }
[dir="rtl"] .clients-ticker__row--reverse .clients-ticker__track { animation-direction: normal; }
@media only screen and (max-width: 768px) {
	.section-title--clients h2 > span:nth-child(1),
	.section-title--clients h2 > span:nth-child(2),
	.section-title--clients h2 > span:nth-child(3) { grid-column: 1 / -1; }
}

/* The research table is English and left to right on the Arabic pages too:
   the papers are English papers. The row keeps its own text direction and
   the hover wipe travels the English way inside it. */
[dir="rtl"] .publication[dir="ltr"] { text-align: left; }
[dir="rtl"] .publication[dir="ltr"] .publication__inner > *::after { transform-origin: right; }
[dir="rtl"] .publication[dir="ltr"]:hover .publication__inner > *::after { transform-origin: left; }

/* Phones: the Arabic band is the title's own height plus a margin, matching
   the base sheet's phone rule — the parallax reserve is gone there too. */
@media only screen and (max-width: 768px) {
	.projects-intro,
	.research-intro,
	.awards,
	.clients,
	.page--about .team,
	.page--about .services,
	.other-projects,
	.other-publications,
	.manifesto,
	.services-teaser {
		--title-band: calc( var(--title-rows) * var(--title-font) * 1.4 + ( var(--title-rows) - 1 ) * var(--title-font) * 0.45 + var(--title-extra, 0px) + 8vh );
	}
	.page--home .welcome .experiments__reel {
		--title-band: calc( var(--title-rows) * var(--title-font) * 1.4 + ( var(--title-rows) - 1 ) * var(--title-font) * 0.45 + 8vh );
	}
}

/* The Arabic research title sets 1.4 rows with a 0.45 row gap, so its grid
   needs the taller minimum the base sheet gives the Latin title. */
.page--home .welcome .experiments__reel { min-height: calc( 3 * 10vw * 1.4 + 2 * 10vw * 0.45 + 12dvh ); }