/* Work index and service filter views */

/* Page header */
.od-work-hero { padding-top: calc(var(--od-header-h) + clamp(96px, 3.05vw + 84px, 128px)); padding-bottom: clamp(48px, 5.55vw, 80px); background: var(--od-bg); }
/* Title and orange rule share one line: the rule takes the space left over and never forces a wrap */
.od-work-hero__top {
	--od-work-title: clamp(3.125rem, 7.8vw, 7rem);
	position: relative;
	display: flex;
	align-items: center;
	column-gap: calc(0.15 * var(--od-work-title));
	padding-right: clamp(20px, 4vw, 56px);
}
.od-work-hero__title {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	font-size: var(--od-work-title);
	line-height: 1;
	font-weight: 600;
	letter-spacing: var(--od-track-display);
}
.od-work-hero__top::after {
	content: "";
	flex: 1 0 0;
	max-width: calc(2.4 * var(--od-work-title));
	height: max(3px, calc(0.057 * var(--od-work-title)));
	margin-top: calc(0.08 * var(--od-work-title));
	background: var(--od-brand);
}
/* Service names are longer than the index title */
.archive .od-work-hero__top { --od-work-title: clamp(2.5rem, 6.7vw, 6rem); }
.archive .od-work-hero__title { text-wrap: balance; }
.od-work-hero__corner { position: absolute; top: 0; right: 0; line-height: 1; }
.od-work-hero__intro {
	display: grid;
	grid-template-columns: minmax(202px, max-content) minmax(0, 600px) minmax(24px, 1fr) 300px;
	align-items: start;
	margin-top: clamp(60px, 3.8vw + 45px, 100px);
}
.od-work-hero__intro > * { margin: 0; }
.od-work-hero__intro .od-label { margin-top: 0.55em; padding-right: 40px; white-space: nowrap; }
.od-work-hero__lead { font-size: var(--od-fs-h5); line-height: 1.4; font-weight: 500; color: var(--od-grey-900); }
.od-work-hero__aside { grid-column: 4; padding-top: 0.2em; font-size: var(--od-fs-b2); line-height: 1.6; color: var(--od-fg-soft); }

/* Filter */
.od-work-index { padding-bottom: clamp(100px, 13.9vw, 200px); background: var(--od-bg); }
.od-work-filter { margin-bottom: clamp(24px, 2.8vw, 40px); }
.od-work-filter__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.od-work-filter .od-chip { display: inline-flex; text-decoration: none; }
.term-branding .od-work-filter [data-term="branding"],
.term-website-development .od-work-filter [data-term="website-development"],
.term-e-commerce .od-work-filter [data-term="e-commerce"],
.term-application-development .od-work-filter [data-term="application-development"],
.term-ai-development .od-work-filter [data-term="ai-development"],
.term-video-content-production .od-work-filter [data-term="video-content-production"],
.term-social-media-influencer-marketing .od-work-filter [data-term="social-media-influencer-marketing"],
.term-digital-marketing .od-work-filter [data-term="digital-marketing"] { border-color: var(--od-brand); color: var(--od-brand); }

/* Project mosaic: full, 530 + 650, 650 + 530, full */
.od-work--mosaic { grid-template-columns: minmax(0, 530fr) minmax(0, 100fr) minmax(0, 530fr); gap: 20px; padding: 0; list-style: none; }
.od-work--mosaic .od-work-card {
	grid-column: 1 / -1;
	position: relative;
	overflow: hidden;
	height: clamp(540px, 50vw, 720px);
	background: var(--od-grey-900);
	color: var(--od-white);
	container: od-work-card / inline-size;
}
.od-work--mosaic .od-work-card:nth-child(6n + 2) { grid-column: 1 / 2; }
.od-work--mosaic .od-work-card:nth-child(6n + 3) { grid-column: 2 / 4; }
.od-work--mosaic .od-work-card:nth-child(6n + 4) { grid-column: 1 / 3; }
.od-work--mosaic .od-work-card:nth-child(6n + 5) { grid-column: 3 / 4; }
/* A pair that would be left with one card takes the full row */
.od-work--mosaic .od-work-card:nth-child(6n + 2):last-child,
.od-work--mosaic .od-work-card:nth-child(6n + 4):last-child { grid-column: 1 / -1; }
.od-work--mosaic .od-work-card__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.od-work--mosaic .od-work-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: var(--od-grey-900) center / cover no-repeat;
	transition: transform 0.9s var(--od-ease);
}
.od-work--mosaic .od-work-card__media img { transform: none; transition: none; }
.od-work--mosaic .od-media__placeholder { display: none; }
/* Stand-in covers for the sample projects, used until a project has its own featured image */
.od-work--mosaic [href*="direct-booking-website"] .od-work-card__media { background-image: url(../../img/work-focuso.webp); }
.od-work--mosaic [href*="mobile-app-that-replaced"] .od-work-card__media { background-image: url(../../img/work-evolva.webp); }
.od-work--mosaic [href*="online-store-relaunch"] .od-work-card__media { background-image: url(../../img/work-aeroone.webp); }
.od-work--mosaic [href*="product-launch-campaign"] .od-work-card__media { background-image: url(../../img/work-immersia-realm.webp); }
.od-work--mosaic [href*="new-identity-for-a-private-clinic"] .od-work-card__media { background-image: url(../../img/work-urban-pulse.webp); }
.od-work--mosaic [href*="ai-assistant-for-a-b2b"] .od-work-card__media { background-image: url(../../img/work-robomate.webp); }
/* Bottom shade under the text block */
.od-work--mosaic .od-work-card__link::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: max(300px, 70%);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}
.od-work--mosaic .od-work-card__body {
	position: absolute;
	z-index: 1;
	inset: auto 0 0 0;
	gap: 8px;
	padding: clamp(20px, 2.8vw, 40px);
	align-items: stretch;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.4);
}
.od-work--mosaic .od-work-card__meta { order: 1; font-size: var(--od-fs-b2); line-height: 1.6; font-weight: 500; color: inherit; }
.od-work--mosaic .od-work-card__title {
	order: 2;
	font-size: clamp(1.75rem, 3.6vw, 3.25rem);
	font-size: clamp(1.75rem, 2.8cqi + 18px, 3.25rem);
	line-height: 1.2;
	font-weight: 600;
	text-wrap: balance;
}
.od-work--mosaic .od-work-card__year { order: 3; font-size: var(--od-fs-b2); line-height: 1.6; font-weight: 500; }
/* Hairline from the title to the card edge, on cards wide enough to keep it */
@container od-work-card (min-width: 600px) {
	.od-work--mosaic .od-work-card__title { display: flex; align-items: center; gap: clamp(20px, 2.8vw, 40px); max-width: none; }
	.od-work--mosaic .od-work-card__title::after { content: ""; flex: 1 0 25%; height: 1px; background: rgba(210, 210, 210, 0.5); }
}
.od-work--mosaic .od-work-card__link:focus-visible { outline: 2px solid var(--od-brand); outline-offset: -4px; }
.od-work--mosaic .od-work-card__link:focus-visible .od-work-card__media { transform: scale(1.04); }
@media (hover: hover) {
	.od-work--mosaic .od-work-card__link:hover .od-work-card__media { transform: scale(1.04); }
}
.od-work-index__ticks {
	height: 80px;
	margin-top: 20px;
	background: repeating-linear-gradient(90deg, var(--od-grey-200) 0 1px, transparent 1px calc((100% - 1px) / 89));
}

@media (max-width: 1024px) {
	.od-work-hero__intro { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.8fr); gap: 32px clamp(24px, 6vw, 56px); }
	.od-work-hero__intro .od-label { padding-right: 0; }
	.od-work-hero__aside { grid-column: auto; }
	.od-work--mosaic { grid-template-columns: minmax(0, 1fr); }
	.od-work--mosaic .od-work-card,
	.od-work--mosaic .od-work-card:nth-child(n) { grid-column: 1 / -1; height: clamp(380px, 66.6vw, 540px); }
	.od-work--mosaic .od-work-card__link::after { height: max(250px, 70%); }
	.od-work-index__ticks { height: 60px; background: repeating-linear-gradient(90deg, var(--od-grey-200) 0 1px, transparent 1px calc((100% - 1px) / 59)); }
}
@media (max-width: 600px) {
	.od-work-hero__top { display: block; }
	.od-work-hero__top::after { display: none; }
	.od-work-hero__title::after { content: ""; display: inline-block; width: 1.6em; height: 3px; margin-left: 0.1em; vertical-align: 0.3em; background: var(--od-brand); }
	.od-work-hero__intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.od-work-hero__intro .od-label { margin-top: 0; }
	.od-work-hero__lead { font-size: var(--od-fs-h5); }
	.od-work--mosaic .od-work-card__body { gap: 4px; }
	.od-work--mosaic .od-work-card__link::after { height: max(150px, 75%); }
	.od-work-filter__list { flex-wrap: nowrap; margin-inline: calc(-1 * var(--od-inset)); padding-inline: var(--od-inset); overflow-x: auto; scrollbar-width: none; }
	.od-work-filter__list::-webkit-scrollbar { display: none; }
	.od-work-filter .od-chip { white-space: nowrap; }
	.od-work-index__ticks { height: 40px; background: repeating-linear-gradient(90deg, var(--od-grey-200) 0 1px, transparent 1px calc((100% - 1px) / 29)); }
}
@media (prefers-reduced-motion: reduce) {
	.od-work--mosaic .od-work-card__media { transition: none; }
	.od-work--mosaic .od-work-card__link:hover .od-work-card__media,
	.od-work--mosaic .od-work-card__link:focus-visible .od-work-card__media { transform: none; }
}

/* Filter: one button that opens the list of services */
.od-work-filter { display: flex; justify-content: flex-end; }
.od-filter-menu { position: relative; }
.od-filter-menu__toggle { list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1px solid var(--od-grey-200); border-radius: 999px; font-size: var(--od-fs-b4); font-weight: 500; line-height: 1.4; color: var(--od-black); cursor: pointer; transition: border-color .3s, color .3s; }
.od-filter-menu__toggle::-webkit-details-marker { display: none; }
.od-filter-menu__toggle:hover, .od-filter-menu[open] .od-filter-menu__toggle { border-color: var(--od-brand); color: var(--od-brand); }
.od-filter-menu .od-work-filter__list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; min-width: 240px; padding: 8px; background: var(--od-white); border: 1px solid var(--od-grey-200); box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }
.od-filter-menu .od-chip { display: block; padding: 10px 12px; border: 0; border-radius: 0; font-size: var(--od-fs-b4); line-height: 1.4; }
.od-filter-menu .od-chip:hover, .od-filter-menu .od-chip.is-active, .od-filter-menu .od-chip[aria-current] { background: var(--od-grey-40); color: var(--od-brand); }

/* Load more */
.od-work-card[hidden] { display: none; }
.od-work-more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); }
.od-work-more button { background: none; border: 0; cursor: pointer; font-family: inherit; }