/* =========================================================================
   RTL — corrections only.
   The layout is built on logical properties, so it already flows right-to-left.
   This file does two things: it flips the few directional UI elements that CSS
   logical properties cannot flip, and it explicitly PREVENTS the flipping of
   things that must never mirror — photography, film frames and art direction.
   ========================================================================= */

/* ---- 1. Media never mirrors. Composition is authored, not derived. -------- */
[dir="rtl"] .mhk-work__image,
[dir="rtl"] .mhk-project__figure img,
[dir="rtl"] .mhk-video__play img,
[dir="rtl"] video,
[dir="rtl"] .mhk-hero__window img,
[dir="rtl"] .mhk-footer__logo,
[dir="rtl"] .mhk-logo {
	transform: none !important;
}

/* The hero window keeps the logo's triangle pointing INTO the reading
   direction: left in Arabic, right in Dutch. That is brand geometry, not text. */
[dir="rtl"] .mhk-hero__window {
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	transform: none;
}

[dir="rtl"] .mhk-hero__window img,
[dir="rtl"] .mhk-hero__window video {
	transform: none;
}

/* ---- 2. Directional UI does flip. --------------------------------------- */
[dir="rtl"] .mhk-caps__arrow {
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	transform: none;
}

[dir="rtl"] .mhk-caps__row:hover .mhk-caps__arrow {
	transform: translateX(-0.5rem);
}

[dir="rtl"] .mhk-video__triangle {
	clip-path: polygon(92% 0, 0 50%, 92% 100%);
	transform: scale(1);
}

[dir="rtl"] .mhk-video__play:hover .mhk-video__triangle {
	transform: scale(1.15);
}

[dir="rtl"] .mhk-web__specs li::before {
	content: "◀";
	transform: none;
}

/* ---- 3. Horizontal sequences read right-to-left. ------------------------ */
[dir="rtl"] .mhk-reel__track {
	flex-direction: row;
}

/* ---- 4. Editorial offsets mirror; they are typographic, not photographic. */
[dir="rtl"] .mhk-work--lead {
	grid-column: 5 / span 8;
}

[dir="rtl"] .mhk-work--offset {
	grid-column: 1 / span 7;
}

[dir="rtl"] .mhk-work--portrait {
	grid-column: 8 / span 5;
}

[dir="rtl"] .mhk-work--small {
	grid-column: 1 / span 4;
}

[dir="rtl"] .mhk-case__sticky {
	grid-column: 9 / -1;
}

[dir="rtl"] .mhk-case__media {
	grid-column: 1 / span 7;
}

[dir="rtl"] .mhk-web__text,
[dir="rtl"] .mhk-start__text {
	grid-column: 8 / -1;
}

[dir="rtl"] .mhk-web__frames {
	grid-column: 1 / span 6;
}

[dir="rtl"] .mhk-start__form {
	grid-column: 1 / span 6;
}

[dir="rtl"] .mhk-project__figure--0 {
	grid-column: 6 / span 7;
}

[dir="rtl"] .mhk-project__figure--1 {
	grid-column: 1 / span 4;
}

[dir="rtl"] .mhk-project__figure--2 {
	grid-column: 3 / span 8;
}

[dir="rtl"] .mhk-project__figure--3 {
	grid-column: 9 / span 4;
}

[dir="rtl"] .mhk-project__figure--4 {
	grid-column: 1 / span 7;
}

/* ---- 5. Forms and tables ----------------------------------------------- */
[dir="rtl"] .mhk-form input,
[dir="rtl"] .mhk-form select,
[dir="rtl"] .mhk-form textarea {
	text-align: right;
}

/* Phone numbers and e-mail stay LTR inside an RTL paragraph. */
[dir="rtl"] a[href^="tel"],
[dir="rtl"] a[href^="mailto"] {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

[dir="rtl"] .mhk-index__table th,
[dir="rtl"] .mhk-index__table td {
	text-align: right;
}

/* ---- 6. Mobile ---------------------------------------------------------- */
@media (max-width: 60rem) {
	[dir="rtl"] .mhk-work--lead,
	[dir="rtl"] .mhk-work--offset,
	[dir="rtl"] .mhk-work--portrait,
	[dir="rtl"] .mhk-work--small,
	[dir="rtl"] .mhk-case__sticky,
	[dir="rtl"] .mhk-case__media,
	[dir="rtl"] .mhk-web__text,
	[dir="rtl"] .mhk-web__frames,
	[dir="rtl"] .mhk-start__text,
	[dir="rtl"] .mhk-start__form,
	[dir="rtl"] .mhk-project__figure,
	[dir="rtl"] .mhk-project__figure--0,
	[dir="rtl"] .mhk-project__figure--1,
	[dir="rtl"] .mhk-project__figure--2,
	[dir="rtl"] .mhk-project__figure--3,
	[dir="rtl"] .mhk-project__figure--4 {
		grid-column: 1 / -1;
	}
}