/*
 * INNER-EXPERIENCE-002: «أعمالنا», on the archive only. A short intro so the works start early, then a gallery with a
 * rhythm of wide rows and uneven pairs, and a light ending. One thin line runs down the margin beside the gallery,
 * clear of every card, and stops at the ending. Everything here is scoped to .works-page, so the shared card
 * keeps its look on the home and projects pages.
 */
.works-page { --lx: calc(var(--gutter) / 2); }
@media (min-width: 1200px) { .works-page { --lx: 3.333%; } }

/* Intro. */
.works-intro { position: relative; background: var(--surface); padding-block-end: 28px; }
.works-intro::after { content: ""; position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px; background: var(--border); }
.works-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block-start: 4px; }
.works-eyebrow { margin: 0 0 6px; color: var(--link); font-weight: 600; font-size: 15px; }
.works-intro h1 { margin: 0; font-size: 31px; line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
.works-intro .lead { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.85; max-width: 34rem; }
@media (min-width: 768px) { .works-intro h1 { font-size: 40px; } }
@media (min-width: 1024px) {
	.works-intro { padding-block-end: 40px; }
	.works-intro-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
	.works-intro h1 { font-size: 46px; }
}

/* The gallery. */
.works-body { position: relative; padding-block: 32px 64px; view-timeline: --works block; }
.works-rail { position: absolute; inset-block: 0; inset-inline-start: var(--lx); width: 2px; background: var(--accent); transform-origin: top; pointer-events: none; }
.works-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.works-gallery .project-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; background: var(--white); }
.works-gallery .project-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; width: 72px; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .2s var(--ease-out); pointer-events: none; }
.works-gallery .project-card:is(:hover, :focus-within)::before { transform: none; }
.works-gallery .project-card:hover { border-color: var(--primary); }
.works-gallery .project-card:has(:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.works-gallery .card-media { aspect-ratio: 16 / 10; margin: 0; overflow: hidden; background: var(--surface); }
.works-gallery .card-media img { object-fit: cover; object-position: 50% 45%; transition: transform .4s var(--ease-out); }
.works-gallery .card-media figcaption { inset-block-end: 12px; inset-inline: auto 12px; padding: 3px 10px; background: rgba(17, 16, 68, .82); font-size: 13px; line-height: 1.6; }
.works-gallery .card-body { padding: 16px 0 20px; gap: 6px; }
.works-gallery .card-title { font-size: 22px; line-height: 1.45; }
.works-gallery .project-card:not(.is-text) .card-title a { color: var(--primary); }
.works-gallery .card-more { padding-top: 10px; }

/* A project with no cover: the mark on navy, on purpose. */
.works-gallery .project-card.is-text { justify-content: center; min-height: 240px; background: var(--primary); border: 0; overflow: hidden; }
.works-gallery .project-card.is-text::after { content: ""; position: absolute; inset-block-end: -24px; inset-inline-end: -16px; width: 200px; height: 200px; background: var(--mark) no-repeat center / contain; filter: brightness(0) invert(1); opacity: .07; pointer-events: none; }
.works-gallery .is-text .card-body { padding: 28px; }
.works-gallery .is-text .card-title a, .works-gallery .is-text .card-text, .works-gallery .is-text .card-scope, .works-gallery .is-text .card-scope .label { color: var(--white); }
.works-gallery .is-text .card-meta, .works-gallery .is-text .card-more { color: #A9D4FF; }

@media (min-width: 768px) {
	.works-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
	.works-gallery .is-wide { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	.works-gallery .is-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; background: var(--surface); }
	.works-gallery .is-wide .card-media { aspect-ratio: auto; min-height: 260px; }
	.works-gallery .is-wide .card-body { padding: 20px; justify-content: center; }
}
@media (min-width: 1024px) {
	.works-body { padding-block: 48px 96px; }
	.works-gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 32px; }
	.works-gallery .is-wide { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; background: var(--surface); }
	.works-gallery .is-wide.is-flip .card-media { order: 2; }
	.works-gallery .is-wide .card-media { aspect-ratio: auto; min-height: 400px; clip-path: polygon(0 0, 100% 0, 100% 100%, 64px 100%, 0 calc(100% - 64px)); }
	.works-gallery .is-wide.is-flip .card-media { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%); }
	.works-gallery .is-wide .card-media figcaption { inset-inline: 12px auto; }
	.works-gallery .is-wide.is-flip .card-media figcaption { inset-inline: auto 12px; }
	.works-gallery .is-wide .card-body { justify-content: center; padding: 40px; }
	.works-gallery .is-wide .card-title { font-size: 28px; line-height: 1.4; }
	.works-gallery .is-wide .card-more { margin-top: 12px; }
	.works-gallery .is-pair { grid-column: span 5; }
	.works-gallery .is-pair.is-major { grid-column: span 7; }
	.works-gallery .is-pair .card-media { aspect-ratio: auto; height: 300px; }
	.works-gallery .project-card.is-text.is-wide { display: flex; min-height: 280px; }
	.works-gallery .is-text.is-wide .card-body, .works-gallery .is-text.is-pair .card-body { padding: 40px; }
}

/* Pages of results. */
.works-page .pagination { margin-block-start: 40px; }

/* The ending: lighter than the home page's, one branch into the heading. */
.works-end { position: relative; overflow: hidden; overflow: clip; container-type: inline-size; view-timeline: --works-end block; background: var(--primary); color: #E0E5F7; padding-block: 56px; --line: #7CC0FF; --cx: calc(var(--gutter) / 2); }
.works-end-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.works-end-head { position: relative; }
.works-end-head::before { content: ""; position: absolute; inset-block: -1600px calc(100% - 22px); inset-inline-start: calc(-1 * var(--cx)); width: 2px; background: var(--line); transform-origin: top; pointer-events: none; }
.works-end-head::after { content: ""; position: absolute; inset-block-start: 21px; inset-inline-start: calc(-1 * var(--cx)); width: calc(var(--cx) - 6px); height: 2px; background: var(--line); transform-origin: right; pointer-events: none; }
.works-end-node { position: absolute; inset-block-start: 17px; inset-inline-start: calc(-4px - var(--cx)); width: 10px; height: 10px; background: var(--line); transform: rotate(45deg); }
.works-end h2 { margin: 0; color: var(--white); font-size: 28px; line-height: 1.4; }
.works-end p { margin: 10px 0 0; max-width: 38rem; line-height: 1.85; }
.works-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.works-end .button { background: var(--white); color: var(--primary); }
.works-end .button:hover { background: #E6EDFC; color: var(--primary); }
.works-end a:focus-visible { outline-color: var(--white); }
.works-end-link, .works-end-number { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); font-weight: 600; text-underline-offset: 5px; }
.works-end-link:hover, .works-end-number:hover { color: var(--white); text-decoration-thickness: 2px; }
.works-end-number { font: 700 19px/1 var(--font-en); }
@media (max-width: 479px) { .works-end .button { width: 100%; } }
@media (min-width: 900px) {
	.works-end { --edge: calc(var(--gutter) + max(0px, (100cqw - var(--wrap) - 2 * var(--gutter)) / 2)); padding-block: 72px; }
	.works-end-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
	.works-end h2 { font-size: 34px; }
	.works-end-head::before { inset-block-end: calc(100% - 26px); }
	.works-end-head::after, .works-end-node { inset-block-start: 25px; }
	.works-end-node { inset-block-start: 21px; }
}
@media (min-width: 1200px) { .works-end { --cx: calc(var(--edge) - 3.333cqw); } }

@media (prefers-reduced-motion: no-preference) {
	.works-gallery .project-card:is(:hover, :focus-within) .card-media img { transform: scale(1.03); }
	.works-gallery .project-card:is(:hover, :focus-within) .card-more::after { transform: translateX(-5px); }
	@supports (animation-timeline: view()) {
		.works-rail { animation: works-down linear both; animation-timeline: --works; animation-range: cover 40vh cover calc(100% - 50vh); }
		.works-gallery .project-card { animation: works-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
		.works-gallery .is-pair:not(.is-major) { animation-range: entry 6% entry 41%; }
		.works-end-head::before { animation: works-down linear both; animation-timeline: --works-end; animation-range: entry 0% entry 40%; }
		.works-end-head::after { animation: works-across linear both; animation-timeline: --works-end; animation-range: entry 40% entry 60%; }
		.works-end-node { animation: works-node linear both; animation-timeline: --works-end; animation-range: entry 36% entry 46%; }
		@keyframes works-down { from { transform: scaleY(0); } }
		@keyframes works-across { from { transform: scaleX(0); } }
		@keyframes works-node { from { opacity: 0; } }
		@keyframes works-rise { from { opacity: .35; translate: 0 24px; } }
	}
}