/* ===================================
   Work carousel: case study cards in a carousel, each with a work tag. Script: script.mjs.
=================================== */

.work_portfolio {
	margin-top: 140px;
}

.work_portfolio > ul {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
}
.work_portfolio .work_item {
	position: relative;
	background-color: #b0bfc8;
}
.work_portfolio .work_item .work-link {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
}
.work_portfolio .work_item:nth-child(2n),
.work_portfolio li:nth-child(2n) .work_item {
	background-color: #d9d9d9;
}
.work_portfolio .work_item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Work tag
   - Resting: frosted glass pill (blurred image behind, faint tint, crisp 1px light border), readable
     on light and dark images.
   - Hover / keyboard focus: green ink sweeps in from the left, "Work" unfolds to its exact width
     (grid 0fr -> 1fr), then the arrow slides in. */
.work_portfolio .work_title {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 1;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	padding: 8px 18px 9px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 85px;
	background-color: rgba(18, 26, 34, 0.16);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	font-size: 16px;
	line-height: 1.2;
	letter-spacing: -0.48px;
	color: var(--wp--preset--color--white);
	pointer-events: none; /* the card link underneath takes the click */
	transition: border-color var(--dur-medium) var(--ease-out);
}
.work_portfolio .work_title::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	background-color: var(--wp--preset--color--darkgreen);
	clip-path: inset(0 100% 0 0 round 85px);
	transition: clip-path 650ms var(--ease-out);
}
.work_portfolio .work_title > span {
	display: grid;
	grid-template-columns: 0fr;
	transition: grid-template-columns 600ms var(--ease-out);
}
.work_portfolio .work_title .wt-more {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	overflow: hidden;
	padding-left: 0.3em;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 250ms var(--ease-out);
}
.work_portfolio .work_title .wt-more::after {
	/* → like the pill buttons (the case study is a page of this site, so not ↗). It slides in sideways
	   and its shaft draws out (--tag-arrow, 0..1, the tag's spring, or full without it) */
	content: "";
	--ah: 13px;
	width: 20px;
	height: var(--ah);
	flex: none;
	background: currentColor;
	-webkit-mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) right calc(var(--ah) * 0.11) top 50% /
			calc(var(--ah) * 0.5 + var(--tag-arrow, 1) * 7px) calc(var(--ah) * 0.068) no-repeat;
	mask:
		var(--arrow-e-head) right center / auto 100% no-repeat,
		linear-gradient(#000, #000) right calc(var(--ah) * 0.11) top 50% /
			calc(var(--ah) * 0.5 + var(--tag-arrow, 1) * 7px) calc(var(--ah) * 0.068) no-repeat;
	letter-spacing: 0;
	display: block;
	translate: -6px 0;
	opacity: 0;
	transition:
		translate 200ms var(--ease-in),
		opacity 150ms var(--ease-out);
}
.work_portfolio .work_item:focus-within .work_title {
	border-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio .work_item:hover .work_title {
		border-color: transparent;
	}
}
.work_portfolio .work_item:focus-within .work_title::before {
	clip-path: inset(0 0 0 0 round 85px);
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio .work_item:hover .work_title::before {
		clip-path: inset(0 0 0 0 round 85px);
	}
}
.work_portfolio .work_item:focus-within .work_title > span {
	grid-template-columns: 1fr;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio .work_item:hover .work_title > span {
		grid-template-columns: 1fr;
	}
}
.work_portfolio .work_item:focus-within .work_title .wt-more {
	opacity: 1;
	transition: opacity 450ms var(--ease-out) 120ms;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio .work_item:hover .work_title .wt-more {
		opacity: 1;
		transition: opacity 450ms var(--ease-out) 120ms;
	}
}
.work_portfolio .work_item:focus-within .work_title .wt-more::after {
	translate: 0 0;
	opacity: 1;
	transition:
		translate 550ms var(--ease-out) 260ms,
		opacity 400ms var(--ease-out) 260ms;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio .work_item:hover .work_title .wt-more::after {
		translate: 0 0;
		opacity: 1;
		transition:
			translate 550ms var(--ease-out) 260ms,
			opacity 400ms var(--ease-out) 260ms;
	}
}
.work_portfolio.carousel .caroufredsel_wrapper ul li > div {
	margin: 0;
}

.work_portfolio.carousel .slider_control {
	max-width: 1540px; /* the content column, so the arrows line up with the heading */
	margin: 70px auto 0;
	justify-content: start;
	gap: 15px;
	padding: 0 20px;
}
.work_portfolio.carousel.has_active_slider .directional_nav.drn-prev {
	right: auto;
}
.work_portfolio.carousel.has_active_slider .directional_nav {
	top: auto;
	position: relative;
	right: 0;
}

@media only screen and (max-width: 1024px) {
	.work_portfolio {
		margin-top: 70px;
	}
}

@media only screen and (max-width: 768px) {
	.work_portfolio .slider_control {
		margin-top: 50px;
		justify-content: start;
		gap: 10px;
	}

	.work_portfolio > ul {
		grid-template-columns: 1fr;
	}
}
@media only screen and (max-width: 600px) {
	.section_work_carousel .section_title br {
		display: none;
	}
	.section_work_carousel .section_title br:first-child {
		display: block;
	}
}
/* Spring-driven tag (blocks/work-carousel/script.mjs): --tag (0..1) and its staggered
   derivatives --tag-text / --tag-arrow replace the hover transitions above. */
.work_portfolio.is-sprung .work_item .work_title,
.work_portfolio.is-sprung .work_item:focus-within .work_title {
	border-color: rgba(255, 255, 255, calc(0.45 * (1 - var(--tag, 0))));
	transition: none;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio.is-sprung .work_item:hover .work_title {
		border-color: rgba(255, 255, 255, calc(0.45 * (1 - var(--tag, 0))));
		transition: none;
	}
}
.work_portfolio.is-sprung .work_item .work_title::before,
.work_portfolio.is-sprung .work_item:focus-within .work_title::before {
	clip-path: inset(0 calc((1 - var(--tag, 0)) * 100%) 0 0 round 85px);
	transition: none;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio.is-sprung .work_item:hover .work_title::before {
		clip-path: inset(0 calc((1 - var(--tag, 0)) * 100%) 0 0 round 85px);
		transition: none;
	}
}
.work_portfolio.is-sprung .work_item .work_title > span,
.work_portfolio.is-sprung .work_item:focus-within .work_title > span {
	display: block;
	max-width: calc(var(--tag, 0) * var(--wt-w, 4em));
	overflow: hidden;
	transition: none;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio.is-sprung .work_item:hover .work_title > span {
		display: block;
		max-width: calc(var(--tag, 0) * var(--wt-w, 4em));
		overflow: hidden;
		transition: none;
	}
}
.work_portfolio.is-sprung .work_item .work_title .wt-more,
.work_portfolio.is-sprung .work_item:focus-within .work_title .wt-more {
	opacity: var(--tag-text, 0);
	transition: none;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio.is-sprung .work_item:hover .work_title .wt-more {
		opacity: var(--tag-text, 0);
		transition: none;
	}
}
.work_portfolio.is-sprung .work_item .work_title .wt-more::after,
.work_portfolio.is-sprung .work_item:focus-within .work_title .wt-more::after {
	opacity: var(--tag-arrow, 0);
	translate: calc((1 - var(--tag-arrow, 0)) * -6px) 0;
	transition: none;
}
@media (hover: hover) and (pointer: fine) {
	.work_portfolio.is-sprung .work_item:hover .work_title .wt-more::after {
		opacity: var(--tag-arrow, 0);
		translate: calc((1 - var(--tag-arrow, 0)) * -6px) 0;
		transition: none;
	}
}