/*
 * Portfolio / Work: project cards, case studies, homepage "Selected work"
 * teaser and the Website-Audit CTA strip. Same dark/lime language as the
 * rest of the theme; RTL-first with logical properties.
 */

/* ---------- Project grid ---------- */
.work-grid {
	gap: 22px;
	grid-template-columns: repeat(3, 1fr);
	padding-block: 10px 30px;
	display: grid;
}
.work-card {
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 28px;
	flex-direction: column;
	padding: 22px 22px 26px;
	display: flex;
	position: relative;
}
.work-card.is-featured {
	border-color: rgba(201, 255, 69, 0.5);
	grid-column: 1 / -1;
	grid-template-columns: 1.25fr 1fr;
	gap: 34px;
	padding: 30px;
	display: grid;
}
.work-badge {
	color: rgb(16, 18, 14);
	background: var(--lime);
	letter-spacing: 0.08em;
	border-radius: 999px;
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 5px 12px;
	font-family: var(--font-accent);
	font-size: 11px;
	font-weight: 800;
	display: inline-block;
}
.work-badge.is-internal {
	color: rgb(200, 205, 195);
	background: none;
	border: 1px solid rgb(60, 64, 56);
}
.work-media {
	position: relative;
}
.work-media .work-shot-desktop {
	border: 1px solid rgb(52, 55, 48);
	border-radius: 16px;
	width: 100%;
	height: auto;
	display: block;
}
.work-media .work-shot-mobile {
	border: 2px solid rgb(60, 64, 56);
	border-radius: 14px;
	width: 26%;
	height: auto;
	box-shadow: rgba(0, 0, 0, 0.5) 0 14px 34px;
	display: block;
	position: absolute;
	bottom: -18px;
	inset-inline-end: -8px;
}
.work-card:not(.is-featured) .work-media {
	margin-bottom: 26px;
}
.work-body h2,
.work-body h3 {
	color: #fff;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 700;
}
.work-type {
	color: rgb(190, 214, 140);
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
}
.work-desc {
	color: rgb(200, 205, 195);
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.65;
}
.work-services {
	flex: 1;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.work-services li {
	color: rgb(200, 205, 195);
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.5;
	display: flex;
}
.work-services li::before {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background:
		linear-gradient(var(--lime), var(--lime)) center/8px 1.5px no-repeat,
		linear-gradient(var(--lime), var(--lime)) center/1.5px 8px no-repeat;
	border: 1px solid rgba(201, 255, 69, 0.35);
	border-radius: 5px;
}
.work-live-link {
	color: rgb(16, 18, 14);
	background: var(--lime);
	border-radius: 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	min-height: 48px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 700;
	transition: transform 0.2s;
	display: inline-flex;
}
.work-live-link:hover { transform: translateY(-2px); }
.work-live-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Case studies ---------- */
.work-cases {
	margin-top: 30px;
}
.work-cases > h2 {
	color: #fff;
	letter-spacing: -0.03em;
	margin: 0 0 22px;
	font-size: clamp(26px, 3vw, 38px);
}
.work-case {
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 24px;
	margin-bottom: 18px;
	padding: 28px 32px;
}
.work-case h3 {
	color: #fff;
	margin: 0 0 4px;
	font-size: 20px;
}
.work-case .work-type { margin-bottom: 18px; }
.work-case-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	display: grid;
}
.work-case-grid h4 {
	color: var(--lime);
	letter-spacing: 0.02em;
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
}
.work-case-grid p {
	color: rgb(200, 205, 195);
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
}

/* ---------- Homepage "Selected work" teaser ---------- */
.work-teaser {
	border-top: 1px solid rgb(42, 45, 40);
	padding-block: 76px 70px;
}
.work-teaser-head {
	max-width: 780px;
	margin-bottom: 40px;
}
.work-teaser-head h2 {
	letter-spacing: -0.045em;
	margin: 0;
	font-size: clamp(38px, 4.6vw, 64px);
	font-weight: 700;
	line-height: 1.02;
}
.work-teaser-head h2 em { color: var(--lime); font-style: normal; }
.work-teaser-head p {
	color: rgb(206, 211, 202);
	max-width: 560px;
	margin: 20px 0 0;
	font-size: 18px;
	line-height: 1.7;
}
.work-teaser-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	display: grid;
}
.work-mini {
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 20px;
	flex-direction: column;
	padding: 14px 14px 18px;
	display: flex;
}
.work-mini.is-client { border-color: rgba(201, 255, 69, 0.5); }
.work-mini img {
	border: 1px solid rgb(45, 48, 43);
	border-radius: 12px;
	width: 100%;
	height: auto;
	margin-bottom: 14px;
	display: block;
}
.work-mini .work-badge { margin-bottom: 10px; font-size: 10px; padding: 4px 10px; }
.work-mini h3 { color: #fff; margin: 0 0 4px; font-size: 17px; }
.work-mini p { color: rgb(180, 185, 175); margin: 0; font-size: 13px; line-height: 1.55; }
.work-teaser-more { margin-top: 34px; }
.work-teaser-more .price-cta { display: inline-flex; }

/* ---------- Website-Audit CTA strip ---------- */
.audit-cta {
	background: rgb(20, 23, 18);
	border: 1px solid rgba(201, 255, 69, 0.4);
	border-radius: 24px;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-block: 40px 10px;
	padding: 28px 32px;
	display: flex;
}
.audit-cta h2 {
	color: #fff;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	font-size: 22px;
}
.audit-cta p {
	color: rgb(200, 205, 195);
	max-width: 640px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}
.audit-cta .price-cta { flex: 0 0 auto; }

/* ---------- Audit form extras ---------- */
.form-consent {
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.6;
	display: flex;
}
.form-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	accent-color: var(--lime);
}

/* ---------- Responsive ---------- */
@media (width <= 1040px) {
	.work-grid { grid-template-columns: repeat(2, 1fr); }
	.work-card.is-featured { grid-template-columns: 1fr; }
	.work-teaser-grid { grid-template-columns: repeat(2, 1fr); }
	.work-case-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (width <= 680px) {
	.work-grid { grid-template-columns: 1fr; }
	.work-teaser-grid { grid-template-columns: 1fr; }
	.work-case { padding: 22px; }
	.audit-cta { flex-direction: column; align-items: flex-start; padding: 24px; }
	.work-media .work-shot-mobile { width: 30%; bottom: -12px; }
}

/* Example-work grid on service pages: 2-up, stacking on mobile. */
.work-examples { grid-template-columns: repeat(2, 1fr); }
@media (width <= 680px) {
	.work-examples { grid-template-columns: 1fr; }
}

/* --- Portfolio archive + filters (2026-07) ------------------------------- */
.arc-head {
	max-width: 820px;
	margin: 60px 0 8px;
}
.arc-head h2 {
	letter-spacing: -0.04em;
	margin: 0;
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.05;
	color: #fff;
}
.arc-head h2 em { color: var(--lime); font-style: normal; }
.arc-head p {
	color: rgb(200, 205, 195);
	margin: 16px 0 0;
	font-size: 16px;
	line-height: 1.7;
}
.arc-disclosure {
	color: rgb(170, 176, 166);
	max-width: 820px;
	margin: 10px 0 24px;
	font-size: 13.5px;
	line-height: 1.7;
}
.work-badge.is-hooppa {
	color: rgb(190, 214, 140);
	background: none;
	border: 1px solid rgba(201, 255, 69, 0.35);
}
/* Filters — buttons only make sense with JS, so they appear only when the
   theme's dfs-js class is present; without JS every card simply shows. */
.arc-filters { display: none; }
html.dfs-js .arc-filters {
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
	display: flex;
}
.arc-filter {
	color: rgb(200, 205, 195);
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 999px;
	cursor: pointer;
	min-height: 44px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 14px;
	transition: color 0.15s, background 0.15s;
}
.arc-filter:hover { color: #fff; }
.arc-filter:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.arc-filter.is-active,
.arc-filter[aria-pressed="true"] {
	color: rgb(16, 18, 14);
	background: var(--lime);
	border-color: var(--lime);
	font-weight: 700;
}
.arc-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	/* Breathing room before the contact section below the archive. */
	margin-bottom: 80px;
	display: grid;
}
.arc-card {
	background: rgb(20, 23, 18);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 20px;
	flex-direction: column;
	padding: 14px 14px 18px;
	display: flex;
}
.arc-card[hidden] { display: none; }
.arc-card > img {
	border: 1px solid rgb(45, 48, 43);
	border-radius: 12px;
	width: 100%;
	height: auto;
	margin-bottom: 14px;
	display: block;
}
.arc-body { flex: 1; flex-direction: column; display: flex; }
.arc-body .work-badge { margin-bottom: 10px; font-size: 10px; padding: 4px 10px; }
.arc-body h3 { color: #fff; margin: 0 0 4px; font-size: 17px; }
.arc-cat {
	color: rgb(190, 214, 140);
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 600;
}
.arc-desc {
	color: rgb(180, 185, 175);
	flex: 1;
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.6;
}
.arc-link {
	color: var(--lime);
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	/* real tap target — these are the portfolio's primary links on mobile */
	min-height: 44px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	background: none;
	display: inline-flex;
	align-items: center;
}
.arc-link:hover { transform: none; text-decoration: underline; }
.arc-status {
	color: rgb(150, 156, 146);
	border: 1px solid rgb(52, 55, 48);
	border-radius: 999px;
	align-self: flex-start;
	padding: 4px 12px;
	font-size: 12px;
}
.arc-perf .arc-perf-imgs {
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 14px;
	display: grid;
}
.arc-perf .arc-perf-imgs figure { margin: 0; }
.arc-perf .arc-perf-imgs img {
	border: 1px solid rgb(45, 48, 43);
	border-radius: 10px;
	width: 100%;
	height: auto;
	display: block;
}
.arc-perf .arc-perf-imgs figcaption {
	color: rgb(150, 156, 146);
	margin-top: 4px;
	font-size: 11px;
	text-align: center;
}
.arc-histnote { font-size: 12px; color: rgb(150, 156, 146); }
.work-teaser-6 { grid-template-columns: repeat(3, 1fr); }
@media (prefers-reduced-motion: reduce) {
	.arc-filter, .work-live-link, .arc-link { transition: none; }
}
@media (width <= 1040px) {
	.arc-grid { grid-template-columns: repeat(2, 1fr); }
	.work-teaser-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (width <= 680px) {
	.arc-grid { grid-template-columns: 1fr; }
	.work-teaser-6 { grid-template-columns: 1fr; }
	.arc-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
	.arc-filter { flex: 0 0 auto; }
}

/* --- Design-critique pass (2026-07-29) ---------------------------------- */

/* Screenshots respond to intent: the card invites a closer look. */
.arc-card > img,
.work-mini img,
.work-teaser-card img {
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.arc-card:hover > img,
.work-mini:hover img,
.work-teaser-card:hover img {
	transform: scale(1.02);
}

/* Filter changes fade instead of teleporting (class driven by main.js). */
.arc-card {
	transition: opacity 0.25s, transform 0.25s;
}
.arc-card.is-hiding {
	opacity: 0;
	transform: scale(0.98);
}

/* Four performance-evidence cards sit 2×2 instead of 3+1 with a hole. */
.arc-grid:has(.arc-perf) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (width <= 700px) {
	.arc-grid:has(.arc-perf) { grid-template-columns: 1fr; }
}

/* Card lift on pointer devices, matching the service/testimonial cards.
   (Until the reveal switched to the `translate` property these were dead:
   `.dfs-anim.anim-in { transform: none }` outranked every card hover.) */
@media (hover: hover) {
	.work-mini,
	.arc-card {
		transition: border-color 0.25s, transform 0.25s;
	}
	.work-mini:hover,
	.arc-card:hover {
		border-color: rgba(201, 255, 69, 0.45);
		transform: translateY(-3px);
	}
}