@use "../utilities" as *;

/* START: Case study CSS */
.h4-case-section {
	position: relative;
	z-index: 1;
	overflow: hidden;
	.sec-heading {
		margin-bottom: 28px;
	}
	.case-shapes {
		position: absolute;
		top: 50%;
		inset-inline-start: -25px;
		width: 180px;
		height: 180px;
		transform: translateY(-50%);
		z-index: -1;
		@media #{$sm, $xs} {
			width: 120px;
			height: 120px;
			top: 20%;
		}
	}
}
.case-item {
	border-bottom: 1px solid var(--tj-color-border-2);
	padding: 20px 0;
	&:first-child {
		border-top: 1px solid var(--tj-color-border-2);
	}
	.header {
		font-size: 32px;
		font-weight: var(--tj-fw-sbold);
		color: var(--tj-color-heading-primary);
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		@media #{$sm} {
			font-size: 26px;
		}
		@media #{$xs} {
			font-size: 22px;
		}
	}
	.number {
		color: var(--tj-color-theme-primary);
	}
	.icon {
		font-size: 18px;
		color: var(--tj-color-heading-primary);
		border: 1px solid var(--tj-color-border-2);
		border-radius: 50%;
		width: 64px;
		height: 64px;
		text-align: center;
		line-height: 64px;
		transition: all 0.3s ease;
		@media #{$xs} {
			width: 45px;
			height: 45px;
			line-height: 45px;
		}
		&.active {
			color: var(--tj-color-common-white);
			background-color: var(--tj-color-theme-primary);
			border-color: var(--tj-color-theme-primary);
			transform: rotate(-180deg);
		}
	}
	.content {
		height: 0;
		opacity: 0;
		visibility: hidden;
		position: relative;
		transition: all 0.3s ease;
		margin-top: 0;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: top;
		}
	}
	&.active {
		.content {
			height: 432px;
			opacity: 1;
			visibility: visible;
			margin-top: 20px;
			@media #{$sm, $xs} {
				height: 350px;
			}
		}
	}
}

.project-cursor {
	display: block !important;
	&.cursor-outer {
		display: none !important;
	}
	&.cursor-big {
		margin-inline-start: -85px;
		margin-top: -80px;
		@media #{$md} {
			width: 90px;
			height: 90px;
		}
		@media #{$sm, $xs} {
			width: 80px;
			height: 80px;
		}
	}
	span {
		line-height: 23px;
		transform: translate(-50%, -50%);
		position: absolute;
		top: 50%;
		inset-inline-start: 50%;
	}
}