/* Our Work overview page. */

/* --- Hero: heading/tagline + continuously-scrolling client logo grid.
   Matches Figma node 4489:30677. --- */
.work-hero {
	display: grid;
	/* The logo wall's widest row needs roughly 850px at a legible size —
	   a strict 50/50 split (as the earlier text-only version used) only
	   leaves ~670px on a standard container and forces rows to wrap. The
	   copy doesn't need much width for a one-sentence tagline, so it gets a
	   narrower fixed share and the logos get the rest. */
	grid-template-columns: 30% 1fr;
	column-gap: 24px;
	align-items: center;
	/* Sits close behind the fixed header (~84px unscrolled) so the ticker's
	   top fade resolves almost in line with the logo/nav row, rather than
	   leaving a gap of blank white space below it. */
	padding-top: clamp(72px, 6vw, 96px);
	padding-bottom: clamp(48px, 6vw, 80px);
	/* Roughly fills the space below the fixed header on one screen, so the
	   vertically-centered copy and the ticker's active item land near the
	   middle of what's actually visible without scrolling first — instead
	   of centering against a box taller than the viewport. Below ~34rem of
	   available height .work-clients-ticker's own min (see below) takes
	   over and scrolling simply kicks back in, rather than squashing
	   everything down to an unreadable size. */
	min-height: calc(100vh - 6.5rem);
	min-height: calc(100svh - 6.5rem);
}

.work-hero__copy {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 420px;
	padding-left: clamp(16px, 3vw, 48px);
	padding-right: 24px;
}

.work-hero .work__title {
	margin: 0;
	text-align: left;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 3.125rem);
	color: var(--color-ink);
}

.work-hero .work__tagline {
	margin: 0;
	max-width: none;
	text-align: left;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.55;
	color: var(--color-ink);
}

.work-logos {
	position: relative;
	min-width: 0;
	/* Shrinks with a short viewport (laptop screens) so the whole hero fits
	   without scrolling, caps at the original design height on tall
	   screens, and won't go below 24rem — past that point there just isn't
	   room to fit it all, and scrolling takes over instead. */
	height: clamp(24rem, 68vh, 46rem);
	overflow: hidden;
}

/* Two identical copies of the rows, stacked in one track, animated from
   translateY(0) to translateY(-50%) — since -50% of the track's own
   height is exactly one copy's height, the loop point is invisible. A
   single-copy version was tried and reverted: sliding one copy up by its
   own full height inevitably exposes growing empty space below it before
   it fully leaves the window, since the window (.work-logos, above) is
   often taller than one copy's own content — the content genuinely needs
   to be at least as tall as the window at every point in the scroll,
   which only duplication provides. Keeps scrolling on hover (slow enough
   not to be a problem) — the only thing that stops it is
   prefers-reduced-motion, below. */
.work-logos__track {
	display: flex;
	flex-direction: column;
	animation: work-logos-scroll 36s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.work-logos__track {
		animation: none;
	}
}

@keyframes work-logos-scroll {
	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-50%);
	}
}

/* A curated row-by-row composition (see hero.php), not a generic grid —
   each row is its own centered flex line so a short row (or a single lone
   logo, like InTank) lands in the same horizontal center as a full row,
   rather than sitting left-aligned in an empty grid cell. */
.work-logos__rows {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}

.work-logos__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7rem; /* fallback for any row not listed below */
}

/* Gap between the logos in each row — taken from the actual spacing in
   the Figma reference (node 4499:50815), which isn't quite the same
   from row to row. To change it, just edit the rem number. */
.work-logos__row[data-row="1"] { gap: 7.75rem; } /* watch doctors / tap social / relish */
.work-logos__row[data-row="2"] { gap: 6.25rem; } /* service evaluation / ibm / insideout */
.work-logos__row[data-row="3"] { gap: 6.25rem; } /* bluecross blueshield / leafletdrop */
.work-logos__row[data-row="5"] { gap: 7.75rem; } /* microsoft / strat7 */

.work-logos__tile {
	display: flex;
	align-items: center;
	justify-content: center;
}

.work-logos__tile img {
	display: block;
	/* max-height + max-width (both, with width/height left auto) always
	   scales proportionally to whichever bound is more restrictive — a
	   fixed height paired with max-width fights itself on a wide wordmark
	   like InTank's, since the browser can't shrink the width to fit
	   without also shrinking the height, and ends up stretching it
	   instead. This way nothing can ever distort. */
	width: auto;
	height: auto;
	max-height: 3.5rem; /* fallback for any logo not listed below */
	max-width: 26rem;
	filter: grayscale(1) opacity(0.45);
	transition: filter 0.3s ease;
}

/* Size of each individual logo — taken directly from the actual pixel
   height of each mark in the Figma reference (node 4499:50815), since the
   source files themselves are all different sizes/proportions and don't
   line up if just scaled to one shared height. To make one logo bigger or
   smaller, edit its rem number below (1rem = 16px) — nothing else needs
   to change. */
.work-logos__tile[data-logo="watch-doctors"] img { max-height: 4.2rem; }
.work-logos__tile[data-logo="tap-social"] img { max-height: 4.3rem; }
.work-logos__tile[data-logo="relish"] img { max-height: 5.3rem; }
.work-logos__tile[data-logo="sec"] img { max-height: 3.75rem; }
.work-logos__tile[data-logo="ibm"] img { max-height: 2.2rem; }
.work-logos__tile[data-logo="insideout"] img { max-height: 2.3rem; }
.work-logos__tile[data-logo="blue-cross-blue-shield"] img { max-height: 2.6rem; }
.work-logos__tile[data-logo="leafletdrop"] img { max-height: 2.9rem; }
.work-logos__tile[data-logo="intank"] img { max-height: 2.9rem; }
.work-logos__tile[data-logo="microsoft"] img { max-height: 2.6rem; }
.work-logos__tile[data-logo="strat7"] img { max-height: 2.3rem; }

.work-logos__tile:hover img,
.work-logos__tile:focus-visible img {
	filter: grayscale(0) opacity(1);
}

.work-logos__tile-text {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.1rem;
	text-align: center;
	color: rgba(27, 27, 27, 0.18);
	transition: color 0.3s ease;
}

.work-logos__tile:hover .work-logos__tile-text,
.work-logos__tile:focus-visible .work-logos__tile-text {
	color: var(--color-ink);
}

.work-logos__fade {
	position: absolute;
	left: 0;
	right: 0;
	height: clamp(4rem, 11vh, 7rem);
	pointer-events: none;
}

.work-logos__fade--top {
	top: 0;
	background: linear-gradient(to bottom, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
}

.work-logos__fade--bottom {
	bottom: 0;
	background: linear-gradient(to top, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
}

/* No Figma mobile design for this page — the client logo wall previously
   became a plain static grid here (a scrolling marquee makes no sense on
   touch), but on reflection there's no need for a logo wall on mobile at
   all: it dropped straight into the case study grid instead, and that
   read as more scrolling to a destination the visitor is probably here
   for anyway. */
@media (max-width: 900px) {
	.work-hero {
		grid-template-columns: 1fr;
		/* Was calc(100vh - 6.5rem) — sized to vertically center the heading/
		   tagline against the logo wall's own height, further down. With
		   nothing left below it to balance against, that min-height just
		   left the hero as a near-full-screen block of mostly blank space
		   above the case study grid — auto lets it size to its own content
		   instead. */
		min-height: auto;
	}

	.work-hero__copy {
		align-items: center;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}

	/* Both set text-align:left explicitly at the selector's own base rule
	   (work-hero .work__title etc, above) — needs matching specificity to
	   actually win, not just the text-align:center already set on the
	   parent above (which these two override right back to left). */
	.work-hero .work__title,
	.work-hero .work__tagline {
		text-align: center;
	}

	/* Global mobile h1 baseline (3.1rem) — see base.css. Was already
	   effectively this size (3.125rem); normalized for consistency. */
	.work-hero .work__title {
		font-size: 3.1rem;
	}

	.work-logos {
		display: none;
	}
}

/* --- All case studies --- */
.work-case-studies {
	padding-bottom: clamp(64px, 8vw, 120px);
}

/* Heading + scroll arrow sit together as one centered unit; the services
   filter is a separate row below it (not sharing this row) — see
   .work-services-filter-row. */
.work-case-studies__header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.work-case-studies__heading {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.5625rem;
	color: var(--color-ink);
}

.work-case-studies__scroll-arrow {
	display: flex;
	flex-shrink: 0;
	width: 45px;
	height: 45px;
}

.work-case-studies__scroll-arrow img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Services filter — a full-width accordion (Figma node 3275:13770's own
   expanded state), not a small dropdown: the toggle bar spans the whole
   row, and opening it pushes the case-study grid down rather than
   overlaying on top of it. */
.work-services-filter {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.work-services-filter__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	list-style: none;
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.5625rem;
	color: var(--color-ink);
}

.work-services-filter__toggle::-webkit-details-marker {
	display: none;
}

/* The label turns orange while open — the toggle icon (a plain +/- glyph)
   is already orange in both states, per the source asset. */
.work-services-filter[open] .work-services-filter__label {
	color: var(--color-accent, #ff9500);
}

.work-services-filter__icon {
	position: relative;
	flex-shrink: 0;
	width: 24.57px;
	height: 24.57px;
}

.work-services-filter__icon img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.work-services-filter__icon-minus {
	opacity: 0;
}

.work-services-filter[open] .work-services-filter__icon-plus {
	opacity: 0;
}

.work-services-filter[open] .work-services-filter__icon-minus {
	opacity: 1;
}

.work-services-filter__panel {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 28px;
}

.work-services-filter__clear {
	align-self: flex-start;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--color-ink);
	text-decoration: underline;
}

.work-services-filter__divider {
	height: 1px;
	background: var(--color-ink);
}

.work-services-filter__group {
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 57px);
}

.work-services-filter__group-label {
	flex: 0 0 190px;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--color-ink);
}

.work-services-filter__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1 1 auto;
}

.work-services-filter__pill {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	border: 1px solid #636363;
	border-radius: 33px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	color: var(--color-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Same inverted treatment as the arrow-circle icons — outline fills solid
   on hover, not just a border-colour change. */
.work-services-filter__pill:hover {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-white);
}

.work-services-filter__pill.is-active {
	background: var(--color-ink);
	border-color: var(--color-ink);
	color: var(--color-white);
}

@media (max-width: 700px) {
	.work-services-filter__group {
		flex-direction: column;
		gap: 12px;
	}
}

.work-case-studies__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3vw, 40px) 20px;
}

/* Set by assets/js/work.js while a filter fetch is in flight — a light,
   momentary dim rather than a spinner/skeleton, since the swap itself is
   usually fast enough that anything heavier would just flash. */
.work-case-studies__grid[aria-busy="true"] {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

/* min-width:0 overrides a grid item's own default automatic minimum size
   (content-based, not the track width) — without it, this card was
   measured live rendering 26px WIDER than its actual 1fr grid track (368px
   against a 342px track at 390px viewport), overflowing past the
   container's right edge instead of matching it, because the featured
   image's own intrinsic size (get_the_post_thumbnail outputs real
   width/height attributes) set a content-based floor the grid track alone
   didn't override. Same underlying browser behaviour as flex items' own
   auto min-size (see .service-cards__card-toggle img's own writeup,
   service.css), just grid's version of it. */
.work-case-study-card {
	display: block;
	min-width: 0;
	text-decoration: none;
}

/* Same fade/rise-in as the blog's own .insights-card--enter (blog.css) —
   assets/js/work.js adds this to every card the Services filter's AJAX
   swap inserts, with a per-card transition-delay for the stagger, then
   flips .is-visible a frame later. Not needed on the very first, plain
   server-rendered page load — only on a filter change, when the whole
   grid is replaced at once and would otherwise just pop in instantly. */
.work-case-study-card--enter {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.work-case-study-card--enter.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.work-case-study-card--enter {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.work-case-studies__grid[aria-busy="true"] {
		transition: none;
	}
}

.work-case-study-card__media {
	aspect-ratio: 660 / 391;
	overflow: hidden;
	background: var(--color-offwhite, #fafafa);
}

.work-case-study-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-case-study-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 24px;
}

.work-case-study-card__logo {
	height: 45px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

/* Fallback when a client has no logo file uploaded at all (e.g. Watch
   Doctors) — matches .work-client-tile__logo--text's same reasoning, just
   left-aligned here to match this card's own text alignment instead of
   the tile's centred one. */
.work-case-study-card__logo--text {
	margin: 0;
	height: auto;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--color-ink);
}

/* Shown instead of the logo on a client's own "Projects" grid (Figma node
   3296:20718) — repeating that client's own logo on every card there would
   be redundant, so the category(s) each case study is tagged with (see
   invanity_case_study_top_level_services()) fills that same slot instead. */
.work-case-study-card__categories {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.125rem;
	color: var(--color-ink);
	opacity: 0.7;
}

.work-case-study-card__title {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.5625rem;
	line-height: 1.4;
	color: var(--color-ink);
}

/* Single child on desktop (the arrow is mobile-only, see below) — a plain
   flex row here so the mobile arrow can push to the card's right edge
   without needing its own wrapper on desktop too. */
.work-case-study-card__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

/* Mobile-only affordance — see the (max-width: 900px) block below for the
   actual size/visibility. Cards aren't otherwise an obviously clickable
   shape (no button, no border), so this signals "tap to view" the same
   way .recent-projects__arrow does elsewhere on the site. */
.work-case-study-card__arrow {
	display: none;
}

.work-case-study-card__arrow img {
	width: 100%;
	height: 100%;
	display: block;
}

.work-case-studies__empty {
	font-family: var(--font-body);
	font-size: 18px;
	color: var(--color-ink);
}

@media (max-width: 900px) {
	.work-clients__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* "All case studies" + its scroll-to-grid arrow existed as a manual
	   scroll cue for the hero's own tall, viewport-height two-column
	   layout — jump straight past the logo wall to the grid. The mobile
	   hero stacks everything in normal flow instead (see the hero's own
	   (max-width: 900px) rules above), so the grid is already the very
	   next thing on the page; a "scroll to it" cue right above content
	   that's already right there just reads as odd, not useful. */
	.work-case-studies__header {
		display: none;
	}

	.work-case-studies__grid {
		grid-template-columns: 1fr;
	}

	/* The featured image bleeds edge-to-edge (breaking out of
	   .work-case-studies' own container gutter via a negative margin
	   exactly matching it — a plain block element with the default
	   width:auto grows to fill the extra space that negative margin opens
	   up, no explicit width recalculation needed), while .work-case-study
	   -card__info right below it stays inset within that same gutter — so
	   the photo reads as full-bleed and the logo/title reads as sitting in
	   its own padded box underneath it, instead of both sharing one flat
	   inset margin down the whole card. */
	.work-case-study-card__media {
		margin-inline: calc(-1 * var(--gutter));
	}

	/* A bit more breathing room around the logo/title text than the
	   desktop card's plain margin-top gives it, now that each card runs
	   the full container width instead of sharing it with a neighbour. */
	.work-case-study-card__info {
		padding: 8px 4px 0;
		margin-top: 20px;
	}

	.work-case-study-card__title {
		font-size: 1rem;
	}

	/* Card isn't otherwise an obviously clickable shape on mobile (no
	   button, no border, no hover state to reveal it's a link) — a small
	   right-pointing arrow makes that clearer at a glance. Same asset/
	   rotation as .recent-projects__arrow (home.css), sized down to suit
	   sitting next to this card's own smaller title. */
	.work-case-study-card__arrow {
		display: flex;
		flex-shrink: 0;
		width: 1.75rem;
		height: 1.75rem;
		transform: rotate(-90deg);
	}

	.work-case-study-card__arrow::after {
		transform: rotate(-90deg);
	}

	/* A little extra room below each card on top of the grid's own row
	   gap (clamp(24px, 3vw, 40px) further up) — enough that consecutive
	   cards read as clearly separate stops down the list, not so much
	   that it turns into dead space between them. */
	.work-case-study-card {
		margin-bottom: 12px;
	}
}

@media (max-width: 600px) {
	.work-clients__grid {
		grid-template-columns: 1fr;
	}
}