/**
 * OSHIDA — cowork slider. Owner: C4.
 *
 * @figma 1701:2613 Group 399, 1200 x 562.26 at (120, 479.34)
 * @figma 1701:2614 shell — render interior rgb(28,28,28) on a rgb(40,40,40)
 *        ground = --o-veil-panel (32% black over 40 -> 27.2); corner profile
 *        sampled at d=4/12/20/32 matches r=50
 * @figma 1701:2615 photo 672.95 of 1200 = 56.08%, flush to the inline end
 * @figma 1701:2616 copy 285 x 260.63, 121px in from each edge of its 527 panel
 * @figma 1701:2617 title 285 x 198 — three lines, 66px leading
 * @figma 1701:2618 «قدم اول» · 1701:2619 chevron 14.93 x 6.00, pointing down
 * @figma 1594:882 pagination 145.36 x 5.49 — bars of 48.45 and 96.90 (2x)
 *
 * Two deviations, both recorded in docs/ai/responsive-decisions.md: the
 * pagination is recoloured (the design's rgb(47)/rgb(62) bars would fail WCAG
 * 1.4.11 over --o-bg) and prev/next buttons are added (the design draws dots
 * only; conventions.md requires real ones).
 */

.o-cowork-slider {
	--o-cowork-col: 1200px;
	--o-cowork-slider-lead: var(--o-section-gap-lg); /* 479.34 - 389.17 */
	--o-cowork-slider-dots-gap: var(--o-space-lg); /* 1081.51 - 1041.61 */
	--o-cowork-slide-media: 673fr;
	--o-cowork-slide-copy: 527fr;
	--o-cowork-slide-pad: clamp(var(--o-space-md), 8.4vw, 121px); /* 916.02 - 793 */
	--o-cowork-slide-ratio: 1200 / 562.26;

	padding-block-start: var(--o-cowork-slider-lead);
}

.o-cowork-slider__inner {
	max-inline-size: calc(var(--o-cowork-col) + var(--o-gutter) * 2);
}

/* The scroll strip — the whole no-JavaScript mechanism. */

.o-cowork-slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	border-radius: var(--o-radius-xl);
}

/* The scrollbar is the strip's only affordance until slider.js reveals the
 * dots, so it is hidden only then. */
.o-cowork-slider__viewport[data-o-slider-ready] {
	scrollbar-width: none;
}

.o-cowork-slider__viewport[data-o-slider-ready]::-webkit-scrollbar {
	display: none;
}

.o-cowork-slider__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-cowork-slider__slide {
	flex: 0 0 100%;
	max-inline-size: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* One slide. */

.o-cowork-slide {
	display: grid;
	grid-template-columns: minmax(0, var(--o-cowork-slide-copy)) minmax(0, var(--o-cowork-slide-media));
	aspect-ratio: var(--o-cowork-slide-ratio);
	overflow: hidden;
	border-radius: var(--o-radius-xl);
	background-color: var(--o-veil-panel);
}

/* DOM is media then body; the design puts the copy at the inline start. Both
 * cells are pinned to row 1: sparse auto-placement will not walk the cursor
 * backwards, so asking for column 1 after column 2 would start a second row. */
.o-cowork-slide__media {
	grid-column: 2;
	grid-row: 1;
	min-inline-size: 0;
}

.o-cowork-slide__body {
	display: flex;
	grid-column: 1;
	grid-row: 1;
	flex-direction: column;
	justify-content: center;
	min-inline-size: 0;
	padding-inline: var(--o-cowork-slide-pad);
	padding-block: var(--o-space-lg);
}

.o-cowork-slide__picture {
	display: block;
	block-size: 100%;
}

.o-cowork-slide__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.o-cowork-slide__title {
	margin: 0;
	font-size: var(--o-fs-h1);
	font-weight: var(--o-fw-black);
	/* 198 / 3 lines = 66px leading on the measured display size. */
	line-height: 1.5;
	letter-spacing: var(--o-track-snug);
}

/* 889.10 - (661.48 + 198). */
.o-cowork-slide__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--o-space-xs);
	margin-block-start: var(--o-space-md);
	color: var(--o-text);
	font-size: var(--o-fs-lg);
	font-weight: var(--o-fw-extralight);
	text-decoration: none;
}

/*
 * The chevron is geometry, not line art (1701:2619 / 1701:2536): two 2px rules
 * meeting at a right angle, sharp at every density, nothing drawn from memory.
 * The rotation is physical for the same reason design-tokens.md §3 writes the
 * notch polygon physically — the theme is RTL-only. -45deg carries the corner
 * where the two rules meet to the physical left, i.e. the inline end.
 */
.o-cowork-slide__link::after {
	content: "";
	flex: none;
	inline-size: 10px;
	block-size: 10px;
	border-block-start: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
}

.o-cowork-slide__link--inline::after {
	rotate: -45deg;
}

.o-cowork-slide__link--down::after {
	rotate: -135deg;
}

.o-cowork-slide__link:hover {
	color: var(--o-gold);
}

/* Controls. */

.o-cowork-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--o-space-xs);
	margin-block-start: var(--o-cowork-slider-dots-gap);
}

.o-cowork-slider__dots {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-cowork-slider__dot-item {
	display: flex;
}

.o-cowork-slider__dot {
	inline-size: 48px;
	block-size: 6px;
	padding: 0;
	border: 0;
	border-radius: var(--o-radius-pill);
	background-color: var(--o-text-muted);
	cursor: pointer;
}

.o-cowork-slider__dot[aria-current="true"] {
	inline-size: 97px;
	background-color: var(--o-gold);
}

.o-cowork-slider__arrow {
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--o-radius-pill);
	background-color: transparent;
	color: var(--o-text-muted);
	cursor: pointer;
}

.o-cowork-slider__arrow::before {
	content: "";
	inline-size: 9px;
	block-size: 9px;
	border-block-start: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
}

/* "Next" advances toward the inline end, physically left in this RTL layout. */
.o-cowork-slider__arrow--next::before {
	rotate: -45deg;
}

.o-cowork-slider__arrow--prev::before {
	rotate: 135deg;
}

.o-cowork-slider__arrow:hover,
.o-cowork-slider__arrow:focus-visible {
	color: var(--o-gold);
}

.o-cowork-slider__arrow[disabled] {
	opacity: var(--o-muted-opacity);
	cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
	.o-cowork-slider__viewport {
		scroll-behavior: smooth;
	}

	.o-cowork-slide__link,
	.o-cowork-slider__arrow {
		transition: color var(--o-dur-fast) var(--o-ease-standard);
	}

	.o-cowork-slider__dot {
		transition:
			inline-size var(--o-dur-base) var(--o-ease-standard),
			background-color var(--o-dur-fast) var(--o-ease-standard);
	}
}

/* Below `lg`: DERIVED — 2082:11958 does not cover the slider. The split card
 * stacks, photo over copy. docs/ai/responsive-decisions.md. */

@media (max-width: 899px) {
	.o-cowork-slider {
		--o-cowork-slider-lead: var(--o-space-3xl);
	}

	.o-cowork-slide {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
	}

	.o-cowork-slide__media {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 16 / 9;
	}


	.o-cowork-slide__body {
		grid-column: 1;
		grid-row: 2;
		padding-block: var(--o-space-lg);
	}
}

@media (max-width: 599px) {
	.o-cowork-slider {
		--o-cowork-slider-lead: var(--o-space-xl);
		--o-cowork-slider-dots-gap: var(--o-space-sm);
	}

	.o-cowork-slider__viewport,
	.o-cowork-slide {
		border-radius: var(--o-radius-lg);
	}

	.o-cowork-slider__dot {
		inline-size: 28px;
	}

	.o-cowork-slider__dot[aria-current="true"] {
		inline-size: 56px;
	}
}