/* ------------------------------------------------------------------
   "Our work" showcase (DigitalthPr/parts/works-showcase.php): home page
   and service pages. Moved here from hero-products.css.
   ------------------------------------------------------------------ */

.ed-works {
	padding: 96px 0 88px;
	overflow: hidden;
	background: var(--ed-ink);
	color: #b9bdb6;
}

.ed-works,
.ed-works * {
	font-family: "Thmanyah Sans", sans-serif !important;
}

@media (min-width: 769px) {
	.ed-works > .container {
		padding-right: 0;
		padding-left: 0;
	}
}

.ed-works__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}

.ed-works__head {
	max-width: 640px;
	text-align: right;
}

.ed-works__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: 44px !important;
	font-weight: 900;
	line-height: 1.2;
	text-align: right;
}

.ed-works__lead {
	margin: 0;
	color: #b9bdb6;
	font-size: 18px;
	line-height: 1.8;
	text-align: right !important;
}

.ed-works__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
}

.ed-works__filters {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
}

.ed-works__filter {
	padding: 9px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #b9bdb6;
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.ed-works__filter:hover {
	color: #fff;
}

.ed-works__filter.is-active {
	background: var(--ed-surface);
	color: var(--ed-text);
}

.ed-works__nav {
	display: flex;
	gap: 8px;
}

.ed-works__btn {
	display: grid;
	width: 46px;
	height: 46px;
	place-items: center;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ed-works__btn:hover,
.ed-works__btn:focus-visible {
	border-color: var(--ed-lime);
	background: var(--ed-lime);
	color: var(--ed-ink);
}

.ed-works__filter:focus-visible,
.ed-works__btn:focus-visible,
.ed-works__track:focus-visible {
	outline: 3px solid var(--ed-lime);
	outline-offset: 3px;
}

/* The row starts at the content edge and bleeds off the screen on the left. */
.ed-works__track {
	display: flex;
	gap: 20px;
	padding: 6px max(16px, calc((100vw - 1170px) / 2)) 10px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 max(16px, calc((100vw - 1170px) / 2));
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
}

.ed-works__track::-webkit-scrollbar {
	display: none;
}

.ed-works__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.ed-work-card {
	position: relative;
	flex: 0 0 min(400px, 78vw);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 26px;
	background: #222;
	scroll-snap-align: start;
	text-decoration: none !important;
	transition: transform .3s ease;
}

.ed-work-card[hidden] {
	display: none;
}

.ed-work-card img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Website captures and brand boards are tall: show their top. */
	object-position: top;
	pointer-events: none;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.ed-work-card__info {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 72px 24px 22px;
	background: linear-gradient(to top, rgba(10, 10, 10, .92), rgba(10, 10, 10, 0));
	text-align: right;
}

.ed-work-card__type {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ed-lime);
	color: var(--ed-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
}

.ed-work-card__title {
	color: #fff;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.35;
}

.ed-work-card__open {
	max-height: 0;
	overflow: hidden;
	color: var(--ed-lime);
	font-size: 14px;
	font-weight: 700;
	opacity: 0;
	transition: max-height .3s ease, opacity .3s ease;
}

.ed-work-card:hover img,
.ed-work-card:focus-visible img {
	transform: scale(1.05);
}

.ed-work-card:hover .ed-work-card__open,
.ed-work-card:focus-visible .ed-work-card__open {
	max-height: 24px;
	opacity: 1;
}

.ed-work-card:focus-visible {
	outline: 3px solid var(--ed-lime);
	outline-offset: 3px;
}

/* Last card: link to the full portfolio. */
.ed-work-card--all {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 30px;
	background: var(--ed-lime);
	transition: transform .3s ease;
}

.ed-work-card--all:hover {
	transform: translateY(-4px);
}

.ed-work-card__all-title {
	color: var(--ed-text);
	font-size: 32px;
	font-weight: 900;
	line-height: 1.25;
}

.ed-work-card__all-text {
	color: #2f3d0c;
	font-size: 16px;
	line-height: 1.7;
}

.ed-works__progress {
	height: 3px;
	margin-top: 32px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, .1);
}

.ed-works__progress-bar {
	display: block;
	width: 20%;
	height: 100%;
	border-radius: 3px;
	background: var(--ed-lime);
	transition: width .15s linear;
}

@media (max-width: 991px) {
	.ed-works {
		padding: 72px 0 64px;
	}

	.ed-works__top {
		flex-direction: column;
		align-items: flex-start;
	}

	.ed-works__title {
		font-size: 36px !important;
	}
}

@media (max-width: 600px) {
	.ed-works {
		padding: 56px 0;
	}

	.ed-works__title {
		font-size: 30px !important;
	}

	.ed-works__lead {
		font-size: 16px;
	}

	.ed-works__controls {
		width: 100%;
		justify-content: space-between;
	}

	.ed-works__nav {
		display: none;
	}

	.ed-work-card__title {
		font-size: 18px;
	}

	.ed-work-card__all-title {
		font-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-work-card,
	.ed-work-card img,
	.ed-work-card__open,
	.ed-works__progress-bar {
		transition: none;
	}
}

.ed-works {
	padding-top: 104px;
	padding-bottom: 104px;
}

/* Carousel in two rows: cards stack in pairs and scroll as columns. */
.ed-works__track {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	grid-auto-columns: min(300px, 70vw);
	gap: 18px;
}

.ed-work-card {
	flex: none;
	border-radius: 22px;
}

.ed-work-card__info {
	padding: 56px 18px 16px;
}

.ed-work-card__title {
	font-size: 18px;
}

.ed-work-card--all {
	grid-row: span 2;
	padding: 28px;
	aspect-ratio: auto;
}

/* Tech we build with: one quiet row of muted logos, full color on hover. */
.ed-stack {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-top: 64px;
	padding: 28px 0;
	border-top: 1px solid rgba(255, 255, 255, .08);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.ed-stack__title {
	flex: 0 0 auto;
	margin: 0;
	color: #8f948c;
	font-size: 15px !important;
	font-weight: 500;
	line-height: 1.4;
	text-align: right;
}

.ed-stack__list {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ed-stack__item {
	display: grid;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	place-items: center;
}

.ed-stack__item img {
	display: block;
	max-width: 28px;
	max-height: 28px;
	object-fit: contain;
	filter: grayscale(1) brightness(1.15) contrast(1.1);
	opacity: .6;
	transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.ed-stack__item:hover img {
	filter: none;
	opacity: 1;
	transform: scale(1.15);
}

@media (max-width: 991px) {
	.ed-works {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}

@media (max-width: 600px) {
	.ed-works__track {
		grid-auto-columns: 62vw;
		gap: 12px;
	}

	.ed-stack {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.ed-stack__list {
		justify-content: flex-start;
		gap: 16px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ed-stack__item img {
		transition: none;
	}

	.ed-stack__item:hover img {
		transform: none;
	}
}

/* Wide showcase: this section goes wider than the page content (up to 1400px). */
@media (min-width: 769px) {
	.ed-works > .container {
		width: min(1400px, calc(100vw - 64px));
		max-width: none;
	}

	.ed-works__track {
		padding-right: max(32px, calc((100vw - 1400px) / 2));
		padding-left: max(32px, calc((100vw - 1400px) / 2));
		scroll-padding: 0 max(32px, calc((100vw - 1400px) / 2));
	}
}

/* Wide sections are truly full width: 48px side margins, no 1400px cap. */
@media (min-width: 992px) {
	.ed-works > .container {
		width: calc(100vw - 96px);
	}

	.ed-works__track {
		padding-right: 48px;
		padding-left: 48px;
		scroll-padding: 0 48px;
	}
}

/* ------------------------------------------------------------------
   White version (service pages): $ed_ws['light']. The project cards
   stay dark.
   ------------------------------------------------------------------ */
.ed-works--light {
	background: var(--ed-section-white);
	color: var(--ed-muted);
}

.ed-works--light .ed-works__title {
	color: var(--ed-text);
}

.ed-works--light .ed-works__lead {
	color: var(--ed-muted);
}

.ed-works--light .ed-works__filters {
	background: var(--ed-tint-f0f0ec);
}

.ed-works--light .ed-works__filter {
	color: var(--ed-muted);
}

.ed-works--light .ed-works__filter:hover {
	color: var(--ed-text);
}

.ed-works--light .ed-works__filter.is-active {
	background: var(--ed-ink);
	color: #fff;
}

.ed-works--light .ed-works__btn {
	border-color: var(--ed-rule-d9d9d2);
	color: var(--ed-text);
}

.ed-works--light .ed-works__progress {
	background: var(--ed-tint-ecece6);
}

.ed-works--light .ed-stack {
	border-color: var(--ed-rule-ecece6);
}

.ed-works--light .ed-stack__title {
	color: var(--ed-muted-2);
}

.ed-works--light .ed-stack__item img {
	filter: grayscale(1) brightness(.55) contrast(1.1);
	opacity: .55;
}

.ed-works--light .ed-stack__item:hover img {
	filter: none;
	opacity: 1;
}