/* ──────────────────────────────────────────────────────────────────────────
   WORK ARCHIVE — Mosaic + Filters + Lightbox
   Brand palette: cyan #04b6e4, magenta #ee2b7a, ink #0f172a
   ────────────────────────────────────────────────────────────────────────── */

/* ─── Force the site nav into its "scrolled" (solid) style on this page ───
   The default nav is transparent + white text, which is unreadable against
   the light archive background. We piggy-back on the existing .scrolled
   class by adding a body-class-scoped override. */
body.post-type-archive-work nav,
body.single-work nav {
	background: rgba(255, 255, 255, .85);
	border-color: var(--line, rgba(15, 23, 42, .08));
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
body.post-type-archive-work nav .nav-logo-text,
body.single-work nav .nav-logo-text { color: var(--ink, #0f172a); }
body.post-type-archive-work nav .nav-menu > a,
body.post-type-archive-work nav .nav-menu > .nav-has-sub > a,
body.single-work nav .nav-menu > a,
body.single-work nav .nav-menu > .nav-has-sub > a { color: var(--ink, #0f172a); }
/* CTA button: intentionally NOT overridden here. The body already carries the
   `light-nav` class on all archive/single pages (see digivolve_body_classes
   in functions.php), and the dynamic CSS rule
   `body.light-nav nav .nav-cta { background: <scrolled-bg> }` emits the
   Customizer-defined scrolled CTA colour (e.g. WhatsApp green). The previous
   override here forced ink/#fff and was masking that. */

#work-archive {
	/* Match Insights page padding exactly so the title sits at the same
	   distance from the nav header on both pages. Insights uses 140px 0 60px. */
	padding: clamp(110px, 11vw, 140px) 0 60px;
	background:
		radial-gradient(ellipse 1200px 600px at 50% -100px, rgba(4,182,228,.08), transparent 70%),
		linear-gradient(to bottom, #fff 0%, var(--bg-alt, #f8fafc) 100%);
	min-height: 100vh;
}

/* ─── Header (matches Insights page: left-aligned, tighter spacing) ─── */
.work-archive-head {
	/* No max-width / margin-auto — full-width so content sits left-aligned
	   inside the container, matching the Insights hero. */
	text-align: left;
	margin: 0 0 clamp(40px, 5vw, 60px);
	padding-bottom: clamp(28px, 3.5vw, 40px);
	border-bottom: 1px solid var(--line, rgba(15, 23, 42, .08));
}
.work-archive-head .eyebrow {
	/* Use the global .eyebrow.cy styling — no overrides needed. The
	   eyebrow already has margin-bottom: 14px from theme.css. */
	margin-bottom: 14px;
}
.work-archive-title {
	/* Match Insights h1 sizing: 40px → 72px responsive, narrower line-height. */
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.02;
	margin: 0 0 16px;
	max-width: 800px;
	color: var(--ink, #0f172a);
}
.work-archive-title .grad {
	background: linear-gradient(135deg, var(--cyan, #04b6e4), var(--magenta, #ee2b7a));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.work-archive-lead {
	/* Match Insights p sizing: 18px, max 600px, muted. */
	font-size: 18px;
	color: var(--muted, #64748b);
	line-height: 1.55;
	max-width: 600px;
	margin: 0;
}

/* ─── Filter pills (matches Insights .insights-filters: left-aligned, lighter) ─── */
/* Defensive reset for the global `nav { position: fixed }` rule — kept from
   v1.37 in case anyone ever changes the markup back to a <nav>. */
.work-filters {
	position: static;
	top: auto;
	left: auto;
	transform: none;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	width: auto;
	padding: 0;
	z-index: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	/* Left-aligned, sitting directly under the description like Insights. */
	justify-content: flex-start;
	margin: 32px 0 0;
}
.work-filter {
	/* Lighter, Insights-style pill — 13px font, white background, thin border. */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted, #64748b);
	background: #fff;
	border: 1px solid var(--line, rgba(15, 23, 42, .08));
	cursor: pointer;
	transition: all .25s;
}
.work-filter:hover {
	background: var(--ink, #0f172a);
	color: #fff;
	border-color: var(--ink, #0f172a);
}
.work-filter:hover .work-filter-count {
	background: rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .85);
}
.work-filter.is-active {
	background: var(--ink, #0f172a);
	color: #fff;
	border-color: var(--ink, #0f172a);
}
.work-filter.is-active:hover {
	background: var(--ink, #0f172a);
	color: #fff;
	border-color: var(--ink, #0f172a);
}
.work-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 6px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(15, 23, 42, .06);
	color: var(--muted, #64748b);
	transition: background .25s, color .25s;
}
.work-filter.is-active .work-filter-count {
	background: rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .9);
}

/* ─── Mosaic grid ───
   Fixed-row mosaic: every tile occupies an integer number of grid cells.
   That means dense flow can pack tiles without leaving gaps, since each
   cell is the same size. Images inside crop with object-fit: cover. */
.work-mosaic {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Row height = one third of the available width minus gaps, so a 1×1
	   tile is roughly square. Wide tiles span 2 cols × 1 row (≈ 2:1).
	   Tall tiles span 1 col × 2 rows (≈ 1:2). Large tiles span 2×2. */
	grid-auto-rows: minmax(0, calc((min(100vw, 1200px) - 24px - 48px) / 3));
	gap: 12px;
	grid-auto-flow: dense; /* fills gaps left by wide/tall tiles */
}

/* When a filter narrows the result down to only wide/large tiles (e.g.
   3D Modeling, System Platforms, Website Design — categories whose
   pieces are all panoramic), 3 cols can't tessellate cleanly: every
   2-col-wide tile leaves col 3 empty, so the whole grid hugs the left.
   Switch to a centered 2-col grid in that case so wide tiles fill the
   row edge-to-edge and the layout reads as intentional. */
.work-mosaic.is-wide-only {
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(0, calc((min(100vw, 1200px) - 24px - 24px) / 2 * 9 / 16));
	max-width: min(100%, 1100px);
	margin-left: auto;
	margin-right: auto;
}
.work-mosaic.is-wide-only .work-tile.is-wide,
.work-mosaic.is-wide-only .work-tile.is-large {
	/* In 2-col mode, "wide" and "large" both occupy a single column. */
	grid-column: span 1;
}
.work-mosaic.is-wide-only .work-tile.is-large { grid-row: span 2; }
.work-mosaic.is-wide-only .work-tile.is-tall { grid-row: span 2; }

@media (max-width: 960px) {
	.work-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: minmax(0, calc((100vw - 10px - 48px) / 2));
		gap: 10px;
	}
	.work-mosaic.is-wide-only {
		grid-auto-rows: minmax(0, calc((100vw - 10px - 48px) / 2 * 9 / 16));
	}
}
@media (max-width: 560px) {
	.work-mosaic {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(0, calc(100vw - 32px));
		gap: 12px;
	}
	.work-mosaic.is-wide-only {
		grid-template-columns: 1fr;
		grid-auto-rows: minmax(0, calc((100vw - 32px) * 9 / 16));
	}
}

.work-tile {
	position: relative;
	background: var(--bg-alt, #f1f5f9);
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	/* Default tile = 1 col × 1 row. No aspect-ratio needed — the row height
	   dictates the box. */
	transition: opacity .35s ease, transform .35s ease, filter .35s ease;
	opacity: 0;
	transform: translateY(20px);
	animation: workTileIn .6s cubic-bezier(.2, .9, .3, 1) calc(var(--i, 1) * 60ms) forwards;
}
@keyframes workTileIn { to { opacity: 1; transform: translateY(0); } }

.work-tile.is-wide  { grid-column: span 2; }
.work-tile.is-tall  { grid-row: span 2; }
.work-tile.is-large { grid-column: span 2; grid-row: span 2; }

@media (max-width: 960px) {
	.work-tile.is-wide  { grid-column: span 2; grid-row: span 1; }
	.work-tile.is-tall  { grid-column: span 1; grid-row: span 2; }
	.work-tile.is-large { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 560px) {
	.work-tile,
	.work-tile.is-wide,
	.work-tile.is-tall,
	.work-tile.is-large { grid-column: span 1; grid-row: span 1; }
}

/* Hidden by filter */
.work-tile.is-hidden {
	display: none !important;
}

.work-tile-button {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	-webkit-tap-highlight-color: transparent;
}

.work-tile-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2, .9, .3, 1);
}

.work-tile:hover .work-tile-image {
	transform: scale(1.04);
}

.work-tile-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: rgba(255, 255, 255, .4);
	font-size: 14px;
	padding: 20px;
	text-align: center;
}

/* Hover overlay with title + service */
.work-tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(15, 23, 42, .85) 100%);
	display: flex;
	align-items: flex-end;
	padding: 18px;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.work-tile:hover .work-tile-overlay,
.work-tile:focus-within .work-tile-overlay {
	opacity: 1;
}

.work-tile-meta {
	color: #fff;
	transform: translateY(8px);
	transition: transform .3s ease;
	/* Force left-alignment of all overlay text — title, service label, and
	   client/year line should all flush to the same left edge regardless of
	   any inherited text-align (e.g. from a centered parent template). */
	text-align: left;
	width: 100%;
}
.work-tile:hover .work-tile-meta,
.work-tile:focus-within .work-tile-meta {
	transform: translateY(0);
}
.work-tile-service {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cyan, #04b6e4);
	margin-bottom: 6px;
}
.work-tile-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 4px;
	color: #fff;
	letter-spacing: -.01em;
}
.work-tile-client {
	font-size: 12px;
	color: rgba(255, 255, 255, .65);
}

.work-tile-button:focus-visible {
	outline: 2px solid var(--cyan, #04b6e4);
	outline-offset: 3px;
}

/* Empty state */
.work-empty,
.work-empty-state {
	text-align: center;
	padding: 80px 20px;
	color: var(--muted, #64748b);
	font-size: 16px;
}

/* ──────────────────────────────────────────────────────────────────────────
   LIGHTBOX
   ────────────────────────────────────────────────────────────────────────── */

.work-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(15, 23, 42, .96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 60px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.work-lightbox[hidden] {
	display: none;
}
.work-lightbox.is-visible {
	opacity: 1;
	pointer-events: auto;
}

body.work-lightbox-open {
	overflow: hidden;
}

.work-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .15);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, transform .2s;
	z-index: 2;
}
.work-lightbox-close:hover {
	background: rgba(255, 255, 255, .2);
	transform: rotate(90deg);
}

.work-lightbox-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, transform .2s, opacity .2s;
	z-index: 2;
}
.work-lightbox-nav:hover {
	background: rgba(255, 255, 255, .18);
}
.work-lightbox-nav.prev { left: 16px; }
.work-lightbox-nav.next { right: 16px; }
.work-lightbox-nav[disabled],
.work-lightbox-nav.is-hidden {
	opacity: .3;
	cursor: not-allowed;
	pointer-events: none;
}

.work-lightbox-figure {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1200px;
	width: 100%;
	max-height: 100%;
	margin: 0;
}

.work-lightbox-image-wrap {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.work-lightbox-image {
	max-width: 100%;
	max-height: 75vh;
	object-fit: contain;
	display: block;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .3s ease;
}
.work-lightbox-image.is-loaded {
	opacity: 1;
}

.work-lightbox-loader {
	position: absolute;
	display: flex;
	gap: 8px;
}
.work-lightbox-loader span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cyan, #04b6e4);
	animation: lbDot 1.2s ease-in-out infinite;
}
.work-lightbox-loader span:nth-child(2) { animation-delay: .15s; background: var(--magenta, #ee2b7a); }
.work-lightbox-loader span:nth-child(3) { animation-delay: .3s; background: #7575b3; }
@keyframes lbDot { 0%, 100% { transform: scale(.6); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }
.work-lightbox-image.is-loaded ~ .work-lightbox-loader { display: none; }

/* Caption */
.work-lightbox-caption {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 0;
	color: #fff;
}
.work-lightbox-meta {
	max-width: 720px;
}
.work-lightbox-service {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cyan, #04b6e4);
	margin-bottom: 8px;
}
.work-lightbox-title {
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: -.015em;
	margin: 0 0 6px;
	color: #fff;
}
.work-lightbox-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 10px;
}
.work-lightbox-desc {
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
	line-height: 1.55;
	margin: 0 0 8px;
	max-width: 580px;
}
.work-lightbox-desc:empty { display: none; }
.work-lightbox-link {
	display: inline-block;
	font-size: 13px;
	color: var(--cyan, #04b6e4);
	font-weight: 500;
	margin-top: 4px;
	transition: color .2s, transform .2s;
}
/* Respect the hidden attribute even when we've set an explicit display value.
   Without this, [hidden] is ignored because CSS display wins. */
.work-lightbox-link[hidden] { display: none !important; }
.work-lightbox-link:hover {
	color: var(--magenta, #ee2b7a);
	transform: translateX(2px);
}
.work-lightbox-counter {
	font-size: 12px;
	color: rgba(255, 255, 255, .45);
	font-weight: 500;
	letter-spacing: .04em;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

/* Lightbox responsive */
@media (max-width: 768px) {
	.work-lightbox { padding: 20px 12px; }
	.work-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
	.work-lightbox-nav { width: 40px; height: 40px; }
	.work-lightbox-nav.prev { left: 6px; }
	.work-lightbox-nav.next { right: 6px; }
	.work-lightbox-image { max-height: 60vh; }
	.work-lightbox-caption { flex-direction: column; align-items: flex-start; gap: 10px; }
	.work-lightbox-counter { align-self: flex-end; }
}